@sanity/ui 2.0.6 → 2.0.7

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