@sanity/ui 2.3.6 → 2.4.0

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,3 +1,5 @@
1
+ import { defaultThemeConfig, themeColor_v0_v2 } from "./_legacy/getTheme_v2.esm.js";
2
+ import { getTheme_v2 } from "./_legacy/getTheme_v2.esm.js";
1
3
  import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
2
4
  function createSelectableTones(opts, base, dark, solid, muted) {
3
5
  return {
@@ -684,85 +686,7 @@ function _createColor(opts, dark, name) {
684
686
  muted
685
687
  };
686
688
  }
687
- const BORDER_WIDTH = 1, OUTLINE_WIDTH = 0.5, defaultThemeConfig = {
688
- _version: 2,
689
- avatar: {
690
- sizes: [
691
- { distance: -4, size: 19 },
692
- { distance: -4, size: 25 },
693
- { distance: -8, size: 33 },
694
- { distance: -12, size: 49 }
695
- ],
696
- focusRing: { offset: 1, width: 1 }
697
- },
698
- button: {
699
- textWeight: "medium",
700
- border: { width: BORDER_WIDTH },
701
- focusRing: { offset: -1, width: 1 }
702
- },
703
- card: {
704
- border: { width: BORDER_WIDTH },
705
- focusRing: { offset: -1, width: 1 },
706
- shadow: { outline: OUTLINE_WIDTH }
707
- },
708
- container: [320, 640, 960, 1280, 1600, 1920],
709
- media: [360, 600, 900, 1200, 1800, 2400],
710
- layer: {
711
- dialog: { zOffset: 600 },
712
- popover: { zOffset: 400 },
713
- tooltip: { zOffset: 200 }
714
- },
715
- radius: [0, 1, 3, 6, 9, 12, 21],
716
- shadow: [
717
- null,
718
- { umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0] },
719
- { umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1] },
720
- { umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4] },
721
- { umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6] },
722
- { umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8] }
723
- ],
724
- space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
725
- input: {
726
- border: {
727
- width: BORDER_WIDTH
728
- },
729
- checkbox: {
730
- size: 17,
731
- focusRing: { offset: -1, width: 1 }
732
- },
733
- radio: {
734
- size: 17,
735
- markSize: 9,
736
- focusRing: { offset: -1, width: 1 }
737
- },
738
- switch: {
739
- width: 25,
740
- height: 17,
741
- padding: 5,
742
- transitionDurationMs: 150,
743
- transitionTimingFunction: "ease-out",
744
- focusRing: { offset: 1, width: 1 }
745
- },
746
- select: {
747
- focusRing: { offset: -1, width: 1 }
748
- },
749
- text: {
750
- focusRing: { offset: -1, width: 1 }
751
- }
752
- },
753
- style: {
754
- button: {
755
- root: {
756
- transition: "background-color 100ms,border-color 100ms,color 100ms"
757
- }
758
- }
759
- // card: {
760
- // root: {
761
- // transition: 'background-color 100ms,border-color 100ms,color 100ms',
762
- // },
763
- // },
764
- }
765
- }, defaultThemeFonts = {
689
+ const defaultThemeFonts = {
766
690
  code: {
767
691
  family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
768
692
  weights: {
@@ -983,242 +907,7 @@ const BORDER_WIDTH = 1, OUTLINE_WIDTH = 0.5, defaultThemeConfig = {
983
907
  }
984
908
  ]
985
909
  }
986
- }, cache$4 = /* @__PURE__ */ new WeakMap();
987
- function themeColor_v0_v2(color_v0) {
988
- var _a, _b, _c;
989
- const cached_v2 = cache$4.get(color_v0);
990
- if (cached_v2) return cached_v2;
991
- const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
992
- _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
993
- _dark: color_v0.dark,
994
- accent: base.accent,
995
- avatar: base.avatar,
996
- backdrop: color_v0.base.shadow.ambient,
997
- badge: base.badge,
998
- bg: color_v0.base.bg,
999
- border: color_v0.base.border,
1000
- button: {
1001
- default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
1002
- ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
1003
- bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
1004
- },
1005
- code: base.code,
1006
- fg: color_v0.base.fg,
1007
- focusRing: color_v0.base.focusRing,
1008
- icon: base.muted.fg,
1009
- input: {
1010
- default: inputStatesThemeColor_v0_v2(color_v0.input.default),
1011
- invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
1012
- },
1013
- kbd: base.kbd,
1014
- link: base.link,
1015
- muted: {
1016
- ...base.muted,
1017
- bg: ((_a = color_v0.selectable) == null ? void 0 : _a.default.enabled.bg2) || color_v0.base.bg
1018
- },
1019
- selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
1020
- shadow: color_v0.base.shadow,
1021
- skeleton: {
1022
- from: ((_b = color_v0.skeleton) == null ? void 0 : _b.from) || color_v0.base.border,
1023
- to: ((_c = color_v0.skeleton) == null ? void 0 : _c.to) || color_v0.base.border
1024
- },
1025
- syntax: color_v0.syntax
1026
- };
1027
- return cache$4.set(color_v0, color_v2), color_v2;
1028
- }
1029
- function stateTonesThemeColor_v0_v2(v0, t) {
1030
- return {
1031
- default: {
1032
- enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
1033
- hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
1034
- pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
1035
- selected: stateThemeColor_v0_v2(v0, t.default.selected),
1036
- disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
1037
- },
1038
- primary: {
1039
- enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
1040
- hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
1041
- pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
1042
- selected: stateThemeColor_v0_v2(v0, t.primary.selected),
1043
- disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
1044
- },
1045
- positive: {
1046
- enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
1047
- hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
1048
- pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
1049
- selected: stateThemeColor_v0_v2(v0, t.positive.selected),
1050
- disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
1051
- },
1052
- caution: {
1053
- enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
1054
- hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
1055
- pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
1056
- selected: stateThemeColor_v0_v2(v0, t.caution.selected),
1057
- disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
1058
- },
1059
- critical: {
1060
- enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
1061
- hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
1062
- pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
1063
- selected: stateThemeColor_v0_v2(v0, t.critical.selected),
1064
- disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
1065
- }
1066
- };
1067
- }
1068
- function stateThemeColor_v0_v2(v0, state) {
1069
- var _a, _b;
1070
- return {
1071
- ...state,
1072
- avatar: {
1073
- gray: {
1074
- bg: v0.spot.gray,
1075
- fg: v0.base.bg
1076
- },
1077
- blue: {
1078
- bg: v0.spot.blue,
1079
- fg: v0.base.bg
1080
- },
1081
- purple: {
1082
- bg: v0.spot.purple,
1083
- fg: v0.base.bg
1084
- },
1085
- magenta: {
1086
- bg: v0.spot.magenta,
1087
- fg: v0.base.bg
1088
- },
1089
- red: {
1090
- bg: v0.spot.red,
1091
- fg: v0.base.bg
1092
- },
1093
- orange: {
1094
- bg: v0.spot.orange,
1095
- fg: v0.base.bg
1096
- },
1097
- yellow: {
1098
- bg: v0.spot.yellow,
1099
- fg: v0.base.bg
1100
- },
1101
- green: {
1102
- bg: v0.spot.green,
1103
- fg: v0.base.bg
1104
- },
1105
- cyan: {
1106
- bg: v0.spot.cyan,
1107
- fg: v0.base.bg
1108
- }
1109
- },
1110
- badge: {
1111
- default: {
1112
- bg: v0.muted.default.enabled.bg,
1113
- fg: v0.muted.default.enabled.fg,
1114
- dot: v0.muted.default.enabled.muted.fg,
1115
- icon: v0.muted.default.enabled.muted.fg
1116
- },
1117
- primary: {
1118
- bg: v0.muted.primary.enabled.bg,
1119
- fg: v0.muted.primary.enabled.fg,
1120
- dot: v0.muted.primary.enabled.muted.fg,
1121
- icon: v0.muted.primary.enabled.muted.fg
1122
- },
1123
- positive: {
1124
- bg: v0.muted.positive.enabled.bg,
1125
- fg: v0.muted.positive.enabled.fg,
1126
- dot: v0.muted.positive.enabled.muted.fg,
1127
- icon: v0.muted.positive.enabled.muted.fg
1128
- },
1129
- caution: {
1130
- bg: v0.muted.caution.enabled.bg,
1131
- fg: v0.muted.caution.enabled.fg,
1132
- dot: v0.muted.caution.enabled.muted.fg,
1133
- icon: v0.muted.caution.enabled.muted.fg
1134
- },
1135
- critical: {
1136
- bg: v0.muted.critical.enabled.bg,
1137
- fg: v0.muted.critical.enabled.fg,
1138
- dot: v0.muted.critical.enabled.muted.fg,
1139
- icon: v0.muted.critical.enabled.muted.fg
1140
- }
1141
- },
1142
- kbd: {
1143
- bg: v0.muted.default.enabled.bg,
1144
- fg: v0.muted.default.enabled.fg,
1145
- border: v0.muted.default.enabled.border
1146
- },
1147
- muted: {
1148
- ...v0.muted.default.enabled.muted,
1149
- bg: state.bg2 || state.bg
1150
- },
1151
- skeleton: {
1152
- from: ((_a = state.skeleton) == null ? void 0 : _a.from) || state.border,
1153
- to: ((_b = state.skeleton) == null ? void 0 : _b.to) || state.border
1154
- }
1155
- };
1156
- }
1157
- function inputStatesThemeColor_v0_v2(states) {
1158
- return {
1159
- enabled: inputStateThemeColor_v0_v2(states.enabled),
1160
- disabled: inputStateThemeColor_v0_v2(states.disabled),
1161
- readOnly: inputStateThemeColor_v0_v2(states.readOnly),
1162
- hovered: inputStateThemeColor_v0_v2(states.hovered)
1163
- };
1164
- }
1165
- function inputStateThemeColor_v0_v2(state) {
1166
- return {
1167
- bg: state.bg,
1168
- border: state.border,
1169
- fg: state.fg,
1170
- muted: {
1171
- bg: state.bg2
1172
- },
1173
- placeholder: state.placeholder
1174
- };
1175
- }
1176
- const cache$3 = /* @__PURE__ */ new WeakMap();
1177
- function getTheme_v2(theme) {
1178
- var _a, _b;
1179
- if ((_a = theme.sanity.v2) != null && _a._resolved) return theme.sanity.v2;
1180
- const cached_v2 = cache$3.get(theme);
1181
- if (cached_v2) return cached_v2;
1182
- const v2 = {
1183
- _version: 2,
1184
- _resolved: !0,
1185
- avatar: {
1186
- ...defaultThemeConfig.avatar,
1187
- ...theme.sanity.avatar
1188
- },
1189
- button: {
1190
- ...defaultThemeConfig.button,
1191
- ...theme.sanity.button
1192
- },
1193
- card: defaultThemeConfig.card,
1194
- color: themeColor_v0_v2(theme.sanity.color),
1195
- container: theme.sanity.container,
1196
- font: theme.sanity.fonts,
1197
- input: {
1198
- ...defaultThemeConfig.input,
1199
- ...theme.sanity.input,
1200
- checkbox: {
1201
- ...defaultThemeConfig.input.checkbox,
1202
- ...theme.sanity.input.checkbox
1203
- },
1204
- radio: {
1205
- ...defaultThemeConfig.input.radio,
1206
- ...theme.sanity.input.radio
1207
- },
1208
- switch: {
1209
- ...defaultThemeConfig.input.switch,
1210
- ...theme.sanity.input.switch
1211
- }
1212
- },
1213
- layer: (_b = theme.sanity.layer) != null ? _b : defaultThemeConfig.layer,
1214
- media: theme.sanity.media,
1215
- radius: theme.sanity.radius,
1216
- shadow: theme.sanity.shadows,
1217
- space: theme.sanity.space,
1218
- style: theme.sanity.styles
1219
- };
1220
- return cache$3.set(theme, v2), v2;
1221
- }
910
+ };
1222
911
  function is_v0(themeProp) {
1223
912
  return themeProp._version === 0;
1224
913
  }