summaryrefslogtreecommitdiffstats
path: root/src/_config.defaults.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_config.defaults.scss')
-rw-r--r--src/_config.defaults.scss187
1 files changed, 187 insertions, 0 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
new file mode 100644
index 0000000..cf23f29
--- /dev/null
+++ b/src/_config.defaults.scss
@@ -0,0 +1,187 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:math';
4@use 'iro-sass/src/easing' as easing;
5
6$static-colors: (
7 --base: hsl(0, 0%, 98%),
8
9 --levels: (
10 --100: math.div(0, 12) * 110 - 10,
11 --200: math.div(1, 12) * 110 - 10,
12 --300: math.div(2, 12) * 110 - 10,
13 --400: math.div(3, 12) * 110 - 10,
14 --500: math.div(4, 12) * 110 - 10,
15 --600: math.div(5, 12) * 110 - 10,
16 --700: math.div(6, 12) * 110 - 10,
17 --800: math.div(7, 12) * 110 - 10,
18 --900: math.div(8, 12) * 110 - 10,
19 --1000: math.div(9, 12) * 110 - 10,
20 --1100: math.div(10, 12) * 110 - 10,
21 --1200: math.div(11, 12) * 110 - 10,
22 --1300: math.div(12, 12) * 110 - 10,
23 ),
24
25 --palettes: (
26 --blue: oklch(56% .14 275.25),
27 --purple: oklch(56% .14 305.58),
28 --red: oklch(56% .14 14.69),
29 --green: oklch(56% .14 150.48),
30 --yellow: oklch(56% .14 84.08),
31 ),
32
33 --transparents: (
34 --100: 0,
35 --200: .1,
36 --300: .25,
37 --400: .4,
38 --500: .55,
39 --600: .7,
40 --700: .8,
41 --800: .9,
42 --900: 1,
43 ),
44);
45
46$semantic-colors-common: (
47 --accent: --blue,
48 --accent-static: --blue-static,
49 --positive: --green,
50 --positive-static: --green-static,
51 --negative: --red,
52 --negative-static: --red-static,
53 --warning: --yellow,
54 --warning-static: --yellow-static,
55
56 --focus-raw: --accent,
57 --focus-static: --accent-static,
58
59 --border-mute: --base --200,
60 --border: --base --300,
61 --border-strong: --base --400,
62
63 --text-disabled: --base --500,
64 --text-mute-more: --base --600,
65 --text-mute: --base --700,
66 --text: --base --800,
67 --heading: --base --900,
68
69 --focus: (
70 --outline: --focus-raw --400,
71 --border-mute: --focus-raw --900,
72 --border: --focus-raw --1000,
73 --border-text: --focus-raw --1000-text,
74 --border-strong: --focus-raw --1100,
75 --text: --focus-raw --1100,
76 ),
77);
78
79$theme-light: (
80 --levels: (
81 --grays: (
82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
85
86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
89
90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
95 ),
96
97 --colors: (
98 --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
99 --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
100 --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
101 --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
102 --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
103 --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
104 --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
105 --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
106 --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
107 --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
108 --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
109 --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
110 --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
111 ),
112 ),
113
114 --palettes: (
115 --base: hsl(260, 70%, 98%) --grays,
116 --blue: oklch(56% .16 275.25) --colors,
117 --purple: oklch(56% .16 305.58) --colors,
118 --red: oklch(56% .16 14.69) --colors,
119 --green: oklch(56% .16 150.48) --colors,
120 --yellow: oklch(56% .16 84.08) --colors,
121 ),
122
123 --semantic: map.merge($semantic-colors-common, (
124 --bg-l2: --base --50,
125 --bg-l1: --base --100,
126 --bg-base: --base --200,
127 )),
128
129 --constants: (
130 --shadow: rgba(#000, .15),
131 ),
132);
133
134$theme-dark: (
135 --levels: (
136 --grays: (
137 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
138 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
139 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
140
141 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
142 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
143 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
144
145 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
146 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
147 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
148 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
149 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
150 ),
151
152 --colors: (
153 --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
154 --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
155 --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
156 --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
157 --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
158 --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
159 --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
160 --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
161 --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
162 --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
163 --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
164 --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
165 --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
166 ),
167 ),
168
169 --palettes: (
170 --base: hsl(257, 7%, 20%) --grays,
171 --blue: oklch(56% .16 275.25) --colors,
172 --purple: oklch(56% .16 305.58) --colors,
173 --red: oklch(56% .16 14.69) --colors,
174 --green: oklch(56% .16 150.48) --colors,
175 --yellow: oklch(56% .16 84.08) --colors,
176 ),
177
178 --semantic: map.merge($semantic-colors-common, (
179 --bg-base: --base --50,
180 --bg-l1: --base --75,
181 --bg-l2: --base --100,
182 )),
183
184 --constants: (
185 --shadow: rgba(#000, .5),
186 ),
187);