diff options
Diffstat (limited to 'src/_config.defaults.scss')
-rw-r--r-- | src/_config.defaults.scss | 187 |
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 | ); | ||