@sanity/ui 2.0.13-alpha.2 → 2.0.13

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.
Files changed (115) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.esm.js +74 -74
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +202 -202
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +74 -74
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/theme.d.mts +1 -1
  10. package/dist/theme.d.ts +1 -1
  11. package/dist/theme.esm.js +587 -51
  12. package/dist/theme.esm.js.map +1 -1
  13. package/dist/theme.js +560 -22
  14. package/dist/theme.js.map +1 -1
  15. package/dist/theme.mjs +587 -51
  16. package/dist/theme.mjs.map +1 -1
  17. package/package.json +27 -28
  18. package/src/core/components/autocomplete/autocomplete.styles.tsx +1 -1
  19. package/src/core/components/breadcrumbs/breadcrumbs.styles.ts +1 -1
  20. package/src/core/components/dialog/__workshop__/panes.tsx +1 -1
  21. package/src/core/components/dialog/dialog.tsx +1 -1
  22. package/src/core/components/dialog/styles.ts +3 -3
  23. package/src/core/components/hotkeys/hotkeys.tsx +1 -1
  24. package/src/core/components/menu/menu.tsx +1 -1
  25. package/src/core/components/menu/menuDivider.ts +1 -1
  26. package/src/core/components/skeleton/skeleton.tsx +1 -1
  27. package/src/core/components/skeleton/textSkeleton.tsx +3 -3
  28. package/src/core/components/tab/tab.tsx +1 -1
  29. package/src/core/components/tab/tabList.tsx +1 -1
  30. package/src/core/components/toast/toast.tsx +1 -1
  31. package/src/core/components/toast/toastProvider.tsx +1 -1
  32. package/src/core/components/tree/style.ts +3 -2
  33. package/src/core/components/tree/treeItem.tsx +1 -1
  34. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +1 -1
  35. package/src/core/primitives/_selectable/selectable.tsx +1 -1
  36. package/src/core/primitives/_selectable/style.ts +2 -1
  37. package/src/core/primitives/avatar/avatar.tsx +1 -1
  38. package/src/core/primitives/avatar/avatarCounter.tsx +4 -3
  39. package/src/core/primitives/avatar/avatarStack.tsx +3 -2
  40. package/src/core/primitives/avatar/styles.ts +3 -3
  41. package/src/core/primitives/badge/badge.tsx +1 -1
  42. package/src/core/primitives/box/box.tsx +1 -1
  43. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +1 -1
  44. package/src/core/primitives/button/__workshop__/styled1.tsx +1 -1
  45. package/src/core/primitives/button/__workshop__/styled2.tsx +1 -1
  46. package/src/core/primitives/button/button.tsx +1 -1
  47. package/src/core/primitives/button/styles.ts +3 -3
  48. package/src/core/primitives/card/__workshop__/selected.tsx +3 -3
  49. package/src/core/primitives/card/__workshop__/styled.tsx +1 -1
  50. package/src/core/primitives/card/card.tsx +1 -1
  51. package/src/core/primitives/card/styles.ts +3 -2
  52. package/src/core/primitives/checkbox/checkbox.tsx +1 -1
  53. package/src/core/primitives/checkbox/styles.ts +2 -1
  54. package/src/core/primitives/code/code.tsx +1 -1
  55. package/src/core/primitives/code/styles.ts +4 -1
  56. package/src/core/primitives/container/container.tsx +1 -1
  57. package/src/core/primitives/container/styles.ts +2 -2
  58. package/src/core/primitives/flex/__workshop__/example.tsx +1 -1
  59. package/src/core/primitives/flex/flex.tsx +1 -1
  60. package/src/core/primitives/grid/grid.tsx +1 -1
  61. package/src/core/primitives/heading/heading.tsx +1 -1
  62. package/src/core/primitives/heading/styles.ts +2 -1
  63. package/src/core/primitives/inline/inline.tsx +1 -1
  64. package/src/core/primitives/inline/styles.ts +2 -2
  65. package/src/core/primitives/kbd/kbd.tsx +1 -1
  66. package/src/core/primitives/label/label.tsx +1 -1
  67. package/src/core/primitives/label/styles.ts +2 -1
  68. package/src/core/primitives/popover/popoverCard.tsx +1 -1
  69. package/src/core/primitives/radio/radio.tsx +1 -1
  70. package/src/core/primitives/radio/styles.ts +2 -1
  71. package/src/core/primitives/select/select.tsx +1 -1
  72. package/src/core/primitives/select/styles.ts +5 -5
  73. package/src/core/primitives/spinner/spinner.tsx +1 -1
  74. package/src/core/primitives/stack/stack.tsx +1 -1
  75. package/src/core/primitives/stack/styles.ts +2 -2
  76. package/src/core/primitives/switch/styles.ts +4 -3
  77. package/src/core/primitives/switch/switch.tsx +1 -1
  78. package/src/core/primitives/text/__workshop__/colored.tsx +3 -3
  79. package/src/core/primitives/text/styles.ts +2 -1
  80. package/src/core/primitives/text/text.tsx +1 -1
  81. package/src/core/primitives/textArea/textArea.tsx +1 -1
  82. package/src/core/primitives/textInput/textInput.tsx +1 -1
  83. package/src/core/primitives/tooltip/tooltip.tsx +1 -1
  84. package/src/core/primitives/tooltip/tooltipCard.tsx +1 -1
  85. package/src/core/styles/border/borderStyle.ts +6 -6
  86. package/src/core/styles/box/boxStyle.ts +5 -5
  87. package/src/core/styles/flex/flexItemStyle.ts +2 -2
  88. package/src/core/styles/flex/flexStyle.ts +6 -6
  89. package/src/core/styles/font/responsiveFont.ts +2 -2
  90. package/src/core/styles/font/textAlignStyle.ts +2 -2
  91. package/src/core/styles/grid/gridItemStyle.ts +7 -7
  92. package/src/core/styles/grid/gridStyle.ts +9 -9
  93. package/src/core/styles/helpers.ts +2 -2
  94. package/src/core/styles/input/responsiveInputPaddingStyle.ts +2 -2
  95. package/src/core/styles/input/textInputStyle.ts +4 -4
  96. package/src/core/styles/margin/marginsStyle.test.ts +1 -1
  97. package/src/core/styles/padding/paddingStyle.test.ts +1 -1
  98. package/src/core/styles/radius/radiusStyle.ts +2 -2
  99. package/src/core/styles/shadow/shadowStyle.ts +2 -2
  100. package/src/core/theme/__workshop__/build/Root.tsx +2 -1
  101. package/src/core/theme/theme.test.tsx +1 -1
  102. package/src/core/theme/themeProvider.tsx +7 -6
  103. package/src/core/theme/useTheme.ts +1 -2
  104. package/src/core/utils/arrow/arrow.tsx +1 -1
  105. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +1 -1
  106. package/src/core/utils/layer/layer.tsx +1 -1
  107. package/src/core/utils/srOnly/srOnly.tsx +1 -1
  108. package/src/core/utils/virtualList/virtualList.tsx +1 -1
  109. package/src/theme/system/theme.ts +1 -1
  110. package/dist/_chunks-cjs/getScopedTheme.js +0 -547
  111. package/dist/_chunks-cjs/getScopedTheme.js.map +0 -1
  112. package/dist/_chunks-es/getScopedTheme.mjs +0 -548
  113. package/dist/_chunks-es/getScopedTheme.mjs.map +0 -1
  114. package/dist/_legacy/getScopedTheme.esm.js +0 -548
  115. package/dist/_legacy/getScopedTheme.esm.js.map +0 -1
package/dist/theme.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: !0 });
3
- var getScopedTheme = require("./_chunks-cjs/getScopedTheme.js"), color = require("@sanity/color");
3
+ var color = require("@sanity/color");
4
4
  function createSelectableTones(opts, base, dark, solid, muted) {
5
5
  return {
6
6
  default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
@@ -686,7 +686,85 @@ function _createColor(opts, dark, name) {
686
686
  muted
687
687
  };
688
688
  }
689
- const defaultThemeFonts = {
689
+ const BORDER_WIDTH = 1, OUTLINE_WIDTH = 0.5, defaultThemeConfig = {
690
+ _version: 2,
691
+ avatar: {
692
+ sizes: [
693
+ { distance: -4, size: 19 },
694
+ { distance: -4, size: 25 },
695
+ { distance: -8, size: 33 },
696
+ { distance: -12, size: 49 }
697
+ ],
698
+ focusRing: { offset: 1, width: 1 }
699
+ },
700
+ button: {
701
+ textWeight: "medium",
702
+ border: { width: BORDER_WIDTH },
703
+ focusRing: { offset: -1, width: 1 }
704
+ },
705
+ card: {
706
+ border: { width: BORDER_WIDTH },
707
+ focusRing: { offset: -1, width: 1 },
708
+ shadow: { outline: OUTLINE_WIDTH }
709
+ },
710
+ container: [320, 640, 960, 1280, 1600, 1920],
711
+ media: [360, 600, 900, 1200, 1800, 2400],
712
+ layer: {
713
+ dialog: { zOffset: 600 },
714
+ popover: { zOffset: 400 },
715
+ tooltip: { zOffset: 200 }
716
+ },
717
+ radius: [0, 1, 3, 6, 9, 12, 21],
718
+ shadow: [
719
+ null,
720
+ { umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0] },
721
+ { umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1] },
722
+ { umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4] },
723
+ { umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6] },
724
+ { umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8] }
725
+ ],
726
+ space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
727
+ input: {
728
+ border: {
729
+ width: BORDER_WIDTH
730
+ },
731
+ checkbox: {
732
+ size: 17,
733
+ focusRing: { offset: -1, width: 1 }
734
+ },
735
+ radio: {
736
+ size: 17,
737
+ markSize: 9,
738
+ focusRing: { offset: -1, width: 1 }
739
+ },
740
+ switch: {
741
+ width: 25,
742
+ height: 17,
743
+ padding: 5,
744
+ transitionDurationMs: 150,
745
+ transitionTimingFunction: "ease-out",
746
+ focusRing: { offset: 1, width: 1 }
747
+ },
748
+ select: {
749
+ focusRing: { offset: -1, width: 1 }
750
+ },
751
+ text: {
752
+ focusRing: { offset: -1, width: 1 }
753
+ }
754
+ },
755
+ style: {
756
+ button: {
757
+ root: {
758
+ transition: "background-color 100ms,border-color 100ms,color 100ms"
759
+ }
760
+ }
761
+ // card: {
762
+ // root: {
763
+ // transition: 'background-color 100ms,border-color 100ms,color 100ms',
764
+ // },
765
+ // },
766
+ }
767
+ }, defaultThemeFonts = {
690
768
  code: {
691
769
  family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
692
770
  weights: {
@@ -907,10 +985,437 @@ const defaultThemeFonts = {
907
985
  }
908
986
  ]
909
987
  }
910
- };
988
+ }, cache$4 = /* @__PURE__ */ new WeakMap();
989
+ function themeColor_v0_v2(color_v0) {
990
+ var _a, _b, _c;
991
+ const cached_v2 = cache$4.get(color_v0);
992
+ if (cached_v2)
993
+ return cached_v2;
994
+ const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
995
+ _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
996
+ _dark: color_v0.dark,
997
+ accent: base.accent,
998
+ avatar: base.avatar,
999
+ backdrop: color_v0.base.shadow.ambient,
1000
+ badge: base.badge,
1001
+ bg: color_v0.base.bg,
1002
+ border: color_v0.base.border,
1003
+ button: {
1004
+ default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
1005
+ ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
1006
+ bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
1007
+ },
1008
+ code: base.code,
1009
+ fg: color_v0.base.fg,
1010
+ focusRing: color_v0.base.focusRing,
1011
+ icon: base.muted.fg,
1012
+ input: {
1013
+ default: inputStatesThemeColor_v0_v2(color_v0.input.default),
1014
+ invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
1015
+ },
1016
+ kbd: base.kbd,
1017
+ link: base.link,
1018
+ muted: {
1019
+ ...base.muted,
1020
+ bg: ((_a = color_v0.selectable) == null ? void 0 : _a.default.enabled.bg2) || color_v0.base.bg
1021
+ },
1022
+ selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
1023
+ shadow: color_v0.base.shadow,
1024
+ skeleton: {
1025
+ from: ((_b = color_v0.skeleton) == null ? void 0 : _b.from) || color_v0.base.border,
1026
+ to: ((_c = color_v0.skeleton) == null ? void 0 : _c.to) || color_v0.base.border
1027
+ },
1028
+ syntax: color_v0.syntax
1029
+ };
1030
+ return cache$4.set(color_v0, color_v2), color_v2;
1031
+ }
1032
+ function stateTonesThemeColor_v0_v2(v0, t) {
1033
+ return {
1034
+ default: {
1035
+ enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
1036
+ hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
1037
+ pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
1038
+ selected: stateThemeColor_v0_v2(v0, t.default.selected),
1039
+ disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
1040
+ },
1041
+ primary: {
1042
+ enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
1043
+ hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
1044
+ pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
1045
+ selected: stateThemeColor_v0_v2(v0, t.primary.selected),
1046
+ disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
1047
+ },
1048
+ positive: {
1049
+ enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
1050
+ hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
1051
+ pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
1052
+ selected: stateThemeColor_v0_v2(v0, t.positive.selected),
1053
+ disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
1054
+ },
1055
+ caution: {
1056
+ enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
1057
+ hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
1058
+ pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
1059
+ selected: stateThemeColor_v0_v2(v0, t.caution.selected),
1060
+ disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
1061
+ },
1062
+ critical: {
1063
+ enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
1064
+ hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
1065
+ pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
1066
+ selected: stateThemeColor_v0_v2(v0, t.critical.selected),
1067
+ disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
1068
+ }
1069
+ };
1070
+ }
1071
+ function stateThemeColor_v0_v2(v0, state) {
1072
+ var _a, _b;
1073
+ return {
1074
+ ...state,
1075
+ avatar: {
1076
+ gray: {
1077
+ bg: v0.spot.gray,
1078
+ fg: v0.base.bg
1079
+ },
1080
+ blue: {
1081
+ bg: v0.spot.blue,
1082
+ fg: v0.base.bg
1083
+ },
1084
+ purple: {
1085
+ bg: v0.spot.purple,
1086
+ fg: v0.base.bg
1087
+ },
1088
+ magenta: {
1089
+ bg: v0.spot.magenta,
1090
+ fg: v0.base.bg
1091
+ },
1092
+ red: {
1093
+ bg: v0.spot.red,
1094
+ fg: v0.base.bg
1095
+ },
1096
+ orange: {
1097
+ bg: v0.spot.orange,
1098
+ fg: v0.base.bg
1099
+ },
1100
+ yellow: {
1101
+ bg: v0.spot.yellow,
1102
+ fg: v0.base.bg
1103
+ },
1104
+ green: {
1105
+ bg: v0.spot.green,
1106
+ fg: v0.base.bg
1107
+ },
1108
+ cyan: {
1109
+ bg: v0.spot.cyan,
1110
+ fg: v0.base.bg
1111
+ }
1112
+ },
1113
+ badge: {
1114
+ default: {
1115
+ bg: v0.muted.default.enabled.bg,
1116
+ fg: v0.muted.default.enabled.fg,
1117
+ dot: v0.muted.default.enabled.muted.fg,
1118
+ icon: v0.muted.default.enabled.muted.fg
1119
+ },
1120
+ primary: {
1121
+ bg: v0.muted.primary.enabled.bg,
1122
+ fg: v0.muted.primary.enabled.fg,
1123
+ dot: v0.muted.primary.enabled.muted.fg,
1124
+ icon: v0.muted.primary.enabled.muted.fg
1125
+ },
1126
+ positive: {
1127
+ bg: v0.muted.positive.enabled.bg,
1128
+ fg: v0.muted.positive.enabled.fg,
1129
+ dot: v0.muted.positive.enabled.muted.fg,
1130
+ icon: v0.muted.positive.enabled.muted.fg
1131
+ },
1132
+ caution: {
1133
+ bg: v0.muted.caution.enabled.bg,
1134
+ fg: v0.muted.caution.enabled.fg,
1135
+ dot: v0.muted.caution.enabled.muted.fg,
1136
+ icon: v0.muted.caution.enabled.muted.fg
1137
+ },
1138
+ critical: {
1139
+ bg: v0.muted.critical.enabled.bg,
1140
+ fg: v0.muted.critical.enabled.fg,
1141
+ dot: v0.muted.critical.enabled.muted.fg,
1142
+ icon: v0.muted.critical.enabled.muted.fg
1143
+ }
1144
+ },
1145
+ kbd: {
1146
+ bg: v0.muted.default.enabled.bg,
1147
+ fg: v0.muted.default.enabled.fg,
1148
+ border: v0.muted.default.enabled.border
1149
+ },
1150
+ muted: {
1151
+ ...v0.muted.default.enabled.muted,
1152
+ bg: state.bg2 || state.bg
1153
+ },
1154
+ skeleton: {
1155
+ from: ((_a = state.skeleton) == null ? void 0 : _a.from) || state.border,
1156
+ to: ((_b = state.skeleton) == null ? void 0 : _b.to) || state.border
1157
+ }
1158
+ };
1159
+ }
1160
+ function inputStatesThemeColor_v0_v2(states) {
1161
+ return {
1162
+ enabled: inputStateThemeColor_v0_v2(states.enabled),
1163
+ disabled: inputStateThemeColor_v0_v2(states.disabled),
1164
+ readOnly: inputStateThemeColor_v0_v2(states.readOnly),
1165
+ hovered: inputStateThemeColor_v0_v2(states.hovered)
1166
+ };
1167
+ }
1168
+ function inputStateThemeColor_v0_v2(state) {
1169
+ return {
1170
+ bg: state.bg,
1171
+ border: state.border,
1172
+ fg: state.fg,
1173
+ muted: {
1174
+ bg: state.bg2
1175
+ },
1176
+ placeholder: state.placeholder
1177
+ };
1178
+ }
1179
+ const cache$3 = /* @__PURE__ */ new WeakMap();
1180
+ function getTheme_v2(theme) {
1181
+ var _a, _b;
1182
+ if ((_a = theme.sanity.v2) != null && _a._resolved)
1183
+ return theme.sanity.v2;
1184
+ const cached_v2 = cache$3.get(theme);
1185
+ if (cached_v2)
1186
+ return cached_v2;
1187
+ const v2 = {
1188
+ _version: 2,
1189
+ _resolved: !0,
1190
+ avatar: {
1191
+ ...defaultThemeConfig.avatar,
1192
+ ...theme.sanity.avatar
1193
+ },
1194
+ button: {
1195
+ ...defaultThemeConfig.button,
1196
+ ...theme.sanity.button
1197
+ },
1198
+ card: defaultThemeConfig.card,
1199
+ color: themeColor_v0_v2(theme.sanity.color),
1200
+ container: theme.sanity.container,
1201
+ font: theme.sanity.fonts,
1202
+ input: {
1203
+ ...defaultThemeConfig.input,
1204
+ ...theme.sanity.input,
1205
+ checkbox: {
1206
+ ...defaultThemeConfig.input.checkbox,
1207
+ ...theme.sanity.input.checkbox
1208
+ },
1209
+ radio: {
1210
+ ...defaultThemeConfig.input.radio,
1211
+ ...theme.sanity.input.radio
1212
+ },
1213
+ switch: {
1214
+ ...defaultThemeConfig.input.switch,
1215
+ ...theme.sanity.input.switch
1216
+ }
1217
+ },
1218
+ layer: (_b = theme.sanity.layer) != null ? _b : defaultThemeConfig.layer,
1219
+ media: theme.sanity.media,
1220
+ radius: theme.sanity.radius,
1221
+ shadow: theme.sanity.shadows,
1222
+ space: theme.sanity.space,
1223
+ style: theme.sanity.styles
1224
+ };
1225
+ return cache$3.set(theme, v2), v2;
1226
+ }
911
1227
  function is_v0(themeProp) {
912
1228
  return themeProp._version === 0;
913
1229
  }
1230
+ function is_v2(themeProp) {
1231
+ return themeProp._version === 2;
1232
+ }
1233
+ const cache$2 = /* @__PURE__ */ new WeakMap();
1234
+ function v0_v2(v0) {
1235
+ if (v0.v2)
1236
+ return v0.v2;
1237
+ const cached_v2 = cache$2.get(v0);
1238
+ if (cached_v2)
1239
+ return cached_v2;
1240
+ const {
1241
+ avatar,
1242
+ button,
1243
+ color: color2,
1244
+ container,
1245
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
1246
+ focusRing: _unused_focusRing,
1247
+ fonts: font,
1248
+ input,
1249
+ layer,
1250
+ media,
1251
+ radius,
1252
+ shadows: shadow,
1253
+ space,
1254
+ styles: style
1255
+ } = v0, v2 = {
1256
+ _version: 2,
1257
+ avatar: {
1258
+ ...defaultThemeConfig.avatar,
1259
+ ...avatar
1260
+ },
1261
+ button: {
1262
+ ...defaultThemeConfig.button,
1263
+ ...button
1264
+ },
1265
+ card: defaultThemeConfig.card,
1266
+ color: {
1267
+ light: {
1268
+ transparent: themeColor_v0_v2(color2.light.transparent),
1269
+ default: themeColor_v0_v2(color2.light.default),
1270
+ primary: themeColor_v0_v2(color2.light.primary),
1271
+ positive: themeColor_v0_v2(color2.light.positive),
1272
+ caution: themeColor_v0_v2(color2.light.caution),
1273
+ critical: themeColor_v0_v2(color2.light.critical)
1274
+ },
1275
+ dark: {
1276
+ transparent: themeColor_v0_v2(color2.dark.transparent),
1277
+ default: themeColor_v0_v2(color2.dark.default),
1278
+ primary: themeColor_v0_v2(color2.dark.primary),
1279
+ positive: themeColor_v0_v2(color2.dark.positive),
1280
+ caution: themeColor_v0_v2(color2.dark.caution),
1281
+ critical: themeColor_v0_v2(color2.dark.critical)
1282
+ }
1283
+ },
1284
+ container,
1285
+ font,
1286
+ input: {
1287
+ ...defaultThemeConfig.input,
1288
+ ...input,
1289
+ checkbox: {
1290
+ ...defaultThemeConfig.input.checkbox,
1291
+ ...input.checkbox
1292
+ },
1293
+ radio: {
1294
+ ...defaultThemeConfig.input.radio,
1295
+ ...input.radio
1296
+ },
1297
+ switch: {
1298
+ ...defaultThemeConfig.input.switch,
1299
+ ...input.switch
1300
+ }
1301
+ },
1302
+ layer: layer != null ? layer : defaultThemeConfig.layer,
1303
+ media,
1304
+ radius,
1305
+ shadow,
1306
+ space,
1307
+ style
1308
+ };
1309
+ return cache$2.set(v0, v2), v2;
1310
+ }
1311
+ const cache$1 = /* @__PURE__ */ new WeakMap();
1312
+ function v2_v0(v2) {
1313
+ const cachedTheme = cache$1.get(v2);
1314
+ if (cachedTheme)
1315
+ return cachedTheme;
1316
+ const {
1317
+ avatar,
1318
+ button,
1319
+ color: color2,
1320
+ container,
1321
+ font: fonts,
1322
+ input,
1323
+ media,
1324
+ radius,
1325
+ shadow: shadows,
1326
+ space,
1327
+ style: styles
1328
+ } = v2;
1329
+ return {
1330
+ _version: 0,
1331
+ avatar,
1332
+ button,
1333
+ container,
1334
+ color: {
1335
+ light: {
1336
+ transparent: themeColor_v2_v0(color2.light.transparent),
1337
+ default: themeColor_v2_v0(color2.light.default),
1338
+ primary: themeColor_v2_v0(color2.light.primary),
1339
+ positive: themeColor_v2_v0(color2.light.positive),
1340
+ caution: themeColor_v2_v0(color2.light.caution),
1341
+ critical: themeColor_v2_v0(color2.light.critical)
1342
+ },
1343
+ dark: {
1344
+ transparent: themeColor_v2_v0(color2.dark.transparent),
1345
+ default: themeColor_v2_v0(color2.dark.default),
1346
+ primary: themeColor_v2_v0(color2.dark.primary),
1347
+ positive: themeColor_v2_v0(color2.dark.positive),
1348
+ caution: themeColor_v2_v0(color2.dark.caution),
1349
+ critical: themeColor_v2_v0(color2.dark.critical)
1350
+ }
1351
+ },
1352
+ focusRing: input.text.focusRing,
1353
+ fonts,
1354
+ input,
1355
+ media,
1356
+ radius,
1357
+ shadows,
1358
+ space,
1359
+ styles,
1360
+ v2
1361
+ };
1362
+ }
1363
+ function themeColor_v2_v0(color_v2) {
1364
+ return {
1365
+ base: {
1366
+ bg: color_v2.bg,
1367
+ fg: color_v2.fg,
1368
+ border: color_v2.border,
1369
+ focusRing: color_v2.focusRing,
1370
+ shadow: color_v2.shadow
1371
+ },
1372
+ button: color_v2.button,
1373
+ card: color_v2.selectable.default,
1374
+ dark: color_v2._dark,
1375
+ input: {
1376
+ default: inputStatesThemeColor_v2_v0(color_v2.input.default),
1377
+ invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid)
1378
+ },
1379
+ muted: {
1380
+ ...color_v2.button.ghost,
1381
+ transparent: color_v2.button.ghost.default
1382
+ },
1383
+ solid: {
1384
+ ...color_v2.button.default,
1385
+ transparent: color_v2.button.default.default
1386
+ },
1387
+ selectable: color_v2.selectable,
1388
+ spot: {
1389
+ gray: color_v2.avatar.gray.bg,
1390
+ blue: color_v2.avatar.blue.bg,
1391
+ purple: color_v2.avatar.purple.bg,
1392
+ magenta: color_v2.avatar.magenta.bg,
1393
+ red: color_v2.avatar.red.bg,
1394
+ orange: color_v2.avatar.orange.bg,
1395
+ yellow: color_v2.avatar.yellow.bg,
1396
+ green: color_v2.avatar.green.bg,
1397
+ cyan: color_v2.avatar.cyan.bg
1398
+ },
1399
+ syntax: color_v2.syntax
1400
+ };
1401
+ }
1402
+ function inputStatesThemeColor_v2_v0(t) {
1403
+ return {
1404
+ enabled: inputStateThemeColor_v2_v0(t.enabled),
1405
+ disabled: inputStateThemeColor_v2_v0(t.disabled),
1406
+ readOnly: inputStateThemeColor_v2_v0(t.readOnly),
1407
+ hovered: inputStateThemeColor_v2_v0(t.hovered)
1408
+ };
1409
+ }
1410
+ function inputStateThemeColor_v2_v0(t) {
1411
+ return {
1412
+ bg: t.bg,
1413
+ bg2: t.muted.bg,
1414
+ border: t.border,
1415
+ fg: t.fg,
1416
+ placeholder: t.placeholder
1417
+ };
1418
+ }
914
1419
  const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
915
1420
  "transparent",
916
1421
  "default",
@@ -2735,32 +3240,60 @@ function buildTheme(config) {
2735
3240
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
2736
3241
  const colorTheme = buildColorTheme(config), v2 = {
2737
3242
  _version: 2,
2738
- avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : getScopedTheme.defaultThemeConfig.avatar,
2739
- button: (_b = config == null ? void 0 : config.button) != null ? _b : getScopedTheme.defaultThemeConfig.button,
2740
- card: (_c = config == null ? void 0 : config.card) != null ? _c : getScopedTheme.defaultThemeConfig.card,
3243
+ avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : defaultThemeConfig.avatar,
3244
+ button: (_b = config == null ? void 0 : config.button) != null ? _b : defaultThemeConfig.button,
3245
+ card: (_c = config == null ? void 0 : config.card) != null ? _c : defaultThemeConfig.card,
2741
3246
  // How colors are generated:
2742
3247
  // 1. Merge custom tokens with default tokens
2743
3248
  // 2. Generate tree of color keys (gray/500, black, white, etc.)
2744
3249
  // 3. Apply mixing and render to hex values
2745
3250
  // render(build(mergeWithDefaults()))
2746
3251
  color: renderThemeColorSchemes(colorTheme, config),
2747
- container: (_d = config == null ? void 0 : config.container) != null ? _d : getScopedTheme.defaultThemeConfig.container,
3252
+ container: (_d = config == null ? void 0 : config.container) != null ? _d : defaultThemeConfig.container,
2748
3253
  font: (_e = config == null ? void 0 : config.font) != null ? _e : defaultThemeFonts,
2749
- input: (_f = config == null ? void 0 : config.input) != null ? _f : getScopedTheme.defaultThemeConfig.input,
2750
- layer: (_g = config == null ? void 0 : config.layer) != null ? _g : getScopedTheme.defaultThemeConfig.layer,
2751
- media: (_h = config == null ? void 0 : config.media) != null ? _h : getScopedTheme.defaultThemeConfig.media,
2752
- radius: (_i = config == null ? void 0 : config.radius) != null ? _i : getScopedTheme.defaultThemeConfig.radius,
2753
- shadow: (_j = config == null ? void 0 : config.shadow) != null ? _j : getScopedTheme.defaultThemeConfig.shadow,
2754
- space: (_k = config == null ? void 0 : config.space) != null ? _k : getScopedTheme.defaultThemeConfig.space,
2755
- style: (_l = config == null ? void 0 : config.style) != null ? _l : getScopedTheme.defaultThemeConfig.style
2756
- };
2757
- return getScopedTheme.v2_v0(v2);
2758
- }
2759
- exports.getScopedTheme = getScopedTheme.getScopedTheme;
2760
- exports.getTheme_v2 = getScopedTheme.getTheme_v2;
2761
- exports.is_v2 = getScopedTheme.is_v2;
2762
- exports.v0_v2 = getScopedTheme.v0_v2;
2763
- exports.v2_v0 = getScopedTheme.v2_v0;
3254
+ input: (_f = config == null ? void 0 : config.input) != null ? _f : defaultThemeConfig.input,
3255
+ layer: (_g = config == null ? void 0 : config.layer) != null ? _g : defaultThemeConfig.layer,
3256
+ media: (_h = config == null ? void 0 : config.media) != null ? _h : defaultThemeConfig.media,
3257
+ radius: (_i = config == null ? void 0 : config.radius) != null ? _i : defaultThemeConfig.radius,
3258
+ shadow: (_j = config == null ? void 0 : config.shadow) != null ? _j : defaultThemeConfig.shadow,
3259
+ space: (_k = config == null ? void 0 : config.space) != null ? _k : defaultThemeConfig.space,
3260
+ style: (_l = config == null ? void 0 : config.style) != null ? _l : defaultThemeConfig.style
3261
+ };
3262
+ return v2_v0(v2);
3263
+ }
3264
+ const cache = /* @__PURE__ */ new Map();
3265
+ function getScopedTheme(themeProp, scheme, tone) {
3266
+ const cachedTheme = _getCachedTheme(themeProp, scheme, tone);
3267
+ if (cachedTheme)
3268
+ return cachedTheme;
3269
+ 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 = {
3270
+ sanity: {
3271
+ ...v0,
3272
+ color: color_v0,
3273
+ layer: layer_v0,
3274
+ v2: {
3275
+ ...v2,
3276
+ _resolved: !0,
3277
+ color: color_v2,
3278
+ layer: layer_v2
3279
+ }
3280
+ }
3281
+ };
3282
+ return _setCachedTheme(themeProp, scheme, tone, theme), theme;
3283
+ }
3284
+ function _getCachedTheme(rootTheme, scheme, tone) {
3285
+ const schemeCache = cache.get(scheme);
3286
+ if (!schemeCache)
3287
+ return;
3288
+ const toneCache = schemeCache.get(tone);
3289
+ if (toneCache)
3290
+ return toneCache.get(rootTheme);
3291
+ }
3292
+ function _setCachedTheme(rootTheme, scheme, tone, theme) {
3293
+ cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
3294
+ const schemeCache = cache.get(scheme);
3295
+ schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
3296
+ }
2764
3297
  exports.COLOR_CONFIG_AVATAR_COLORS = COLOR_CONFIG_AVATAR_COLORS;
2765
3298
  exports.COLOR_CONFIG_BLEND_KEYS = COLOR_CONFIG_BLEND_KEYS;
2766
3299
  exports.COLOR_CONFIG_CARD_KEYS = COLOR_CONFIG_CARD_KEYS;
@@ -2782,6 +3315,8 @@ exports.THEME_COLOR_STATE_TONES = THEME_COLOR_STATE_TONES;
2782
3315
  exports.buildTheme = buildTheme;
2783
3316
  exports.createColorTheme = createColorTheme;
2784
3317
  exports.getContrastRatio = getContrastRatio;
3318
+ exports.getScopedTheme = getScopedTheme;
3319
+ exports.getTheme_v2 = getTheme_v2;
2785
3320
  exports.hexToRgb = hexToRgb;
2786
3321
  exports.hslToRgb = hslToRgb;
2787
3322
  exports.isColorBlendModeValue = isColorBlendModeValue;
@@ -2797,6 +3332,7 @@ exports.isColorTintKey = isColorTintKey;
2797
3332
  exports.isColorTokenValue = isColorTokenValue;
2798
3333
  exports.isColorValue = isColorValue;
2799
3334
  exports.is_v0 = is_v0;
3335
+ exports.is_v2 = is_v2;
2800
3336
  exports.mix = mix;
2801
3337
  exports.multiply = multiply;
2802
3338
  exports.parseColor = parseColor;
@@ -2807,4 +3343,6 @@ exports.rgbToHsl = rgbToHsl;
2807
3343
  exports.rgba = rgba;
2808
3344
  exports.rgbaToRGBA = rgbaToRGBA;
2809
3345
  exports.screen = screen;
3346
+ exports.v0_v2 = v0_v2;
3347
+ exports.v2_v0 = v2_v0;
2810
3348
  //# sourceMappingURL=theme.js.map