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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
|
@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'sass:meta';
@use 'iro-sass/src/props';
@use 'iro-sass/src/easing';
@use 'iro-sass/src/functions';
@use 'iro-design/src/functions' as fn;
@function light-bezier($x) {
@return easing.cubic-bezier(.3, .1, .7, 1, $x);
}
@function classic-bezier($x) {
@return easing.cubic-bezier(.3, .1, .8, 1, $x);
}
@function dark-bezier($x) {
@return easing.cubic-bezier(.3, .1, .7, 1, $x);
}
$themes-spec: (
--light: (
--levels: (
--grays: (
--50: #fff,
--75: -16 .3 0,
--100: 0 .5 0,
--200: (light-bezier(math.div(1, 7)) * 87) (.8 + 1.2 * math.div(0, 6)) (-30 * math.div(1, 7)),
--300: (light-bezier(math.div(2, 7)) * 87) (.8 + 1.2 * math.div(1, 6)) (-30 * math.div(2, 7)),
--400: (light-bezier(math.div(3, 7)) * 87) (.8 + 1.2 * math.div(2, 6)) (-30 * math.div(3, 7)),
--500: (light-bezier(math.div(4, 7)) * 87) (.8 + 1.2 * math.div(3, 6)) (-30 * math.div(4, 7)),
--600: (light-bezier(math.div(5, 7)) * 87) (.8 + 1.2 * math.div(4, 6)) (-30 * math.div(5, 7)),
--700: (light-bezier(math.div(6, 7)) * 87) (.8 + 1.2 * math.div(5, 6)) (-30 * math.div(6, 7)),
--800: (light-bezier(math.div(7, 7)) * 87) (.8 + 1.2 * math.div(6, 6)) (-30 * math.div(7, 7)),
--900: #000
),
--colors: (
--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
),
--colors-bg: (
--100: (math.div(0, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(0, 12))),
--200: (math.div(1, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(1, 12))),
--300: (math.div(2, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(2, 12))),
--400: (math.div(3, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(3, 12))),
--500: (math.div(4, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(4, 12))),
--600: (math.div(5, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(5, 12))),
--700: (math.div(6, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(6, 12))),
--800: (math.div(7, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(7, 12))),
--900: (math.div(8, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(8, 12))),
--1000: (math.div(9, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(9, 12))),
--1100: (math.div(10, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(10, 12))),
--1200: (math.div(11, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(11, 12))),
--1300: (math.div(12, 12) * 91 - 4) (.2 + .8 * easing.ease(math.div(12, 12))),
),
),
--palettes: (
--base: #edddc4 --grays,
--red: oklch(36.32% 0.1402 53.73) --colors,
--blue: oklch(36.32% 0.1402 273.58) --colors,
--yellow: oklch(36.32% 0.1402 92.94) --colors,
--green: oklch(36.32% 0.1402 152.94) --colors-bg,
),
--semantic: (
--bg-content: --base --50,
--bg-l1: --base --75,
--bg-base: --base --100,
--bg-sidebar: --base --75,
--bg-footer-box: --base --100,
--bg-footer: --base --700,
--link: (
--fg: --red --1000,
--underline: --red --500,
--fg-inv: --red --1000-text,
--active: --red --1300,
--active-inv: --red --1300-text,
),
--wcfHeaderBackground: --base --700,
--wcfHeaderMenuBackground: --base --800,
--wcfHeaderMenuLinkBackground: --base --800,
--wcfHeaderMenuLinkBackgroundActive: --base --700,
--wcfHeaderMenuLink: --base --50,
--wcfHeaderMenuDropdownBackground: --base --800,
--wcfHeaderMenuDropdownBorder: --base --800,
--wcfHeaderMenuDropdownBackgroundActive: --base --700,
--wcfNavigationBackground: --base --100,
--wcfNavigationText: --base --500,
--wcfNavigationLink: --base --800,
--wcfNavigationLinkActive: --base --800,
--wcfHeaderSearchBoxBackground: --base --700,
--wcfHeaderSearchBoxBackgroundActive: --base --700,
--wcfContentBackground: rgb(242, 242, 242),
--wcfContentBorderInner: rgb(224, 224, 224),
--wcfContentBorder: rgb(224, 224, 224),
--wcfContentDimmedText: rgba(#000, .7),
--wcfContentDimmedLink: rgba(#000, .7),
--wcfContentHeadlineText: --base --900,
--wcfFooterBoxBackground: --base --100,
--wcfFooterBoxText: --base --800,
--wcfFooterBoxHeadlineText: --base --900,
--wcfFooterBoxHeadlineLink: --base --900,
--wcfFooterBoxHeadlineLinkActive: --base --900,
--wcfFooterBackground: --base --700,
--wcfFooterText: --base --100,
--wcfFooterLink: --base --75,
--wcfFooterLinkActive: --base --75,
--wcfFooterCopyrightBackground: --base --800,
--wcfFooterCopyrightText: --base --75,
--wcfFooterCopyrightLink: --base --50,
--wcfFooterCopyrightLinkActive: --base --50,
--wcfSidebarBackground: --wcfContentBackground,
--wcfSidebarBorder: transparent,
--wcfSidebarHeadlineText: --wcfContentHeadlineText,
--wcfSidebarText: --wcfContentText,
--wcfSidebarDimmedText: --wcfContentDimmedText,
--wcfButtonBackground: --base --100,
--wcfButtonText: --base --100-text,
--wcfButtonBackgroundActive: --base --700,
--wcfButtonTextActive: --base --700-text,
--wcfButtonPrimaryBackground: --red --900,
--wcfButtonPrimaryText: --red --900-text,
--wcfButtonPrimaryBackgroundActive: --red --1200,
--wcfButtonPrimaryTextActive: --red --1200-text,
--wcfInputBorderActive: --red --900,
--wcfBoxShadowCard: none,
--wcfContentContainerBackground: --bg-content,
--wcfContentContainerBorder: --wcfContentContainerBackground,
--wcfContentLink: --link --fg,
--wcfContentLinkActive: --link --active,
--wcfSidebarLink: --link --fg,
--wcfSidebarLinkActive: --link --active,
--wcfSidebarDimmedLink: --wcfSidebarDimmedText,
--wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,
--wcfFooterBoxLink: --link --fg,
--wcfFooterBoxLinkActive: --link --active,
--wcfTabularBoxHeadline: --link --fg,
--wcfTabularBoxHeadlineActive: --link --active,
--wcfStatusInfoBackground: --base --100,
--wcfStatusInfoBorder: --base --300,
--wcfStatusInfoText: --base --800,
--wcfStatusSuccessBackground: --green --100,
--wcfStatusSuccessBorder: --green --300,
--wcfStatusSuccessText: --green --1100,
),
),
--classic: (
--levels: (
--grays: (
--50: -25 .1 0,
--75: -14 .6 0,
--100: -1 1 0,
--200: (light-bezier(math.div(1, 7)) * 87) (1.2 + 0.8 * math.div(0, 6)) (-30 * math.div(1, 7)),
--300: (light-bezier(math.div(2, 7)) * 87) (1.2 + 0.8 * math.div(1, 6)) (-30 * math.div(2, 7)),
--400: (light-bezier(math.div(3, 7)) * 87) (1.2 + 0.8 * math.div(2, 6)) (-30 * math.div(3, 7)),
--500: (light-bezier(math.div(4, 7)) * 87) (1.2 + 0.8 * math.div(3, 6)) (-30 * math.div(4, 7)),
--600: (light-bezier(math.div(5, 7)) * 87) (1.2 + 0.8 * math.div(4, 6)) (-30 * math.div(5, 7)),
--700: (light-bezier(math.div(6, 7)) * 87) (1.2 + 0.8 * math.div(5, 6)) (-30 * math.div(6, 7)),
--800: (light-bezier(math.div(7, 7)) * 87) (1.2 + 0.8 * math.div(6, 6)) (-30 * math.div(7, 7)),
--900: #000
),
--colors: (
--100: (math.div(0, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(0, 12))) (-30 * math.div(0, 12)),
--200: (math.div(1, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(1, 12))) (-30 * math.div(1, 12)),
--300: (math.div(2, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(2, 12))) (-30 * math.div(2, 12)),
--400: (math.div(3, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(3, 12))) (-30 * math.div(3, 12)),
--500: (math.div(4, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(4, 12))) (-30 * math.div(4, 12)),
--600: (math.div(5, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(5, 12))) (-30 * math.div(5, 12)),
--700: (math.div(6, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(6, 12))) (-30 * math.div(6, 12)),
--800: (math.div(7, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(7, 12))) (-30 * math.div(7, 12)),
--900: (math.div(8, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(8, 12))) (-30 * math.div(8, 12)),
--1000: (math.div(9, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(9, 12))) (-30 * math.div(9, 12)),
--1100: (math.div(10, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(10, 12))) (-30 * math.div(10, 12)),
--1200: (math.div(11, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(11, 12))) (-30 * math.div(11, 12)),
--1300: (math.div(12, 12) * 97 - 10) (.3 + .7 * easing.ease(math.div(12, 12))) (-30 * math.div(12, 12)),
),
--colors-bg: (
--100: (math.div(0, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(0, 12))),
--200: (math.div(1, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(1, 12))),
--300: (math.div(2, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(2, 12))),
--400: (math.div(3, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(3, 12))),
--500: (math.div(4, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(4, 12))),
--600: (math.div(5, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(5, 12))),
--700: (math.div(6, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(6, 12))),
--800: (math.div(7, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(7, 12))),
--900: (math.div(8, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(8, 12))),
--1000: (math.div(9, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(9, 12))),
--1100: (math.div(10, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(10, 12))),
--1200: (math.div(11, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(11, 12))),
--1300: (math.div(12, 12) * 97 - 10) (.2 + .6 * easing.ease(math.div(12, 12))),
),
),
--palettes: (
--base: #edddc4 --grays,
--red: oklch(36.32% 0.1402 53.73) --colors,
--blue: oklch(36.32% 0.1402 273.58) --colors,
--yellow: oklch(36.32% 0.1402 92.94) --colors,
--green: oklch(36.32% 0.1402 152.94) --colors-bg,
),
--semantic: (
--bg-content: --base --100,
--bg-l1: --base --300,
--bg-base: --base --75,
--bg-sidebar: --base --100,
--bg-nav: --base --75,
--bg-footer-box: --base --100,
--bg-footer: --base --600,
--link: (
--fg: --red --1200,
--underline: --red --700,
--fg-inv: --red --1200-text,
--active: --red --1300,
--active-inv: --red --1300-text,
),
--wcfContentBackground: --base --75,
--wcfContentBorderInner: --base --300,
--wcfContentBorder: --base --300,
--wcfContentHeadlineText: --base --900,
--wcfContentDimmedText: --base --700,
--wcfContentDimmedLink: --base --900,
--wcfContentText: --base --800,
--wcfSidebarBackground: --base --75,
--wcfTabularBoxBackgroundActive: --base --75,
--wcfButtonBackground: --base --50,
--wcfButtonText: --base --50-text,
--wcfButtonBackgroundActive: --base --700,
--wcfButtonTextActive: --base --700-text,
--wcfButtonPrimaryBackground: --red --1000,
--wcfButtonPrimaryText: --red --1000-text,
--wcfButtonPrimaryBackgroundActive: --red --1200,
--wcfButtonPrimaryTextActive: --red --1200-text,
--wcfStatusSuccessBackground: --green --1000,
--wcfStatusSuccessBorder: --green --1000,
--wcfStatusSuccessText: --green --100,
),
),
--dark: (
--levels: (
--grays: (
--50: 1.2 .1 0,
--75: 0.7 .2 0,
--100: 0 .4 0,
--200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)),
--300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)),
--400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)),
--500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)),
--600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)),
--700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)),
--800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)),
--900: #fff
),
--colors: (
--100: (math.div(0, 12) * -106) (.6 + .6 * math.div(0, 12)) (-30 + 10 * math.div(0, 12)),
--200: (math.div(1, 12) * -106) (.6 + .6 * math.div(1, 12)) (-30 + 10 * math.div(1, 12)),
--300: (math.div(2, 12) * -106) (.6 + .6 * math.div(2, 12)) (-30 + 10 * math.div(2, 12)),
--400: (math.div(3, 12) * -106) (.6 + .6 * math.div(3, 12)) (-30 + 10 * math.div(3, 12)),
--500: (math.div(4, 12) * -106) (.6 + .6 * math.div(4, 12)) (-30 + 10 * math.div(4, 12)),
--600: (math.div(5, 12) * -106) (.6 + .6 * math.div(5, 12)) (-30 + 10 * math.div(5, 12)),
--700: (math.div(6, 12) * -106) (.6 + .6 * math.div(6, 12)) (-30 + 10 * math.div(6, 12)),
--800: (math.div(7, 12) * -106) (.6 + .6 * math.div(7, 12)) (-30 + 10 * math.div(7, 12)),
--900: (math.div(8, 12) * -106) (.6 + .6 * math.div(8, 12)) (-30 + 10 * math.div(8, 12)),
--1000: (math.div(9, 12) * -106) (.6 + .6 * math.div(9, 12)) (-30 + 10 * math.div(9, 12)),
--1100: (math.div(10, 12) * -106) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
--1200: (math.div(11, 12) * -106) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
--1300: (math.div(12, 12) * -106) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
),
),
--palettes: (
--base: #351c0e --grays,
--red: oklch(36.32% 0.1402 53.73) --colors,
--blue: oklch(36.32% 0.1402 273.58) --colors,
--yellow: oklch(36.32% 0.1402 92.94) --colors,
--green: oklch(36.32% 0.1402 162.94) --colors,
),
--semantic: (
--bg-base: --base --75,
--bg-l1: --base --100,
--bg-content: --base --200,
--bg-sidebar: --base --100,
--bg-nav: --base --75,
--bg-footer-box: --base --75,
--bg-footer: --base --75,
--wcfHeaderBackground: --bg-base,
--wcfHeaderMenuBackground: --base --50,
--wcfHeaderMenuLinkBackground: --base --50,
--wcfHeaderMenuLinkBackgroundActive: --base --200,
--wcfHeaderMenuLink: --base --900,
--wcfHeaderMenuDropdownBackground: --base --50,
--wcfHeaderMenuDropdownBorder: --base --50,
--wcfHeaderMenuDropdownBackgroundActive: --base --200,
--wcfNavigationBackground: --bg-base,
--wcfNavigationText: --base --500,
--wcfNavigationLink: --base --800,
--wcfNavigationLinkActive: --base --800,
--wcfContentBackground: --base --100,
--wcfContentBorderInner: --base --300,
--wcfContentBorder: --wcfContentBorderInnerDark,
--wcfContentDimmedText: --base --600,
--wcfContentDimmedLink: --base --900,
--wcfContentText: --base --800,
--wcfFooterText: --base --500,
--wcfFooterLink: --base --700,
--wcfFooterLinkActive: --base --700,
--wcfFooterCopyrightBackground: --base --50,
--wcfFooterCopyrightText: --base --500,
--wcfFooterCopyrightLink: --base --700,
--wcfFooterCopyrightLinkActive: --base --700,
--wcfButtonBackground: --base --300,
--wcfButtonText: --base --300-text,
--wcfButtonBackgroundActive: --base --700,
--wcfButtonTextActive: --base --700-text,
--wcfButtonPrimaryBackground: --red --900,
--wcfButtonPrimaryText: --red --900-text,
--wcfButtonPrimaryBackgroundActive: --red --1200,
--wcfButtonPrimaryTextActive: --red --1200-text,
--wcfContentContainerBackground: --base --200,
--wcfContentContainerBorder: --wcfContentContainerBackgroundDark,
--wcfSidebarBackground: --wcfContentBackground,
--wcfSidebarBorder: transparent,
--wcfSidebarLink: --link --fg,
--wcfSidebarLinkActive: --link --active,
--wcfSidebarText: --wcfContentTextDark,
--wcfSidebarDimmedLink: --wcfSidebarDimmedText,
--wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,
--wcfTabularBoxBackgroundActive: --base --100,
--wcfStatusInfoBackground: --base --100,
--wcfStatusInfoBorder: --base --300,
--wcfStatusInfoText: --base --800,
),
)
);
$themes: ();
@each $theme-name, $theme in $themes-spec {
$compiled: props.def('', (), 'color');
@each $palette-name, $palette in map.get($theme, --palettes) {
$base-color: list.nth($palette, 1);
$levels: list.nth($palette, 2);
$palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1));
$compiled: props.merge($compiled, ( $palette-name: $palette ));
}
@each $color, $ref in map.get($theme, --semantic) {
$res: ();
@if meta.type-of($ref) == 'map' {
@each $key, $r in $ref {
$re1: list.nth($r, 1);
$re2: functions.list-slice($r, 2);
@if meta.type-of($re1) == 'color' {
$res: map.merge($res, ($key: $re1));
} @else {
$res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
}
}
} @else {
$ref1: list.nth($ref, 1);
$ref2: functions.list-slice($ref, 2);
@if meta.type-of($ref1) == 'color' {
$res: $ref1;
} @else {
$res: props.get($compiled, $ref1, $ref2...);
}
}
$compiled: props.merge($compiled, ( $color: $res ));
}
$themes: map.set($themes, $theme-name, $compiled);
}
$theme: map.get($themes, --light);
|
