@sanity/ui 4.0.0-next.2 → 4.0.0-next.3

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.
@@ -1,4043 +0,0 @@
1
- let _sanity_color = require("@sanity/color");
2
- const defaultThemeConfig = {
3
- _version: 2,
4
- avatar: {
5
- sizes: [
6
- {
7
- distance: -4,
8
- size: 19
9
- },
10
- {
11
- distance: -4,
12
- size: 25
13
- },
14
- {
15
- distance: -8,
16
- size: 33
17
- },
18
- {
19
- distance: -12,
20
- size: 49
21
- }
22
- ],
23
- focusRing: {
24
- offset: 1,
25
- width: 1
26
- }
27
- },
28
- button: {
29
- textWeight: "medium",
30
- border: { width: 1 },
31
- focusRing: {
32
- offset: -1,
33
- width: 1
34
- }
35
- },
36
- card: {
37
- border: { width: 1 },
38
- focusRing: {
39
- offset: -1,
40
- width: 1
41
- },
42
- shadow: { outline: .5 }
43
- },
44
- container: [
45
- 320,
46
- 640,
47
- 960,
48
- 1280,
49
- 1600,
50
- 1920
51
- ],
52
- media: [
53
- 360,
54
- 600,
55
- 900,
56
- 1200,
57
- 1800,
58
- 2400
59
- ],
60
- layer: {
61
- dialog: { zOffset: 600 },
62
- popover: { zOffset: 400 },
63
- tooltip: { zOffset: 200 }
64
- },
65
- radius: [
66
- 0,
67
- 1,
68
- 3,
69
- 6,
70
- 9,
71
- 12,
72
- 21
73
- ],
74
- shadow: [
75
- null,
76
- {
77
- umbra: [
78
- 0,
79
- 0,
80
- 0,
81
- 0
82
- ],
83
- penumbra: [
84
- 0,
85
- 0,
86
- 0,
87
- 0
88
- ],
89
- ambient: [
90
- 0,
91
- 0,
92
- 0,
93
- 0
94
- ]
95
- },
96
- {
97
- umbra: [
98
- 0,
99
- 3,
100
- 5,
101
- -2
102
- ],
103
- penumbra: [
104
- 0,
105
- 6,
106
- 10,
107
- 0
108
- ],
109
- ambient: [
110
- 0,
111
- 1,
112
- 18,
113
- 1
114
- ]
115
- },
116
- {
117
- umbra: [
118
- 0,
119
- 7,
120
- 8,
121
- -4
122
- ],
123
- penumbra: [
124
- 0,
125
- 12,
126
- 17,
127
- 2
128
- ],
129
- ambient: [
130
- 0,
131
- 5,
132
- 22,
133
- 4
134
- ]
135
- },
136
- {
137
- umbra: [
138
- 0,
139
- 9,
140
- 11,
141
- -5
142
- ],
143
- penumbra: [
144
- 0,
145
- 18,
146
- 28,
147
- 2
148
- ],
149
- ambient: [
150
- 0,
151
- 7,
152
- 34,
153
- 6
154
- ]
155
- },
156
- {
157
- umbra: [
158
- 0,
159
- 11,
160
- 15,
161
- -7
162
- ],
163
- penumbra: [
164
- 0,
165
- 24,
166
- 38,
167
- 3
168
- ],
169
- ambient: [
170
- 0,
171
- 9,
172
- 46,
173
- 8
174
- ]
175
- }
176
- ],
177
- space: [
178
- 0,
179
- 4,
180
- 8,
181
- 12,
182
- 20,
183
- 32,
184
- 52,
185
- 84,
186
- 136,
187
- 220
188
- ],
189
- input: {
190
- border: { width: 1 },
191
- checkbox: {
192
- size: 17,
193
- focusRing: {
194
- offset: -1,
195
- width: 1
196
- }
197
- },
198
- radio: {
199
- size: 17,
200
- markSize: 9,
201
- focusRing: {
202
- offset: -1,
203
- width: 1
204
- }
205
- },
206
- switch: {
207
- width: 25,
208
- height: 17,
209
- padding: 5,
210
- transitionDurationMs: 150,
211
- transitionTimingFunction: "ease-out",
212
- focusRing: {
213
- offset: 1,
214
- width: 1
215
- }
216
- },
217
- select: { focusRing: {
218
- offset: -1,
219
- width: 1
220
- } },
221
- text: { focusRing: {
222
- offset: -1,
223
- width: 1
224
- } }
225
- },
226
- style: { button: { root: { transition: "background-color 100ms,border-color 100ms,color 100ms" } } }
227
- }, defaultThemeFonts = {
228
- code: {
229
- family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
230
- weights: {
231
- regular: 400,
232
- medium: 500,
233
- semibold: 600,
234
- bold: 700
235
- },
236
- sizes: [
237
- {
238
- ascenderHeight: 4,
239
- descenderHeight: 4,
240
- fontSize: 10,
241
- iconSize: 17,
242
- lineHeight: 15,
243
- letterSpacing: 0
244
- },
245
- {
246
- ascenderHeight: 5,
247
- descenderHeight: 5,
248
- fontSize: 13,
249
- iconSize: 21,
250
- lineHeight: 19,
251
- letterSpacing: 0
252
- },
253
- {
254
- ascenderHeight: 6,
255
- descenderHeight: 6,
256
- fontSize: 16,
257
- iconSize: 25,
258
- lineHeight: 23,
259
- letterSpacing: 0
260
- },
261
- {
262
- ascenderHeight: 7,
263
- descenderHeight: 7,
264
- fontSize: 19,
265
- iconSize: 29,
266
- lineHeight: 27,
267
- letterSpacing: 0
268
- },
269
- {
270
- ascenderHeight: 8,
271
- descenderHeight: 8,
272
- fontSize: 22,
273
- iconSize: 33,
274
- lineHeight: 31,
275
- letterSpacing: 0
276
- }
277
- ]
278
- },
279
- heading: {
280
- family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif",
281
- weights: {
282
- regular: 700,
283
- medium: 800,
284
- semibold: 900,
285
- bold: 900
286
- },
287
- sizes: [
288
- {
289
- ascenderHeight: 5,
290
- descenderHeight: 5,
291
- fontSize: 13,
292
- iconSize: 17,
293
- lineHeight: 19,
294
- letterSpacing: 0
295
- },
296
- {
297
- ascenderHeight: 6,
298
- descenderHeight: 6,
299
- fontSize: 16,
300
- iconSize: 25,
301
- lineHeight: 23,
302
- letterSpacing: 0
303
- },
304
- {
305
- ascenderHeight: 7,
306
- descenderHeight: 7,
307
- fontSize: 21,
308
- iconSize: 33,
309
- lineHeight: 29,
310
- letterSpacing: 0
311
- },
312
- {
313
- ascenderHeight: 8,
314
- descenderHeight: 8,
315
- fontSize: 27,
316
- iconSize: 41,
317
- lineHeight: 35,
318
- letterSpacing: 0
319
- },
320
- {
321
- ascenderHeight: 9.5,
322
- descenderHeight: 8.5,
323
- fontSize: 33,
324
- iconSize: 49,
325
- lineHeight: 41,
326
- letterSpacing: 0
327
- },
328
- {
329
- ascenderHeight: 10.5,
330
- descenderHeight: 9.5,
331
- fontSize: 38,
332
- iconSize: 53,
333
- lineHeight: 47,
334
- letterSpacing: 0
335
- }
336
- ]
337
- },
338
- label: {
339
- family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", system-ui, sans-serif",
340
- weights: {
341
- regular: 600,
342
- medium: 700,
343
- semibold: 800,
344
- bold: 900
345
- },
346
- sizes: [
347
- {
348
- ascenderHeight: 2,
349
- descenderHeight: 2,
350
- fontSize: 8.1,
351
- iconSize: 13,
352
- lineHeight: 10,
353
- letterSpacing: .5
354
- },
355
- {
356
- ascenderHeight: 2,
357
- descenderHeight: 2,
358
- fontSize: 9.5,
359
- iconSize: 15,
360
- lineHeight: 11,
361
- letterSpacing: .5
362
- },
363
- {
364
- ascenderHeight: 2,
365
- descenderHeight: 2,
366
- fontSize: 10.8,
367
- iconSize: 17,
368
- lineHeight: 12,
369
- letterSpacing: .5
370
- },
371
- {
372
- ascenderHeight: 2,
373
- descenderHeight: 2,
374
- fontSize: 12.25,
375
- iconSize: 19,
376
- lineHeight: 13,
377
- letterSpacing: .5
378
- },
379
- {
380
- ascenderHeight: 2,
381
- descenderHeight: 2,
382
- fontSize: 13.6,
383
- iconSize: 21,
384
- lineHeight: 14,
385
- letterSpacing: .5
386
- },
387
- {
388
- ascenderHeight: 2,
389
- descenderHeight: 2,
390
- fontSize: 15,
391
- iconSize: 23,
392
- lineHeight: 15,
393
- letterSpacing: .5
394
- }
395
- ]
396
- },
397
- text: {
398
- family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif",
399
- weights: {
400
- regular: 400,
401
- medium: 500,
402
- semibold: 600,
403
- bold: 700
404
- },
405
- sizes: [
406
- {
407
- ascenderHeight: 4,
408
- descenderHeight: 4,
409
- fontSize: 10,
410
- iconSize: 17,
411
- lineHeight: 15,
412
- letterSpacing: 0
413
- },
414
- {
415
- ascenderHeight: 5,
416
- descenderHeight: 5,
417
- fontSize: 13,
418
- iconSize: 21,
419
- lineHeight: 19,
420
- letterSpacing: 0
421
- },
422
- {
423
- ascenderHeight: 6,
424
- descenderHeight: 6,
425
- fontSize: 15,
426
- iconSize: 25,
427
- lineHeight: 23,
428
- letterSpacing: 0
429
- },
430
- {
431
- ascenderHeight: 7,
432
- descenderHeight: 7,
433
- fontSize: 18,
434
- iconSize: 29,
435
- lineHeight: 27,
436
- letterSpacing: 0
437
- },
438
- {
439
- ascenderHeight: 8,
440
- descenderHeight: 8,
441
- fontSize: 21,
442
- iconSize: 33,
443
- lineHeight: 31,
444
- letterSpacing: 0
445
- }
446
- ]
447
- }
448
- };
449
- /**
450
- * Defines a lazy, self-replacing property on `obj`.
451
- *
452
- * On first access the `factory` is called and the getter is replaced with the
453
- * computed plain value — subsequent reads have zero overhead.
454
- *
455
- * The property is enumerable (visible in `Object.keys` / spread) in both states.
456
- *
457
- * @internal
458
- */
459
- function defineLazyProperty(obj, key, factory) {
460
- Object.defineProperty(obj, key, {
461
- get() {
462
- let value = factory();
463
- return Object.defineProperty(obj, key, {
464
- value,
465
- enumerable: !0,
466
- writable: !1,
467
- configurable: !1
468
- }), value;
469
- },
470
- enumerable: !0,
471
- configurable: !0
472
- });
473
- }
474
- const cache$4 = /* @__PURE__ */ new WeakMap(), V0_TONES = [
475
- "transparent",
476
- "default",
477
- "primary",
478
- "positive",
479
- "caution",
480
- "critical"
481
- ];
482
- function lazyV0Scheme(schemeKey, color) {
483
- let scheme = {};
484
- for (let tone of V0_TONES) defineLazyProperty(scheme, tone, () => themeColor_v2_v0(color[schemeKey][tone]));
485
- return scheme;
486
- }
487
- /** @internal */
488
- function v2_v0(v2) {
489
- let cachedTheme = cache$4.get(v2);
490
- if (cachedTheme) return cachedTheme;
491
- let { avatar, button, color, container, font: fonts, input, media, radius, shadow: shadows, space, style: styles } = v2, v0Color = {};
492
- defineLazyProperty(v0Color, "light", () => lazyV0Scheme("light", color)), defineLazyProperty(v0Color, "dark", () => lazyV0Scheme("dark", color));
493
- let theme = {
494
- _version: 0,
495
- avatar,
496
- button,
497
- container,
498
- color: v0Color,
499
- focusRing: input.text.focusRing,
500
- fonts,
501
- input,
502
- media,
503
- radius,
504
- shadows,
505
- space,
506
- styles,
507
- v2
508
- };
509
- return cache$4.set(v2, theme), theme;
510
- }
511
- function themeColor_v2_v0(color_v2) {
512
- return {
513
- base: {
514
- bg: color_v2.bg,
515
- fg: color_v2.fg,
516
- border: color_v2.border,
517
- focusRing: color_v2.focusRing,
518
- shadow: color_v2.shadow
519
- },
520
- button: color_v2.button,
521
- card: color_v2.selectable.default,
522
- dark: color_v2._dark,
523
- input: {
524
- default: inputStatesThemeColor_v2_v0(color_v2.input.default),
525
- invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid)
526
- },
527
- muted: {
528
- ...color_v2.button.ghost,
529
- transparent: color_v2.button.ghost.default
530
- },
531
- solid: {
532
- ...color_v2.button.default,
533
- transparent: color_v2.button.default.default
534
- },
535
- selectable: color_v2.selectable,
536
- spot: {
537
- gray: color_v2.avatar.gray.bg,
538
- blue: color_v2.avatar.blue.bg,
539
- purple: color_v2.avatar.purple.bg,
540
- magenta: color_v2.avatar.magenta.bg,
541
- red: color_v2.avatar.red.bg,
542
- orange: color_v2.avatar.orange.bg,
543
- yellow: color_v2.avatar.yellow.bg,
544
- green: color_v2.avatar.green.bg,
545
- cyan: color_v2.avatar.cyan.bg
546
- },
547
- syntax: color_v2.syntax
548
- };
549
- }
550
- function inputStatesThemeColor_v2_v0(t) {
551
- return {
552
- enabled: inputStateThemeColor_v2_v0(t.enabled),
553
- disabled: inputStateThemeColor_v2_v0(t.disabled),
554
- readOnly: inputStateThemeColor_v2_v0(t.readOnly),
555
- hovered: inputStateThemeColor_v2_v0(t.hovered)
556
- };
557
- }
558
- function inputStateThemeColor_v2_v0(t) {
559
- return {
560
- bg: t.bg,
561
- bg2: t.muted.bg,
562
- border: t.border,
563
- fg: t.fg,
564
- placeholder: t.placeholder
565
- };
566
- }
567
- /** @public */
568
- const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
569
- "transparent",
570
- "default",
571
- "neutral",
572
- "primary",
573
- "suggest",
574
- "positive",
575
- "caution",
576
- "critical"
577
- ], THEME_COLOR_STATE_TONES = [
578
- "default",
579
- "neutral",
580
- "primary",
581
- "suggest",
582
- "positive",
583
- "caution",
584
- "critical"
585
- ], THEME_COLOR_STATES = [
586
- "enabled",
587
- "hovered",
588
- "pressed",
589
- "selected",
590
- "disabled"
591
- ], THEME_COLOR_BUTTON_MODES = [
592
- "default",
593
- "ghost",
594
- "bleed"
595
- ], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = [
596
- "enabled",
597
- "hovered",
598
- "readOnly",
599
- "disabled"
600
- ], THEME_COLOR_AVATAR_COLORS = _sanity_color.COLOR_HUES;
601
- /** @internal */
602
- function isColorBlendModeValue(str) {
603
- return THEME_COLOR_BLEND_MODES.includes(str);
604
- }
605
- /** @internal */
606
- function isColorHueKey(str) {
607
- return _sanity_color.COLOR_HUES.includes(str);
608
- }
609
- /** @internal */
610
- function isColorTintKey(str) {
611
- return _sanity_color.COLOR_TINTS.includes(str);
612
- }
613
- /** @internal */
614
- function isColorButtonMode(str) {
615
- return THEME_COLOR_BUTTON_MODES.includes(str);
616
- }
617
- /** @public */
618
- const COLOR_CONFIG_STATE_KEYS = [
619
- "_hue",
620
- "bg",
621
- "fg",
622
- "border",
623
- "focusRing",
624
- "muted/fg",
625
- "accent/fg",
626
- "link/fg",
627
- "code/bg",
628
- "code/fg",
629
- "skeleton/from",
630
- "skeleton/to",
631
- "status/dot",
632
- "status/icon"
633
- ], COLOR_CONFIG_CARD_KEYS = [
634
- ...COLOR_CONFIG_STATE_KEYS,
635
- "_hue",
636
- "bg",
637
- "fg",
638
- "border",
639
- "focusRing",
640
- "shadow/outline",
641
- "shadow/umbra",
642
- "shadow/penumbra",
643
- "shadow/ambient"
644
- ], 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];
645
- /** @internal */
646
- function isColorConfigBaseTone(str) {
647
- return COLOR_CONFIG_CARD_TONES.includes(str);
648
- }
649
- /** @internal */
650
- function isColorConfigBaseKey(str) {
651
- return COLOR_CONFIG_CARD_KEYS.includes(str);
652
- }
653
- /** @internal */
654
- function isColorConfigStateKey(str) {
655
- return COLOR_CONFIG_STATE_KEYS.includes(str);
656
- }
657
- /** @internal */
658
- function isColorConfigStateTone(str) {
659
- return COLOR_CONFIG_STATE_TONES.includes(str);
660
- }
661
- /** @internal */
662
- function isColorConfigBlendKey(str) {
663
- return COLOR_CONFIG_BLEND_KEYS.includes(str);
664
- }
665
- /** @internal */
666
- function isColorTokenValue(str) {
667
- return parseTokenValue(str)?.type === "color" || parseTokenValue(str)?.type === "hue";
668
- }
669
- /** @internal */
670
- function isColorValue(str) {
671
- return str === "black" || str === "white";
672
- }
673
- /** @internal */
674
- function isColorOpacityValue(str) {
675
- return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
676
- }
677
- function isColorMixPercentValue(str) {
678
- return /^\d+%$/.test(str);
679
- }
680
- /** @internal */
681
- function parseTokenValue(str) {
682
- let segments = str.split("/"), nextSegment = segments.shift() || "", [segment0, segment0mix] = nextSegment.split(" ");
683
- if (isColorTintKey(segment0)) {
684
- let tint = segment0, segment1 = segments.shift() || "";
685
- return isColorMixPercentValue(segment0mix) ? {
686
- type: "color",
687
- tint,
688
- mix: Number(segment0mix.slice(0, -1)) / 100
689
- } : isColorOpacityValue(segment1) ? {
690
- type: "color",
691
- tint,
692
- opacity: Number(segment1)
693
- } : {
694
- type: "color",
695
- tint
696
- };
697
- }
698
- if (isColorValue(segment0)) {
699
- let key = segment0, segment1 = segments.shift() || "";
700
- return isColorMixPercentValue(segment0mix) ? {
701
- type: "color",
702
- key,
703
- mix: Number(segment0mix.slice(0, -1)) / 100
704
- } : isColorOpacityValue(segment1) ? {
705
- type: "color",
706
- key,
707
- opacity: Number(segment1)
708
- } : {
709
- type: "color",
710
- key
711
- };
712
- }
713
- if (isColorHueKey(segment0)) {
714
- let hue = segment0;
715
- nextSegment = segments.shift() || "";
716
- let [segment1, segment1mix] = nextSegment.split(" ");
717
- if (isColorTintKey(segment1)) {
718
- let tint = segment1, segment2 = segments.shift() || "";
719
- return isColorMixPercentValue(segment1mix) ? {
720
- type: "color",
721
- hue,
722
- tint,
723
- mix: Number(segment1mix.slice(0, -1)) / 100
724
- } : isColorOpacityValue(segment2) ? {
725
- type: "color",
726
- hue,
727
- tint,
728
- opacity: Number(segment2)
729
- } : {
730
- type: "color",
731
- hue,
732
- tint
733
- };
734
- }
735
- return {
736
- type: "hue",
737
- value: hue
738
- };
739
- }
740
- if (isColorBlendModeValue(segment0)) return {
741
- type: "blendMode",
742
- value: segment0
743
- };
744
- }
745
- function compileColorTokenValue(node) {
746
- let key = "";
747
- return key = node.key === "black" || node.key === "white" ? node.key : `${node.hue}/${node.tint}`, node.mix === void 0 ? (node.opacity !== void 0 && (key += `/${node.opacity}`), key) : `${key} ${node.mix * 100}%`;
748
- }
749
- const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
750
- function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
751
- let { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
752
- if (!node || node.type !== "color") throw Error(`Invalid color token: ${value[0]}`);
753
- return compileColorTokenValue({
754
- ...node,
755
- hue: node.hue || hue
756
- });
757
- }
758
- const defaultColorTokens = {
759
- base: {
760
- "*": {
761
- _blend: ["multiply", "screen"],
762
- accent: { fg: ["purple/600", "purple/400"] },
763
- avatar: { "*": {
764
- _blend: ["screen", "multiply"],
765
- bg: ["500", "400"],
766
- fg: ["white", "black"]
767
- } },
768
- backdrop: ["gray/200/0.5", "black/0.5"],
769
- badge: {
770
- "*": {
771
- bg: ["100", "900"],
772
- fg: ["600", "400"],
773
- icon: ["500", "500"],
774
- dot: ["500", "500"]
775
- },
776
- positive: {
777
- bg: ["200 50%", "900"],
778
- fg: ["600", "500"]
779
- },
780
- caution: {
781
- bg: ["200 50%", "900"],
782
- fg: ["600", "500"]
783
- }
784
- },
785
- bg: ["50", "950"],
786
- border: ["200", "800"],
787
- code: {
788
- bg: ["50", "950"],
789
- fg: ["600", "400"]
790
- },
791
- fg: ["800", "200"],
792
- focusRing: ["blue/500", "blue/500"],
793
- icon: ["600", "400"],
794
- kbd: {
795
- bg: ["white", "black"],
796
- fg: ["600", "400"],
797
- border: ["200", "800"]
798
- },
799
- link: { fg: ["blue/600", "blue/300"] },
800
- muted: {
801
- bg: ["50", "950"],
802
- fg: ["700 75%", "300 75%"]
803
- },
804
- shadow: {
805
- outline: ["500/0.3", "500/0.4"],
806
- umbra: ["gray/500/0.1", "black/0.2"],
807
- penumbra: ["gray/500/0.07", "black/0.14"],
808
- ambient: ["gray/500/0.06", "black/0.12"]
809
- },
810
- skeleton: {
811
- from: ["100", "900"],
812
- to: ["100 50%", "900 50%"]
813
- }
814
- },
815
- transparent: { bg: ["50", "black"] },
816
- default: {
817
- bg: ["white", "950"],
818
- fg: ["800", "200"],
819
- muted: { fg: ["600", "400"] }
820
- },
821
- primary: { _hue: "blue" },
822
- suggest: { _hue: "purple" },
823
- positive: {
824
- _hue: "green",
825
- shadow: { outline: ["500/0.4", "500/0.4"] }
826
- },
827
- caution: {
828
- _hue: "yellow",
829
- shadow: { outline: ["600/0.3", "500/0.4"] }
830
- },
831
- critical: { _hue: "red" }
832
- },
833
- button: {
834
- default: {
835
- "*": {
836
- "*": {
837
- _blend: ["screen", "multiply"],
838
- accent: { fg: ["purple/300", "purple/700"] },
839
- avatar: { "*": {
840
- _blend: ["screen", "multiply"],
841
- bg: ["500", "400"],
842
- fg: ["white", "black"]
843
- } },
844
- badge: { "*": {
845
- bg: ["900", "100"],
846
- fg: ["400", "600"],
847
- dot: ["500", "500"],
848
- icon: ["500", "500"]
849
- } },
850
- bg: ["500", "400"],
851
- border: ["500/0", "400/0"],
852
- code: {
853
- bg: ["500 20%", "400 20%"],
854
- fg: ["200", "600"]
855
- },
856
- fg: ["white", "black"],
857
- icon: ["100 70%", "900 70%"],
858
- kbd: {
859
- bg: ["black", "white"],
860
- fg: ["200", "600"],
861
- border: ["800", "200"]
862
- },
863
- link: { fg: ["blue/200", "blue/600"] },
864
- muted: {
865
- bg: ["950", "50"],
866
- fg: ["100 70%", "900 70%"]
867
- },
868
- skeleton: {
869
- from: ["900", "100"],
870
- to: ["900 50%", "100 50%"]
871
- }
872
- },
873
- hovered: {
874
- bg: ["600", "300"],
875
- border: ["700/0", "300/0"]
876
- },
877
- pressed: { bg: ["700", "300"] },
878
- selected: { bg: ["700", "300"] },
879
- disabled: {
880
- _hue: "gray",
881
- accent: { fg: ["100 70%", "900 70%"] },
882
- avatar: { "*": {
883
- _blend: ["screen", "multiply"],
884
- bg: ["gray/500", "gray/400"],
885
- fg: ["white", "black"]
886
- } },
887
- badge: { "*": {
888
- bg: ["gray/700", "gray/300"],
889
- fg: ["white", "black"],
890
- dot: ["white", "black"],
891
- icon: ["white", "black"]
892
- } },
893
- bg: ["300", "600"],
894
- code: {
895
- bg: ["950", "50"],
896
- fg: ["300", "600"]
897
- },
898
- fg: ["300", "600"],
899
- muted: {
900
- bg: ["950", "50"],
901
- fg: ["300", "600"]
902
- },
903
- kbd: {
904
- bg: ["black", "white"],
905
- fg: ["white", "black"],
906
- border: ["700", "300"]
907
- },
908
- link: { fg: ["100 70%", "900 70%"] }
909
- }
910
- },
911
- default: {
912
- "*": {
913
- avatar: { "*": {
914
- _blend: ["screen", "multiply"],
915
- bg: ["500", "400"],
916
- fg: ["white", "black"]
917
- } },
918
- bg: ["800", "200"],
919
- muted: {
920
- bg: ["950", "50"],
921
- fg: ["400", "600"]
922
- }
923
- },
924
- hovered: { bg: ["900", "100"] },
925
- pressed: { bg: ["black", "white"] },
926
- selected: { bg: ["black", "white"] }
927
- }
928
- },
929
- ghost: {
930
- "*": {
931
- "*": {
932
- _blend: ["multiply", "screen"],
933
- accent: { fg: ["purple/700 60%", "purple/300 70%"] },
934
- avatar: { "*": {
935
- _blend: ["screen", "multiply"],
936
- bg: ["500", "400"],
937
- fg: ["white", "black"]
938
- } },
939
- badge: { "*": {
940
- bg: ["100", "900"],
941
- fg: ["600", "400"],
942
- dot: ["500", "500"],
943
- icon: ["500", "500"]
944
- } },
945
- bg: ["50", "950"],
946
- border: ["100", "900"],
947
- code: {
948
- bg: ["500 10%", "400 10%"],
949
- fg: ["700 60%", "400 60%"]
950
- },
951
- fg: ["600", "400"],
952
- icon: ["700 60%", "300 60%"],
953
- kbd: {
954
- bg: ["white", "black"],
955
- fg: ["600", "400"],
956
- border: ["200", "800"]
957
- },
958
- link: { fg: ["blue/700 60%", "blue/300 60%"] },
959
- muted: {
960
- bg: ["100", "950"],
961
- fg: ["700 60%", "300 60%"]
962
- },
963
- skeleton: {
964
- from: ["100", "900"],
965
- to: ["100 50%", "900 50%"]
966
- }
967
- },
968
- hovered: {
969
- bg: ["100", "900"],
970
- fg: ["700", "300"]
971
- },
972
- pressed: {
973
- bg: ["200", "800"],
974
- fg: ["800", "200"]
975
- },
976
- selected: {
977
- bg: ["200", "800"],
978
- fg: ["800", "200"]
979
- },
980
- disabled: {
981
- _hue: "gray",
982
- accent: { fg: ["200", "800"] },
983
- avatar: { "*": {
984
- _blend: ["screen", "multiply"],
985
- bg: ["gray/100", "gray/900"],
986
- fg: ["white", "black"]
987
- } },
988
- badge: { "*": {
989
- _hue: "gray",
990
- bg: ["50", "950"],
991
- fg: ["gray/200", "gray/800"],
992
- dot: ["gray/200", "gray/800"],
993
- icon: ["gray/200", "gray/800"]
994
- } },
995
- border: ["100", "900"],
996
- code: {
997
- bg: ["50", "950"],
998
- fg: ["200", "800"]
999
- },
1000
- fg: ["400", "600"],
1001
- icon: ["300", "700"],
1002
- muted: { fg: ["300", "700"] },
1003
- kbd: {
1004
- bg: ["white", "black"],
1005
- fg: ["200", "800"],
1006
- border: ["100", "900"]
1007
- },
1008
- link: { fg: ["200", "800"] }
1009
- }
1010
- },
1011
- positive: { "*": { border: ["600 20%", "800"] } },
1012
- caution: { "*": { border: ["600 20%", "800"] } }
1013
- },
1014
- bleed: { "*": {
1015
- "*": {
1016
- _blend: ["multiply", "screen"],
1017
- accent: { fg: ["purple/700 70%", "purple/300 70%"] },
1018
- avatar: { "*": {
1019
- _blend: ["screen", "multiply"],
1020
- bg: ["500", "400"],
1021
- fg: ["white", "black"]
1022
- } },
1023
- badge: { "*": {
1024
- bg: ["100", "900"],
1025
- fg: ["600", "400"],
1026
- dot: ["500", "500"],
1027
- icon: ["500", "500"]
1028
- } },
1029
- bg: ["white", "black"],
1030
- border: ["white/0", "black/0"],
1031
- code: {
1032
- bg: ["50", "950"],
1033
- fg: ["700 75%", "300 75%"]
1034
- },
1035
- fg: ["700", "300"],
1036
- icon: ["700 75%", "300 75%"],
1037
- kbd: {
1038
- bg: ["white", "black"],
1039
- fg: ["700", "300"],
1040
- border: ["200", "800"]
1041
- },
1042
- link: { fg: ["blue/700 70%", "blue/300 70%"] },
1043
- muted: {
1044
- bg: ["100", "950"],
1045
- fg: ["700 75%", "300 75%"]
1046
- },
1047
- skeleton: {
1048
- from: ["100", "900"],
1049
- to: ["100 50%", "900 50%"]
1050
- }
1051
- },
1052
- hovered: {
1053
- bg: ["50", "900"],
1054
- fg: ["800", "200"],
1055
- icon: ["800 70%", "300 70%"]
1056
- },
1057
- pressed: {
1058
- bg: ["100", "800"],
1059
- fg: ["800", "200"],
1060
- icon: ["800 70%", "200 70%"]
1061
- },
1062
- selected: {
1063
- bg: ["100", "900"],
1064
- fg: ["800", "200"],
1065
- icon: ["800 60%", "200 60%"]
1066
- },
1067
- disabled: {
1068
- _hue: "gray",
1069
- accent: { fg: ["200", "800"] },
1070
- avatar: { "*": {
1071
- _blend: ["screen", "multiply"],
1072
- bg: ["gray/100", "gray/900"],
1073
- fg: ["white", "black"]
1074
- } },
1075
- badge: { "*": {
1076
- _hue: "gray",
1077
- bg: ["50", "950"],
1078
- fg: ["gray/200", "gray/800"],
1079
- dot: ["gray/200", "gray/800"],
1080
- icon: ["gray/200", "gray/800"]
1081
- } },
1082
- code: {
1083
- bg: ["50", "950"],
1084
- fg: ["200", "800"]
1085
- },
1086
- fg: ["400", "600"],
1087
- icon: ["300", "700"],
1088
- muted: { fg: ["400", "600"] },
1089
- kbd: {
1090
- bg: ["white", "black"],
1091
- fg: ["200", "800"],
1092
- border: ["100", "900"]
1093
- },
1094
- link: { fg: ["200", "800"] }
1095
- }
1096
- } }
1097
- },
1098
- input: {
1099
- "*": {
1100
- "*": {
1101
- _blend: ["multiply", "screen"],
1102
- bg: ["white", "black"],
1103
- border: ["200", "700"],
1104
- fg: ["black", "200"],
1105
- muted: { bg: ["50", "950"] },
1106
- placeholder: ["400", "600"]
1107
- },
1108
- hovered: { border: ["300", "700"] },
1109
- readOnly: {
1110
- bg: ["50", "950"],
1111
- border: ["200", "800"],
1112
- fg: ["800", "200"]
1113
- },
1114
- disabled: {
1115
- bg: ["50", "950"],
1116
- fg: ["400", "600"],
1117
- border: ["100", "900"],
1118
- placeholder: ["200", "800 50%"]
1119
- }
1120
- },
1121
- invalid: { "*": {
1122
- _hue: "red",
1123
- bg: ["100", "950"]
1124
- } }
1125
- },
1126
- selectable: {
1127
- "*": {
1128
- "*": {
1129
- _blend: ["multiply", "screen"],
1130
- accent: { fg: ["purple/700 70%", "purple/300 70%"] },
1131
- avatar: { "*": {
1132
- _blend: ["screen", "multiply"],
1133
- bg: ["500", "400"],
1134
- fg: ["white", "black"]
1135
- } },
1136
- badge: { "*": {
1137
- bg: ["100", "900"],
1138
- fg: ["600", "400"],
1139
- dot: ["500", "500"],
1140
- icon: ["500", "500"]
1141
- } },
1142
- bg: ["white", "black"],
1143
- border: ["200", "800"],
1144
- code: {
1145
- bg: ["50", "950"],
1146
- fg: ["600", "400"]
1147
- },
1148
- fg: ["700", "300"],
1149
- icon: ["700 75%", "300 75%"],
1150
- kbd: {
1151
- bg: ["white", "black"],
1152
- fg: ["600", "400"],
1153
- border: ["200", "800"]
1154
- },
1155
- link: { fg: ["blue/700 70%", "blue/300 70%"] },
1156
- muted: {
1157
- bg: ["50", "950"],
1158
- fg: ["700 75%", "300 75%"]
1159
- },
1160
- skeleton: {
1161
- from: ["100", "900"],
1162
- to: ["100 50%", "900 50%"]
1163
- }
1164
- },
1165
- hovered: { bg: ["50", "950"] },
1166
- pressed: { bg: ["100", "900"] },
1167
- selected: {
1168
- _blend: ["screen", "multiply"],
1169
- accent: { fg: ["purple/300", "purple/700"] },
1170
- avatar: { "*": {
1171
- _blend: ["multiply", "screen"],
1172
- bg: ["white", "black"],
1173
- fg: ["black", "white"]
1174
- } },
1175
- badge: { "*": {
1176
- bg: ["900", "100"],
1177
- fg: ["400", "600"],
1178
- dot: ["500", "500"],
1179
- icon: ["500", "500"]
1180
- } },
1181
- bg: ["500", "400"],
1182
- border: ["500 20%", "400 20%"],
1183
- code: {
1184
- bg: ["500 20%", "400 20%"],
1185
- fg: ["200", "600"]
1186
- },
1187
- fg: ["white", "black"],
1188
- icon: ["100 70%", "900 70%"],
1189
- kbd: {
1190
- bg: ["black", "white"],
1191
- fg: ["200", "600"],
1192
- border: ["800", "200"]
1193
- },
1194
- link: { fg: ["blue/200", "blue/600"] },
1195
- muted: {
1196
- bg: ["500 10%", "400 10%"],
1197
- fg: ["100 70%", "900 70%"]
1198
- },
1199
- skeleton: {
1200
- from: ["900", "100"],
1201
- to: ["900 50%", "100 50%"]
1202
- }
1203
- },
1204
- disabled: {
1205
- _hue: "gray",
1206
- accent: { fg: ["200", "800"] },
1207
- avatar: { "*": {
1208
- _blend: ["screen", "multiply"],
1209
- bg: ["gray/100", "gray/900"],
1210
- fg: ["white", "black"]
1211
- } },
1212
- badge: { "*": {
1213
- _hue: "gray",
1214
- bg: ["50", "950"],
1215
- fg: ["gray/200", "gray/800"],
1216
- dot: ["gray/200", "gray/800"],
1217
- icon: ["gray/200", "gray/800"]
1218
- } },
1219
- border: ["100", "900"],
1220
- code: {
1221
- bg: ["50", "950"],
1222
- fg: ["200", "800"]
1223
- },
1224
- fg: ["200", "800"],
1225
- icon: ["200", "800"],
1226
- kbd: {
1227
- bg: ["white", "black"],
1228
- fg: ["200", "800"],
1229
- border: ["100", "900"]
1230
- },
1231
- link: { fg: ["200", "800"] },
1232
- muted: {
1233
- bg: ["50 50%", "950 50%"],
1234
- fg: ["200", "800"]
1235
- }
1236
- }
1237
- },
1238
- default: { selected: { _hue: "blue" } },
1239
- critical: { disabled: { bg: ["50 50%", "950 50%"] } }
1240
- },
1241
- syntax: {
1242
- atrule: ["purple/600", "purple/400"],
1243
- attrName: ["green/600", "green/400"],
1244
- attrValue: ["yellow/600", "yellow/400"],
1245
- attribute: ["yellow/600", "yellow/400"],
1246
- boolean: ["purple/600", "purple/400"],
1247
- builtin: ["purple/600", "purple/400"],
1248
- cdata: ["yellow/600", "yellow/400"],
1249
- char: ["yellow/600", "yellow/400"],
1250
- class: ["orange/600", "orange/400"],
1251
- className: ["cyan/600", "cyan/400"],
1252
- comment: ["gray/400", "gray/600"],
1253
- constant: ["purple/600", "purple/400"],
1254
- deleted: ["red/600", "red/400"],
1255
- entity: ["red/600", "red/400"],
1256
- function: ["green/600", "green/400"],
1257
- hexcode: ["blue/600", "blue/400"],
1258
- id: ["purple/600", "purple/400"],
1259
- important: ["purple/600", "purple/400"],
1260
- inserted: ["yellow/600", "yellow/400"],
1261
- keyword: ["magenta/600", "magenta/400"],
1262
- number: ["purple/600", "purple/400"],
1263
- operator: ["magenta/600", "magenta/400"],
1264
- property: ["blue/600", "blue/400"],
1265
- pseudoClass: ["yellow/600", "yellow/400"],
1266
- pseudoElement: ["yellow/600", "yellow/400"],
1267
- punctuation: ["gray/600", "gray/400"],
1268
- regex: ["blue/600", "blue/400"],
1269
- selector: ["red/600", "red/400"],
1270
- string: ["yellow/600", "yellow/400"],
1271
- symbol: ["purple/600", "purple/400"],
1272
- tag: ["red/600", "red/400"],
1273
- unit: ["orange/600", "orange/400"],
1274
- url: ["red/600", "red/400"],
1275
- variable: ["red/600", "red/400"]
1276
- }
1277
- };
1278
- function isRecord(value) {
1279
- return !!(value && typeof value == "object" && !Array.isArray(value));
1280
- }
1281
- function merge(...records) {
1282
- let _records = records.filter(Boolean);
1283
- return _records.length === 0 ? {} : _records.reduce(_merge, {});
1284
- }
1285
- function _merge(acc, source) {
1286
- for (let key of Object.keys(source)) {
1287
- let prevValue = acc[key], nextValue = source[key];
1288
- isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
1289
- }
1290
- return acc;
1291
- }
1292
- /**
1293
- * Convert a tree of color tokens from a sparse format to a dense format.
1294
- */
1295
- function resolveColorTokens(inputTokens) {
1296
- let tokens = merge(defaultColorTokens, inputTokens);
1297
- return {
1298
- base: resolveBaseColorTokens(tokens),
1299
- button: resolveButtonColorTokens(tokens),
1300
- input: resolveInputColorTokens(tokens),
1301
- selectable: resolveSelectableColorTokens(tokens),
1302
- syntax: tokens.syntax
1303
- };
1304
- }
1305
- function resolveBaseColorTokens(sparseTokens) {
1306
- let tokens = {};
1307
- for (let tone of THEME_COLOR_CARD_TONES) tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
1308
- return tokens;
1309
- }
1310
- function resolveBaseColorTones(inputTokens, tone) {
1311
- let spec = merge(inputTokens?.base?.["*"], inputTokens?.base?.[tone]), hue = spec._hue || inputTokens?.base?.[tone]?._hue || "gray";
1312
- return {
1313
- ...spec,
1314
- _hue: hue,
1315
- avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
1316
- ...acc,
1317
- [hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
1318
- }), {}),
1319
- badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
1320
- ...acc,
1321
- [tone]: {
1322
- _hue: inputTokens?.base?.[tone]?._hue || hue,
1323
- ...spec.badge?.["*"],
1324
- ...spec.badge?.[tone]
1325
- }
1326
- }), {})
1327
- };
1328
- }
1329
- function resolveButtonColorTokens(inputTokens) {
1330
- let tokens = {};
1331
- for (let mode of THEME_COLOR_BUTTON_MODES) tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode);
1332
- return tokens;
1333
- }
1334
- function resolveButtonToneColorTokens(inputTokens, mode) {
1335
- let tokens = {};
1336
- for (let tone of THEME_COLOR_STATE_TONES) tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone);
1337
- return tokens;
1338
- }
1339
- function resolveButtonModeColorTokens(inputTokens, mode, tone) {
1340
- let tokens = {};
1341
- for (let state of THEME_COLOR_STATES) tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state);
1342
- return tokens;
1343
- }
1344
- function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
1345
- let spec = merge(inputTokens?.button?.[mode]?.["*"]?.["*"], inputTokens?.button?.[mode]?.[tone]?.["*"], inputTokens?.button?.[mode]?.["*"]?.[state], inputTokens?.button?.[mode]?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
1346
- return {
1347
- ...spec,
1348
- _hue: hue,
1349
- avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
1350
- ...acc,
1351
- [hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
1352
- }), {}),
1353
- badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
1354
- ...acc,
1355
- [tone]: {
1356
- _hue: inputTokens?.base?.[tone]?._hue || hue,
1357
- ...spec.badge?.["*"],
1358
- ...spec.badge?.[tone]
1359
- }
1360
- }), {})
1361
- };
1362
- }
1363
- function resolveInputColorTokens(inputTokens) {
1364
- let tokens = {};
1365
- for (let mode of THEME_COLOR_INPUT_MODES) tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
1366
- return tokens;
1367
- }
1368
- function resolveInputModeColorTokens(inputTokens, mode) {
1369
- let states = {};
1370
- for (let state of THEME_COLOR_INPUT_STATES) states[state] = resolveInputStateColorTokens(inputTokens, mode, state);
1371
- return states;
1372
- }
1373
- function resolveInputStateColorTokens(inputTokens, mode, state) {
1374
- let spec = merge(inputTokens?.input?.["*"]?.["*"], inputTokens?.input?.[mode]?.["*"], inputTokens?.input?.["*"]?.[state], inputTokens?.input?.[mode]?.[state]), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
1375
- return {
1376
- ...spec,
1377
- _hue: hue
1378
- };
1379
- }
1380
- function resolveSelectableColorTokens(inputTokens) {
1381
- let tokens = {};
1382
- for (let tone of THEME_COLOR_STATE_TONES) tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone);
1383
- return tokens;
1384
- }
1385
- function resolveSelectableToneColorTokens(inputTokens, tone) {
1386
- let states = { _hue: inputTokens?.selectable?.[tone]?._hue || inputTokens?.base?.[tone]?._hue };
1387
- for (let state of THEME_COLOR_STATES) states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state);
1388
- return states;
1389
- }
1390
- function resolveSelectableStateColorTokens(inputTokens, tone, state) {
1391
- let spec = merge(inputTokens?.selectable?.["*"]?.["*"], inputTokens?.selectable?.[tone]?.["*"], inputTokens?.selectable?.["*"]?.[state], inputTokens?.selectable?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
1392
- return {
1393
- ...spec,
1394
- _hue: hue,
1395
- avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
1396
- ...acc,
1397
- [hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
1398
- }), {}),
1399
- badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
1400
- ...acc,
1401
- [tone]: {
1402
- _hue: inputTokens?.base?.[tone]?._hue || hue,
1403
- ...spec.badge?.["*"],
1404
- ...spec.badge?.[tone]
1405
- }
1406
- }), {})
1407
- };
1408
- }
1409
- function buildColorTheme(config) {
1410
- let resolvedConfig = {
1411
- ...config,
1412
- color: resolveColorTokens(config?.color)
1413
- }, schemes = {};
1414
- return defineLazyProperty(schemes, "light", () => buildColorScheme({ scheme: "light" }, resolvedConfig)), defineLazyProperty(schemes, "dark", () => buildColorScheme({ scheme: "dark" }, resolvedConfig)), schemes;
1415
- }
1416
- function buildColorScheme(options, config) {
1417
- let { scheme } = options, colorScheme = {};
1418
- for (let tone of THEME_COLOR_CARD_TONES) defineLazyProperty(colorScheme, tone, () => buildCardColorTheme({
1419
- scheme,
1420
- tone
1421
- }, config));
1422
- return colorScheme;
1423
- }
1424
- function buildCardColorTheme(options, config) {
1425
- let { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = {
1426
- hue: tokens?._hue || "gray",
1427
- scheme
1428
- };
1429
- return {
1430
- _blend: (tokens?._blend || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
1431
- _dark: scheme === "dark",
1432
- accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
1433
- avatar: buildAvatarColorTheme({ scheme }, tokens),
1434
- backdrop: resolveColorTokenValue(context, tokens?.backdrop),
1435
- badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
1436
- bg: resolveColorTokenValue(context, tokens?.bg),
1437
- border: resolveColorTokenValue(context, tokens?.border),
1438
- button: buildButtonColorTheme({
1439
- scheme,
1440
- tone
1441
- }, config),
1442
- code: {
1443
- bg: resolveColorTokenValue(context, tokens?.code?.bg),
1444
- fg: resolveColorTokenValue(context, tokens?.code?.fg)
1445
- },
1446
- fg: resolveColorTokenValue(context, tokens?.fg),
1447
- focusRing: resolveColorTokenValue(context, tokens?.focusRing),
1448
- icon: resolveColorTokenValue(context, tokens?.icon),
1449
- input: buildInputColorTheme({
1450
- scheme,
1451
- tone
1452
- }, config),
1453
- kbd: {
1454
- bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
1455
- fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
1456
- border: resolveColorTokenValue(context, tokens?.kbd?.border)
1457
- },
1458
- link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
1459
- muted: {
1460
- bg: resolveColorTokenValue(context, tokens?.muted?.bg),
1461
- fg: resolveColorTokenValue(context, tokens?.muted?.fg)
1462
- },
1463
- selectable: buildSelectableColorTheme({
1464
- scheme,
1465
- tone
1466
- }, config),
1467
- shadow: buildShadowColorTheme({
1468
- scheme,
1469
- tone
1470
- }, config),
1471
- skeleton: {
1472
- from: resolveColorTokenValue(context, tokens?.skeleton?.from),
1473
- to: resolveColorTokenValue(context, tokens?.skeleton?.to)
1474
- },
1475
- syntax: buildSyntaxColorTheme({ scheme }, config)
1476
- };
1477
- }
1478
- function buildShadowColorTheme(options, config) {
1479
- let { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = {
1480
- hue: tokens?._hue || "gray",
1481
- scheme
1482
- };
1483
- return {
1484
- outline: resolveColorTokenValue(context, tokens?.shadow?.outline),
1485
- umbra: resolveColorTokenValue(context, tokens?.shadow?.umbra),
1486
- penumbra: resolveColorTokenValue(context, tokens?.shadow?.penumbra),
1487
- ambient: resolveColorTokenValue(context, tokens?.shadow?.ambient)
1488
- };
1489
- }
1490
- function buildAvatarColorTheme(options, stateTokens) {
1491
- let { scheme } = options;
1492
- return {
1493
- gray: _buildAvatarColorTheme({
1494
- color: "gray",
1495
- scheme
1496
- }, stateTokens),
1497
- blue: _buildAvatarColorTheme({
1498
- color: "blue",
1499
- scheme
1500
- }, stateTokens),
1501
- purple: _buildAvatarColorTheme({
1502
- color: "purple",
1503
- scheme
1504
- }, stateTokens),
1505
- magenta: _buildAvatarColorTheme({
1506
- color: "magenta",
1507
- scheme
1508
- }, stateTokens),
1509
- red: _buildAvatarColorTheme({
1510
- color: "red",
1511
- scheme
1512
- }, stateTokens),
1513
- orange: _buildAvatarColorTheme({
1514
- color: "orange",
1515
- scheme
1516
- }, stateTokens),
1517
- yellow: _buildAvatarColorTheme({
1518
- color: "yellow",
1519
- scheme
1520
- }, stateTokens),
1521
- green: _buildAvatarColorTheme({
1522
- color: "green",
1523
- scheme
1524
- }, stateTokens),
1525
- cyan: _buildAvatarColorTheme({
1526
- color: "cyan",
1527
- scheme
1528
- }, stateTokens)
1529
- };
1530
- }
1531
- function _buildAvatarColorTheme(options, stateTokens) {
1532
- let { color, scheme } = options, tokens = stateTokens?.avatar?.[color], context = {
1533
- hue: tokens?._hue || "gray",
1534
- scheme
1535
- };
1536
- return {
1537
- _blend: (tokens?._blend || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
1538
- bg: resolveColorTokenValue(context, tokens?.bg),
1539
- fg: resolveColorTokenValue(context, tokens?.fg)
1540
- };
1541
- }
1542
- function buildBadgeColorTheme(tokens, options, config) {
1543
- let { scheme } = options, colorBadge = {};
1544
- for (let tone of THEME_COLOR_STATE_TONES) colorBadge[tone] = _buildBadgeColorTheme(tokens, {
1545
- scheme,
1546
- tone
1547
- }, config);
1548
- return colorBadge;
1549
- }
1550
- function _buildBadgeColorTheme(parentTokens, options, config) {
1551
- let { scheme, tone } = options, tokens = parentTokens?.[tone], context = {
1552
- hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray",
1553
- scheme
1554
- };
1555
- return {
1556
- bg: resolveColorTokenValue(context, tokens?.bg),
1557
- fg: resolveColorTokenValue(context, tokens?.fg),
1558
- dot: resolveColorTokenValue(context, tokens?.dot),
1559
- icon: resolveColorTokenValue(context, tokens?.icon)
1560
- };
1561
- }
1562
- function buildButtonColorTheme(options, config) {
1563
- let { scheme, tone: cardTone } = options, modes = {};
1564
- for (let mode of THEME_COLOR_BUTTON_MODES) modes[mode] = buildButtonTonesColorTheme({
1565
- cardTone,
1566
- scheme,
1567
- mode
1568
- }, config);
1569
- return modes;
1570
- }
1571
- function buildButtonTonesColorTheme(options, config) {
1572
- let { cardTone, mode, scheme } = options, tones = {};
1573
- for (let tone of THEME_COLOR_STATE_TONES) tones[tone] = buildButtonStatesColorTheme({
1574
- cardTone,
1575
- mode,
1576
- scheme,
1577
- tone
1578
- }, config);
1579
- return tones;
1580
- }
1581
- function buildButtonStatesColorTheme(options, config) {
1582
- let { cardTone, mode, scheme, tone } = options, states = {};
1583
- for (let state of THEME_COLOR_STATES) states[state] = buildButtonStateColorTheme({
1584
- cardTone,
1585
- mode,
1586
- tone,
1587
- scheme,
1588
- state
1589
- }, config);
1590
- return states;
1591
- }
1592
- function buildButtonStateColorTheme(options, config) {
1593
- let { cardTone, mode, tone, scheme, state } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
1594
- hue,
1595
- scheme
1596
- };
1597
- return {
1598
- _blend: blendMode[scheme === "light" ? 0 : 1],
1599
- accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
1600
- avatar: buildAvatarColorTheme({ scheme }, tokens),
1601
- badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
1602
- bg: resolveColorTokenValue(context, tokens?.bg),
1603
- border: resolveColorTokenValue(context, tokens?.border),
1604
- code: {
1605
- bg: resolveColorTokenValue(context, tokens?.code?.bg),
1606
- fg: resolveColorTokenValue(context, tokens?.code?.fg)
1607
- },
1608
- fg: resolveColorTokenValue(context, tokens?.fg),
1609
- icon: resolveColorTokenValue(context, tokens?.icon),
1610
- muted: {
1611
- bg: resolveColorTokenValue(context, tokens?.muted?.bg),
1612
- fg: resolveColorTokenValue(context, tokens?.muted?.fg)
1613
- },
1614
- kbd: {
1615
- bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
1616
- fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
1617
- border: resolveColorTokenValue(context, tokens?.kbd?.border)
1618
- },
1619
- link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
1620
- skeleton: {
1621
- from: resolveColorTokenValue(context, tokens?.skeleton?.from),
1622
- to: resolveColorTokenValue(context, tokens?.skeleton?.to)
1623
- }
1624
- };
1625
- }
1626
- function buildInputColorTheme(options, config) {
1627
- let { scheme, tone } = options;
1628
- return {
1629
- default: buildInputStatesColorTheme({
1630
- mode: "default",
1631
- scheme,
1632
- tone
1633
- }, config),
1634
- invalid: buildInputStatesColorTheme({
1635
- mode: "invalid",
1636
- scheme,
1637
- tone
1638
- }, config)
1639
- };
1640
- }
1641
- function buildInputStatesColorTheme(options, config) {
1642
- let { mode, scheme, tone } = options;
1643
- return {
1644
- enabled: buildInputStateColorTheme({
1645
- mode,
1646
- scheme,
1647
- state: "enabled",
1648
- cardTone: tone
1649
- }, config),
1650
- hovered: buildInputStateColorTheme({
1651
- mode,
1652
- scheme,
1653
- state: "hovered",
1654
- cardTone: tone
1655
- }, config),
1656
- readOnly: buildInputStateColorTheme({
1657
- mode,
1658
- scheme,
1659
- state: "readOnly",
1660
- cardTone: tone
1661
- }, config),
1662
- disabled: buildInputStateColorTheme({
1663
- mode,
1664
- scheme,
1665
- state: "disabled",
1666
- cardTone: tone
1667
- }, config)
1668
- };
1669
- }
1670
- function buildInputStateColorTheme(options, config) {
1671
- let { cardTone, mode, scheme, state } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.input?.[mode]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
1672
- hue,
1673
- scheme
1674
- };
1675
- return {
1676
- _blend: blendMode[scheme === "light" ? 0 : 1],
1677
- bg: resolveColorTokenValue(context, tokens?.bg),
1678
- border: resolveColorTokenValue(context, tokens?.border),
1679
- fg: resolveColorTokenValue(context, tokens?.fg),
1680
- muted: { bg: resolveColorTokenValue(context, tokens?.muted?.bg) },
1681
- placeholder: resolveColorTokenValue(context, tokens?.placeholder)
1682
- };
1683
- }
1684
- function buildSelectableColorTheme(options, config) {
1685
- let { scheme, tone: cardTone } = options, tones = {};
1686
- for (let tone of THEME_COLOR_STATE_TONES) tones[tone] = buildSelectableStatesColorTheme({
1687
- cardTone,
1688
- scheme,
1689
- tone
1690
- }, config);
1691
- return tones;
1692
- }
1693
- function buildSelectableStatesColorTheme(options, config) {
1694
- let { cardTone, scheme, tone } = options, states = {};
1695
- for (let state of THEME_COLOR_STATES) states[state] = buildSelectableStateColorTheme({
1696
- cardTone,
1697
- tone,
1698
- scheme,
1699
- state
1700
- }, config);
1701
- return states;
1702
- }
1703
- function buildSelectableStateColorTheme(options, config) {
1704
- let { cardTone, scheme, state, tone } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
1705
- hue,
1706
- scheme
1707
- };
1708
- return {
1709
- _blend: blendMode[scheme === "light" ? 0 : 1],
1710
- accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
1711
- avatar: buildAvatarColorTheme({ scheme }, tokens),
1712
- badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
1713
- bg: resolveColorTokenValue(context, tokens?.bg),
1714
- border: resolveColorTokenValue(context, tokens?.border),
1715
- code: {
1716
- bg: resolveColorTokenValue(context, tokens?.code?.bg),
1717
- fg: resolveColorTokenValue(context, tokens?.code?.fg)
1718
- },
1719
- fg: resolveColorTokenValue(context, tokens?.fg),
1720
- icon: resolveColorTokenValue(context, tokens?.icon),
1721
- muted: {
1722
- bg: resolveColorTokenValue(context, tokens?.muted?.bg),
1723
- fg: resolveColorTokenValue(context, tokens?.muted?.fg)
1724
- },
1725
- kbd: {
1726
- bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
1727
- fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
1728
- border: resolveColorTokenValue(context, tokens?.kbd?.border)
1729
- },
1730
- link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
1731
- skeleton: {
1732
- from: resolveColorTokenValue(context, tokens?.skeleton?.from),
1733
- to: resolveColorTokenValue(context, tokens?.skeleton?.to)
1734
- }
1735
- };
1736
- }
1737
- function buildSyntaxColorTheme(options, config) {
1738
- let { scheme } = options, tokens = config?.color?.syntax, context = {
1739
- hue: "gray",
1740
- scheme
1741
- };
1742
- return {
1743
- atrule: resolveColorTokenValue(context, tokens?.atrule),
1744
- attrName: resolveColorTokenValue(context, tokens?.attrName),
1745
- attrValue: resolveColorTokenValue(context, tokens?.attrValue),
1746
- attribute: resolveColorTokenValue(context, tokens?.attribute),
1747
- boolean: resolveColorTokenValue(context, tokens?.boolean),
1748
- builtin: resolveColorTokenValue(context, tokens?.builtin),
1749
- cdata: resolveColorTokenValue(context, tokens?.cdata),
1750
- char: resolveColorTokenValue(context, tokens?.char),
1751
- class: resolveColorTokenValue(context, tokens?.class),
1752
- className: resolveColorTokenValue(context, tokens?.className),
1753
- comment: resolveColorTokenValue(context, tokens?.comment),
1754
- constant: resolveColorTokenValue(context, tokens?.constant),
1755
- deleted: resolveColorTokenValue(context, tokens?.deleted),
1756
- doctype: resolveColorTokenValue(context, tokens?.doctype),
1757
- entity: resolveColorTokenValue(context, tokens?.entity),
1758
- function: resolveColorTokenValue(context, tokens?.function),
1759
- hexcode: resolveColorTokenValue(context, tokens?.hexcode),
1760
- id: resolveColorTokenValue(context, tokens?.id),
1761
- important: resolveColorTokenValue(context, tokens?.important),
1762
- inserted: resolveColorTokenValue(context, tokens?.inserted),
1763
- keyword: resolveColorTokenValue(context, tokens?.keyword),
1764
- number: resolveColorTokenValue(context, tokens?.number),
1765
- operator: resolveColorTokenValue(context, tokens?.operator),
1766
- prolog: resolveColorTokenValue(context, tokens?.prolog),
1767
- property: resolveColorTokenValue(context, tokens?.property),
1768
- pseudoClass: resolveColorTokenValue(context, tokens?.pseudoClass),
1769
- pseudoElement: resolveColorTokenValue(context, tokens?.pseudoElement),
1770
- punctuation: resolveColorTokenValue(context, tokens?.punctuation),
1771
- regex: resolveColorTokenValue(context, tokens?.regex),
1772
- selector: resolveColorTokenValue(context, tokens?.selector),
1773
- string: resolveColorTokenValue(context, tokens?.string),
1774
- symbol: resolveColorTokenValue(context, tokens?.symbol),
1775
- tag: resolveColorTokenValue(context, tokens?.tag),
1776
- unit: resolveColorTokenValue(context, tokens?.unit),
1777
- url: resolveColorTokenValue(context, tokens?.url),
1778
- variable: resolveColorTokenValue(context, tokens?.variable)
1779
- };
1780
- }
1781
- const defaultColorPalette = _sanity_color.color;
1782
- function mixChannel(b, s, weight) {
1783
- return b + (s - b) * weight;
1784
- }
1785
- /**
1786
- * Apply the \`mix\` blend mode
1787
- * @internal
1788
- */
1789
- function mix(b, s, weight) {
1790
- return {
1791
- r: mixChannel(b.r, s.r, weight),
1792
- g: mixChannel(b.g, s.g, weight),
1793
- b: mixChannel(b.b, s.b, weight)
1794
- };
1795
- }
1796
- function lerp(x, y, a) {
1797
- return x * (1 - a) + y * a;
1798
- }
1799
- function invlerp(x, y, a) {
1800
- return clamp((a - x) / (y - x));
1801
- }
1802
- function clamp(a, min = 0, max = 1) {
1803
- return Math.min(max, Math.max(min, a));
1804
- }
1805
- function range(x1, y1, x2, y2, a) {
1806
- return lerp(x2, y2, invlerp(x1, y1, a));
1807
- }
1808
- function round(value) {
1809
- return Math.round(value);
1810
- }
1811
- /**
1812
- * @internal
1813
- */
1814
- function hexToRgb(hex) {
1815
- if (hex.length === 4) {
1816
- let hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
1817
- return {
1818
- r: parseInt(hexR + hexR, 16),
1819
- g: parseInt(hexG + hexG, 16),
1820
- b: parseInt(hexB + hexB, 16)
1821
- };
1822
- }
1823
- return {
1824
- r: parseInt(hex.slice(1, 3), 16),
1825
- g: parseInt(hex.slice(3, 5), 16),
1826
- b: parseInt(hex.slice(5, 7), 16)
1827
- };
1828
- }
1829
- /**
1830
- * @internal
1831
- */
1832
- function rgbaToRGBA(rgba) {
1833
- let values = rgba.replace(/rgba\(|\)/g, "").split(",");
1834
- return {
1835
- r: parseInt(values[0]),
1836
- g: parseInt(values[1]),
1837
- b: parseInt(values[2]),
1838
- a: parseFloat(values[3])
1839
- };
1840
- }
1841
- /**
1842
- * @internal
1843
- */
1844
- function rgbToHex(color) {
1845
- let r = round(clamp(Math.round(color.r), 0, 255)), g = round(clamp(Math.round(color.g), 0, 255)), b = round(clamp(Math.round(color.b), 0, 255));
1846
- return "a" in color ? `rgba(${r},${g},${b},${color.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
1847
- }
1848
- /**
1849
- * @internal
1850
- * @see https://css-tricks.com/converting-color-spaces-in-javascript/
1851
- */
1852
- function rgbToHsl({ r, g, b }) {
1853
- r /= 255, g /= 255, b /= 255;
1854
- let cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0;
1855
- return h = delta == 0 ? 0 : cmax == r ? (g - b) / delta % 6 : cmax == g ? (b - r) / delta + 2 : (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), {
1856
- h,
1857
- s,
1858
- l
1859
- };
1860
- }
1861
- /**
1862
- * @internal
1863
- */
1864
- function hslToRgb(hsl) {
1865
- let 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, r = 0, g = 0, b = 0;
1866
- 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), {
1867
- r: Math.round((r + m) * 255),
1868
- g: Math.round((g + m) * 255),
1869
- b: Math.round((b + m) * 255)
1870
- };
1871
- }
1872
- const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
1873
- function isHexChars(str) {
1874
- for (let c of str) if ("0123456789ABCDEFabcdef".indexOf(c) === -1) return !1;
1875
- return !0;
1876
- }
1877
- function isHex(str) {
1878
- return str[0] !== "#" || str.length !== 4 && str.length !== 7 ? !1 : isHexChars(str.slice(1));
1879
- }
1880
- function parseHsl(str) {
1881
- let res = HSL_RE.exec(str);
1882
- if (!res) throw Error(`parseHsl: string is not a HSL color: "${str}"`);
1883
- return {
1884
- h: parseInt(res[1]),
1885
- s: parseFloat(res[3]),
1886
- l: parseFloat(res[5])
1887
- };
1888
- }
1889
- /**
1890
- * @internal
1891
- */
1892
- function parseColor(color) {
1893
- if (!color) return {
1894
- r: 0,
1895
- g: 0,
1896
- b: 0
1897
- };
1898
- if (typeof color != "string") throw Error("parseColor: expected a string");
1899
- if (isHex(color)) return hexToRgb(color);
1900
- if (color.startsWith("hsl(")) return hslToRgb(parseHsl(color));
1901
- if (color.startsWith("rgba(")) return rgbaToRGBA(color);
1902
- throw Error(`parseColor: unexpected color format: "${color}"`);
1903
- }
1904
- /**
1905
- * @internal
1906
- */
1907
- function rgba(color, a) {
1908
- let rgb = parseColor(color);
1909
- return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
1910
- }
1911
- function multiplyChannel(b, s) {
1912
- return b * s;
1913
- }
1914
- /**
1915
- * Apply the \`multiply\` blend mode
1916
- * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
1917
- * @internal
1918
- */
1919
- function multiply(b, s) {
1920
- return {
1921
- r: multiplyChannel(b.r / 255, s.r / 255) * 255,
1922
- g: multiplyChannel(b.g / 255, s.g / 255) * 255,
1923
- b: multiplyChannel(b.b / 255, s.b / 255) * 255
1924
- };
1925
- }
1926
- function screenChannel(b, s) {
1927
- return b + s - b * s;
1928
- }
1929
- /**
1930
- * Apply the \`screen\` blend mode
1931
- * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
1932
- * @internal
1933
- */
1934
- function screen(b, s) {
1935
- return {
1936
- r: screenChannel(b.r / 255, s.r / 255) * 255,
1937
- g: screenChannel(b.g / 255, s.g / 255) * 255,
1938
- b: screenChannel(b.b / 255, s.b / 255) * 255
1939
- };
1940
- }
1941
- const RGB_RANGE = [0, 255];
1942
- function mixThemeColor(value, options) {
1943
- let { blendMode } = options, color = parseColor(value), black = parseColor(options.black), white = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white : black, paletteRange = {
1944
- r: [black.r, white.r],
1945
- g: [black.g, white.g],
1946
- b: [black.b, white.b]
1947
- }, convertedBgColor = {
1948
- r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
1949
- g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
1950
- b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE)
1951
- }, convertedColor = {
1952
- r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
1953
- g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
1954
- b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE)
1955
- }, resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor);
1956
- return rgbToHex({
1957
- r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
1958
- g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
1959
- b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b)
1960
- });
1961
- }
1962
- function renderColorValue(str, options) {
1963
- let { bg, blendMode, colorPalette } = options;
1964
- if (bg === "white") throw Error("Cannot blend with white background");
1965
- let node = parseTokenValue(str);
1966
- if (!node || node.type !== "color") throw Error(`Invalid color token value: ${str}`);
1967
- let hex = "";
1968
- 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) throw Error(`Invalid color token value: ${str}`);
1969
- let hexBeforeMix = hex, mixOptions = {
1970
- blendMode,
1971
- bg,
1972
- black: renderColorHex(colorPalette.black),
1973
- white: renderColorHex(colorPalette.white)
1974
- };
1975
- try {
1976
- hex = mixThemeColor(hex, mixOptions), bg && node.mix !== void 0 && (hex = rgbToHex(mix(hexToRgb(bg), hexToRgb(hex), node.mix)));
1977
- } catch (err) {
1978
- throw console.warn("could not blend", hex, mixOptions), err;
1979
- }
1980
- return hex === "#aN" && (console.warn(`invalid color token value: ${str}`), hex = hexBeforeMix), node.opacity !== void 0 && (hex = rgba(hex, node.opacity)), hex;
1981
- }
1982
- function renderColorHex(color) {
1983
- return typeof color == "string" ? color : color.hex;
1984
- }
1985
- function renderThemeColorSchemes(value, config) {
1986
- let colorPalette = config?.palette ?? defaultColorPalette, schemes = {};
1987
- return defineLazyProperty(schemes, "light", () => renderThemeColorScheme(colorPalette, value.light)), defineLazyProperty(schemes, "dark", () => renderThemeColorScheme(colorPalette, value.dark)), schemes;
1988
- }
1989
- function renderThemeColorScheme(colorPalette, value) {
1990
- let renderedDefaultTone = renderThemeColor(value.default, { colorPalette }), bg = renderedDefaultTone.bg;
1991
- if (bg === "white") throw Error("Cannot blend with white background");
1992
- let scheme = { default: renderedDefaultTone };
1993
- for (let tone of THEME_COLOR_CARD_TONES) {
1994
- if (tone === "default") continue;
1995
- let opts = tone === "transparent" ? { colorPalette } : {
1996
- bg,
1997
- colorPalette
1998
- };
1999
- defineLazyProperty(scheme, tone, () => renderThemeColor(value[tone], opts));
2000
- }
2001
- return scheme;
2002
- }
2003
- function renderThemeColor(value, options) {
2004
- let { colorPalette, bg } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, {
2005
- colorPalette,
2006
- bg,
2007
- blendMode
2008
- }), colorOptions = {
2009
- colorPalette,
2010
- bg: baseBg,
2011
- blendMode
2012
- }, button = renderThemeColorButton(value.button, {
2013
- baseBg,
2014
- blendMode,
2015
- colorPalette
2016
- }), selectable = renderThemeColorSelectable(value.selectable, {
2017
- colorPalette,
2018
- baseBg,
2019
- blendMode
2020
- }), shadow = {
2021
- outline: renderColorValue(value.shadow.outline, colorOptions),
2022
- umbra: renderColorValue(value.shadow.umbra, {
2023
- ...colorOptions,
2024
- bg: void 0,
2025
- colorPalette: {
2026
- ...colorPalette,
2027
- black: "#000000"
2028
- }
2029
- }),
2030
- penumbra: renderColorValue(value.shadow.penumbra, {
2031
- ...colorOptions,
2032
- bg: void 0,
2033
- colorPalette: {
2034
- ...colorPalette,
2035
- black: "#000000"
2036
- }
2037
- }),
2038
- ambient: renderColorValue(value.shadow.ambient, {
2039
- ...colorOptions,
2040
- bg: void 0,
2041
- colorPalette: {
2042
- ...colorPalette,
2043
- black: "#000000"
2044
- }
2045
- })
2046
- };
2047
- return {
2048
- _blend: blendMode,
2049
- _dark: value._dark,
2050
- accent: { fg: renderColorValue(value.accent.fg, colorOptions) },
2051
- avatar: renderThemeColorAvatar(value.avatar, {
2052
- baseBg,
2053
- colorPalette,
2054
- blendMode
2055
- }),
2056
- backdrop: renderColorValue(value.backdrop, colorOptions),
2057
- badge: renderThemeColorBadge(value.badge, {
2058
- baseBg,
2059
- colorPalette,
2060
- blendMode
2061
- }),
2062
- bg: baseBg,
2063
- border: renderColorValue(value.border, colorOptions),
2064
- button,
2065
- code: {
2066
- bg: renderColorValue(value.code.bg, colorOptions),
2067
- fg: renderColorValue(value.code.fg, colorOptions)
2068
- },
2069
- fg: renderColorValue(value.fg, colorOptions),
2070
- focusRing: renderColorValue(value.focusRing, colorOptions),
2071
- icon: renderColorValue(value.icon, colorOptions),
2072
- input: renderThemeColorInput(value.input, {
2073
- baseBg,
2074
- colorPalette,
2075
- blendMode
2076
- }),
2077
- kbd: renderThemeColorKBD(value.kbd, {
2078
- baseBg,
2079
- colorPalette,
2080
- blendMode
2081
- }),
2082
- link: { fg: renderColorValue(value.link.fg, colorOptions) },
2083
- muted: {
2084
- bg: renderColorValue(value.muted.bg, colorOptions),
2085
- fg: renderColorValue(value.muted.fg, colorOptions)
2086
- },
2087
- shadow,
2088
- skeleton: {
2089
- from: renderColorValue(value.skeleton.from, colorOptions),
2090
- to: renderColorValue(value.skeleton.to, colorOptions)
2091
- },
2092
- syntax: renderSyntaxColorTheme(value.syntax, {
2093
- baseBg,
2094
- colorPalette,
2095
- blendMode
2096
- }),
2097
- selectable
2098
- };
2099
- }
2100
- function renderThemeColorKBD(value, options) {
2101
- let { baseBg, blendMode, colorPalette } = options, rootOptions = {
2102
- bg: baseBg,
2103
- blendMode,
2104
- colorPalette
2105
- }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
2106
- bg,
2107
- blendMode,
2108
- colorPalette
2109
- };
2110
- return {
2111
- bg,
2112
- fg: renderColorValue(value.fg, colorOptions),
2113
- border: renderColorValue(value.border, colorOptions)
2114
- };
2115
- }
2116
- function renderThemeColorAvatar(value, options) {
2117
- let colorAvatar = {};
2118
- for (let hue of _sanity_color.COLOR_HUES) colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options);
2119
- return colorAvatar;
2120
- }
2121
- function renderThemeColorAvatarColor(value, options) {
2122
- let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
2123
- bg: baseBg,
2124
- blendMode: rootBlendMode,
2125
- colorPalette
2126
- }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
2127
- bg,
2128
- blendMode,
2129
- colorPalette
2130
- };
2131
- return {
2132
- _blend: blendMode,
2133
- bg,
2134
- fg: renderColorValue(value.fg, colorOptions)
2135
- };
2136
- }
2137
- function renderThemeColorBadge(value, options) {
2138
- let colorBadge = {};
2139
- for (let tone of THEME_COLOR_STATE_TONES) colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options);
2140
- return colorBadge;
2141
- }
2142
- function renderThemeColorBadgeColor(value, options) {
2143
- let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
2144
- bg: baseBg,
2145
- blendMode: rootBlendMode,
2146
- colorPalette
2147
- }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
2148
- bg,
2149
- blendMode,
2150
- colorPalette
2151
- };
2152
- return {
2153
- bg,
2154
- dot: renderColorValue(value.dot, colorOptions),
2155
- fg: renderColorValue(value.fg, colorOptions),
2156
- icon: renderColorValue(value.icon, colorOptions)
2157
- };
2158
- }
2159
- function renderThemeColorButton(value, options) {
2160
- return {
2161
- default: renderThemeColorButtonTones(value.default, options),
2162
- ghost: renderThemeColorButtonTones(value.ghost, options),
2163
- bleed: renderThemeColorButtonTones(value.bleed, options)
2164
- };
2165
- }
2166
- function renderThemeColorButtonTones(value, options) {
2167
- let colorButtonMode = {};
2168
- for (let tone of THEME_COLOR_STATE_TONES) colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options);
2169
- return colorButtonMode;
2170
- }
2171
- function renderThemeColorButtonStates(value, options) {
2172
- return {
2173
- enabled: renderThemeColorState(value.enabled, options),
2174
- hovered: renderThemeColorState(value.hovered, options),
2175
- pressed: renderThemeColorState(value.pressed, options),
2176
- selected: renderThemeColorState(value.selected, options),
2177
- disabled: renderThemeColorState(value.disabled, options)
2178
- };
2179
- }
2180
- function renderThemeColorState(value, options) {
2181
- let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
2182
- bg: baseBg,
2183
- blendMode: rootBlendMode,
2184
- colorPalette
2185
- }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
2186
- bg,
2187
- blendMode,
2188
- colorPalette
2189
- };
2190
- return {
2191
- _blend: blendMode,
2192
- accent: { fg: renderColorValue(value.accent.fg, colorOptions) },
2193
- avatar: renderThemeColorAvatar(value.avatar, {
2194
- baseBg: bg,
2195
- colorPalette,
2196
- blendMode
2197
- }),
2198
- badge: renderThemeColorBadge(value.badge, {
2199
- baseBg: bg,
2200
- colorPalette,
2201
- blendMode
2202
- }),
2203
- bg,
2204
- border: renderColorValue(value.border, colorOptions),
2205
- code: {
2206
- bg: renderColorValue(value.code.bg, colorOptions),
2207
- fg: renderColorValue(value.code.fg, colorOptions)
2208
- },
2209
- fg: renderColorValue(value.fg, colorOptions),
2210
- icon: renderColorValue(value.icon, colorOptions),
2211
- link: { fg: renderColorValue(value.link.fg, colorOptions) },
2212
- muted: {
2213
- bg: renderColorValue(value.muted.bg, colorOptions),
2214
- fg: renderColorValue(value.muted.fg, colorOptions)
2215
- },
2216
- kbd: {
2217
- bg: renderColorValue(value.kbd.bg, colorOptions),
2218
- fg: renderColorValue(value.kbd.fg, colorOptions),
2219
- border: renderColorValue(value.kbd.border, colorOptions)
2220
- },
2221
- skeleton: {
2222
- from: renderColorValue(value.skeleton?.from, colorOptions),
2223
- to: renderColorValue(value.skeleton?.to, colorOptions)
2224
- }
2225
- };
2226
- }
2227
- function renderThemeColorInput(value, options) {
2228
- return {
2229
- default: renderInputStatesColorTheme(value.default, options),
2230
- invalid: renderInputStatesColorTheme(value.invalid, options)
2231
- };
2232
- }
2233
- function renderInputStatesColorTheme(value, options) {
2234
- return {
2235
- enabled: renderInputStateColorTheme(value.enabled, options),
2236
- hovered: renderInputStateColorTheme(value.hovered, options),
2237
- readOnly: renderInputStateColorTheme(value.readOnly, options),
2238
- disabled: renderInputStateColorTheme(value.disabled, options)
2239
- };
2240
- }
2241
- function renderInputStateColorTheme(value, options) {
2242
- let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
2243
- colorPalette,
2244
- bg: baseBg,
2245
- blendMode: rootBlendMode
2246
- }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
2247
- colorPalette,
2248
- bg,
2249
- blendMode
2250
- };
2251
- return {
2252
- _blend: blendMode,
2253
- bg,
2254
- border: renderColorValue(value.border, colorOptions),
2255
- fg: renderColorValue(value.fg, colorOptions),
2256
- muted: { bg: renderColorValue(value.muted.bg, colorOptions) },
2257
- placeholder: renderColorValue(value.placeholder, colorOptions)
2258
- };
2259
- }
2260
- function renderThemeColorSelectable(value, options) {
2261
- let colorSelectable = {};
2262
- for (let tone of THEME_COLOR_STATE_TONES) colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options);
2263
- return colorSelectable;
2264
- }
2265
- function renderThemeColorSelectableStates(value, options) {
2266
- return {
2267
- enabled: renderThemeColorState(value.enabled, options),
2268
- hovered: renderThemeColorState(value.hovered, options),
2269
- pressed: renderThemeColorState(value.pressed, options),
2270
- selected: renderThemeColorState(value.selected, options),
2271
- disabled: renderThemeColorState(value.disabled, options)
2272
- };
2273
- }
2274
- function renderSyntaxColorTheme(value, options) {
2275
- let { colorPalette, baseBg, blendMode } = options, colorOptions = {
2276
- colorPalette,
2277
- bg: baseBg,
2278
- blendMode
2279
- };
2280
- return {
2281
- atrule: renderColorValue(value.atrule, colorOptions),
2282
- attrName: renderColorValue(value.attrName, colorOptions),
2283
- attrValue: renderColorValue(value.attrValue, colorOptions),
2284
- attribute: renderColorValue(value.attribute, colorOptions),
2285
- boolean: renderColorValue(value.boolean, colorOptions),
2286
- builtin: renderColorValue(value.builtin, colorOptions),
2287
- cdata: renderColorValue(value.cdata, colorOptions),
2288
- char: renderColorValue(value.char, colorOptions),
2289
- class: renderColorValue(value.class, colorOptions),
2290
- className: renderColorValue(value.className, colorOptions),
2291
- comment: renderColorValue(value.comment, colorOptions),
2292
- constant: renderColorValue(value.constant, colorOptions),
2293
- deleted: renderColorValue(value.deleted, colorOptions),
2294
- doctype: renderColorValue(value.doctype, colorOptions),
2295
- entity: renderColorValue(value.entity, colorOptions),
2296
- function: renderColorValue(value.function, colorOptions),
2297
- hexcode: renderColorValue(value.hexcode, colorOptions),
2298
- id: renderColorValue(value.id, colorOptions),
2299
- important: renderColorValue(value.important, colorOptions),
2300
- inserted: renderColorValue(value.inserted, colorOptions),
2301
- keyword: renderColorValue(value.keyword, colorOptions),
2302
- number: renderColorValue(value.number, colorOptions),
2303
- operator: renderColorValue(value.operator, colorOptions),
2304
- prolog: renderColorValue(value.prolog, colorOptions),
2305
- property: renderColorValue(value.property, colorOptions),
2306
- pseudoClass: renderColorValue(value.pseudoClass, colorOptions),
2307
- pseudoElement: renderColorValue(value.pseudoElement, colorOptions),
2308
- punctuation: renderColorValue(value.punctuation, colorOptions),
2309
- regex: renderColorValue(value.regex, colorOptions),
2310
- selector: renderColorValue(value.selector, colorOptions),
2311
- string: renderColorValue(value.string, colorOptions),
2312
- symbol: renderColorValue(value.symbol, colorOptions),
2313
- tag: renderColorValue(value.tag, colorOptions),
2314
- unit: renderColorValue(value.unit, colorOptions),
2315
- url: renderColorValue(value.url, colorOptions),
2316
- variable: renderColorValue(value.variable, colorOptions)
2317
- };
2318
- }
2319
- /** @internal */
2320
- function buildTheme(config) {
2321
- let colorTheme = buildColorTheme(config);
2322
- return v2_v0({
2323
- _version: 2,
2324
- avatar: config?.avatar ?? defaultThemeConfig.avatar,
2325
- button: config?.button ?? defaultThemeConfig.button,
2326
- card: config?.card ?? defaultThemeConfig.card,
2327
- color: renderThemeColorSchemes(colorTheme, config),
2328
- container: config?.container ?? defaultThemeConfig.container,
2329
- font: config?.font ?? defaultThemeFonts,
2330
- input: config?.input ?? defaultThemeConfig.input,
2331
- layer: config?.layer ?? defaultThemeConfig.layer,
2332
- media: config?.media ?? defaultThemeConfig.media,
2333
- radius: config?.radius ?? defaultThemeConfig.radius,
2334
- shadow: config?.shadow ?? defaultThemeConfig.shadow,
2335
- space: config?.space ?? defaultThemeConfig.space,
2336
- style: config?.style ?? defaultThemeConfig.style
2337
- });
2338
- }
2339
- function createSelectableTones(opts, base, dark, solid, muted) {
2340
- return {
2341
- default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
2342
- primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
2343
- positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
2344
- caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
2345
- critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
2346
- };
2347
- }
2348
- function _createSelectableStates(opts, base, dark, solid, muted, tone) {
2349
- return {
2350
- enabled: opts.selectable({
2351
- base,
2352
- dark,
2353
- solid,
2354
- muted,
2355
- state: "enabled",
2356
- tone
2357
- }),
2358
- hovered: opts.selectable({
2359
- base,
2360
- dark,
2361
- solid,
2362
- muted,
2363
- state: "hovered",
2364
- tone
2365
- }),
2366
- pressed: opts.selectable({
2367
- base,
2368
- dark,
2369
- solid,
2370
- muted,
2371
- state: "pressed",
2372
- tone
2373
- }),
2374
- selected: opts.selectable({
2375
- base,
2376
- dark,
2377
- solid,
2378
- muted,
2379
- state: "selected",
2380
- tone
2381
- }),
2382
- disabled: opts.selectable({
2383
- base,
2384
- dark,
2385
- solid,
2386
- muted,
2387
- state: "disabled",
2388
- tone
2389
- })
2390
- };
2391
- }
2392
- function createSolidTones(opts, base, dark, name) {
2393
- return {
2394
- default: {
2395
- enabled: opts.solid({
2396
- base,
2397
- dark,
2398
- tone: "default",
2399
- name,
2400
- state: "enabled"
2401
- }),
2402
- disabled: opts.solid({
2403
- base,
2404
- dark,
2405
- tone: "default",
2406
- name,
2407
- state: "disabled"
2408
- }),
2409
- hovered: opts.solid({
2410
- base,
2411
- dark,
2412
- tone: "default",
2413
- name,
2414
- state: "hovered"
2415
- }),
2416
- pressed: opts.solid({
2417
- base,
2418
- dark,
2419
- tone: "default",
2420
- name,
2421
- state: "pressed"
2422
- }),
2423
- selected: opts.solid({
2424
- base,
2425
- dark,
2426
- tone: "default",
2427
- name,
2428
- state: "selected"
2429
- })
2430
- },
2431
- transparent: {
2432
- enabled: opts.solid({
2433
- base,
2434
- dark,
2435
- tone: "transparent",
2436
- name,
2437
- state: "enabled"
2438
- }),
2439
- disabled: opts.solid({
2440
- base,
2441
- dark,
2442
- tone: "transparent",
2443
- name,
2444
- state: "disabled"
2445
- }),
2446
- hovered: opts.solid({
2447
- base,
2448
- dark,
2449
- tone: "transparent",
2450
- name,
2451
- state: "hovered"
2452
- }),
2453
- pressed: opts.solid({
2454
- base,
2455
- dark,
2456
- tone: "transparent",
2457
- name,
2458
- state: "pressed"
2459
- }),
2460
- selected: opts.solid({
2461
- base,
2462
- dark,
2463
- tone: "transparent",
2464
- name,
2465
- state: "selected"
2466
- })
2467
- },
2468
- primary: {
2469
- enabled: opts.solid({
2470
- base,
2471
- dark,
2472
- tone: "primary",
2473
- name,
2474
- state: "enabled"
2475
- }),
2476
- disabled: opts.solid({
2477
- base,
2478
- dark,
2479
- tone: "primary",
2480
- name,
2481
- state: "disabled"
2482
- }),
2483
- hovered: opts.solid({
2484
- base,
2485
- dark,
2486
- tone: "primary",
2487
- name,
2488
- state: "hovered"
2489
- }),
2490
- pressed: opts.solid({
2491
- base,
2492
- dark,
2493
- tone: "primary",
2494
- name,
2495
- state: "pressed"
2496
- }),
2497
- selected: opts.solid({
2498
- base,
2499
- dark,
2500
- tone: "primary",
2501
- name,
2502
- state: "selected"
2503
- })
2504
- },
2505
- positive: {
2506
- enabled: opts.solid({
2507
- base,
2508
- dark,
2509
- tone: "positive",
2510
- name,
2511
- state: "enabled"
2512
- }),
2513
- disabled: opts.solid({
2514
- base,
2515
- dark,
2516
- tone: "positive",
2517
- name,
2518
- state: "disabled"
2519
- }),
2520
- hovered: opts.solid({
2521
- base,
2522
- dark,
2523
- tone: "positive",
2524
- name,
2525
- state: "hovered"
2526
- }),
2527
- pressed: opts.solid({
2528
- base,
2529
- dark,
2530
- tone: "positive",
2531
- name,
2532
- state: "pressed"
2533
- }),
2534
- selected: opts.solid({
2535
- base,
2536
- dark,
2537
- tone: "positive",
2538
- name,
2539
- state: "selected"
2540
- })
2541
- },
2542
- caution: {
2543
- enabled: opts.solid({
2544
- base,
2545
- dark,
2546
- tone: "caution",
2547
- name,
2548
- state: "enabled"
2549
- }),
2550
- disabled: opts.solid({
2551
- base,
2552
- dark,
2553
- tone: "caution",
2554
- name,
2555
- state: "disabled"
2556
- }),
2557
- hovered: opts.solid({
2558
- base,
2559
- dark,
2560
- tone: "caution",
2561
- name,
2562
- state: "hovered"
2563
- }),
2564
- pressed: opts.solid({
2565
- base,
2566
- dark,
2567
- tone: "caution",
2568
- name,
2569
- state: "pressed"
2570
- }),
2571
- selected: opts.solid({
2572
- base,
2573
- dark,
2574
- tone: "caution",
2575
- name,
2576
- state: "selected"
2577
- })
2578
- },
2579
- critical: {
2580
- enabled: opts.solid({
2581
- base,
2582
- dark,
2583
- tone: "critical",
2584
- name,
2585
- state: "enabled"
2586
- }),
2587
- disabled: opts.solid({
2588
- base,
2589
- dark,
2590
- tone: "critical",
2591
- name,
2592
- state: "disabled"
2593
- }),
2594
- hovered: opts.solid({
2595
- base,
2596
- dark,
2597
- tone: "critical",
2598
- name,
2599
- state: "hovered"
2600
- }),
2601
- pressed: opts.solid({
2602
- base,
2603
- dark,
2604
- tone: "critical",
2605
- name,
2606
- state: "pressed"
2607
- }),
2608
- selected: opts.solid({
2609
- base,
2610
- dark,
2611
- tone: "critical",
2612
- name,
2613
- state: "selected"
2614
- })
2615
- }
2616
- };
2617
- }
2618
- function createButtonTones(opts, base, dark, solid, muted, mode) {
2619
- return {
2620
- default: opts.button({
2621
- base,
2622
- dark,
2623
- solid: solid.default,
2624
- muted: muted.default,
2625
- mode
2626
- }),
2627
- primary: opts.button({
2628
- base,
2629
- dark,
2630
- solid: solid.primary,
2631
- muted: muted.primary,
2632
- mode
2633
- }),
2634
- positive: opts.button({
2635
- base,
2636
- dark,
2637
- solid: solid.positive,
2638
- muted: muted.positive,
2639
- mode
2640
- }),
2641
- caution: opts.button({
2642
- base,
2643
- dark,
2644
- solid: solid.caution,
2645
- muted: muted.caution,
2646
- mode
2647
- }),
2648
- critical: opts.button({
2649
- base,
2650
- dark,
2651
- solid: solid.critical,
2652
- muted: muted.critical,
2653
- mode
2654
- })
2655
- };
2656
- }
2657
- function createButtonModes(opts, base, dark, solid, muted) {
2658
- return {
2659
- default: createButtonTones(opts, base, dark, solid, muted, "default"),
2660
- ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
2661
- bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
2662
- };
2663
- }
2664
- function createCardStates(opts, base, dark, name, solid, muted) {
2665
- return {
2666
- enabled: opts.card({
2667
- base,
2668
- dark,
2669
- name,
2670
- state: "enabled",
2671
- solid,
2672
- muted
2673
- }),
2674
- disabled: opts.card({
2675
- base,
2676
- dark,
2677
- name,
2678
- state: "disabled",
2679
- solid,
2680
- muted
2681
- }),
2682
- hovered: opts.card({
2683
- base,
2684
- dark,
2685
- name,
2686
- state: "hovered",
2687
- solid,
2688
- muted
2689
- }),
2690
- pressed: opts.card({
2691
- base,
2692
- dark,
2693
- name,
2694
- state: "pressed",
2695
- solid,
2696
- muted
2697
- }),
2698
- selected: opts.card({
2699
- base,
2700
- dark,
2701
- name,
2702
- state: "selected",
2703
- solid,
2704
- muted
2705
- })
2706
- };
2707
- }
2708
- const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
2709
- default: {
2710
- lightest: "hsl(0, 0%, 95%)",
2711
- lighter: "hsl(0, 0%, 70%)",
2712
- light: "hsl(0, 0%, 65%)",
2713
- base: "hsl(0, 0%, 50%)",
2714
- dark: "hsl(0, 0%, 35%)",
2715
- darker: "hsl(0, 0%, 20%)",
2716
- darkest: "hsl(0, 0%, 5%)"
2717
- },
2718
- transparent: {
2719
- lightest: "hsl(240, 100%, 95%)",
2720
- lighter: "hsl(240, 100%, 70%)",
2721
- light: "hsl(240, 100%, 65%)",
2722
- base: "hsl(240, 100%, 50%)",
2723
- dark: "hsl(240, 100%, 35%)",
2724
- darker: "hsl(240, 100%, 20%)",
2725
- darkest: "hsl(240, 100%, 5%)"
2726
- },
2727
- primary: {
2728
- lightest: "hsl(240, 100%, 95%)",
2729
- lighter: "hsl(240, 100%, 70%)",
2730
- light: "hsl(240, 100%, 65%)",
2731
- base: "hsl(240, 100%, 50%)",
2732
- dark: "hsl(240, 100%, 35%)",
2733
- darker: "hsl(240, 100%, 20%)",
2734
- darkest: "hsl(240, 100%, 5%)"
2735
- },
2736
- positive: {
2737
- lightest: "hsl(120, 100%, 95%)",
2738
- lighter: "hsl(120, 100%, 70%)",
2739
- light: "hsl(120, 100%, 65%)",
2740
- base: "hsl(120, 100%, 50%)",
2741
- dark: "hsl(120, 100%, 35%)",
2742
- darker: "hsl(120, 100%, 20%)",
2743
- darkest: "hsl(120, 100%, 5%)"
2744
- },
2745
- caution: {
2746
- lightest: "hsl(60, 100%, 95%)",
2747
- lighter: "hsl(60, 100%, 70%)",
2748
- light: "hsl(60, 100%, 65%)",
2749
- base: "hsl(60, 100%, 50%)",
2750
- dark: "hsl(60, 100%, 35%)",
2751
- darker: "hsl(60, 100%, 20%)",
2752
- darkest: "hsl(60, 100%, 5%)"
2753
- },
2754
- critical: {
2755
- lightest: "hsl(0, 100%, 95%)",
2756
- lighter: "hsl(0, 100%, 70%)",
2757
- light: "hsl(0, 100%, 65%)",
2758
- base: "hsl(0, 100%, 50%)",
2759
- dark: "hsl(0, 100%, 35%)",
2760
- darker: "hsl(0, 100%, 20%)",
2761
- darkest: "hsl(0, 100%, 5%)"
2762
- }
2763
- }, spots = {
2764
- gray: "hsl(0, 0%, 50%)",
2765
- red: "hsl(0, 100%, 50%)",
2766
- orange: "hsl(30, 100%, 50%)",
2767
- yellow: "hsl(60, 100%, 50%)",
2768
- green: "hsl(120, 100%, 50%)",
2769
- cyan: "hsl(180, 100%, 50%)",
2770
- blue: "hsl(240, 100%, 50%)",
2771
- purple: "hsl(270, 100%, 50%)",
2772
- magenta: "hsl(300, 100%, 50%)"
2773
- }, tones = {
2774
- transparent: {
2775
- bg: [colors.transparent.darkest, colors.transparent.lightest],
2776
- fg: [colors.transparent.lightest, colors.transparent.darkest],
2777
- border: [colors.transparent.darker, colors.transparent.lighter],
2778
- focusRing: [colors.transparent.base, colors.transparent.base]
2779
- },
2780
- primary: {
2781
- bg: [colors.primary.darkest, colors.primary.lightest],
2782
- fg: [colors.primary.lightest, colors.primary.darkest],
2783
- border: [colors.primary.darker, colors.primary.lighter],
2784
- focusRing: [colors.primary.base, colors.primary.base]
2785
- },
2786
- positive: {
2787
- bg: [colors.positive.darkest, colors.positive.lightest],
2788
- fg: [colors.positive.lightest, colors.positive.darkest],
2789
- border: [colors.positive.darker, colors.positive.lighter],
2790
- focusRing: [colors.positive.base, colors.positive.base]
2791
- },
2792
- caution: {
2793
- bg: [colors.caution.darkest, colors.caution.lightest],
2794
- fg: [colors.caution.lightest, colors.caution.darkest],
2795
- border: [colors.caution.darker, colors.caution.lighter],
2796
- focusRing: [colors.caution.base, colors.caution.base]
2797
- },
2798
- critical: {
2799
- bg: [colors.critical.darkest, colors.critical.lightest],
2800
- fg: [colors.critical.lightest, colors.critical.darkest],
2801
- border: [colors.critical.darker, colors.critical.lighter],
2802
- focusRing: [colors.critical.base, colors.critical.base]
2803
- }
2804
- }, defaultOpts = {
2805
- base: ({ dark, name }) => name === "default" ? {
2806
- bg: dark ? black : white,
2807
- fg: dark ? white : black,
2808
- border: dark ? colors.default.darkest : colors.default.lightest,
2809
- focusRing: colors.primary.base,
2810
- shadow: {
2811
- outline: black,
2812
- umbra: black,
2813
- penumbra: black,
2814
- ambient: black
2815
- },
2816
- skeleton: {
2817
- from: dark ? white : black,
2818
- to: dark ? white : black
2819
- }
2820
- } : {
2821
- bg: tones[name].bg[+!dark],
2822
- fg: tones[name].fg[+!dark],
2823
- border: tones[name].border[+!dark],
2824
- focusRing: tones[name].focusRing[+!dark],
2825
- shadow: {
2826
- outline: black,
2827
- umbra: black,
2828
- penumbra: black,
2829
- ambient: black
2830
- },
2831
- skeleton: {
2832
- from: dark ? white : black,
2833
- to: dark ? white : black
2834
- }
2835
- },
2836
- solid: ({ base, dark, state, tone }) => {
2837
- let color = colors[tone];
2838
- return state === "hovered" ? {
2839
- bg: dark ? color.light : color.dark,
2840
- bg2: dark ? color.light : color.dark,
2841
- border: dark ? color.lighter : color.darker,
2842
- fg: dark ? color.darkest : color.lightest,
2843
- icon: dark ? color.darkest : color.lightest,
2844
- muted: { fg: black },
2845
- accent: { fg: black },
2846
- link: { fg: black },
2847
- code: {
2848
- bg: black,
2849
- fg: black
2850
- },
2851
- skeleton: base.skeleton
2852
- } : {
2853
- bg: color.base,
2854
- bg2: color.base,
2855
- border: dark ? color.light : color.dark,
2856
- fg: dark ? color.darkest : color.lightest,
2857
- icon: dark ? color.darkest : color.lightest,
2858
- muted: { fg: black },
2859
- accent: { fg: black },
2860
- link: { fg: black },
2861
- code: {
2862
- bg: black,
2863
- fg: black
2864
- },
2865
- skeleton: base.skeleton
2866
- };
2867
- },
2868
- muted: ({ base, dark, state, tone }) => {
2869
- let color = colors[tone];
2870
- return state === "hovered" ? {
2871
- bg: dark ? color.darker : color.lighter,
2872
- bg2: dark ? color.darker : color.lighter,
2873
- border: dark ? color.lighter : color.darker,
2874
- fg: dark ? color.lightest : color.darkest,
2875
- icon: dark ? color.lightest : color.darkest,
2876
- muted: { fg: black },
2877
- accent: { fg: black },
2878
- link: { fg: black },
2879
- code: {
2880
- bg: black,
2881
- fg: black
2882
- },
2883
- skeleton: base.skeleton
2884
- } : {
2885
- bg: dark ? color.darkest : color.lightest,
2886
- bg2: dark ? color.darkest : color.lightest,
2887
- border: dark ? color.darker : color.lighter,
2888
- fg: dark ? color.lighter : color.darker,
2889
- icon: dark ? color.lighter : color.darker,
2890
- muted: { fg: black },
2891
- accent: { fg: black },
2892
- link: { fg: black },
2893
- code: {
2894
- bg: black,
2895
- fg: black
2896
- },
2897
- skeleton: base.skeleton
2898
- };
2899
- },
2900
- button: ({ base, mode, muted, solid }) => mode === "bleed" ? {
2901
- ...muted,
2902
- enabled: {
2903
- bg: "transparent",
2904
- bg2: "transparent",
2905
- fg: muted.enabled.fg,
2906
- icon: muted.enabled.fg,
2907
- border: "transparent",
2908
- muted: { fg: black },
2909
- accent: { fg: black },
2910
- link: { fg: black },
2911
- code: {
2912
- bg: black,
2913
- fg: black
2914
- },
2915
- skeleton: base.skeleton
2916
- },
2917
- hovered: {
2918
- bg: muted.enabled.bg,
2919
- bg2: muted.enabled.bg,
2920
- fg: muted.hovered.fg,
2921
- icon: muted.hovered.fg,
2922
- border: "transparent",
2923
- muted: { fg: black },
2924
- accent: { fg: black },
2925
- link: { fg: black },
2926
- code: {
2927
- bg: black,
2928
- fg: black
2929
- },
2930
- skeleton: base.skeleton
2931
- }
2932
- } : mode === "ghost" ? {
2933
- ...solid,
2934
- enabled: muted.enabled
2935
- } : solid,
2936
- card: ({ base }) => ({
2937
- bg: black,
2938
- bg2: black,
2939
- fg: black,
2940
- icon: black,
2941
- border: black,
2942
- muted: { fg: black },
2943
- accent: { fg: black },
2944
- link: { fg: black },
2945
- code: {
2946
- bg: black,
2947
- fg: black
2948
- },
2949
- skeleton: base.skeleton
2950
- }),
2951
- input: () => ({
2952
- bg: black,
2953
- bg2: black,
2954
- fg: black,
2955
- border: black,
2956
- placeholder: black
2957
- }),
2958
- selectable: ({ muted, state, tone }) => muted[tone][state],
2959
- spot: ({ key }) => spots[key],
2960
- syntax: () => ({
2961
- atrule: black,
2962
- attrName: black,
2963
- attrValue: black,
2964
- attribute: black,
2965
- boolean: black,
2966
- builtin: black,
2967
- cdata: black,
2968
- char: black,
2969
- class: black,
2970
- className: black,
2971
- comment: black,
2972
- constant: black,
2973
- deleted: black,
2974
- doctype: black,
2975
- entity: black,
2976
- function: black,
2977
- hexcode: black,
2978
- id: black,
2979
- important: black,
2980
- inserted: black,
2981
- keyword: black,
2982
- number: black,
2983
- operator: black,
2984
- prolog: black,
2985
- property: black,
2986
- pseudoClass: black,
2987
- pseudoElement: black,
2988
- punctuation: black,
2989
- regex: black,
2990
- selector: black,
2991
- string: black,
2992
- symbol: black,
2993
- tag: black,
2994
- unit: black,
2995
- url: black,
2996
- variable: black
2997
- })
2998
- };
2999
- function createInputModes(opts, base, dark, solid, muted) {
3000
- return {
3001
- default: {
3002
- enabled: opts.input({
3003
- base,
3004
- dark,
3005
- mode: "default",
3006
- state: "enabled",
3007
- solid: solid.default,
3008
- muted: muted.default
3009
- }),
3010
- disabled: opts.input({
3011
- base,
3012
- dark,
3013
- mode: "default",
3014
- state: "disabled",
3015
- solid: solid.default,
3016
- muted: muted.default
3017
- }),
3018
- hovered: opts.input({
3019
- base,
3020
- dark,
3021
- mode: "default",
3022
- state: "hovered",
3023
- solid: solid.default,
3024
- muted: muted.default
3025
- }),
3026
- readOnly: opts.input({
3027
- base,
3028
- dark,
3029
- mode: "default",
3030
- state: "readOnly",
3031
- solid: solid.default,
3032
- muted: muted.default
3033
- })
3034
- },
3035
- invalid: {
3036
- enabled: opts.input({
3037
- base,
3038
- dark,
3039
- mode: "invalid",
3040
- state: "enabled",
3041
- solid: solid.default,
3042
- muted: muted.default
3043
- }),
3044
- disabled: opts.input({
3045
- base,
3046
- dark,
3047
- mode: "invalid",
3048
- state: "disabled",
3049
- solid: solid.default,
3050
- muted: muted.default
3051
- }),
3052
- hovered: opts.input({
3053
- base,
3054
- dark,
3055
- mode: "invalid",
3056
- state: "hovered",
3057
- solid: solid.default,
3058
- muted: muted.default
3059
- }),
3060
- readOnly: opts.input({
3061
- base,
3062
- dark,
3063
- mode: "invalid",
3064
- state: "readOnly",
3065
- solid: solid.default,
3066
- muted: muted.default
3067
- })
3068
- }
3069
- };
3070
- }
3071
- function createMutedTones(opts, base, dark, name) {
3072
- return {
3073
- default: {
3074
- enabled: opts.muted({
3075
- base,
3076
- dark,
3077
- tone: "default",
3078
- name,
3079
- state: "enabled"
3080
- }),
3081
- disabled: opts.muted({
3082
- base,
3083
- dark,
3084
- tone: "default",
3085
- name,
3086
- state: "disabled"
3087
- }),
3088
- hovered: opts.muted({
3089
- base,
3090
- dark,
3091
- tone: "default",
3092
- name,
3093
- state: "hovered"
3094
- }),
3095
- pressed: opts.muted({
3096
- base,
3097
- dark,
3098
- tone: "default",
3099
- name,
3100
- state: "pressed"
3101
- }),
3102
- selected: opts.muted({
3103
- base,
3104
- dark,
3105
- tone: "default",
3106
- name,
3107
- state: "selected"
3108
- })
3109
- },
3110
- transparent: {
3111
- enabled: opts.muted({
3112
- base,
3113
- dark,
3114
- tone: "transparent",
3115
- name,
3116
- state: "enabled"
3117
- }),
3118
- disabled: opts.muted({
3119
- base,
3120
- dark,
3121
- tone: "transparent",
3122
- name,
3123
- state: "disabled"
3124
- }),
3125
- hovered: opts.muted({
3126
- base,
3127
- dark,
3128
- tone: "transparent",
3129
- name,
3130
- state: "hovered"
3131
- }),
3132
- pressed: opts.muted({
3133
- base,
3134
- dark,
3135
- tone: "transparent",
3136
- name,
3137
- state: "pressed"
3138
- }),
3139
- selected: opts.muted({
3140
- base,
3141
- dark,
3142
- tone: "transparent",
3143
- name,
3144
- state: "selected"
3145
- })
3146
- },
3147
- primary: {
3148
- enabled: opts.muted({
3149
- base,
3150
- dark,
3151
- tone: "primary",
3152
- name,
3153
- state: "enabled"
3154
- }),
3155
- disabled: opts.muted({
3156
- base,
3157
- dark,
3158
- tone: "primary",
3159
- name,
3160
- state: "disabled"
3161
- }),
3162
- hovered: opts.muted({
3163
- base,
3164
- dark,
3165
- tone: "primary",
3166
- name,
3167
- state: "hovered"
3168
- }),
3169
- pressed: opts.muted({
3170
- base,
3171
- dark,
3172
- tone: "primary",
3173
- name,
3174
- state: "pressed"
3175
- }),
3176
- selected: opts.muted({
3177
- base,
3178
- dark,
3179
- tone: "primary",
3180
- name,
3181
- state: "selected"
3182
- })
3183
- },
3184
- positive: {
3185
- enabled: opts.muted({
3186
- base,
3187
- dark,
3188
- tone: "positive",
3189
- name,
3190
- state: "enabled"
3191
- }),
3192
- disabled: opts.muted({
3193
- base,
3194
- dark,
3195
- tone: "positive",
3196
- name,
3197
- state: "disabled"
3198
- }),
3199
- hovered: opts.muted({
3200
- base,
3201
- dark,
3202
- tone: "positive",
3203
- name,
3204
- state: "hovered"
3205
- }),
3206
- pressed: opts.muted({
3207
- base,
3208
- dark,
3209
- tone: "positive",
3210
- name,
3211
- state: "pressed"
3212
- }),
3213
- selected: opts.muted({
3214
- base,
3215
- dark,
3216
- tone: "positive",
3217
- name,
3218
- state: "selected"
3219
- })
3220
- },
3221
- caution: {
3222
- enabled: opts.muted({
3223
- base,
3224
- dark,
3225
- tone: "caution",
3226
- name,
3227
- state: "enabled"
3228
- }),
3229
- disabled: opts.muted({
3230
- base,
3231
- dark,
3232
- tone: "caution",
3233
- name,
3234
- state: "disabled"
3235
- }),
3236
- hovered: opts.muted({
3237
- base,
3238
- dark,
3239
- tone: "caution",
3240
- name,
3241
- state: "hovered"
3242
- }),
3243
- pressed: opts.muted({
3244
- base,
3245
- dark,
3246
- tone: "caution",
3247
- name,
3248
- state: "pressed"
3249
- }),
3250
- selected: opts.muted({
3251
- base,
3252
- dark,
3253
- tone: "caution",
3254
- name,
3255
- state: "selected"
3256
- })
3257
- },
3258
- critical: {
3259
- enabled: opts.muted({
3260
- base,
3261
- dark,
3262
- tone: "critical",
3263
- name,
3264
- state: "enabled"
3265
- }),
3266
- disabled: opts.muted({
3267
- base,
3268
- dark,
3269
- tone: "critical",
3270
- name,
3271
- state: "disabled"
3272
- }),
3273
- hovered: opts.muted({
3274
- base,
3275
- dark,
3276
- tone: "critical",
3277
- name,
3278
- state: "hovered"
3279
- }),
3280
- pressed: opts.muted({
3281
- base,
3282
- dark,
3283
- tone: "critical",
3284
- name,
3285
- state: "pressed"
3286
- }),
3287
- selected: opts.muted({
3288
- base,
3289
- dark,
3290
- tone: "critical",
3291
- name,
3292
- state: "selected"
3293
- })
3294
- }
3295
- };
3296
- }
3297
- function createSpot(opts, base, dark) {
3298
- return {
3299
- gray: opts.spot({
3300
- base,
3301
- dark,
3302
- key: "gray"
3303
- }),
3304
- blue: opts.spot({
3305
- base,
3306
- dark,
3307
- key: "blue"
3308
- }),
3309
- purple: opts.spot({
3310
- base,
3311
- dark,
3312
- key: "purple"
3313
- }),
3314
- magenta: opts.spot({
3315
- base,
3316
- dark,
3317
- key: "magenta"
3318
- }),
3319
- red: opts.spot({
3320
- base,
3321
- dark,
3322
- key: "red"
3323
- }),
3324
- orange: opts.spot({
3325
- base,
3326
- dark,
3327
- key: "orange"
3328
- }),
3329
- yellow: opts.spot({
3330
- base,
3331
- dark,
3332
- key: "yellow"
3333
- }),
3334
- green: opts.spot({
3335
- base,
3336
- dark,
3337
- key: "green"
3338
- }),
3339
- cyan: opts.spot({
3340
- base,
3341
- dark,
3342
- key: "cyan"
3343
- })
3344
- };
3345
- }
3346
- /**
3347
- * @public
3348
- * @deprecated Use `buildColorTheme` instead.
3349
- */
3350
- function createColorTheme(partialOpts = {}) {
3351
- let builders = {
3352
- ...defaultOpts,
3353
- ...partialOpts
3354
- };
3355
- return {
3356
- light: _createColorScheme(builders, !1),
3357
- dark: _createColorScheme(builders, !0)
3358
- };
3359
- }
3360
- /**
3361
- * @internal
3362
- */
3363
- function _createColorScheme(opts, dark) {
3364
- return {
3365
- default: _createColor(opts, dark, "default"),
3366
- transparent: _createColor(opts, dark, "transparent"),
3367
- primary: _createColor(opts, dark, "primary"),
3368
- positive: _createColor(opts, dark, "positive"),
3369
- caution: _createColor(opts, dark, "caution"),
3370
- critical: _createColor(opts, dark, "critical")
3371
- };
3372
- }
3373
- /**
3374
- * @internal
3375
- */
3376
- function _createColor(opts, dark, name) {
3377
- let base = opts.base({
3378
- dark,
3379
- name
3380
- }), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
3381
- return {
3382
- base,
3383
- button: createButtonModes(opts, base, dark, solid, muted),
3384
- card: createCardStates(opts, base, dark, name, solid, muted),
3385
- dark,
3386
- input: createInputModes(opts, base, dark, solid, muted),
3387
- selectable: createSelectableTones(opts, base, dark, solid, muted),
3388
- spot: createSpot(opts, base, dark),
3389
- syntax: opts.syntax({
3390
- base,
3391
- dark
3392
- }),
3393
- solid,
3394
- muted
3395
- };
3396
- }
3397
- const cache$3 = /* @__PURE__ */ new WeakMap();
3398
- /** @internal */
3399
- function themeColor_v0_v2(color_v0) {
3400
- let cached_v2 = cache$3.get(color_v0);
3401
- if (cached_v2) return cached_v2;
3402
- let base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
3403
- _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
3404
- _dark: color_v0.dark,
3405
- accent: base.accent,
3406
- avatar: base.avatar,
3407
- backdrop: color_v0.base.shadow.ambient,
3408
- badge: base.badge,
3409
- bg: color_v0.base.bg,
3410
- border: color_v0.base.border,
3411
- button: {
3412
- default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
3413
- ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
3414
- bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
3415
- },
3416
- code: base.code,
3417
- fg: color_v0.base.fg,
3418
- focusRing: color_v0.base.focusRing,
3419
- icon: base.muted.fg,
3420
- input: {
3421
- default: inputStatesThemeColor_v0_v2(color_v0.input.default),
3422
- invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
3423
- },
3424
- kbd: base.kbd,
3425
- link: base.link,
3426
- muted: {
3427
- ...base.muted,
3428
- bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
3429
- },
3430
- selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
3431
- shadow: color_v0.base.shadow,
3432
- skeleton: {
3433
- from: color_v0.skeleton?.from || color_v0.base.border,
3434
- to: color_v0.skeleton?.to || color_v0.base.border
3435
- },
3436
- syntax: color_v0.syntax
3437
- };
3438
- return cache$3.set(color_v0, color_v2), color_v2;
3439
- }
3440
- function stateTonesThemeColor_v0_v2(v0, t) {
3441
- return {
3442
- default: {
3443
- enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
3444
- hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
3445
- pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
3446
- selected: stateThemeColor_v0_v2(v0, t.default.selected),
3447
- disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
3448
- },
3449
- neutral: {
3450
- enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
3451
- hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
3452
- pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
3453
- selected: stateThemeColor_v0_v2(v0, t.default.selected),
3454
- disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
3455
- },
3456
- primary: {
3457
- enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
3458
- hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
3459
- pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
3460
- selected: stateThemeColor_v0_v2(v0, t.primary.selected),
3461
- disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
3462
- },
3463
- suggest: {
3464
- enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
3465
- hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
3466
- pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
3467
- selected: stateThemeColor_v0_v2(v0, t.primary.selected),
3468
- disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
3469
- },
3470
- positive: {
3471
- enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
3472
- hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
3473
- pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
3474
- selected: stateThemeColor_v0_v2(v0, t.positive.selected),
3475
- disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
3476
- },
3477
- caution: {
3478
- enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
3479
- hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
3480
- pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
3481
- selected: stateThemeColor_v0_v2(v0, t.caution.selected),
3482
- disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
3483
- },
3484
- critical: {
3485
- enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
3486
- hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
3487
- pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
3488
- selected: stateThemeColor_v0_v2(v0, t.critical.selected),
3489
- disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
3490
- }
3491
- };
3492
- }
3493
- function stateThemeColor_v0_v2(v0, state) {
3494
- return {
3495
- ...state,
3496
- avatar: {
3497
- gray: {
3498
- bg: v0.spot.gray,
3499
- fg: v0.base.bg
3500
- },
3501
- blue: {
3502
- bg: v0.spot.blue,
3503
- fg: v0.base.bg
3504
- },
3505
- purple: {
3506
- bg: v0.spot.purple,
3507
- fg: v0.base.bg
3508
- },
3509
- magenta: {
3510
- bg: v0.spot.magenta,
3511
- fg: v0.base.bg
3512
- },
3513
- red: {
3514
- bg: v0.spot.red,
3515
- fg: v0.base.bg
3516
- },
3517
- orange: {
3518
- bg: v0.spot.orange,
3519
- fg: v0.base.bg
3520
- },
3521
- yellow: {
3522
- bg: v0.spot.yellow,
3523
- fg: v0.base.bg
3524
- },
3525
- green: {
3526
- bg: v0.spot.green,
3527
- fg: v0.base.bg
3528
- },
3529
- cyan: {
3530
- bg: v0.spot.cyan,
3531
- fg: v0.base.bg
3532
- }
3533
- },
3534
- badge: {
3535
- default: {
3536
- bg: v0.muted.default.enabled.bg,
3537
- fg: v0.muted.default.enabled.fg,
3538
- dot: v0.muted.default.enabled.muted.fg,
3539
- icon: v0.muted.default.enabled.muted.fg
3540
- },
3541
- neutral: {
3542
- bg: v0.muted.transparent.enabled.bg,
3543
- fg: v0.muted.transparent.enabled.fg,
3544
- dot: v0.muted.transparent.enabled.muted.fg,
3545
- icon: v0.muted.transparent.enabled.muted.fg
3546
- },
3547
- primary: {
3548
- bg: v0.muted.primary.enabled.bg,
3549
- fg: v0.muted.primary.enabled.fg,
3550
- dot: v0.muted.primary.enabled.muted.fg,
3551
- icon: v0.muted.primary.enabled.muted.fg
3552
- },
3553
- suggest: {
3554
- bg: v0.muted.primary.enabled.bg,
3555
- fg: v0.muted.primary.enabled.fg,
3556
- dot: v0.muted.primary.enabled.muted.fg,
3557
- icon: v0.muted.primary.enabled.muted.fg
3558
- },
3559
- positive: {
3560
- bg: v0.muted.positive.enabled.bg,
3561
- fg: v0.muted.positive.enabled.fg,
3562
- dot: v0.muted.positive.enabled.muted.fg,
3563
- icon: v0.muted.positive.enabled.muted.fg
3564
- },
3565
- caution: {
3566
- bg: v0.muted.caution.enabled.bg,
3567
- fg: v0.muted.caution.enabled.fg,
3568
- dot: v0.muted.caution.enabled.muted.fg,
3569
- icon: v0.muted.caution.enabled.muted.fg
3570
- },
3571
- critical: {
3572
- bg: v0.muted.critical.enabled.bg,
3573
- fg: v0.muted.critical.enabled.fg,
3574
- dot: v0.muted.critical.enabled.muted.fg,
3575
- icon: v0.muted.critical.enabled.muted.fg
3576
- }
3577
- },
3578
- kbd: {
3579
- bg: v0.muted.default.enabled.bg,
3580
- fg: v0.muted.default.enabled.fg,
3581
- border: v0.muted.default.enabled.border
3582
- },
3583
- muted: {
3584
- ...v0.muted.default.enabled.muted,
3585
- bg: state.bg2 || state.bg
3586
- },
3587
- skeleton: {
3588
- from: state.skeleton?.from || state.border,
3589
- to: state.skeleton?.to || state.border
3590
- }
3591
- };
3592
- }
3593
- function inputStatesThemeColor_v0_v2(states) {
3594
- return {
3595
- enabled: inputStateThemeColor_v0_v2(states.enabled),
3596
- disabled: inputStateThemeColor_v0_v2(states.disabled),
3597
- readOnly: inputStateThemeColor_v0_v2(states.readOnly),
3598
- hovered: inputStateThemeColor_v0_v2(states.hovered)
3599
- };
3600
- }
3601
- function inputStateThemeColor_v0_v2(state) {
3602
- return {
3603
- bg: state.bg,
3604
- border: state.border,
3605
- fg: state.fg,
3606
- muted: { bg: state.bg2 },
3607
- placeholder: state.placeholder
3608
- };
3609
- }
3610
- const cache$2 = /* @__PURE__ */ new WeakMap();
3611
- /** @public */
3612
- function getTheme_v2(theme) {
3613
- if (theme.sanity.v2?._resolved) return theme.sanity.v2;
3614
- let cached_v2 = cache$2.get(theme);
3615
- if (cached_v2) return cached_v2;
3616
- let v2 = {
3617
- _version: 2,
3618
- _resolved: !0,
3619
- avatar: {
3620
- ...defaultThemeConfig.avatar,
3621
- ...theme.sanity.avatar
3622
- },
3623
- button: {
3624
- ...defaultThemeConfig.button,
3625
- ...theme.sanity.button
3626
- },
3627
- card: defaultThemeConfig.card,
3628
- color: themeColor_v0_v2(theme.sanity.color),
3629
- container: theme.sanity.container,
3630
- font: theme.sanity.fonts,
3631
- input: {
3632
- ...defaultThemeConfig.input,
3633
- ...theme.sanity.input,
3634
- checkbox: {
3635
- ...defaultThemeConfig.input.checkbox,
3636
- ...theme.sanity.input.checkbox
3637
- },
3638
- radio: {
3639
- ...defaultThemeConfig.input.radio,
3640
- ...theme.sanity.input.radio
3641
- },
3642
- switch: {
3643
- ...defaultThemeConfig.input.switch,
3644
- ...theme.sanity.input.switch
3645
- }
3646
- },
3647
- layer: theme.sanity.layer ?? defaultThemeConfig.layer,
3648
- media: theme.sanity.media,
3649
- radius: theme.sanity.radius,
3650
- shadow: theme.sanity.shadows,
3651
- space: theme.sanity.space,
3652
- style: theme.sanity.styles
3653
- };
3654
- return cache$2.set(theme, v2), v2;
3655
- }
3656
- /** @internal */
3657
- function is_v2(themeProp) {
3658
- return themeProp._version === 2;
3659
- }
3660
- /**
3661
- * Apply `neutral` and `suggest` if they're not already part of the color object,
3662
- * as this was introduced in v2.9, but is not compatible with v2.0.
3663
- *
3664
- * @param color - The color object to upgrade
3665
- * @returns The upgraded color object. Returns as-is if already upgraded.
3666
- * @internal
3667
- */
3668
- function themeColor_v0_v2_9(color) {
3669
- if ("neutral" in color.badge) return color;
3670
- let colors = color;
3671
- return {
3672
- ...colors,
3673
- badge: {
3674
- ...colors.badge,
3675
- neutral: colors.badge.default,
3676
- suggest: colors.badge.primary
3677
- },
3678
- button: {
3679
- bleed: {
3680
- ...colors.button.bleed,
3681
- neutral: colors.button.bleed.default,
3682
- suggest: colors.button.bleed.primary
3683
- },
3684
- default: {
3685
- ...colors.button.default,
3686
- neutral: colors.button.default.default,
3687
- suggest: colors.button.default.primary
3688
- },
3689
- ghost: {
3690
- ...colors.button.ghost,
3691
- neutral: colors.button.ghost.default,
3692
- suggest: colors.button.ghost.primary
3693
- }
3694
- },
3695
- selectable: {
3696
- ...colors.selectable,
3697
- neutral: colors.selectable.default,
3698
- suggest: colors.selectable.primary
3699
- }
3700
- };
3701
- }
3702
- const cache$1 = /* @__PURE__ */ new WeakMap();
3703
- /** @internal */
3704
- function v0_v2(v0) {
3705
- if (v0.v2) return v0.v2;
3706
- let cached_v2 = cache$1.get(v0);
3707
- if (cached_v2) return cached_v2;
3708
- let { avatar, button, color, container, focusRing: _unused_focusRing, fonts: font, input, layer, media, radius, shadows: shadow, space, styles: style } = v0, v2 = {
3709
- _version: 2,
3710
- avatar: {
3711
- ...defaultThemeConfig.avatar,
3712
- ...avatar
3713
- },
3714
- button: {
3715
- ...defaultThemeConfig.button,
3716
- ...button
3717
- },
3718
- card: defaultThemeConfig.card,
3719
- color: {
3720
- light: {
3721
- transparent: themeColor_v0_v2(color.light.transparent),
3722
- default: themeColor_v0_v2(color.light.default),
3723
- neutral: themeColor_v0_v2(color.light.transparent),
3724
- primary: themeColor_v0_v2(color.light.primary),
3725
- suggest: themeColor_v0_v2(color.light.primary),
3726
- positive: themeColor_v0_v2(color.light.positive),
3727
- caution: themeColor_v0_v2(color.light.caution),
3728
- critical: themeColor_v0_v2(color.light.critical)
3729
- },
3730
- dark: {
3731
- transparent: themeColor_v0_v2(color.dark.transparent),
3732
- default: themeColor_v0_v2(color.dark.default),
3733
- neutral: themeColor_v0_v2(color.dark.transparent),
3734
- primary: themeColor_v0_v2(color.dark.primary),
3735
- suggest: themeColor_v0_v2(color.dark.primary),
3736
- positive: themeColor_v0_v2(color.dark.positive),
3737
- caution: themeColor_v0_v2(color.dark.caution),
3738
- critical: themeColor_v0_v2(color.dark.critical)
3739
- }
3740
- },
3741
- container,
3742
- font,
3743
- input: {
3744
- ...defaultThemeConfig.input,
3745
- ...input,
3746
- checkbox: {
3747
- ...defaultThemeConfig.input.checkbox,
3748
- ...input.checkbox
3749
- },
3750
- radio: {
3751
- ...defaultThemeConfig.input.radio,
3752
- ...input.radio
3753
- },
3754
- switch: {
3755
- ...defaultThemeConfig.input.switch,
3756
- ...input.switch
3757
- }
3758
- },
3759
- layer: layer ?? defaultThemeConfig.layer,
3760
- media,
3761
- radius,
3762
- shadow,
3763
- space,
3764
- style
3765
- };
3766
- return cache$1.set(v0, v2), v2;
3767
- }
3768
- const cache = /* @__PURE__ */ new Map();
3769
- /** @internal */
3770
- function getScopedTheme(themeProp, scheme, tone) {
3771
- let cachedTheme = _getCachedTheme(themeProp, scheme, tone);
3772
- if (cachedTheme) return cachedTheme;
3773
- let v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), layer_v0 = v0.layer || defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2_9 = themeColor_v0_v2_9(colorScheme_v2[tone] || colorScheme_v2.default), layer_v2 = v2.layer || defaultThemeConfig.layer, { color: _v0Color, ...v0Rest } = v0, sanity = {
3774
- ...v0Rest,
3775
- layer: layer_v0,
3776
- v2: {
3777
- ...v2,
3778
- _resolved: !0,
3779
- color: color_v2_9,
3780
- layer: layer_v2
3781
- }
3782
- };
3783
- defineLazyProperty(sanity, "color", () => {
3784
- let colorScheme_v0 = v0.color[scheme] || v0.color.light;
3785
- return colorScheme_v0[tone] || colorScheme_v0.default;
3786
- });
3787
- let theme = { sanity };
3788
- return _setCachedTheme(themeProp, scheme, tone, theme), theme;
3789
- }
3790
- function _getCachedTheme(rootTheme, scheme, tone) {
3791
- let schemeCache = cache.get(scheme);
3792
- if (!schemeCache) return;
3793
- let toneCache = schemeCache.get(tone);
3794
- if (toneCache) return toneCache.get(rootTheme);
3795
- }
3796
- function _setCachedTheme(rootTheme, scheme, tone, theme) {
3797
- cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
3798
- let schemeCache = cache.get(scheme);
3799
- schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
3800
- }
3801
- Object.defineProperty(exports, "A", {
3802
- enumerable: !0,
3803
- get: function() {
3804
- return COLOR_CONFIG_INPUT_MODES;
3805
- }
3806
- }), Object.defineProperty(exports, "B", {
3807
- enumerable: !0,
3808
- get: function() {
3809
- return THEME_COLOR_BLEND_MODES;
3810
- }
3811
- }), Object.defineProperty(exports, "C", {
3812
- enumerable: !0,
3813
- get: function() {
3814
- return isColorOpacityValue;
3815
- }
3816
- }), Object.defineProperty(exports, "D", {
3817
- enumerable: !0,
3818
- get: function() {
3819
- return COLOR_CONFIG_BLEND_KEYS;
3820
- }
3821
- }), Object.defineProperty(exports, "E", {
3822
- enumerable: !0,
3823
- get: function() {
3824
- return COLOR_CONFIG_AVATAR_COLORS;
3825
- }
3826
- }), Object.defineProperty(exports, "F", {
3827
- enumerable: !0,
3828
- get: function() {
3829
- return isColorBlendModeValue;
3830
- }
3831
- }), Object.defineProperty(exports, "G", {
3832
- enumerable: !0,
3833
- get: function() {
3834
- return THEME_COLOR_SCHEMES;
3835
- }
3836
- }), Object.defineProperty(exports, "H", {
3837
- enumerable: !0,
3838
- get: function() {
3839
- return THEME_COLOR_CARD_TONES;
3840
- }
3841
- }), Object.defineProperty(exports, "I", {
3842
- enumerable: !0,
3843
- get: function() {
3844
- return isColorButtonMode;
3845
- }
3846
- }), Object.defineProperty(exports, "J", {
3847
- enumerable: !0,
3848
- get: function() {
3849
- return v2_v0;
3850
- }
3851
- }), Object.defineProperty(exports, "K", {
3852
- enumerable: !0,
3853
- get: function() {
3854
- return THEME_COLOR_STATES;
3855
- }
3856
- }), Object.defineProperty(exports, "L", {
3857
- enumerable: !0,
3858
- get: function() {
3859
- return isColorHueKey;
3860
- }
3861
- }), Object.defineProperty(exports, "M", {
3862
- enumerable: !0,
3863
- get: function() {
3864
- return COLOR_CONFIG_STATES;
3865
- }
3866
- }), Object.defineProperty(exports, "N", {
3867
- enumerable: !0,
3868
- get: function() {
3869
- return COLOR_CONFIG_STATE_KEYS;
3870
- }
3871
- }), Object.defineProperty(exports, "O", {
3872
- enumerable: !0,
3873
- get: function() {
3874
- return COLOR_CONFIG_CARD_KEYS;
3875
- }
3876
- }), Object.defineProperty(exports, "P", {
3877
- enumerable: !0,
3878
- get: function() {
3879
- return COLOR_CONFIG_STATE_TONES;
3880
- }
3881
- }), Object.defineProperty(exports, "R", {
3882
- enumerable: !0,
3883
- get: function() {
3884
- return isColorTintKey;
3885
- }
3886
- }), Object.defineProperty(exports, "S", {
3887
- enumerable: !0,
3888
- get: function() {
3889
- return isColorConfigStateTone;
3890
- }
3891
- }), Object.defineProperty(exports, "T", {
3892
- enumerable: !0,
3893
- get: function() {
3894
- return isColorValue;
3895
- }
3896
- }), Object.defineProperty(exports, "U", {
3897
- enumerable: !0,
3898
- get: function() {
3899
- return THEME_COLOR_INPUT_MODES;
3900
- }
3901
- }), Object.defineProperty(exports, "V", {
3902
- enumerable: !0,
3903
- get: function() {
3904
- return THEME_COLOR_BUTTON_MODES;
3905
- }
3906
- }), Object.defineProperty(exports, "W", {
3907
- enumerable: !0,
3908
- get: function() {
3909
- return THEME_COLOR_INPUT_STATES;
3910
- }
3911
- }), Object.defineProperty(exports, "_", {
3912
- enumerable: !0,
3913
- get: function() {
3914
- return parseTokenValue;
3915
- }
3916
- }), Object.defineProperty(exports, "a", {
3917
- enumerable: !0,
3918
- get: function() {
3919
- return createColorTheme;
3920
- }
3921
- }), Object.defineProperty(exports, "b", {
3922
- enumerable: !0,
3923
- get: function() {
3924
- return isColorConfigBlendKey;
3925
- }
3926
- }), Object.defineProperty(exports, "c", {
3927
- enumerable: !0,
3928
- get: function() {
3929
- return multiply;
3930
- }
3931
- }), Object.defineProperty(exports, "d", {
3932
- enumerable: !0,
3933
- get: function() {
3934
- return hexToRgb;
3935
- }
3936
- }), Object.defineProperty(exports, "f", {
3937
- enumerable: !0,
3938
- get: function() {
3939
- return hslToRgb;
3940
- }
3941
- }), Object.defineProperty(exports, "g", {
3942
- enumerable: !0,
3943
- get: function() {
3944
- return mix;
3945
- }
3946
- }), Object.defineProperty(exports, "h", {
3947
- enumerable: !0,
3948
- get: function() {
3949
- return rgbaToRGBA;
3950
- }
3951
- }), Object.defineProperty(exports, "i", {
3952
- enumerable: !0,
3953
- get: function() {
3954
- return getTheme_v2;
3955
- }
3956
- }), Object.defineProperty(exports, "j", {
3957
- enumerable: !0,
3958
- get: function() {
3959
- return COLOR_CONFIG_INPUT_STATES;
3960
- }
3961
- }), Object.defineProperty(exports, "k", {
3962
- enumerable: !0,
3963
- get: function() {
3964
- return COLOR_CONFIG_CARD_TONES;
3965
- }
3966
- }), Object.defineProperty(exports, "l", {
3967
- enumerable: !0,
3968
- get: function() {
3969
- return rgba;
3970
- }
3971
- }), Object.defineProperty(exports, "m", {
3972
- enumerable: !0,
3973
- get: function() {
3974
- return rgbToHsl;
3975
- }
3976
- }), Object.defineProperty(exports, "n", {
3977
- enumerable: !0,
3978
- get: function() {
3979
- return v0_v2;
3980
- }
3981
- }), Object.defineProperty(exports, "o", {
3982
- enumerable: !0,
3983
- get: function() {
3984
- return buildTheme;
3985
- }
3986
- }), Object.defineProperty(exports, "p", {
3987
- enumerable: !0,
3988
- get: function() {
3989
- return rgbToHex;
3990
- }
3991
- }), Object.defineProperty(exports, "q", {
3992
- enumerable: !0,
3993
- get: function() {
3994
- return THEME_COLOR_STATE_TONES;
3995
- }
3996
- }), Object.defineProperty(exports, "r", {
3997
- enumerable: !0,
3998
- get: function() {
3999
- return is_v2;
4000
- }
4001
- }), Object.defineProperty(exports, "s", {
4002
- enumerable: !0,
4003
- get: function() {
4004
- return screen;
4005
- }
4006
- }), Object.defineProperty(exports, "t", {
4007
- enumerable: !0,
4008
- get: function() {
4009
- return getScopedTheme;
4010
- }
4011
- }), Object.defineProperty(exports, "u", {
4012
- enumerable: !0,
4013
- get: function() {
4014
- return parseColor;
4015
- }
4016
- }), Object.defineProperty(exports, "v", {
4017
- enumerable: !0,
4018
- get: function() {
4019
- return isColorConfigBaseKey;
4020
- }
4021
- }), Object.defineProperty(exports, "w", {
4022
- enumerable: !0,
4023
- get: function() {
4024
- return isColorTokenValue;
4025
- }
4026
- }), Object.defineProperty(exports, "x", {
4027
- enumerable: !0,
4028
- get: function() {
4029
- return isColorConfigStateKey;
4030
- }
4031
- }), Object.defineProperty(exports, "y", {
4032
- enumerable: !0,
4033
- get: function() {
4034
- return isColorConfigBaseTone;
4035
- }
4036
- }), Object.defineProperty(exports, "z", {
4037
- enumerable: !0,
4038
- get: function() {
4039
- return THEME_COLOR_AVATAR_COLORS;
4040
- }
4041
- });
4042
-
4043
- //# sourceMappingURL=getScopedTheme.cjs.map