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