@sanity/ui 3.0.0-static.10 → 3.0.0-static.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +105 -143
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-cjs/buildCommand.js +1 -1
  4. package/dist/_chunks-cjs/buildCommand.js.map +1 -1
  5. package/dist/_chunks-cjs/v3_v2.js +251 -0
  6. package/dist/_chunks-cjs/v3_v2.js.map +1 -0
  7. package/dist/_chunks-es/_visual-editing.mjs +106 -144
  8. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  9. package/dist/_chunks-es/v3_v2.mjs +252 -0
  10. package/dist/_chunks-es/v3_v2.mjs.map +1 -0
  11. package/dist/_visual-editing.d.mts +11 -14
  12. package/dist/_visual-editing.d.ts +11 -14
  13. package/dist/cli.js +1 -1
  14. package/dist/css.d.mts +1006 -282
  15. package/dist/css.d.ts +1006 -282
  16. package/dist/css.js +743 -852
  17. package/dist/css.js.map +1 -1
  18. package/dist/css.mjs +743 -852
  19. package/dist/css.mjs.map +1 -1
  20. package/dist/index.d.mts +11 -14
  21. package/dist/index.d.ts +11 -14
  22. package/dist/index.js +31 -17
  23. package/dist/index.js.map +1 -1
  24. package/dist/index.mjs +33 -19
  25. package/dist/index.mjs.map +1 -1
  26. package/dist/sanity-palette.css +9 -1
  27. package/dist/sanity-theme.css +1 -1
  28. package/dist/system.css +1023 -1448
  29. package/dist/theme.d.mts +119 -85
  30. package/dist/theme.d.ts +119 -85
  31. package/dist/theme.js +219 -432
  32. package/dist/theme.js.map +1 -1
  33. package/dist/theme.mjs +202 -413
  34. package/dist/theme.mjs.map +1 -1
  35. package/package.json +2 -2
  36. package/src/cli/buildCommand.ts +2 -2
  37. package/src/css/_comp.ts +0 -1
  38. package/src/css/aspects/flex/flexJustify.style.ts +3 -3
  39. package/src/css/aspects/grid/types.ts +2 -2
  40. package/src/css/aspects/index.ts +0 -1
  41. package/src/css/aspects/textOverflow/textOverflow.ts +2 -2
  42. package/src/css/compile/compilePalette.ts +41 -8
  43. package/src/css/compile/compileRule.ts +0 -1
  44. package/src/css/compile/compileStyle.ts +1 -1
  45. package/src/css/compile/compileTheme_v3.ts +55 -46
  46. package/src/css/index.ts +2 -2
  47. package/src/css/primitives/_input/__workshop__/index.ts +1 -1
  48. package/src/css/primitives/_selectable/_contants.ts +1 -1
  49. package/src/css/primitives/badge/badge.style.ts +1 -1
  50. package/src/css/primitives/box/box.style.ts +1 -1
  51. package/src/css/primitives/box/box.ts +0 -2
  52. package/src/css/primitives/box/types.ts +0 -2
  53. package/src/css/primitives/button/_constants.ts +1 -1
  54. package/src/css/primitives/button/button.style.ts +13 -32
  55. package/src/css/primitives/card/_constants.ts +2 -2
  56. package/src/css/primitives/card/card.style.ts +44 -116
  57. package/src/css/primitives/card/card.ts +1 -1
  58. package/src/css/primitives/card/rules.ts +473 -0
  59. package/src/css/primitives/card/types.ts +1 -0
  60. package/src/css/primitives/kbd/kbd.style.ts +1 -1
  61. package/src/css/primitives/popover/popover.ts +0 -4
  62. package/src/css/primitives/switch/switch.style.ts +83 -8
  63. package/src/css/primitives/text/text.style.ts +3 -11
  64. package/src/css/system.style.ts +0 -4
  65. package/src/css/types.ts +188 -202
  66. package/src/css/varNames.ts +76 -110
  67. package/src/css/vars.ts +76 -109
  68. package/src/theme/defaults/config.ts +2 -2
  69. package/src/theme/defaults/fonts.ts +4 -4
  70. package/src/theme/palette/constants.ts +3 -1
  71. package/src/theme/palette/types.ts +12 -0
  72. package/src/theme/v3/buildTheme_v3.ts +2 -1
  73. package/src/theme/v3/color/buildColor_v3.ts +38 -43
  74. package/src/theme/v3/color/card.ts +38 -43
  75. package/src/theme/v3/color/color.ts +38 -42
  76. package/src/theme/v3/defaults.ts +72 -69
  77. package/src/theme/v3/resolveTokens.ts +38 -43
  78. package/src/theme/v3/types.ts +3 -0
  79. package/src/theme/versioning/themeColor_v3_v2.ts +1 -1
  80. package/src/ui/StyleTags.tsx +1 -1
  81. package/src/ui/components/autocomplete/__workshop__/async.tsx +1 -0
  82. package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
  83. package/src/ui/components/autocomplete/autocomplete.tsx +11 -2
  84. package/src/ui/components/dialog/dialog.tsx +4 -3
  85. package/src/ui/constants.ts +0 -6
  86. package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +2 -0
  87. package/src/ui/primitives/box/box.tsx +2 -9
  88. package/src/ui/primitives/button/button.tsx +11 -12
  89. package/src/ui/primitives/card/card.tsx +5 -4
  90. package/src/ui/primitives/code/code.tsx +1 -1
  91. package/src/ui/primitives/heading/heading.tsx +1 -1
  92. package/src/ui/primitives/kbd/kbd.tsx +2 -2
  93. package/src/ui/primitives/popover/popover.tsx +75 -5
  94. package/src/ui/primitives/popover/popoverCard.tsx +39 -45
  95. package/src/ui/primitives/select/select.tsx +3 -3
  96. package/src/ui/primitives/stack/stack.tsx +5 -10
  97. package/src/ui/primitives/text/text.tsx +1 -1
  98. package/src/ui/primitives/textInput/textInput.tsx +1 -1
  99. package/src/ui/primitives/tooltip/tooltip.tsx +3 -2
  100. package/src/css/aspects/minWidth/index.ts +0 -2
  101. package/src/css/aspects/minWidth/minWidth.style.ts +0 -13
  102. package/src/css/aspects/minWidth/minWidth.ts +0 -6
  103. package/src/css/aspects/minWidth/types.ts +0 -7
  104. package/src/css/primitives/stack/index.ts +0 -1
  105. package/src/css/primitives/stack/stack.style.ts +0 -9
  106. package/src/css/primitives/stack/stack.ts +0 -6
package/src/css/primitives/card/card.style.ts CHANGED
@@ -17,14 +17,12 @@ const primitive: StyleRules = {
17
17
 
18
18
  [varNames.color.bg]: vars.color.tinted.default.bg[0],
19
19
  [varNames.color.border]: vars.color.tinted.default.border[1],
20
- [varNames.color.code.bg]: vars.color.code.bg,
21
- [varNames.color.code.fg]: vars.color.code.fg,
22
20
  [varNames.color.fg]: vars.color.tinted.default.fg[0],
23
21
  [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
24
22
  [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
25
23
 
26
24
  '@nest': {
27
- 'button&': {
25
+ '&:is(button)': {
28
26
  WebkitFontSmoothing: 'inherit',
29
27
  appearance: 'none',
30
28
  outline: 'none',
@@ -35,82 +33,15 @@ const primitive: StyleRules = {
35
33
  width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
36
34
  },
37
35
 
38
- 'a&': {
39
- // border: 'none',
36
+ '&:is(a)': {
40
37
  outline: 'none',
41
38
  textDecoration: 'none',
42
39
  },
43
40
 
44
- 'pre&': {
41
+ '&:is(pre)': {
45
42
  font: 'inherit',
46
43
  whiteSpace: 'inherit',
47
44
  },
48
-
49
- 'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
50
- [varNames.color.bg]: vars.color.tinted.default.bg[1],
51
- [varNames.color.border]: vars.color.tinted.default.border[3],
52
- [varNames.color.fg]: vars.color.tinted.default.fg[1],
53
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
54
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
55
- },
56
-
57
- 'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
58
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
59
- [varNames.color.border]: vars.color.tinted.default.border[4],
60
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
61
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
62
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
63
- },
64
-
65
- // toggle button
66
- 'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
67
- {
68
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
69
- [varNames.color.border]: vars.color.tinted.default.border[4],
70
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
71
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
72
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
73
- },
74
-
75
- 'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
76
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
77
- [varNames.color.border]: vars.color.tinted.default.border[4],
78
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
79
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
80
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
81
- },
82
-
83
- 'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
84
- [varNames.color.bg]: vars.color.solid.primary.bg[0],
85
- [varNames.color.border]: vars.color.solid.primary.border[1],
86
- [varNames.color.fg]: vars.color.solid.primary.fg[0],
87
- [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
88
- [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
89
- },
90
-
91
- // '&:not([data-disabled]):focus': {
92
- // '--color-bg': vars.color.solid.bg[0],
93
- // '--color-border': vars.color.solid.border[1],
94
- // '--color-fg': vars.color.solid.fg[1],
95
- // '--color-muted-bg': vars.color.solid.bg[1],
96
- // '--color-muted-fg': vars.color.solid.fg[3],
97
- // },
98
-
99
- 'a&[data-disabled]), button&[data-disabled]': {
100
- [varNames.color.bg]: vars.color.tinted.default.bg[2],
101
- [varNames.color.border]: vars.color.tinted.default.border[4],
102
- [varNames.color.fg]: vars.color.tinted.default.fg[0],
103
- [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
104
- [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
105
- },
106
-
107
- // '&[data-disabled]': {
108
- // '--color-bg': vars.color.tinted.bg[0],
109
- // '--color-border': vars.color.tinted.border[1],
110
- // '--color-fg': vars.color.tinted.border[4],
111
- // '--color-muted-bg': vars.color.tinted.bg[1],
112
- // '--color-muted-fg': vars.color.tinted.border[4],
113
- // },
114
45
  },
115
46
  },
116
47
  }
@@ -147,12 +78,10 @@ for (const tone of THEME_COLOR_CARD_TONES) {
147
78
  '--card-bg-color': vars.color.bg,
148
79
  '--card-bg2-color': vars.color.muted.bg,
149
80
  '--card-border-color': vars.color.border,
150
- '--card-code-bg-color': vars.color.code.bg,
151
- '--card-code-fg-color': vars.color.code.fg,
81
+ '--card-code-bg-color': vars.color.muted.bg,
82
+ '--card-code-fg-color': vars.color.tinted.default.fg[4],
152
83
  '--card-fg-color': vars.color.fg,
153
84
  '--card-focus-ring-color': vars.color.focusRing,
154
- '--card-hairline-soft-color': vars.color.tinted.default.border[1],
155
- '--card-hairline-hard-color': vars.color.tinted.default.border[2],
156
85
  '--card-icon-color': vars.color.fg,
157
86
  '--card-kbd-bg-color': vars.color.muted.bg,
158
87
  '--card-kbd-border-color': vars.color.tinted.default.border[1],
@@ -167,6 +96,8 @@ for (const tone of THEME_COLOR_CARD_TONES) {
167
96
  '--card-shadow-ambient-color': vars.color.shadow.ambient,
168
97
  // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
169
98
  // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
99
+ '--card-hairline-soft-color': vars.color.tinted.default.border[1],
100
+ '--card-hairline-hard-color': vars.color.tinted.default.border[2],
170
101
  })
171
102
 
172
103
  primitive[`.card.${toneMap[tone]}`] = toneProps
@@ -191,46 +122,6 @@ function _assignToneProps(
191
122
  Object.assign(toneProps, {
192
123
  [_varNames.backdrop]: _vars.backdrop,
193
124
 
194
- [_varNames.code.fg]: _vars.code.fg,
195
- [_varNames.code.bg]: _vars.code.bg,
196
-
197
- [_varNames.code.token.atrule]: _vars.code.token.atrule,
198
- [_varNames.code.token.attrName]: _vars.code.token.attrName,
199
- [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
200
- [_varNames.code.token.attribute]: _vars.code.token.attribute,
201
- [_varNames.code.token.boolean]: _vars.code.token.boolean,
202
- [_varNames.code.token.builtin]: _vars.code.token.builtin,
203
- [_varNames.code.token.cdata]: _vars.code.token.cdata,
204
- [_varNames.code.token.char]: _vars.code.token.char,
205
- [_varNames.code.token.class]: _vars.code.token.class,
206
- [_varNames.code.token.className]: _vars.code.token.className,
207
- [_varNames.code.token.comment]: _vars.code.token.comment,
208
- [_varNames.code.token.constant]: _vars.code.token.constant,
209
- [_varNames.code.token.deleted]: _vars.code.token.deleted,
210
- [_varNames.code.token.doctype]: _vars.code.token.doctype,
211
- [_varNames.code.token.entity]: _vars.code.token.entity,
212
- [_varNames.code.token.function]: _vars.code.token.function,
213
- [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
214
- [_varNames.code.token.id]: _vars.code.token.id,
215
- [_varNames.code.token.important]: _vars.code.token.important,
216
- [_varNames.code.token.inserted]: _vars.code.token.inserted,
217
- [_varNames.code.token.keyword]: _vars.code.token.keyword,
218
- [_varNames.code.token.number]: _vars.code.token.number,
219
- [_varNames.code.token.operator]: _vars.code.token.operator,
220
- [_varNames.code.token.prolog]: _vars.code.token.prolog,
221
- [_varNames.code.token.property]: _vars.code.token.property,
222
- [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
223
- [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
224
- [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
225
- [_varNames.code.token.regex]: _vars.code.token.regex,
226
- [_varNames.code.token.selector]: _vars.code.token.selector,
227
- [_varNames.code.token.string]: _vars.code.token.string,
228
- [_varNames.code.token.symbol]: _vars.code.token.symbol,
229
- [_varNames.code.token.tag]: _vars.code.token.tag,
230
- [_varNames.code.token.unit]: _vars.code.token.unit,
231
- [_varNames.code.token.url]: _vars.code.token.url,
232
- [_varNames.code.token.variable]: _vars.code.token.variable,
233
-
234
125
  [_varNames.focusRing]: _vars.focusRing,
235
126
 
236
127
  [_varNames.link.fg]: _vars.link.fg,
@@ -239,6 +130,43 @@ function _assignToneProps(
239
130
  [_varNames.shadow.umbra]: _vars.shadow.umbra,
240
131
  [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
241
132
  [_varNames.shadow.ambient]: _vars.shadow.ambient,
133
+
134
+ [_varNames.token.atrule]: _vars.token.atrule,
135
+ [_varNames.token.attrName]: _vars.token.attrName,
136
+ [_varNames.token.attrValue]: _vars.token.attrValue,
137
+ [_varNames.token.attribute]: _vars.token.attribute,
138
+ [_varNames.token.boolean]: _vars.token.boolean,
139
+ [_varNames.token.builtin]: _vars.token.builtin,
140
+ [_varNames.token.cdata]: _vars.token.cdata,
141
+ [_varNames.token.char]: _vars.token.char,
142
+ [_varNames.token.class]: _vars.token.class,
143
+ [_varNames.token.className]: _vars.token.className,
144
+ [_varNames.token.comment]: _vars.token.comment,
145
+ [_varNames.token.constant]: _vars.token.constant,
146
+ [_varNames.token.deleted]: _vars.token.deleted,
147
+ [_varNames.token.doctype]: _vars.token.doctype,
148
+ [_varNames.token.entity]: _vars.token.entity,
149
+ [_varNames.token.function]: _vars.token.function,
150
+ [_varNames.token.hexcode]: _vars.token.hexcode,
151
+ [_varNames.token.id]: _vars.token.id,
152
+ [_varNames.token.important]: _vars.token.important,
153
+ [_varNames.token.inserted]: _vars.token.inserted,
154
+ [_varNames.token.keyword]: _vars.token.keyword,
155
+ [_varNames.token.number]: _vars.token.number,
156
+ [_varNames.token.operator]: _vars.token.operator,
157
+ [_varNames.token.prolog]: _vars.token.prolog,
158
+ [_varNames.token.property]: _vars.token.property,
159
+ [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
160
+ [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
161
+ [_varNames.token.punctuation]: _vars.token.punctuation,
162
+ [_varNames.token.regex]: _vars.token.regex,
163
+ [_varNames.token.selector]: _vars.token.selector,
164
+ [_varNames.token.string]: _vars.token.string,
165
+ [_varNames.token.symbol]: _vars.token.symbol,
166
+ [_varNames.token.tag]: _vars.token.tag,
167
+ [_varNames.token.unit]: _vars.token.unit,
168
+ [_varNames.token.url]: _vars.token.url,
169
+ [_varNames.token.variable]: _vars.token.variable,
242
170
  })
243
171
 
244
172
  for (const variant of ['solid', 'tinted'] as const) {
package/src/css/primitives/card/card.ts CHANGED
@@ -6,7 +6,7 @@ import {CardStyleProps} from './types'
6
6
  export function card(props: CardStyleProps): string | undefined {
7
7
  return _comp(
8
8
  props.scheme,
9
- toneMap[props.tone ?? 'default'],
9
+ toneMap[props.tone ?? 'inherit'],
10
10
  'card',
11
11
  props.checkered && 'card-checkered',
12
12
  shadow(props),