@sanity/ui 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +1546 -3280
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1434 -3304
- package/dist/index.js.map +1 -1
- package/dist/theme.esm.js +404 -692
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +352 -694
- package/dist/theme.js.map +1 -1
- package/package.json +6 -6
package/dist/theme.esm.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { COLOR_HUES, COLOR_TINTS, color } from
|
|
2
|
-
|
|
1
|
+
import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
|
|
3
2
|
function createSelectableTones(opts, base, dark, solid, muted) {
|
|
4
3
|
return {
|
|
5
4
|
default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
|
|
@@ -53,7 +52,6 @@ function _createSelectableStates(opts, base, dark, solid, muted, tone) {
|
|
|
53
52
|
})
|
|
54
53
|
};
|
|
55
54
|
}
|
|
56
|
-
|
|
57
55
|
function createSolidTones(opts, base, dark, name) {
|
|
58
56
|
return {
|
|
59
57
|
default: {
|
|
@@ -100,7 +98,6 @@ function createSolidTones(opts, base, dark, name) {
|
|
|
100
98
|
}
|
|
101
99
|
};
|
|
102
100
|
}
|
|
103
|
-
|
|
104
101
|
function createButtonTones(opts, base, dark, solid, muted, mode) {
|
|
105
102
|
return {
|
|
106
103
|
default: opts.button({
|
|
@@ -140,7 +137,6 @@ function createButtonTones(opts, base, dark, solid, muted, mode) {
|
|
|
140
137
|
})
|
|
141
138
|
};
|
|
142
139
|
}
|
|
143
|
-
|
|
144
140
|
function createButtonModes(opts, base, dark, solid, muted) {
|
|
145
141
|
return {
|
|
146
142
|
default: createButtonTones(opts, base, dark, solid, muted, "default"),
|
|
@@ -148,7 +144,6 @@ function createButtonModes(opts, base, dark, solid, muted) {
|
|
|
148
144
|
bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
|
|
149
145
|
};
|
|
150
146
|
}
|
|
151
|
-
|
|
152
147
|
function createCardStates(opts, base, dark, name, solid, muted) {
|
|
153
148
|
return {
|
|
154
149
|
enabled: opts.card({
|
|
@@ -193,10 +188,7 @@ function createCardStates(opts, base, dark, name, solid, muted) {
|
|
|
193
188
|
})
|
|
194
189
|
};
|
|
195
190
|
}
|
|
196
|
-
|
|
197
|
-
const black = "hsl(0, 0%, 0%)";
|
|
198
|
-
const white = "hsl(0, 0%, 100%)";
|
|
199
|
-
const colors = {
|
|
191
|
+
const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
|
|
200
192
|
default: {
|
|
201
193
|
lightest: "hsl(0, 0%, 95%)",
|
|
202
194
|
lighter: "hsl(0, 0%, 70%)",
|
|
@@ -251,8 +243,7 @@ const colors = {
|
|
|
251
243
|
darker: "hsl(0, 100%, 20%)",
|
|
252
244
|
darkest: "hsl(0, 100%, 5%)"
|
|
253
245
|
}
|
|
254
|
-
}
|
|
255
|
-
const spots = {
|
|
246
|
+
}, spots = {
|
|
256
247
|
gray: "hsl(0, 0%, 50%)",
|
|
257
248
|
red: "hsl(0, 100%, 50%)",
|
|
258
249
|
orange: "hsl(30, 100%, 50%)",
|
|
@@ -262,8 +253,7 @@ const spots = {
|
|
|
262
253
|
blue: "hsl(240, 100%, 50%)",
|
|
263
254
|
purple: "hsl(270, 100%, 50%)",
|
|
264
255
|
magenta: "hsl(300, 100%, 50%)"
|
|
265
|
-
}
|
|
266
|
-
const tones = {
|
|
256
|
+
}, tones = {
|
|
267
257
|
transparent: {
|
|
268
258
|
bg: [colors.transparent.darkest, colors.transparent.lightest],
|
|
269
259
|
fg: [colors.transparent.lightest, colors.transparent.darkest],
|
|
@@ -294,75 +284,66 @@ const tones = {
|
|
|
294
284
|
border: [colors.critical.darker, colors.critical.lighter],
|
|
295
285
|
focusRing: [colors.critical.base, colors.critical.base]
|
|
296
286
|
}
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
287
|
+
}, defaultOpts = {
|
|
288
|
+
base: ({ dark, name }) => name === "default" ? {
|
|
289
|
+
bg: dark ? black : white,
|
|
290
|
+
fg: dark ? white : black,
|
|
291
|
+
border: dark ? colors.default.darkest : colors.default.lightest,
|
|
292
|
+
focusRing: colors.primary.base,
|
|
293
|
+
shadow: {
|
|
294
|
+
outline: black,
|
|
295
|
+
umbra: black,
|
|
296
|
+
penumbra: black,
|
|
297
|
+
ambient: black
|
|
298
|
+
},
|
|
299
|
+
skeleton: {
|
|
300
|
+
from: dark ? white : black,
|
|
301
|
+
to: dark ? white : black
|
|
302
|
+
}
|
|
303
|
+
} : {
|
|
304
|
+
bg: tones[name].bg[dark ? 0 : 1],
|
|
305
|
+
fg: tones[name].fg[dark ? 0 : 1],
|
|
306
|
+
border: tones[name].border[dark ? 0 : 1],
|
|
307
|
+
focusRing: tones[name].focusRing[dark ? 0 : 1],
|
|
308
|
+
shadow: {
|
|
309
|
+
outline: black,
|
|
310
|
+
umbra: black,
|
|
311
|
+
penumbra: black,
|
|
312
|
+
ambient: black
|
|
313
|
+
},
|
|
314
|
+
skeleton: {
|
|
315
|
+
from: dark ? white : black,
|
|
316
|
+
to: dark ? white : black
|
|
317
317
|
}
|
|
318
|
-
return {
|
|
319
|
-
bg: tones[name].bg[dark ? 0 : 1],
|
|
320
|
-
fg: tones[name].fg[dark ? 0 : 1],
|
|
321
|
-
border: tones[name].border[dark ? 0 : 1],
|
|
322
|
-
focusRing: tones[name].focusRing[dark ? 0 : 1],
|
|
323
|
-
shadow: {
|
|
324
|
-
outline: black,
|
|
325
|
-
umbra: black,
|
|
326
|
-
penumbra: black,
|
|
327
|
-
ambient: black
|
|
328
|
-
},
|
|
329
|
-
skeleton: {
|
|
330
|
-
from: dark ? white : black,
|
|
331
|
-
to: dark ? white : black
|
|
332
|
-
}
|
|
333
|
-
};
|
|
334
318
|
},
|
|
335
319
|
solid: ({ base, dark, state, tone }) => {
|
|
336
|
-
const
|
|
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
|
-
border: dark ? color.light : color.dark,
|
|
364
|
-
fg: dark ? color.darkest : color.lightest,
|
|
365
|
-
icon: dark ? color.darkest : color.lightest,
|
|
320
|
+
const color2 = colors[tone];
|
|
321
|
+
return state === "hovered" ? {
|
|
322
|
+
bg: dark ? color2.light : color2.dark,
|
|
323
|
+
bg2: dark ? color2.light : color2.dark,
|
|
324
|
+
border: dark ? color2.lighter : color2.darker,
|
|
325
|
+
fg: dark ? color2.darkest : color2.lightest,
|
|
326
|
+
icon: dark ? color2.darkest : color2.lightest,
|
|
327
|
+
muted: {
|
|
328
|
+
fg: black
|
|
329
|
+
},
|
|
330
|
+
accent: {
|
|
331
|
+
fg: black
|
|
332
|
+
},
|
|
333
|
+
link: {
|
|
334
|
+
fg: black
|
|
335
|
+
},
|
|
336
|
+
code: {
|
|
337
|
+
bg: black,
|
|
338
|
+
fg: black
|
|
339
|
+
},
|
|
340
|
+
skeleton: base.skeleton
|
|
341
|
+
} : {
|
|
342
|
+
bg: color2.base,
|
|
343
|
+
bg2: color2.base,
|
|
344
|
+
border: dark ? color2.light : color2.dark,
|
|
345
|
+
fg: dark ? color2.darkest : color2.lightest,
|
|
346
|
+
icon: dark ? color2.darkest : color2.lightest,
|
|
366
347
|
muted: {
|
|
367
348
|
fg: black
|
|
368
349
|
},
|
|
@@ -380,36 +361,13 @@ const defaultOpts = {
|
|
|
380
361
|
};
|
|
381
362
|
},
|
|
382
363
|
muted: ({ base, dark, state, tone }) => {
|
|
383
|
-
const
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
icon: dark ? color.lightest : color.darkest,
|
|
391
|
-
muted: {
|
|
392
|
-
fg: black
|
|
393
|
-
},
|
|
394
|
-
accent: {
|
|
395
|
-
fg: black
|
|
396
|
-
},
|
|
397
|
-
link: {
|
|
398
|
-
fg: black
|
|
399
|
-
},
|
|
400
|
-
code: {
|
|
401
|
-
bg: black,
|
|
402
|
-
fg: black
|
|
403
|
-
},
|
|
404
|
-
skeleton: base.skeleton
|
|
405
|
-
};
|
|
406
|
-
}
|
|
407
|
-
return {
|
|
408
|
-
bg: dark ? color.darkest : color.lightest,
|
|
409
|
-
bg2: dark ? color.darkest : color.lightest,
|
|
410
|
-
border: dark ? color.darker : color.lighter,
|
|
411
|
-
fg: dark ? color.lighter : color.darker,
|
|
412
|
-
icon: dark ? color.lighter : color.darker,
|
|
364
|
+
const color2 = colors[tone];
|
|
365
|
+
return state === "hovered" ? {
|
|
366
|
+
bg: dark ? color2.darker : color2.lighter,
|
|
367
|
+
bg2: dark ? color2.darker : color2.lighter,
|
|
368
|
+
border: dark ? color2.lighter : color2.darker,
|
|
369
|
+
fg: dark ? color2.lightest : color2.darkest,
|
|
370
|
+
icon: dark ? color2.lightest : color2.darkest,
|
|
413
371
|
muted: {
|
|
414
372
|
fg: black
|
|
415
373
|
},
|
|
@@ -424,70 +382,12 @@ const defaultOpts = {
|
|
|
424
382
|
fg: black
|
|
425
383
|
},
|
|
426
384
|
skeleton: base.skeleton
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
enabled: {
|
|
434
|
-
bg: "transparent",
|
|
435
|
-
bg2: "transparent",
|
|
436
|
-
fg: muted.enabled.fg,
|
|
437
|
-
icon: muted.enabled.fg,
|
|
438
|
-
border: "transparent",
|
|
439
|
-
muted: {
|
|
440
|
-
fg: black
|
|
441
|
-
},
|
|
442
|
-
accent: {
|
|
443
|
-
fg: black
|
|
444
|
-
},
|
|
445
|
-
link: {
|
|
446
|
-
fg: black
|
|
447
|
-
},
|
|
448
|
-
code: {
|
|
449
|
-
bg: black,
|
|
450
|
-
fg: black
|
|
451
|
-
},
|
|
452
|
-
skeleton: base.skeleton
|
|
453
|
-
},
|
|
454
|
-
hovered: {
|
|
455
|
-
bg: muted.enabled.bg,
|
|
456
|
-
bg2: muted.enabled.bg,
|
|
457
|
-
fg: muted.hovered.fg,
|
|
458
|
-
icon: muted.hovered.fg,
|
|
459
|
-
border: "transparent",
|
|
460
|
-
muted: {
|
|
461
|
-
fg: black
|
|
462
|
-
},
|
|
463
|
-
accent: {
|
|
464
|
-
fg: black
|
|
465
|
-
},
|
|
466
|
-
link: {
|
|
467
|
-
fg: black
|
|
468
|
-
},
|
|
469
|
-
code: {
|
|
470
|
-
bg: black,
|
|
471
|
-
fg: black
|
|
472
|
-
},
|
|
473
|
-
skeleton: base.skeleton
|
|
474
|
-
}
|
|
475
|
-
};
|
|
476
|
-
}
|
|
477
|
-
if (mode === "ghost")
|
|
478
|
-
return {
|
|
479
|
-
...solid,
|
|
480
|
-
enabled: muted.enabled
|
|
481
|
-
};
|
|
482
|
-
return solid;
|
|
483
|
-
},
|
|
484
|
-
card: ({ base }) => {
|
|
485
|
-
return {
|
|
486
|
-
bg: black,
|
|
487
|
-
bg2: black,
|
|
488
|
-
fg: black,
|
|
489
|
-
icon: black,
|
|
490
|
-
border: black,
|
|
385
|
+
} : {
|
|
386
|
+
bg: dark ? color2.darkest : color2.lightest,
|
|
387
|
+
bg2: dark ? color2.darkest : color2.lightest,
|
|
388
|
+
border: dark ? color2.darker : color2.lighter,
|
|
389
|
+
fg: dark ? color2.lighter : color2.darker,
|
|
390
|
+
icon: dark ? color2.lighter : color2.darker,
|
|
491
391
|
muted: {
|
|
492
392
|
fg: black
|
|
493
393
|
},
|
|
@@ -504,21 +404,84 @@ const defaultOpts = {
|
|
|
504
404
|
skeleton: base.skeleton
|
|
505
405
|
};
|
|
506
406
|
},
|
|
507
|
-
|
|
508
|
-
|
|
407
|
+
button: ({ base, mode, muted, solid }) => mode === "bleed" ? {
|
|
408
|
+
...muted,
|
|
409
|
+
enabled: {
|
|
410
|
+
bg: "transparent",
|
|
411
|
+
bg2: "transparent",
|
|
412
|
+
fg: muted.enabled.fg,
|
|
413
|
+
icon: muted.enabled.fg,
|
|
414
|
+
border: "transparent",
|
|
415
|
+
muted: {
|
|
416
|
+
fg: black
|
|
417
|
+
},
|
|
418
|
+
accent: {
|
|
419
|
+
fg: black
|
|
420
|
+
},
|
|
421
|
+
link: {
|
|
422
|
+
fg: black
|
|
423
|
+
},
|
|
424
|
+
code: {
|
|
425
|
+
bg: black,
|
|
426
|
+
fg: black
|
|
427
|
+
},
|
|
428
|
+
skeleton: base.skeleton
|
|
429
|
+
},
|
|
430
|
+
hovered: {
|
|
431
|
+
bg: muted.enabled.bg,
|
|
432
|
+
bg2: muted.enabled.bg,
|
|
433
|
+
fg: muted.hovered.fg,
|
|
434
|
+
icon: muted.hovered.fg,
|
|
435
|
+
border: "transparent",
|
|
436
|
+
muted: {
|
|
437
|
+
fg: black
|
|
438
|
+
},
|
|
439
|
+
accent: {
|
|
440
|
+
fg: black
|
|
441
|
+
},
|
|
442
|
+
link: {
|
|
443
|
+
fg: black
|
|
444
|
+
},
|
|
445
|
+
code: {
|
|
446
|
+
bg: black,
|
|
447
|
+
fg: black
|
|
448
|
+
},
|
|
449
|
+
skeleton: base.skeleton
|
|
450
|
+
}
|
|
451
|
+
} : mode === "ghost" ? {
|
|
452
|
+
...solid,
|
|
453
|
+
enabled: muted.enabled
|
|
454
|
+
} : solid,
|
|
455
|
+
card: ({ base }) => ({
|
|
456
|
+
bg: black,
|
|
457
|
+
bg2: black,
|
|
458
|
+
fg: black,
|
|
459
|
+
icon: black,
|
|
460
|
+
border: black,
|
|
461
|
+
muted: {
|
|
462
|
+
fg: black
|
|
463
|
+
},
|
|
464
|
+
accent: {
|
|
465
|
+
fg: black
|
|
466
|
+
},
|
|
467
|
+
link: {
|
|
468
|
+
fg: black
|
|
469
|
+
},
|
|
470
|
+
code: {
|
|
509
471
|
bg: black,
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
},
|
|
472
|
+
fg: black
|
|
473
|
+
},
|
|
474
|
+
skeleton: base.skeleton
|
|
475
|
+
}),
|
|
476
|
+
input: () => ({
|
|
477
|
+
bg: black,
|
|
478
|
+
bg2: black,
|
|
479
|
+
fg: black,
|
|
480
|
+
border: black,
|
|
481
|
+
placeholder: black
|
|
482
|
+
}),
|
|
483
|
+
selectable: ({ muted, state, tone }) => muted[tone][state],
|
|
484
|
+
spot: ({ key }) => spots[key],
|
|
522
485
|
syntax: () => ({
|
|
523
486
|
atrule: black,
|
|
524
487
|
attrName: black,
|
|
@@ -558,7 +521,6 @@ const defaultOpts = {
|
|
|
558
521
|
variable: black
|
|
559
522
|
})
|
|
560
523
|
};
|
|
561
|
-
|
|
562
524
|
function createInputModes(opts, base, dark, solid, muted) {
|
|
563
525
|
return {
|
|
564
526
|
default: {
|
|
@@ -631,7 +593,6 @@ function createInputModes(opts, base, dark, solid, muted) {
|
|
|
631
593
|
}
|
|
632
594
|
};
|
|
633
595
|
}
|
|
634
|
-
|
|
635
596
|
function createMutedTones(opts, base, dark, name) {
|
|
636
597
|
return {
|
|
637
598
|
default: {
|
|
@@ -678,7 +639,6 @@ function createMutedTones(opts, base, dark, name) {
|
|
|
678
639
|
}
|
|
679
640
|
};
|
|
680
641
|
}
|
|
681
|
-
|
|
682
642
|
function createSpot(opts, base, dark) {
|
|
683
643
|
return {
|
|
684
644
|
gray: opts.spot({ base, dark, key: "gray" }),
|
|
@@ -692,12 +652,11 @@ function createSpot(opts, base, dark) {
|
|
|
692
652
|
cyan: opts.spot({ base, dark, key: "cyan" })
|
|
693
653
|
};
|
|
694
654
|
}
|
|
695
|
-
|
|
696
655
|
function createColorTheme(partialOpts = {}) {
|
|
697
656
|
const builders = { ...defaultOpts, ...partialOpts };
|
|
698
657
|
return {
|
|
699
|
-
light: _createColorScheme(builders,
|
|
700
|
-
dark: _createColorScheme(builders,
|
|
658
|
+
light: _createColorScheme(builders, !1),
|
|
659
|
+
dark: _createColorScheme(builders, !0)
|
|
701
660
|
};
|
|
702
661
|
}
|
|
703
662
|
function _createColorScheme(opts, dark) {
|
|
@@ -711,9 +670,7 @@ function _createColorScheme(opts, dark) {
|
|
|
711
670
|
};
|
|
712
671
|
}
|
|
713
672
|
function _createColor(opts, dark, name) {
|
|
714
|
-
const base = opts.base({ dark, name });
|
|
715
|
-
const solid = createSolidTones(opts, base, dark, name);
|
|
716
|
-
const muted = createMutedTones(opts, base, dark, name);
|
|
673
|
+
const base = opts.base({ dark, name }), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
|
|
717
674
|
return {
|
|
718
675
|
base,
|
|
719
676
|
button: createButtonModes(opts, base, dark, solid, muted),
|
|
@@ -727,10 +684,7 @@ function _createColor(opts, dark, name) {
|
|
|
727
684
|
muted
|
|
728
685
|
};
|
|
729
686
|
}
|
|
730
|
-
|
|
731
|
-
const BORDER_WIDTH = 1;
|
|
732
|
-
const OUTLINE_WIDTH = 0.5;
|
|
733
|
-
const defaultThemeConfig = {
|
|
687
|
+
const BORDER_WIDTH = 1, OUTLINE_WIDTH = 0.5, defaultThemeConfig = {
|
|
734
688
|
_version: 2,
|
|
735
689
|
avatar: {
|
|
736
690
|
sizes: [
|
|
@@ -808,9 +762,7 @@ const defaultThemeConfig = {
|
|
|
808
762
|
// },
|
|
809
763
|
// },
|
|
810
764
|
}
|
|
811
|
-
}
|
|
812
|
-
|
|
813
|
-
const defaultThemeFonts = {
|
|
765
|
+
}, defaultThemeFonts = {
|
|
814
766
|
code: {
|
|
815
767
|
family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
|
|
816
768
|
weights: {
|
|
@@ -1031,16 +983,13 @@ const defaultThemeFonts = {
|
|
|
1031
983
|
}
|
|
1032
984
|
]
|
|
1033
985
|
}
|
|
1034
|
-
};
|
|
1035
|
-
|
|
1036
|
-
const cache$4 = /* @__PURE__ */ new WeakMap();
|
|
986
|
+
}, cache$4 = /* @__PURE__ */ new WeakMap();
|
|
1037
987
|
function themeColor_v0_v2(color_v0) {
|
|
1038
988
|
var _a, _b, _c;
|
|
1039
989
|
const cached_v2 = cache$4.get(color_v0);
|
|
1040
990
|
if (cached_v2)
|
|
1041
991
|
return cached_v2;
|
|
1042
|
-
const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled)
|
|
1043
|
-
const color_v2 = {
|
|
992
|
+
const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
|
|
1044
993
|
_blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
|
|
1045
994
|
_dark: color_v0.dark,
|
|
1046
995
|
accent: base.accent,
|
|
@@ -1076,8 +1025,7 @@ function themeColor_v0_v2(color_v0) {
|
|
|
1076
1025
|
},
|
|
1077
1026
|
syntax: color_v0.syntax
|
|
1078
1027
|
};
|
|
1079
|
-
cache$4.set(color_v0, color_v2);
|
|
1080
|
-
return color_v2;
|
|
1028
|
+
return cache$4.set(color_v0, color_v2), color_v2;
|
|
1081
1029
|
}
|
|
1082
1030
|
function stateTonesThemeColor_v0_v2(v0, t) {
|
|
1083
1031
|
return {
|
|
@@ -1226,18 +1174,17 @@ function inputStateThemeColor_v0_v2(state) {
|
|
|
1226
1174
|
placeholder: state.placeholder
|
|
1227
1175
|
};
|
|
1228
1176
|
}
|
|
1229
|
-
|
|
1230
1177
|
const cache$3 = /* @__PURE__ */ new WeakMap();
|
|
1231
1178
|
function getTheme_v2(theme) {
|
|
1232
|
-
var _a;
|
|
1233
|
-
if ((_a = theme.sanity.v2)
|
|
1179
|
+
var _a, _b;
|
|
1180
|
+
if ((_a = theme.sanity.v2) != null && _a._resolved)
|
|
1234
1181
|
return theme.sanity.v2;
|
|
1235
1182
|
const cached_v2 = cache$3.get(theme);
|
|
1236
1183
|
if (cached_v2)
|
|
1237
1184
|
return cached_v2;
|
|
1238
1185
|
const v2 = {
|
|
1239
1186
|
_version: 2,
|
|
1240
|
-
_resolved:
|
|
1187
|
+
_resolved: !0,
|
|
1241
1188
|
avatar: {
|
|
1242
1189
|
...defaultThemeConfig.avatar,
|
|
1243
1190
|
...theme.sanity.avatar
|
|
@@ -1266,25 +1213,21 @@ function getTheme_v2(theme) {
|
|
|
1266
1213
|
...theme.sanity.input.switch
|
|
1267
1214
|
}
|
|
1268
1215
|
},
|
|
1269
|
-
layer: theme.sanity.layer
|
|
1216
|
+
layer: (_b = theme.sanity.layer) != null ? _b : defaultThemeConfig.layer,
|
|
1270
1217
|
media: theme.sanity.media,
|
|
1271
1218
|
radius: theme.sanity.radius,
|
|
1272
1219
|
shadow: theme.sanity.shadows,
|
|
1273
1220
|
space: theme.sanity.space,
|
|
1274
1221
|
style: theme.sanity.styles
|
|
1275
1222
|
};
|
|
1276
|
-
cache$3.set(theme, v2);
|
|
1277
|
-
return v2;
|
|
1223
|
+
return cache$3.set(theme, v2), v2;
|
|
1278
1224
|
}
|
|
1279
|
-
|
|
1280
1225
|
function is_v0(themeProp) {
|
|
1281
1226
|
return themeProp._version === 0;
|
|
1282
1227
|
}
|
|
1283
|
-
|
|
1284
1228
|
function is_v2(themeProp) {
|
|
1285
1229
|
return themeProp._version === 2;
|
|
1286
1230
|
}
|
|
1287
|
-
|
|
1288
1231
|
const cache$2 = /* @__PURE__ */ new WeakMap();
|
|
1289
1232
|
function v0_v2(v0) {
|
|
1290
1233
|
if (v0.v2)
|
|
@@ -1295,7 +1238,7 @@ function v0_v2(v0) {
|
|
|
1295
1238
|
const {
|
|
1296
1239
|
avatar,
|
|
1297
1240
|
button,
|
|
1298
|
-
color,
|
|
1241
|
+
color: color2,
|
|
1299
1242
|
container,
|
|
1300
1243
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1301
1244
|
focusRing: _unused_focusRing,
|
|
@@ -1307,8 +1250,7 @@ function v0_v2(v0) {
|
|
|
1307
1250
|
shadows: shadow,
|
|
1308
1251
|
space,
|
|
1309
1252
|
styles: style
|
|
1310
|
-
} = v0
|
|
1311
|
-
const v2 = {
|
|
1253
|
+
} = v0, v2 = {
|
|
1312
1254
|
_version: 2,
|
|
1313
1255
|
avatar: {
|
|
1314
1256
|
...defaultThemeConfig.avatar,
|
|
@@ -1321,20 +1263,20 @@ function v0_v2(v0) {
|
|
|
1321
1263
|
card: defaultThemeConfig.card,
|
|
1322
1264
|
color: {
|
|
1323
1265
|
light: {
|
|
1324
|
-
transparent: themeColor_v0_v2(
|
|
1325
|
-
default: themeColor_v0_v2(
|
|
1326
|
-
primary: themeColor_v0_v2(
|
|
1327
|
-
positive: themeColor_v0_v2(
|
|
1328
|
-
caution: themeColor_v0_v2(
|
|
1329
|
-
critical: themeColor_v0_v2(
|
|
1266
|
+
transparent: themeColor_v0_v2(color2.light.transparent),
|
|
1267
|
+
default: themeColor_v0_v2(color2.light.default),
|
|
1268
|
+
primary: themeColor_v0_v2(color2.light.primary),
|
|
1269
|
+
positive: themeColor_v0_v2(color2.light.positive),
|
|
1270
|
+
caution: themeColor_v0_v2(color2.light.caution),
|
|
1271
|
+
critical: themeColor_v0_v2(color2.light.critical)
|
|
1330
1272
|
},
|
|
1331
1273
|
dark: {
|
|
1332
|
-
transparent: themeColor_v0_v2(
|
|
1333
|
-
default: themeColor_v0_v2(
|
|
1334
|
-
primary: themeColor_v0_v2(
|
|
1335
|
-
positive: themeColor_v0_v2(
|
|
1336
|
-
caution: themeColor_v0_v2(
|
|
1337
|
-
critical: themeColor_v0_v2(
|
|
1274
|
+
transparent: themeColor_v0_v2(color2.dark.transparent),
|
|
1275
|
+
default: themeColor_v0_v2(color2.dark.default),
|
|
1276
|
+
primary: themeColor_v0_v2(color2.dark.primary),
|
|
1277
|
+
positive: themeColor_v0_v2(color2.dark.positive),
|
|
1278
|
+
caution: themeColor_v0_v2(color2.dark.caution),
|
|
1279
|
+
critical: themeColor_v0_v2(color2.dark.critical)
|
|
1338
1280
|
}
|
|
1339
1281
|
},
|
|
1340
1282
|
container,
|
|
@@ -1355,17 +1297,15 @@ function v0_v2(v0) {
|
|
|
1355
1297
|
...input.switch
|
|
1356
1298
|
}
|
|
1357
1299
|
},
|
|
1358
|
-
layer: layer
|
|
1300
|
+
layer: layer != null ? layer : defaultThemeConfig.layer,
|
|
1359
1301
|
media,
|
|
1360
1302
|
radius,
|
|
1361
1303
|
shadow,
|
|
1362
1304
|
space,
|
|
1363
1305
|
style
|
|
1364
1306
|
};
|
|
1365
|
-
cache$2.set(v0, v2);
|
|
1366
|
-
return v2;
|
|
1307
|
+
return cache$2.set(v0, v2), v2;
|
|
1367
1308
|
}
|
|
1368
|
-
|
|
1369
1309
|
const cache$1 = /* @__PURE__ */ new WeakMap();
|
|
1370
1310
|
function v2_v0(v2) {
|
|
1371
1311
|
const cachedTheme = cache$1.get(v2);
|
|
@@ -1374,7 +1314,7 @@ function v2_v0(v2) {
|
|
|
1374
1314
|
const {
|
|
1375
1315
|
avatar,
|
|
1376
1316
|
button,
|
|
1377
|
-
color,
|
|
1317
|
+
color: color2,
|
|
1378
1318
|
container,
|
|
1379
1319
|
font: fonts,
|
|
1380
1320
|
input,
|
|
@@ -1391,20 +1331,20 @@ function v2_v0(v2) {
|
|
|
1391
1331
|
container,
|
|
1392
1332
|
color: {
|
|
1393
1333
|
light: {
|
|
1394
|
-
transparent: themeColor_v2_v0(
|
|
1395
|
-
default: themeColor_v2_v0(
|
|
1396
|
-
primary: themeColor_v2_v0(
|
|
1397
|
-
positive: themeColor_v2_v0(
|
|
1398
|
-
caution: themeColor_v2_v0(
|
|
1399
|
-
critical: themeColor_v2_v0(
|
|
1334
|
+
transparent: themeColor_v2_v0(color2.light.transparent),
|
|
1335
|
+
default: themeColor_v2_v0(color2.light.default),
|
|
1336
|
+
primary: themeColor_v2_v0(color2.light.primary),
|
|
1337
|
+
positive: themeColor_v2_v0(color2.light.positive),
|
|
1338
|
+
caution: themeColor_v2_v0(color2.light.caution),
|
|
1339
|
+
critical: themeColor_v2_v0(color2.light.critical)
|
|
1400
1340
|
},
|
|
1401
1341
|
dark: {
|
|
1402
|
-
transparent: themeColor_v2_v0(
|
|
1403
|
-
default: themeColor_v2_v0(
|
|
1404
|
-
primary: themeColor_v2_v0(
|
|
1405
|
-
positive: themeColor_v2_v0(
|
|
1406
|
-
caution: themeColor_v2_v0(
|
|
1407
|
-
critical: themeColor_v2_v0(
|
|
1342
|
+
transparent: themeColor_v2_v0(color2.dark.transparent),
|
|
1343
|
+
default: themeColor_v2_v0(color2.dark.default),
|
|
1344
|
+
primary: themeColor_v2_v0(color2.dark.primary),
|
|
1345
|
+
positive: themeColor_v2_v0(color2.dark.positive),
|
|
1346
|
+
caution: themeColor_v2_v0(color2.dark.caution),
|
|
1347
|
+
critical: themeColor_v2_v0(color2.dark.critical)
|
|
1408
1348
|
}
|
|
1409
1349
|
},
|
|
1410
1350
|
focusRing: input.text.focusRing,
|
|
@@ -1474,30 +1414,20 @@ function inputStateThemeColor_v2_v0(t) {
|
|
|
1474
1414
|
placeholder: t.placeholder
|
|
1475
1415
|
};
|
|
1476
1416
|
}
|
|
1477
|
-
|
|
1478
|
-
const THEME_COLOR_SCHEMES = ["light", "dark"];
|
|
1479
|
-
const THEME_COLOR_BLEND_MODES = ["multiply", "screen"];
|
|
1480
|
-
const THEME_COLOR_CARD_TONES = [
|
|
1417
|
+
const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
|
|
1481
1418
|
"transparent",
|
|
1482
1419
|
"default",
|
|
1483
1420
|
"primary",
|
|
1484
1421
|
"positive",
|
|
1485
1422
|
"caution",
|
|
1486
1423
|
"critical"
|
|
1487
|
-
]
|
|
1488
|
-
const THEME_COLOR_STATE_TONES = [
|
|
1424
|
+
], THEME_COLOR_STATE_TONES = [
|
|
1489
1425
|
"default",
|
|
1490
1426
|
"primary",
|
|
1491
1427
|
"positive",
|
|
1492
1428
|
"caution",
|
|
1493
1429
|
"critical"
|
|
1494
|
-
];
|
|
1495
|
-
const THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
|
|
1496
|
-
const THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
|
|
1497
|
-
const THEME_COLOR_INPUT_MODES = ["default", "invalid"];
|
|
1498
|
-
const THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"];
|
|
1499
|
-
const THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
|
|
1500
|
-
|
|
1430
|
+
], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
|
|
1501
1431
|
function isColorBlendModeValue(str) {
|
|
1502
1432
|
return THEME_COLOR_BLEND_MODES.includes(str);
|
|
1503
1433
|
}
|
|
@@ -1510,7 +1440,6 @@ function isColorTintKey(str) {
|
|
|
1510
1440
|
function isColorButtonMode(str) {
|
|
1511
1441
|
return THEME_COLOR_BUTTON_MODES.includes(str);
|
|
1512
1442
|
}
|
|
1513
|
-
|
|
1514
1443
|
const COLOR_CONFIG_STATE_KEYS = [
|
|
1515
1444
|
"_hue",
|
|
1516
1445
|
"bg",
|
|
@@ -1526,8 +1455,7 @@ const COLOR_CONFIG_STATE_KEYS = [
|
|
|
1526
1455
|
"skeleton/to",
|
|
1527
1456
|
"status/dot",
|
|
1528
1457
|
"status/icon"
|
|
1529
|
-
]
|
|
1530
|
-
const COLOR_CONFIG_CARD_KEYS = [
|
|
1458
|
+
], COLOR_CONFIG_CARD_KEYS = [
|
|
1531
1459
|
...COLOR_CONFIG_STATE_KEYS,
|
|
1532
1460
|
"_hue",
|
|
1533
1461
|
"bg",
|
|
@@ -1538,34 +1466,23 @@ const COLOR_CONFIG_CARD_KEYS = [
|
|
|
1538
1466
|
"shadow/umbra",
|
|
1539
1467
|
"shadow/penumbra",
|
|
1540
1468
|
"shadow/ambient"
|
|
1541
|
-
];
|
|
1542
|
-
const COLOR_CONFIG_BLEND_KEYS = ["_blend"];
|
|
1543
|
-
const COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS];
|
|
1544
|
-
const COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES];
|
|
1545
|
-
const COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES];
|
|
1546
|
-
const COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES];
|
|
1547
|
-
const COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES];
|
|
1548
|
-
const COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
|
|
1549
|
-
|
|
1469
|
+
], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
|
|
1550
1470
|
function parseTokenKey(str) {
|
|
1551
|
-
const segments = str.split("/");
|
|
1552
|
-
const segment0 = segments.shift() || "";
|
|
1471
|
+
const segments = str.split("/"), segment0 = segments.shift() || "";
|
|
1553
1472
|
if (isColorConfigBaseTone(segment0)) {
|
|
1554
1473
|
const key = segments.join("/");
|
|
1555
|
-
if (isColorConfigBaseKey(key))
|
|
1474
|
+
if (isColorConfigBaseKey(key))
|
|
1556
1475
|
return {
|
|
1557
1476
|
type: "base",
|
|
1558
1477
|
tone: segment0,
|
|
1559
1478
|
key
|
|
1560
1479
|
};
|
|
1561
|
-
|
|
1562
|
-
if (isColorConfigBlendKey(key)) {
|
|
1480
|
+
if (isColorConfigBlendKey(key))
|
|
1563
1481
|
return {
|
|
1564
1482
|
type: "base",
|
|
1565
1483
|
tone: segment0,
|
|
1566
1484
|
key
|
|
1567
1485
|
};
|
|
1568
|
-
}
|
|
1569
1486
|
}
|
|
1570
1487
|
if (segment0 === "button") {
|
|
1571
1488
|
const segment1 = segments.shift() || "";
|
|
@@ -1573,28 +1490,24 @@ function parseTokenKey(str) {
|
|
|
1573
1490
|
const segment2 = segments.shift() || "";
|
|
1574
1491
|
if (isColorButtonMode(segment2)) {
|
|
1575
1492
|
const key = segments.join("/");
|
|
1576
|
-
if (isColorConfigStateKey(key))
|
|
1493
|
+
if (isColorConfigStateKey(key))
|
|
1577
1494
|
return {
|
|
1578
1495
|
type: "button",
|
|
1579
1496
|
tone: segment1,
|
|
1580
1497
|
mode: segment2,
|
|
1581
1498
|
key
|
|
1582
1499
|
};
|
|
1583
|
-
|
|
1584
|
-
if (isColorConfigBlendKey(key)) {
|
|
1500
|
+
if (isColorConfigBlendKey(key))
|
|
1585
1501
|
return {
|
|
1586
1502
|
type: "button",
|
|
1587
1503
|
tone: segment1,
|
|
1588
1504
|
mode: segment2,
|
|
1589
1505
|
key
|
|
1590
1506
|
};
|
|
1591
|
-
}
|
|
1592
1507
|
}
|
|
1593
1508
|
}
|
|
1594
1509
|
}
|
|
1595
|
-
return void 0;
|
|
1596
1510
|
}
|
|
1597
|
-
|
|
1598
1511
|
function isColorMixPercentValue(str) {
|
|
1599
1512
|
return /^\d+%$/.test(str);
|
|
1600
1513
|
}
|
|
@@ -1603,14 +1516,13 @@ function parseTokenValue(str) {
|
|
|
1603
1516
|
let nextSegment = segments.shift() || "";
|
|
1604
1517
|
const [segment0, segment0mix] = nextSegment.split(" ");
|
|
1605
1518
|
if (isColorTintKey(segment0)) {
|
|
1606
|
-
const tint = segment0;
|
|
1607
|
-
const segment1 = segments.shift() || "";
|
|
1519
|
+
const tint = segment0, segment1 = segments.shift() || "";
|
|
1608
1520
|
if (isColorMixPercentValue(segment0mix)) {
|
|
1609
|
-
const
|
|
1521
|
+
const mix2 = Number(segment0mix.slice(0, -1)) / 100;
|
|
1610
1522
|
return {
|
|
1611
1523
|
type: "color",
|
|
1612
1524
|
tint,
|
|
1613
|
-
mix
|
|
1525
|
+
mix: mix2
|
|
1614
1526
|
};
|
|
1615
1527
|
}
|
|
1616
1528
|
if (isColorOpacityValue(segment1)) {
|
|
@@ -1627,14 +1539,13 @@ function parseTokenValue(str) {
|
|
|
1627
1539
|
};
|
|
1628
1540
|
}
|
|
1629
1541
|
if (isColorValue(segment0)) {
|
|
1630
|
-
const key = segment0;
|
|
1631
|
-
const segment1 = segments.shift() || "";
|
|
1542
|
+
const key = segment0, segment1 = segments.shift() || "";
|
|
1632
1543
|
if (isColorMixPercentValue(segment0mix)) {
|
|
1633
|
-
const
|
|
1544
|
+
const mix2 = Number(segment0mix.slice(0, -1)) / 100;
|
|
1634
1545
|
return {
|
|
1635
1546
|
type: "color",
|
|
1636
1547
|
key,
|
|
1637
|
-
mix
|
|
1548
|
+
mix: mix2
|
|
1638
1549
|
};
|
|
1639
1550
|
}
|
|
1640
1551
|
if (isColorOpacityValue(segment1)) {
|
|
@@ -1655,15 +1566,14 @@ function parseTokenValue(str) {
|
|
|
1655
1566
|
nextSegment = segments.shift() || "";
|
|
1656
1567
|
const [segment1, segment1mix] = nextSegment.split(" ");
|
|
1657
1568
|
if (isColorTintKey(segment1)) {
|
|
1658
|
-
const tint = segment1;
|
|
1659
|
-
const segment2 = segments.shift() || "";
|
|
1569
|
+
const tint = segment1, segment2 = segments.shift() || "";
|
|
1660
1570
|
if (isColorMixPercentValue(segment1mix)) {
|
|
1661
|
-
const
|
|
1571
|
+
const mix2 = Number(segment1mix.slice(0, -1)) / 100;
|
|
1662
1572
|
return {
|
|
1663
1573
|
type: "color",
|
|
1664
1574
|
hue,
|
|
1665
1575
|
tint,
|
|
1666
|
-
mix
|
|
1576
|
+
mix: mix2
|
|
1667
1577
|
};
|
|
1668
1578
|
}
|
|
1669
1579
|
if (isColorOpacityValue(segment2)) {
|
|
@@ -1686,16 +1596,12 @@ function parseTokenValue(str) {
|
|
|
1686
1596
|
value: hue
|
|
1687
1597
|
};
|
|
1688
1598
|
}
|
|
1689
|
-
if (isColorBlendModeValue(segment0))
|
|
1690
|
-
const value = segment0;
|
|
1599
|
+
if (isColorBlendModeValue(segment0))
|
|
1691
1600
|
return {
|
|
1692
1601
|
type: "blendMode",
|
|
1693
|
-
value
|
|
1602
|
+
value: segment0
|
|
1694
1603
|
};
|
|
1695
|
-
}
|
|
1696
|
-
return void 0;
|
|
1697
1604
|
}
|
|
1698
|
-
|
|
1699
1605
|
function isColorConfigBaseTone(str) {
|
|
1700
1606
|
return COLOR_CONFIG_CARD_TONES.includes(str);
|
|
1701
1607
|
}
|
|
@@ -1721,33 +1627,17 @@ function isColorValue(str) {
|
|
|
1721
1627
|
function isColorOpacityValue(str) {
|
|
1722
1628
|
return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
|
|
1723
1629
|
}
|
|
1724
|
-
|
|
1725
1630
|
function compileColorTokenValue(node) {
|
|
1726
1631
|
let key = "";
|
|
1727
|
-
|
|
1728
|
-
key = node.key;
|
|
1729
|
-
} else {
|
|
1730
|
-
key = `${node.hue}/${node.tint}`;
|
|
1731
|
-
}
|
|
1732
|
-
if (node.mix !== void 0) {
|
|
1733
|
-
return `${key} ${node.mix * 100}%`;
|
|
1734
|
-
}
|
|
1735
|
-
if (node.opacity !== void 0) {
|
|
1736
|
-
key += `/${node.opacity}`;
|
|
1737
|
-
}
|
|
1738
|
-
return key;
|
|
1632
|
+
return node.key === "black" || node.key === "white" ? key = node.key : key = `${node.hue}/${node.tint}`, node.mix !== void 0 ? `${key} ${node.mix * 100}%` : (node.opacity !== void 0 && (key += `/${node.opacity}`), key);
|
|
1739
1633
|
}
|
|
1740
|
-
|
|
1741
1634
|
const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
|
|
1742
1635
|
function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
|
|
1743
|
-
const { hue, scheme } = context;
|
|
1744
|
-
|
|
1745
|
-
if (!node || node.type !== "color") {
|
|
1636
|
+
const { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
|
|
1637
|
+
if (!node || node.type !== "color")
|
|
1746
1638
|
throw new Error(`Invalid color token: ${value[0]}`);
|
|
1747
|
-
}
|
|
1748
1639
|
return compileColorTokenValue({ ...node, hue: node.hue || hue });
|
|
1749
1640
|
}
|
|
1750
|
-
|
|
1751
1641
|
const defaultColorTokens = {
|
|
1752
1642
|
base: {
|
|
1753
1643
|
"*": {
|
|
@@ -2324,31 +2214,20 @@ const defaultColorTokens = {
|
|
|
2324
2214
|
variable: ["red/600", "red/400"]
|
|
2325
2215
|
}
|
|
2326
2216
|
};
|
|
2327
|
-
|
|
2328
2217
|
function isRecord(value) {
|
|
2329
|
-
return
|
|
2218
|
+
return !!(value && typeof value == "object" && !Array.isArray(value));
|
|
2330
2219
|
}
|
|
2331
|
-
|
|
2332
2220
|
function merge(...records) {
|
|
2333
2221
|
const _records = records.filter(Boolean);
|
|
2334
|
-
|
|
2335
|
-
return {};
|
|
2336
|
-
}
|
|
2337
|
-
return _records.reduce(_merge, {});
|
|
2222
|
+
return _records.length === 0 ? {} : _records.reduce(_merge, {});
|
|
2338
2223
|
}
|
|
2339
2224
|
function _merge(acc, source) {
|
|
2340
2225
|
for (const key of Object.keys(source)) {
|
|
2341
|
-
const prevValue = acc[key];
|
|
2342
|
-
|
|
2343
|
-
if (isRecord(prevValue) && isRecord(nextValue)) {
|
|
2344
|
-
acc[key] = merge(prevValue, nextValue);
|
|
2345
|
-
} else {
|
|
2346
|
-
acc[key] = nextValue;
|
|
2347
|
-
}
|
|
2226
|
+
const prevValue = acc[key], nextValue = source[key];
|
|
2227
|
+
isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
|
|
2348
2228
|
}
|
|
2349
2229
|
return acc;
|
|
2350
2230
|
}
|
|
2351
|
-
|
|
2352
2231
|
function resolveColorTokens(inputTokens) {
|
|
2353
2232
|
const tokens = merge(defaultColorTokens, inputTokens);
|
|
2354
2233
|
return {
|
|
@@ -2361,15 +2240,13 @@ function resolveColorTokens(inputTokens) {
|
|
|
2361
2240
|
}
|
|
2362
2241
|
function resolveBaseColorTokens(sparseTokens) {
|
|
2363
2242
|
const tokens = {};
|
|
2364
|
-
for (const tone of THEME_COLOR_CARD_TONES)
|
|
2243
|
+
for (const tone of THEME_COLOR_CARD_TONES)
|
|
2365
2244
|
tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
|
|
2366
|
-
}
|
|
2367
2245
|
return tokens;
|
|
2368
2246
|
}
|
|
2369
2247
|
function resolveBaseColorTones(inputTokens, tone) {
|
|
2370
2248
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
|
|
2371
|
-
const spec = merge((_a = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _a["*"], (_b = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _b[tone]);
|
|
2372
|
-
const hue = spec._hue || ((_d = (_c = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue) || "gray";
|
|
2249
|
+
const spec = merge((_a = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _a["*"], (_b = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _b[tone]), hue = spec._hue || ((_d = (_c = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue) || "gray";
|
|
2373
2250
|
return {
|
|
2374
2251
|
...spec,
|
|
2375
2252
|
_hue: hue,
|
|
@@ -2415,23 +2292,20 @@ function resolveBaseColorTones(inputTokens, tone) {
|
|
|
2415
2292
|
}
|
|
2416
2293
|
function resolveButtonColorTokens(inputTokens) {
|
|
2417
2294
|
const tokens = {};
|
|
2418
|
-
for (const mode of THEME_COLOR_BUTTON_MODES)
|
|
2295
|
+
for (const mode of THEME_COLOR_BUTTON_MODES)
|
|
2419
2296
|
tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode);
|
|
2420
|
-
}
|
|
2421
2297
|
return tokens;
|
|
2422
2298
|
}
|
|
2423
2299
|
function resolveButtonToneColorTokens(inputTokens, mode) {
|
|
2424
2300
|
const tokens = {};
|
|
2425
|
-
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2301
|
+
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2426
2302
|
tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone);
|
|
2427
|
-
}
|
|
2428
2303
|
return tokens;
|
|
2429
2304
|
}
|
|
2430
2305
|
function resolveButtonModeColorTokens(inputTokens, mode, tone) {
|
|
2431
2306
|
const tokens = {};
|
|
2432
|
-
for (const state of THEME_COLOR_STATES)
|
|
2307
|
+
for (const state of THEME_COLOR_STATES)
|
|
2433
2308
|
tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state);
|
|
2434
|
-
}
|
|
2435
2309
|
return tokens;
|
|
2436
2310
|
}
|
|
2437
2311
|
function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
|
|
@@ -2441,8 +2315,7 @@ function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
|
|
|
2441
2315
|
(_f = (_e = (_d = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _d[mode]) == null ? void 0 : _e[tone]) == null ? void 0 : _f["*"],
|
|
2442
2316
|
(_i = (_h = (_g = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _g[mode]) == null ? void 0 : _h["*"]) == null ? void 0 : _i[state],
|
|
2443
2317
|
(_l = (_k = (_j = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _j[mode]) == null ? void 0 : _k[tone]) == null ? void 0 : _l[state]
|
|
2444
|
-
);
|
|
2445
|
-
const hue = spec._hue || ((_n = (_m = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue);
|
|
2318
|
+
), hue = spec._hue || ((_n = (_m = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue);
|
|
2446
2319
|
return {
|
|
2447
2320
|
...spec,
|
|
2448
2321
|
_hue: hue,
|
|
@@ -2488,16 +2361,14 @@ function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
|
|
|
2488
2361
|
}
|
|
2489
2362
|
function resolveInputColorTokens(inputTokens) {
|
|
2490
2363
|
const tokens = {};
|
|
2491
|
-
for (const mode of THEME_COLOR_INPUT_MODES)
|
|
2364
|
+
for (const mode of THEME_COLOR_INPUT_MODES)
|
|
2492
2365
|
tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
|
|
2493
|
-
}
|
|
2494
2366
|
return tokens;
|
|
2495
2367
|
}
|
|
2496
2368
|
function resolveInputModeColorTokens(inputTokens, mode) {
|
|
2497
2369
|
const states = {};
|
|
2498
|
-
for (const state of THEME_COLOR_INPUT_STATES)
|
|
2370
|
+
for (const state of THEME_COLOR_INPUT_STATES)
|
|
2499
2371
|
states[state] = resolveInputStateColorTokens(inputTokens, mode, state);
|
|
2500
|
-
}
|
|
2501
2372
|
return states;
|
|
2502
2373
|
}
|
|
2503
2374
|
function resolveInputStateColorTokens(inputTokens, mode, state) {
|
|
@@ -2507,15 +2378,13 @@ function resolveInputStateColorTokens(inputTokens, mode, state) {
|
|
|
2507
2378
|
(_d = (_c = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _c[mode]) == null ? void 0 : _d["*"],
|
|
2508
2379
|
(_f = (_e = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _e["*"]) == null ? void 0 : _f[state],
|
|
2509
2380
|
(_h = (_g = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _g[mode]) == null ? void 0 : _h[state]
|
|
2510
|
-
);
|
|
2511
|
-
const hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _i[mode]) == null ? void 0 : _j._hue);
|
|
2381
|
+
), hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _i[mode]) == null ? void 0 : _j._hue);
|
|
2512
2382
|
return { ...spec, _hue: hue };
|
|
2513
2383
|
}
|
|
2514
2384
|
function resolveSelectableColorTokens(inputTokens) {
|
|
2515
2385
|
const tokens = {};
|
|
2516
|
-
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2386
|
+
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2517
2387
|
tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone);
|
|
2518
|
-
}
|
|
2519
2388
|
return tokens;
|
|
2520
2389
|
}
|
|
2521
2390
|
function resolveSelectableToneColorTokens(inputTokens, tone) {
|
|
@@ -2523,9 +2392,8 @@ function resolveSelectableToneColorTokens(inputTokens, tone) {
|
|
|
2523
2392
|
const states = {
|
|
2524
2393
|
_hue: ((_b = (_a = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _a[tone]) == null ? void 0 : _b._hue) || ((_d = (_c = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue)
|
|
2525
2394
|
};
|
|
2526
|
-
for (const state of THEME_COLOR_STATES)
|
|
2395
|
+
for (const state of THEME_COLOR_STATES)
|
|
2527
2396
|
states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state);
|
|
2528
|
-
}
|
|
2529
2397
|
return states;
|
|
2530
2398
|
}
|
|
2531
2399
|
function resolveSelectableStateColorTokens(inputTokens, tone, state) {
|
|
@@ -2535,8 +2403,7 @@ function resolveSelectableStateColorTokens(inputTokens, tone, state) {
|
|
|
2535
2403
|
(_d = (_c = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _c[tone]) == null ? void 0 : _d["*"],
|
|
2536
2404
|
(_f = (_e = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _e["*"]) == null ? void 0 : _f[state],
|
|
2537
2405
|
(_h = (_g = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _g[tone]) == null ? void 0 : _h[state]
|
|
2538
|
-
);
|
|
2539
|
-
const hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _i[tone]) == null ? void 0 : _j._hue);
|
|
2406
|
+
), hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _i[tone]) == null ? void 0 : _j._hue);
|
|
2540
2407
|
return {
|
|
2541
2408
|
...spec,
|
|
2542
2409
|
_hue: hue,
|
|
@@ -2580,7 +2447,6 @@ function resolveSelectableStateColorTokens(inputTokens, tone, state) {
|
|
|
2580
2447
|
}
|
|
2581
2448
|
};
|
|
2582
2449
|
}
|
|
2583
|
-
|
|
2584
2450
|
function buildColorTheme(config) {
|
|
2585
2451
|
const resolvedConfig = {
|
|
2586
2452
|
...config,
|
|
@@ -2604,13 +2470,9 @@ function buildColorScheme(options, config) {
|
|
|
2604
2470
|
}
|
|
2605
2471
|
function buildCardColorTheme(options, config) {
|
|
2606
2472
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
|
|
2607
|
-
const { scheme, tone } = options;
|
|
2608
|
-
const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone];
|
|
2609
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
|
|
2610
|
-
const context = { hue, scheme };
|
|
2611
|
-
const blendMode = (tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"];
|
|
2473
|
+
const { scheme, tone } = options, tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
|
|
2612
2474
|
return {
|
|
2613
|
-
_blend:
|
|
2475
|
+
_blend: ((tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
|
|
2614
2476
|
_dark: scheme === "dark",
|
|
2615
2477
|
accent: {
|
|
2616
2478
|
fg: resolveColorTokenValue(context, (_c = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _c.fg)
|
|
@@ -2652,10 +2514,7 @@ function buildCardColorTheme(options, config) {
|
|
|
2652
2514
|
}
|
|
2653
2515
|
function buildShadowColorTheme(options, config) {
|
|
2654
2516
|
var _a, _b, _c, _d, _e, _f;
|
|
2655
|
-
const { scheme, tone } = options;
|
|
2656
|
-
const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone];
|
|
2657
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
|
|
2658
|
-
const context = { hue, scheme };
|
|
2517
|
+
const { scheme, tone } = options, tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
|
|
2659
2518
|
return {
|
|
2660
2519
|
outline: resolveColorTokenValue(context, (_c = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _c.outline),
|
|
2661
2520
|
umbra: resolveColorTokenValue(context, (_d = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _d.umbra),
|
|
@@ -2679,12 +2538,9 @@ function buildAvatarColorTheme(options, stateTokens) {
|
|
|
2679
2538
|
}
|
|
2680
2539
|
function _buildAvatarColorTheme(options, stateTokens) {
|
|
2681
2540
|
var _a;
|
|
2682
|
-
const { color, scheme } = options;
|
|
2683
|
-
const tokens = (_a = stateTokens == null ? void 0 : stateTokens.avatar) == null ? void 0 : _a[color];
|
|
2684
|
-
const context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
|
|
2685
|
-
const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
|
|
2541
|
+
const { color: color2, scheme } = options, tokens = (_a = stateTokens == null ? void 0 : stateTokens.avatar) == null ? void 0 : _a[color2], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
|
|
2686
2542
|
return {
|
|
2687
|
-
_blend:
|
|
2543
|
+
_blend: ((tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
|
|
2688
2544
|
bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
|
|
2689
2545
|
fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg)
|
|
2690
2546
|
};
|
|
@@ -2701,10 +2557,7 @@ function buildBadgeColorTheme(tokens, options, config) {
|
|
|
2701
2557
|
}
|
|
2702
2558
|
function _buildBadgeColorTheme(parentTokens, options, config) {
|
|
2703
2559
|
var _a, _b, _c;
|
|
2704
|
-
const { scheme, tone } = options;
|
|
2705
|
-
const tokens = parentTokens == null ? void 0 : parentTokens[tone];
|
|
2706
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || ((_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone]) == null ? void 0 : _c._hue) || "gray";
|
|
2707
|
-
const context = { hue, scheme };
|
|
2560
|
+
const { scheme, tone } = options, tokens = parentTokens == null ? void 0 : parentTokens[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || ((_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone]) == null ? void 0 : _c._hue) || "gray", scheme };
|
|
2708
2561
|
return {
|
|
2709
2562
|
bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
|
|
2710
2563
|
fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
|
|
@@ -2713,36 +2566,26 @@ function _buildBadgeColorTheme(parentTokens, options, config) {
|
|
|
2713
2566
|
};
|
|
2714
2567
|
}
|
|
2715
2568
|
function buildButtonColorTheme(options, config) {
|
|
2716
|
-
const { scheme } = options;
|
|
2717
|
-
const
|
|
2718
|
-
for (const mode of THEME_COLOR_BUTTON_MODES) {
|
|
2569
|
+
const { scheme } = options, modes = {};
|
|
2570
|
+
for (const mode of THEME_COLOR_BUTTON_MODES)
|
|
2719
2571
|
modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
|
|
2720
|
-
}
|
|
2721
2572
|
return modes;
|
|
2722
2573
|
}
|
|
2723
2574
|
function buildButtonTonesColorTheme(options, config) {
|
|
2724
|
-
const { mode, scheme } = options;
|
|
2725
|
-
const
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
}
|
|
2729
|
-
return tones;
|
|
2575
|
+
const { mode, scheme } = options, tones2 = {};
|
|
2576
|
+
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2577
|
+
tones2[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
|
|
2578
|
+
return tones2;
|
|
2730
2579
|
}
|
|
2731
2580
|
function buildButtonStatesColorTheme(options, config) {
|
|
2732
|
-
const { mode, scheme, tone } = options;
|
|
2733
|
-
const
|
|
2734
|
-
for (const state of THEME_COLOR_STATES) {
|
|
2581
|
+
const { mode, scheme, tone } = options, states = {};
|
|
2582
|
+
for (const state of THEME_COLOR_STATES)
|
|
2735
2583
|
states[state] = buildButtonStateColorTheme({ mode, tone, scheme, state }, config);
|
|
2736
|
-
}
|
|
2737
2584
|
return states;
|
|
2738
2585
|
}
|
|
2739
2586
|
function buildButtonStateColorTheme(options, config) {
|
|
2740
2587
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
|
|
2741
|
-
const { mode, tone, scheme, state } = options;
|
|
2742
|
-
const tokens = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.button) == null ? void 0 : _b[mode]) == null ? void 0 : _c[tone]) == null ? void 0 : _d[state];
|
|
2743
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
|
|
2744
|
-
const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
|
|
2745
|
-
const context = { hue, scheme };
|
|
2588
|
+
const { mode, tone, scheme, state } = options, tokens = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.button) == null ? void 0 : _b[mode]) == null ? void 0 : _c[tone]) == null ? void 0 : _d[state], hue = (tokens == null ? void 0 : tokens._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
|
|
2746
2589
|
return {
|
|
2747
2590
|
_blend: blendMode[scheme === "light" ? 0 : 1],
|
|
2748
2591
|
accent: {
|
|
@@ -2794,11 +2637,7 @@ function buildInputStatesColorTheme(options, config) {
|
|
|
2794
2637
|
}
|
|
2795
2638
|
function buildInputStateColorTheme(options, config) {
|
|
2796
2639
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
2797
|
-
const { mode, tone, scheme, state } = options;
|
|
2798
|
-
const tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.input) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state];
|
|
2799
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || ((_f = (_e = (_d = config == null ? void 0 : config.color) == null ? void 0 : _d.base) == null ? void 0 : _e[tone]) == null ? void 0 : _f._hue) || "gray";
|
|
2800
|
-
const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
|
|
2801
|
-
const context = { hue, scheme };
|
|
2640
|
+
const { mode, tone, scheme, state } = options, tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.input) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state], hue = (tokens == null ? void 0 : tokens._hue) || ((_f = (_e = (_d = config == null ? void 0 : config.color) == null ? void 0 : _d.base) == null ? void 0 : _e[tone]) == null ? void 0 : _f._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
|
|
2802
2641
|
return {
|
|
2803
2642
|
_blend: blendMode[scheme === "light" ? 0 : 1],
|
|
2804
2643
|
bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
|
|
@@ -2811,28 +2650,20 @@ function buildInputStateColorTheme(options, config) {
|
|
|
2811
2650
|
};
|
|
2812
2651
|
}
|
|
2813
2652
|
function buildSelectableColorTheme(options, config) {
|
|
2814
|
-
const { scheme } = options;
|
|
2815
|
-
const
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
}
|
|
2819
|
-
return tones;
|
|
2653
|
+
const { scheme } = options, tones2 = {};
|
|
2654
|
+
for (const tone of THEME_COLOR_STATE_TONES)
|
|
2655
|
+
tones2[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
|
|
2656
|
+
return tones2;
|
|
2820
2657
|
}
|
|
2821
2658
|
function buildSelectableStatesColorTheme(options, config) {
|
|
2822
|
-
const { scheme, tone } = options;
|
|
2823
|
-
const
|
|
2824
|
-
for (const state of THEME_COLOR_STATES) {
|
|
2659
|
+
const { scheme, tone } = options, states = {};
|
|
2660
|
+
for (const state of THEME_COLOR_STATES)
|
|
2825
2661
|
states[state] = buildSelectableStateColorTheme({ tone, scheme, state }, config);
|
|
2826
|
-
}
|
|
2827
2662
|
return states;
|
|
2828
2663
|
}
|
|
2829
2664
|
function buildSelectableStateColorTheme(options, config) {
|
|
2830
2665
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2831
|
-
const { scheme, state, tone } = options;
|
|
2832
|
-
const tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.selectable) == null ? void 0 : _b[tone]) == null ? void 0 : _c[state];
|
|
2833
|
-
const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
|
|
2834
|
-
const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
|
|
2835
|
-
const context = { hue, scheme };
|
|
2666
|
+
const { scheme, state, tone } = options, tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.selectable) == null ? void 0 : _b[tone]) == null ? void 0 : _c[state], hue = (tokens == null ? void 0 : tokens._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
|
|
2836
2667
|
return {
|
|
2837
2668
|
_blend: blendMode[scheme === "light" ? 0 : 1],
|
|
2838
2669
|
accent: {
|
|
@@ -2868,9 +2699,7 @@ function buildSelectableStateColorTheme(options, config) {
|
|
|
2868
2699
|
}
|
|
2869
2700
|
function buildSyntaxColorTheme(options, config) {
|
|
2870
2701
|
var _a;
|
|
2871
|
-
const { scheme } = options;
|
|
2872
|
-
const tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.syntax;
|
|
2873
|
-
const context = { hue: "gray", scheme };
|
|
2702
|
+
const { scheme } = options, tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.syntax, context = { hue: "gray", scheme };
|
|
2874
2703
|
return {
|
|
2875
2704
|
atrule: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.atrule),
|
|
2876
2705
|
attrName: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.attrName),
|
|
@@ -2910,12 +2739,9 @@ function buildSyntaxColorTheme(options, config) {
|
|
|
2910
2739
|
variable: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.variable)
|
|
2911
2740
|
};
|
|
2912
2741
|
}
|
|
2913
|
-
|
|
2914
2742
|
const defaultColorPalette = color;
|
|
2915
|
-
|
|
2916
2743
|
function mixChannel(b, s, weight) {
|
|
2917
|
-
const
|
|
2918
|
-
const delta = diff * weight;
|
|
2744
|
+
const delta = (s - b) * weight;
|
|
2919
2745
|
return b + delta;
|
|
2920
2746
|
}
|
|
2921
2747
|
function mix(b, s, weight) {
|
|
@@ -2925,7 +2751,6 @@ function mix(b, s, weight) {
|
|
|
2925
2751
|
b: mixChannel(b.b, s.b, weight)
|
|
2926
2752
|
};
|
|
2927
2753
|
}
|
|
2928
|
-
|
|
2929
2754
|
function multiplyChannel(b, s) {
|
|
2930
2755
|
return b * s;
|
|
2931
2756
|
}
|
|
@@ -2936,7 +2761,6 @@ function multiply(b, s) {
|
|
|
2936
2761
|
b: multiplyChannel(b.b / 255, s.b / 255) * 255
|
|
2937
2762
|
};
|
|
2938
2763
|
}
|
|
2939
|
-
|
|
2940
2764
|
function screenChannel(b, s) {
|
|
2941
2765
|
return b + s - b * s;
|
|
2942
2766
|
}
|
|
@@ -2947,7 +2771,6 @@ function screen(b, s) {
|
|
|
2947
2771
|
b: screenChannel(b.b / 255, s.b / 255) * 255
|
|
2948
2772
|
};
|
|
2949
2773
|
}
|
|
2950
|
-
|
|
2951
2774
|
function lerp(x, y, a) {
|
|
2952
2775
|
return x * (1 - a) + y * a;
|
|
2953
2776
|
}
|
|
@@ -2963,12 +2786,9 @@ function range(x1, y1, x2, y2, a) {
|
|
|
2963
2786
|
function round(value) {
|
|
2964
2787
|
return Math.round(value);
|
|
2965
2788
|
}
|
|
2966
|
-
|
|
2967
2789
|
function hexToRgb(hex) {
|
|
2968
2790
|
if (hex.length === 4) {
|
|
2969
|
-
const hexR = hex.slice(1, 2);
|
|
2970
|
-
const hexG = hex.slice(2, 3);
|
|
2971
|
-
const hexB = hex.slice(3, 4);
|
|
2791
|
+
const hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
|
|
2972
2792
|
return {
|
|
2973
2793
|
r: parseInt(hexR + hexR, 16),
|
|
2974
2794
|
g: parseInt(hexG + hexG, 16),
|
|
@@ -2981,8 +2801,8 @@ function hexToRgb(hex) {
|
|
|
2981
2801
|
b: parseInt(hex.slice(5, 7), 16)
|
|
2982
2802
|
};
|
|
2983
2803
|
}
|
|
2984
|
-
function rgbaToRGBA(
|
|
2985
|
-
const values =
|
|
2804
|
+
function rgbaToRGBA(rgba2) {
|
|
2805
|
+
const values = rgba2.replace(/rgba\(|\)/g, "").split(",");
|
|
2986
2806
|
return {
|
|
2987
2807
|
r: parseInt(values[0]),
|
|
2988
2808
|
g: parseInt(values[1]),
|
|
@@ -2990,132 +2810,56 @@ function rgbaToRGBA(rgba) {
|
|
|
2990
2810
|
a: parseFloat(values[3])
|
|
2991
2811
|
};
|
|
2992
2812
|
}
|
|
2993
|
-
function rgbToHex(
|
|
2994
|
-
const r = round(clamp(Math.round(
|
|
2995
|
-
|
|
2996
|
-
const b = round(clamp(Math.round(color.b), 0, 255));
|
|
2997
|
-
if ("a" in color) {
|
|
2998
|
-
return `rgba(${r},${g},${b},${color.a})`;
|
|
2999
|
-
}
|
|
3000
|
-
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
2813
|
+
function rgbToHex(color2) {
|
|
2814
|
+
const r = round(clamp(Math.round(color2.r), 0, 255)), g = round(clamp(Math.round(color2.g), 0, 255)), b = round(clamp(Math.round(color2.b), 0, 255));
|
|
2815
|
+
return "a" in color2 ? `rgba(${r},${g},${b},${color2.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
|
3001
2816
|
}
|
|
3002
2817
|
function rgbToHsl({ r, g, b }) {
|
|
3003
|
-
r /= 255;
|
|
3004
|
-
g
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
const cmax = Math.max(r, g, b);
|
|
3008
|
-
const delta = cmax - cmin;
|
|
3009
|
-
let h = 0;
|
|
3010
|
-
let s = 0;
|
|
3011
|
-
let l = 0;
|
|
3012
|
-
if (delta == 0)
|
|
3013
|
-
h = 0;
|
|
3014
|
-
else if (cmax == r)
|
|
3015
|
-
h = (g - b) / delta % 6;
|
|
3016
|
-
else if (cmax == g)
|
|
3017
|
-
h = (b - r) / delta + 2;
|
|
3018
|
-
else
|
|
3019
|
-
h = (r - g) / delta + 4;
|
|
3020
|
-
h = Math.round(h * 60);
|
|
3021
|
-
if (h < 0)
|
|
3022
|
-
h += 360;
|
|
3023
|
-
l = (cmax + cmin) / 2;
|
|
3024
|
-
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
|
3025
|
-
s = +(s * 100).toFixed(1);
|
|
3026
|
-
l = +(l * 100).toFixed(1);
|
|
3027
|
-
return { h, s, l };
|
|
2818
|
+
r /= 255, g /= 255, b /= 255;
|
|
2819
|
+
const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
|
|
2820
|
+
let h = 0, s = 0, l = 0;
|
|
2821
|
+
return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), { h, s, l };
|
|
3028
2822
|
}
|
|
3029
2823
|
function hslToRgb(hsl) {
|
|
3030
|
-
const s = hsl.s / 100;
|
|
3031
|
-
|
|
3032
|
-
|
|
3033
|
-
const x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1));
|
|
3034
|
-
const m = l - c / 2;
|
|
3035
|
-
let r = 0;
|
|
3036
|
-
let g = 0;
|
|
3037
|
-
let b = 0;
|
|
3038
|
-
if (0 <= hsl.h && hsl.h < 60) {
|
|
3039
|
-
r = c;
|
|
3040
|
-
g = x;
|
|
3041
|
-
b = 0;
|
|
3042
|
-
} else if (60 <= hsl.h && hsl.h < 120) {
|
|
3043
|
-
r = x;
|
|
3044
|
-
g = c;
|
|
3045
|
-
b = 0;
|
|
3046
|
-
} else if (120 <= hsl.h && hsl.h < 180) {
|
|
3047
|
-
r = 0;
|
|
3048
|
-
g = c;
|
|
3049
|
-
b = x;
|
|
3050
|
-
} else if (180 <= hsl.h && hsl.h < 240) {
|
|
3051
|
-
r = 0;
|
|
3052
|
-
g = x;
|
|
3053
|
-
b = c;
|
|
3054
|
-
} else if (240 <= hsl.h && hsl.h < 300) {
|
|
3055
|
-
r = x;
|
|
3056
|
-
g = 0;
|
|
3057
|
-
b = c;
|
|
3058
|
-
} else if (300 <= hsl.h && hsl.h < 360) {
|
|
3059
|
-
r = c;
|
|
3060
|
-
g = 0;
|
|
3061
|
-
b = x;
|
|
3062
|
-
}
|
|
3063
|
-
return {
|
|
2824
|
+
const s = hsl.s / 100, l = hsl.l / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1)), m = l - c / 2;
|
|
2825
|
+
let r = 0, g = 0, b = 0;
|
|
2826
|
+
return 0 <= hsl.h && hsl.h < 60 ? (r = c, g = x, b = 0) : 60 <= hsl.h && hsl.h < 120 ? (r = x, g = c, b = 0) : 120 <= hsl.h && hsl.h < 180 ? (r = 0, g = c, b = x) : 180 <= hsl.h && hsl.h < 240 ? (r = 0, g = x, b = c) : 240 <= hsl.h && hsl.h < 300 ? (r = x, g = 0, b = c) : 300 <= hsl.h && hsl.h < 360 && (r = c, g = 0, b = x), {
|
|
3064
2827
|
r: Math.round((r + m) * 255),
|
|
3065
2828
|
g: Math.round((g + m) * 255),
|
|
3066
2829
|
b: Math.round((b + m) * 255)
|
|
3067
2830
|
};
|
|
3068
2831
|
}
|
|
3069
|
-
|
|
3070
|
-
const HEX_CHARS = "0123456789ABCDEFabcdef";
|
|
3071
|
-
const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
|
|
2832
|
+
const HEX_CHARS = "0123456789ABCDEFabcdef", HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
|
|
3072
2833
|
function isHexChars(str) {
|
|
3073
|
-
for (const c of str)
|
|
3074
|
-
if (HEX_CHARS.indexOf(c) === -1)
|
|
3075
|
-
return
|
|
3076
|
-
|
|
3077
|
-
}
|
|
3078
|
-
return true;
|
|
2834
|
+
for (const c of str)
|
|
2835
|
+
if (HEX_CHARS.indexOf(c) === -1)
|
|
2836
|
+
return !1;
|
|
2837
|
+
return !0;
|
|
3079
2838
|
}
|
|
3080
2839
|
function isHex(str) {
|
|
3081
|
-
|
|
3082
|
-
return false;
|
|
3083
|
-
if (!(str.length === 4 || str.length === 7))
|
|
3084
|
-
return false;
|
|
3085
|
-
return isHexChars(str.slice(1));
|
|
2840
|
+
return str[0] !== "#" || !(str.length === 4 || str.length === 7) ? !1 : isHexChars(str.slice(1));
|
|
3086
2841
|
}
|
|
3087
2842
|
function parseHsl(str) {
|
|
3088
2843
|
const res = HSL_RE.exec(str);
|
|
3089
|
-
if (!res)
|
|
2844
|
+
if (!res)
|
|
3090
2845
|
throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
|
|
3091
|
-
}
|
|
3092
2846
|
return { h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5]) };
|
|
3093
2847
|
}
|
|
3094
|
-
function parseColor(
|
|
3095
|
-
if (!
|
|
2848
|
+
function parseColor(color2) {
|
|
2849
|
+
if (!color2)
|
|
3096
2850
|
return { r: 0, g: 0, b: 0 };
|
|
3097
|
-
if (typeof
|
|
2851
|
+
if (typeof color2 != "string")
|
|
3098
2852
|
throw new Error("parseColor: expected a string");
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
if (
|
|
3104
|
-
return
|
|
3105
|
-
}
|
|
3106
|
-
if (color.startsWith("rgba(")) {
|
|
3107
|
-
return rgbaToRGBA(color);
|
|
3108
|
-
}
|
|
3109
|
-
throw new Error(`parseColor: unexpected color format: "${color}"`);
|
|
2853
|
+
if (isHex(color2))
|
|
2854
|
+
return hexToRgb(color2);
|
|
2855
|
+
if (color2.startsWith("hsl("))
|
|
2856
|
+
return hslToRgb(parseHsl(color2));
|
|
2857
|
+
if (color2.startsWith("rgba("))
|
|
2858
|
+
return rgbaToRGBA(color2);
|
|
2859
|
+
throw new Error(`parseColor: unexpected color format: "${color2}"`);
|
|
3110
2860
|
}
|
|
3111
|
-
|
|
3112
2861
|
function getContrastRatio(bg, fg) {
|
|
3113
|
-
const rgb1 = parseColor(bg);
|
|
3114
|
-
const rgb2 = parseColor(fg);
|
|
3115
|
-
const c1 = rgb_lrgb(rgb1);
|
|
3116
|
-
const c2 = rgb_lrgb(rgb2);
|
|
3117
|
-
const l1 = lrgb_luminance(c1);
|
|
3118
|
-
const l2 = lrgb_luminance(c2);
|
|
2862
|
+
const rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
|
|
3119
2863
|
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
|
|
3120
2864
|
}
|
|
3121
2865
|
function rgb_lrgb({ r, g, b }) {
|
|
@@ -3127,67 +2871,42 @@ function rgb_lrgb1(v) {
|
|
|
3127
2871
|
function lrgb_luminance([r, g, b]) {
|
|
3128
2872
|
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
|
3129
2873
|
}
|
|
3130
|
-
|
|
3131
|
-
|
|
3132
|
-
const rgb = parseColor(color);
|
|
2874
|
+
function rgba(color2, a) {
|
|
2875
|
+
const rgb = parseColor(color2);
|
|
3133
2876
|
return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
|
|
3134
2877
|
}
|
|
3135
|
-
|
|
3136
2878
|
const RGB_RANGE = [0, 255];
|
|
3137
2879
|
function mixThemeColor(value, options) {
|
|
3138
|
-
const { blendMode } = options
|
|
3139
|
-
|
|
3140
|
-
|
|
3141
|
-
|
|
3142
|
-
|
|
3143
|
-
const paletteRange = {
|
|
3144
|
-
r: [black.r, white.r],
|
|
3145
|
-
g: [black.g, white.g],
|
|
3146
|
-
b: [black.b, white.b]
|
|
3147
|
-
};
|
|
3148
|
-
const convertedBgColor = {
|
|
2880
|
+
const { blendMode } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
|
|
2881
|
+
r: [black2.r, white2.r],
|
|
2882
|
+
g: [black2.g, white2.g],
|
|
2883
|
+
b: [black2.b, white2.b]
|
|
2884
|
+
}, convertedBgColor = {
|
|
3149
2885
|
r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
|
|
3150
2886
|
g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
|
|
3151
2887
|
b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE)
|
|
3152
|
-
}
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
};
|
|
3158
|
-
const resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor);
|
|
3159
|
-
const v = {
|
|
2888
|
+
}, convertedColor = {
|
|
2889
|
+
r: clamp(range(...paletteRange.r, ...RGB_RANGE, color2.r), ...RGB_RANGE),
|
|
2890
|
+
g: clamp(range(...paletteRange.g, ...RGB_RANGE, color2.g), ...RGB_RANGE),
|
|
2891
|
+
b: clamp(range(...paletteRange.b, ...RGB_RANGE, color2.b), ...RGB_RANGE)
|
|
2892
|
+
}, resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor), v = {
|
|
3160
2893
|
r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
|
|
3161
2894
|
g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
|
|
3162
2895
|
b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b)
|
|
3163
2896
|
};
|
|
3164
2897
|
return rgbToHex(v);
|
|
3165
2898
|
}
|
|
3166
|
-
|
|
3167
2899
|
function renderColorValue(str, options) {
|
|
3168
2900
|
const { bg, blendMode, colorPalette } = options;
|
|
3169
|
-
if (bg === "white")
|
|
2901
|
+
if (bg === "white")
|
|
3170
2902
|
throw new Error("Cannot blend with white background");
|
|
3171
|
-
}
|
|
3172
2903
|
const node = parseTokenValue(str);
|
|
3173
|
-
if (!node || node.type !== "color")
|
|
2904
|
+
if (!node || node.type !== "color")
|
|
3174
2905
|
throw new Error(`Invalid color token value: ${str}`);
|
|
3175
|
-
}
|
|
3176
2906
|
let hex = "";
|
|
3177
|
-
if (node.key === "black")
|
|
3178
|
-
hex = renderColorHex(colorPalette.black);
|
|
3179
|
-
}
|
|
3180
|
-
if (node.key === "white") {
|
|
3181
|
-
hex = renderColorHex(colorPalette.white);
|
|
3182
|
-
}
|
|
3183
|
-
if (node.hue && node.tint) {
|
|
3184
|
-
hex = renderColorHex(colorPalette[node.hue][node.tint]);
|
|
3185
|
-
}
|
|
3186
|
-
if (!hex) {
|
|
2907
|
+
if (node.key === "black" && (hex = renderColorHex(colorPalette.black)), node.key === "white" && (hex = renderColorHex(colorPalette.white)), node.hue && node.tint && (hex = renderColorHex(colorPalette[node.hue][node.tint])), !hex)
|
|
3187
2908
|
throw new Error(`Invalid color token value: ${str}`);
|
|
3188
|
-
|
|
3189
|
-
const hexBeforeMix = hex;
|
|
3190
|
-
const mixOptions = {
|
|
2909
|
+
const hexBeforeMix = hex, mixOptions = {
|
|
3191
2910
|
blendMode,
|
|
3192
2911
|
bg,
|
|
3193
2912
|
black: renderColorHex(colorPalette.black),
|
|
@@ -3195,46 +2914,30 @@ function renderColorValue(str, options) {
|
|
|
3195
2914
|
white: renderColorHex(colorPalette.white)
|
|
3196
2915
|
};
|
|
3197
2916
|
try {
|
|
3198
|
-
hex = mixThemeColor(hex, mixOptions)
|
|
3199
|
-
|
|
3200
|
-
const from = hexToRgb(bg);
|
|
3201
|
-
const to = hexToRgb(hex);
|
|
2917
|
+
if (hex = mixThemeColor(hex, mixOptions), bg && node.mix !== void 0) {
|
|
2918
|
+
const from = hexToRgb(bg), to = hexToRgb(hex);
|
|
3202
2919
|
hex = rgbToHex(mix(from, to, node.mix));
|
|
3203
2920
|
}
|
|
3204
2921
|
} catch (err) {
|
|
3205
|
-
console.warn("could not blend", hex, mixOptions);
|
|
3206
|
-
throw err;
|
|
2922
|
+
throw console.warn("could not blend", hex, mixOptions), err;
|
|
3207
2923
|
}
|
|
3208
|
-
|
|
3209
|
-
console.warn(`invalid color token value: ${str}`);
|
|
3210
|
-
hex = hexBeforeMix;
|
|
3211
|
-
}
|
|
3212
|
-
if (node.opacity !== void 0) {
|
|
3213
|
-
hex = rgba(hex, node.opacity);
|
|
3214
|
-
}
|
|
3215
|
-
return hex;
|
|
2924
|
+
return hex === "#aN" && (console.warn(`invalid color token value: ${str}`), hex = hexBeforeMix), node.opacity !== void 0 && (hex = rgba(hex, node.opacity)), hex;
|
|
3216
2925
|
}
|
|
3217
|
-
function renderColorHex(
|
|
3218
|
-
return typeof
|
|
2926
|
+
function renderColorHex(color2) {
|
|
2927
|
+
return typeof color2 == "string" ? color2 : color2.hex;
|
|
3219
2928
|
}
|
|
3220
|
-
|
|
3221
2929
|
function renderThemeColorSchemes(value, config) {
|
|
3222
|
-
|
|
2930
|
+
var _a;
|
|
2931
|
+
const colorPalette = (_a = config == null ? void 0 : config.palette) != null ? _a : defaultColorPalette;
|
|
3223
2932
|
return {
|
|
3224
2933
|
light: renderThemeColorScheme(colorPalette, value.light),
|
|
3225
2934
|
dark: renderThemeColorScheme(colorPalette, value.dark)
|
|
3226
2935
|
};
|
|
3227
2936
|
}
|
|
3228
2937
|
function renderThemeColorScheme(colorPalette, value) {
|
|
3229
|
-
const toneEntries = Object.entries(value);
|
|
3230
|
-
|
|
3231
|
-
const [, defaultTone] = toneEntries.find(([k]) => k === "default");
|
|
3232
|
-
const renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette });
|
|
3233
|
-
const renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette });
|
|
3234
|
-
const bg = renderedDefaultTone.bg;
|
|
3235
|
-
if (bg === "white") {
|
|
2938
|
+
const toneEntries = Object.entries(value), [, transparentTone] = toneEntries.find(([k]) => k === "transparent"), [, defaultTone] = toneEntries.find(([k]) => k === "default"), renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette }), renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette }), bg = renderedDefaultTone.bg;
|
|
2939
|
+
if (bg === "white")
|
|
3236
2940
|
throw new Error("Cannot blend with white background");
|
|
3237
|
-
}
|
|
3238
2941
|
return Object.fromEntries([
|
|
3239
2942
|
["transparent", renderedTransparentTone],
|
|
3240
2943
|
["default", renderedDefaultTone],
|
|
@@ -3242,21 +2945,15 @@ function renderThemeColorScheme(colorPalette, value) {
|
|
|
3242
2945
|
]);
|
|
3243
2946
|
}
|
|
3244
2947
|
function renderThemeColor(value, options) {
|
|
3245
|
-
const { colorPalette, bg } = options
|
|
3246
|
-
const blendMode = value._blend || "multiply";
|
|
3247
|
-
const baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode });
|
|
3248
|
-
const colorOptions = { colorPalette, bg: baseBg, blendMode };
|
|
3249
|
-
const button = renderThemeColorButton(value.button, {
|
|
2948
|
+
const { colorPalette, bg } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode }), colorOptions = { colorPalette, bg: baseBg, blendMode }, button = renderThemeColorButton(value.button, {
|
|
3250
2949
|
baseBg,
|
|
3251
2950
|
blendMode,
|
|
3252
2951
|
colorPalette
|
|
3253
|
-
})
|
|
3254
|
-
const selectable = renderThemeColorSelectable(value.selectable, {
|
|
2952
|
+
}), selectable = renderThemeColorSelectable(value.selectable, {
|
|
3255
2953
|
colorPalette,
|
|
3256
2954
|
baseBg,
|
|
3257
2955
|
blendMode
|
|
3258
|
-
})
|
|
3259
|
-
const shadow = {
|
|
2956
|
+
}), shadow = {
|
|
3260
2957
|
outline: renderColorValue(value.shadow.outline, colorOptions),
|
|
3261
2958
|
umbra: renderColorValue(value.shadow.umbra, {
|
|
3262
2959
|
...colorOptions,
|
|
@@ -3312,14 +3009,11 @@ function renderThemeColor(value, options) {
|
|
|
3312
3009
|
};
|
|
3313
3010
|
}
|
|
3314
3011
|
function renderThemeColorKBD(value, options) {
|
|
3315
|
-
const { baseBg, blendMode, colorPalette } = options
|
|
3316
|
-
const rootOptions = {
|
|
3012
|
+
const { baseBg, blendMode, colorPalette } = options, rootOptions = {
|
|
3317
3013
|
bg: baseBg,
|
|
3318
3014
|
blendMode,
|
|
3319
3015
|
colorPalette
|
|
3320
|
-
}
|
|
3321
|
-
const bg = renderColorValue(value.bg, rootOptions);
|
|
3322
|
-
const colorOptions = {
|
|
3016
|
+
}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
|
|
3323
3017
|
bg,
|
|
3324
3018
|
blendMode,
|
|
3325
3019
|
colorPalette
|
|
@@ -3344,15 +3038,11 @@ function renderThemeColorAvatar(value, options) {
|
|
|
3344
3038
|
};
|
|
3345
3039
|
}
|
|
3346
3040
|
function renderThemeColorAvatarColor(value, options) {
|
|
3347
|
-
const { baseBg, blendMode: rootBlendMode, colorPalette } = options
|
|
3348
|
-
const blendMode = value._blend || "multiply";
|
|
3349
|
-
const rootOptions = {
|
|
3041
|
+
const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
|
|
3350
3042
|
bg: baseBg,
|
|
3351
3043
|
blendMode: rootBlendMode,
|
|
3352
3044
|
colorPalette
|
|
3353
|
-
}
|
|
3354
|
-
const bg = renderColorValue(value.bg, rootOptions);
|
|
3355
|
-
const colorOptions = {
|
|
3045
|
+
}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
|
|
3356
3046
|
bg,
|
|
3357
3047
|
blendMode,
|
|
3358
3048
|
colorPalette
|
|
@@ -3373,15 +3063,11 @@ function renderThemeColorBadge(value, options) {
|
|
|
3373
3063
|
};
|
|
3374
3064
|
}
|
|
3375
3065
|
function renderThemeColorBadgeColor(value, options) {
|
|
3376
|
-
const { baseBg, blendMode: rootBlendMode, colorPalette } = options
|
|
3377
|
-
const blendMode = rootBlendMode;
|
|
3378
|
-
const rootOptions = {
|
|
3066
|
+
const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
|
|
3379
3067
|
bg: baseBg,
|
|
3380
3068
|
blendMode: rootBlendMode,
|
|
3381
3069
|
colorPalette
|
|
3382
|
-
}
|
|
3383
|
-
const bg = renderColorValue(value.bg, rootOptions);
|
|
3384
|
-
const colorOptions = {
|
|
3070
|
+
}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
|
|
3385
3071
|
bg,
|
|
3386
3072
|
blendMode,
|
|
3387
3073
|
colorPalette
|
|
@@ -3420,15 +3106,11 @@ function renderThemeColorButtonStates(value, options) {
|
|
|
3420
3106
|
}
|
|
3421
3107
|
function renderThemeColorState(value, options) {
|
|
3422
3108
|
var _a, _b;
|
|
3423
|
-
const { baseBg, blendMode: rootBlendMode, colorPalette } = options
|
|
3424
|
-
const blendMode = value._blend || "multiply";
|
|
3425
|
-
const rootOptions = {
|
|
3109
|
+
const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
|
|
3426
3110
|
bg: baseBg,
|
|
3427
3111
|
blendMode: rootBlendMode,
|
|
3428
3112
|
colorPalette
|
|
3429
|
-
}
|
|
3430
|
-
const bg = renderColorValue(value.bg, rootOptions);
|
|
3431
|
-
const colorOptions = {
|
|
3113
|
+
}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
|
|
3432
3114
|
bg,
|
|
3433
3115
|
blendMode,
|
|
3434
3116
|
colorPalette
|
|
@@ -3481,11 +3163,7 @@ function renderInputStatesColorTheme(value, options) {
|
|
|
3481
3163
|
};
|
|
3482
3164
|
}
|
|
3483
3165
|
function renderInputStateColorTheme(value, options) {
|
|
3484
|
-
const { baseBg, blendMode: rootBlendMode, colorPalette } = options;
|
|
3485
|
-
const blendMode = value._blend || "multiply";
|
|
3486
|
-
const rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode };
|
|
3487
|
-
const bg = renderColorValue(value.bg, rootOptions);
|
|
3488
|
-
const colorOptions = { colorPalette, bg, blendMode };
|
|
3166
|
+
const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode }, bg = renderColorValue(value.bg, rootOptions), colorOptions = { colorPalette, bg, blendMode };
|
|
3489
3167
|
return {
|
|
3490
3168
|
_blend: blendMode,
|
|
3491
3169
|
bg,
|
|
@@ -3516,8 +3194,7 @@ function renderThemeColorSelectableStates(value, options) {
|
|
|
3516
3194
|
};
|
|
3517
3195
|
}
|
|
3518
3196
|
function renderSyntaxColorTheme(value, options) {
|
|
3519
|
-
const { colorPalette, baseBg, blendMode } = options;
|
|
3520
|
-
const colorOptions = { colorPalette, bg: baseBg, blendMode };
|
|
3197
|
+
const { colorPalette, baseBg, blendMode } = options, colorOptions = { colorPalette, bg: baseBg, blendMode };
|
|
3521
3198
|
return {
|
|
3522
3199
|
atrule: renderColorValue(value.atrule, colorOptions),
|
|
3523
3200
|
attrName: renderColorValue(value.attrName, colorOptions),
|
|
@@ -3557,80 +3234,115 @@ function renderSyntaxColorTheme(value, options) {
|
|
|
3557
3234
|
variable: renderColorValue(value.variable, colorOptions)
|
|
3558
3235
|
};
|
|
3559
3236
|
}
|
|
3560
|
-
|
|
3561
3237
|
function buildTheme(config) {
|
|
3562
|
-
|
|
3563
|
-
const v2 = {
|
|
3238
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
|
|
3239
|
+
const colorTheme = buildColorTheme(config), v2 = {
|
|
3564
3240
|
_version: 2,
|
|
3565
|
-
avatar: (config == null ? void 0 : config.avatar)
|
|
3566
|
-
button: (config == null ? void 0 : config.button)
|
|
3567
|
-
card: (config == null ? void 0 : config.card)
|
|
3241
|
+
avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : defaultThemeConfig.avatar,
|
|
3242
|
+
button: (_b = config == null ? void 0 : config.button) != null ? _b : defaultThemeConfig.button,
|
|
3243
|
+
card: (_c = config == null ? void 0 : config.card) != null ? _c : defaultThemeConfig.card,
|
|
3568
3244
|
// How colors are generated:
|
|
3569
3245
|
// 1. Merge custom tokens with default tokens
|
|
3570
3246
|
// 2. Generate tree of color keys (gray/500, black, white, etc.)
|
|
3571
3247
|
// 3. Apply mixing and render to hex values
|
|
3572
3248
|
// render(build(mergeWithDefaults()))
|
|
3573
3249
|
color: renderThemeColorSchemes(colorTheme, config),
|
|
3574
|
-
container: (config == null ? void 0 : config.container)
|
|
3575
|
-
font: (config == null ? void 0 : config.font)
|
|
3576
|
-
input: (config == null ? void 0 : config.input)
|
|
3577
|
-
layer: (config == null ? void 0 : config.layer)
|
|
3578
|
-
media: (config == null ? void 0 : config.media)
|
|
3579
|
-
radius: (config == null ? void 0 : config.radius)
|
|
3580
|
-
shadow: (config == null ? void 0 : config.shadow)
|
|
3581
|
-
space: (config == null ? void 0 : config.space)
|
|
3582
|
-
style: (config == null ? void 0 : config.style)
|
|
3250
|
+
container: (_d = config == null ? void 0 : config.container) != null ? _d : defaultThemeConfig.container,
|
|
3251
|
+
font: (_e = config == null ? void 0 : config.font) != null ? _e : defaultThemeFonts,
|
|
3252
|
+
input: (_f = config == null ? void 0 : config.input) != null ? _f : defaultThemeConfig.input,
|
|
3253
|
+
layer: (_g = config == null ? void 0 : config.layer) != null ? _g : defaultThemeConfig.layer,
|
|
3254
|
+
media: (_h = config == null ? void 0 : config.media) != null ? _h : defaultThemeConfig.media,
|
|
3255
|
+
radius: (_i = config == null ? void 0 : config.radius) != null ? _i : defaultThemeConfig.radius,
|
|
3256
|
+
shadow: (_j = config == null ? void 0 : config.shadow) != null ? _j : defaultThemeConfig.shadow,
|
|
3257
|
+
space: (_k = config == null ? void 0 : config.space) != null ? _k : defaultThemeConfig.space,
|
|
3258
|
+
style: (_l = config == null ? void 0 : config.style) != null ? _l : defaultThemeConfig.style
|
|
3583
3259
|
};
|
|
3584
3260
|
return v2_v0(v2);
|
|
3585
3261
|
}
|
|
3586
|
-
|
|
3587
3262
|
const cache = /* @__PURE__ */ new Map();
|
|
3588
3263
|
function getScopedTheme(themeProp, scheme, tone) {
|
|
3589
3264
|
const cachedTheme = _getCachedTheme(themeProp, scheme, tone);
|
|
3590
3265
|
if (cachedTheme)
|
|
3591
3266
|
return cachedTheme;
|
|
3592
|
-
const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp
|
|
3593
|
-
const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp);
|
|
3594
|
-
const colorScheme_v0 = v0.color[scheme] || v0.color.light;
|
|
3595
|
-
const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default;
|
|
3596
|
-
const layer_v0 = v0.layer || defaultThemeConfig.layer;
|
|
3597
|
-
const colorScheme_v2 = v2.color[scheme] || v2.color.light;
|
|
3598
|
-
const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default;
|
|
3599
|
-
const layer_v2 = v2.layer || defaultThemeConfig.layer;
|
|
3600
|
-
const theme = {
|
|
3267
|
+
const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), colorScheme_v0 = v0.color[scheme] || v0.color.light, color_v0 = colorScheme_v0[tone] || colorScheme_v0.default, layer_v0 = v0.layer || defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2 = colorScheme_v2[tone] || colorScheme_v2.default, layer_v2 = v2.layer || defaultThemeConfig.layer, theme = {
|
|
3601
3268
|
sanity: {
|
|
3602
3269
|
...v0,
|
|
3603
3270
|
color: color_v0,
|
|
3604
3271
|
layer: layer_v0,
|
|
3605
3272
|
v2: {
|
|
3606
3273
|
...v2,
|
|
3607
|
-
_resolved:
|
|
3274
|
+
_resolved: !0,
|
|
3608
3275
|
color: color_v2,
|
|
3609
3276
|
layer: layer_v2
|
|
3610
3277
|
}
|
|
3611
3278
|
}
|
|
3612
3279
|
};
|
|
3613
|
-
_setCachedTheme(themeProp, scheme, tone, theme);
|
|
3614
|
-
return theme;
|
|
3280
|
+
return _setCachedTheme(themeProp, scheme, tone, theme), theme;
|
|
3615
3281
|
}
|
|
3616
3282
|
function _getCachedTheme(rootTheme, scheme, tone) {
|
|
3617
3283
|
const schemeCache = cache.get(scheme);
|
|
3618
3284
|
if (!schemeCache)
|
|
3619
|
-
return
|
|
3285
|
+
return;
|
|
3620
3286
|
const toneCache = schemeCache.get(tone);
|
|
3621
|
-
if (
|
|
3622
|
-
return
|
|
3623
|
-
return toneCache.get(rootTheme);
|
|
3287
|
+
if (toneCache)
|
|
3288
|
+
return toneCache.get(rootTheme);
|
|
3624
3289
|
}
|
|
3625
3290
|
function _setCachedTheme(rootTheme, scheme, tone, theme) {
|
|
3626
|
-
|
|
3627
|
-
cache.set(scheme, /* @__PURE__ */ new Map());
|
|
3291
|
+
cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
|
|
3628
3292
|
const schemeCache = cache.get(scheme);
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3293
|
+
schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
|
|
3294
|
+
}
|
|
3295
|
+
export {
|
|
3296
|
+
COLOR_CONFIG_AVATAR_COLORS,
|
|
3297
|
+
COLOR_CONFIG_BLEND_KEYS,
|
|
3298
|
+
COLOR_CONFIG_CARD_KEYS,
|
|
3299
|
+
COLOR_CONFIG_CARD_TONES,
|
|
3300
|
+
COLOR_CONFIG_INPUT_MODES,
|
|
3301
|
+
COLOR_CONFIG_INPUT_STATES,
|
|
3302
|
+
COLOR_CONFIG_STATES,
|
|
3303
|
+
COLOR_CONFIG_STATE_KEYS,
|
|
3304
|
+
COLOR_CONFIG_STATE_TONES,
|
|
3305
|
+
THEME_COLOR_AVATAR_COLORS,
|
|
3306
|
+
THEME_COLOR_BLEND_MODES,
|
|
3307
|
+
THEME_COLOR_BUTTON_MODES,
|
|
3308
|
+
THEME_COLOR_CARD_TONES,
|
|
3309
|
+
THEME_COLOR_INPUT_MODES,
|
|
3310
|
+
THEME_COLOR_INPUT_STATES,
|
|
3311
|
+
THEME_COLOR_SCHEMES,
|
|
3312
|
+
THEME_COLOR_STATES,
|
|
3313
|
+
THEME_COLOR_STATE_TONES,
|
|
3314
|
+
buildTheme,
|
|
3315
|
+
createColorTheme,
|
|
3316
|
+
getContrastRatio,
|
|
3317
|
+
getScopedTheme,
|
|
3318
|
+
getTheme_v2,
|
|
3319
|
+
hexToRgb,
|
|
3320
|
+
hslToRgb,
|
|
3321
|
+
isColorBlendModeValue,
|
|
3322
|
+
isColorButtonMode,
|
|
3323
|
+
isColorConfigBaseKey,
|
|
3324
|
+
isColorConfigBaseTone,
|
|
3325
|
+
isColorConfigBlendKey,
|
|
3326
|
+
isColorConfigStateKey,
|
|
3327
|
+
isColorConfigStateTone,
|
|
3328
|
+
isColorHueKey,
|
|
3329
|
+
isColorOpacityValue,
|
|
3330
|
+
isColorTintKey,
|
|
3331
|
+
isColorTokenValue,
|
|
3332
|
+
isColorValue,
|
|
3333
|
+
is_v0,
|
|
3334
|
+
is_v2,
|
|
3335
|
+
mix,
|
|
3336
|
+
multiply,
|
|
3337
|
+
parseColor,
|
|
3338
|
+
parseTokenKey,
|
|
3339
|
+
parseTokenValue,
|
|
3340
|
+
rgbToHex,
|
|
3341
|
+
rgbToHsl,
|
|
3342
|
+
rgba,
|
|
3343
|
+
rgbaToRGBA,
|
|
3344
|
+
screen,
|
|
3345
|
+
v0_v2,
|
|
3346
|
+
v2_v0
|
|
3347
|
+
};
|
|
3636
3348
|
//# sourceMappingURL=theme.esm.js.map
|