@sanity/ui 4.0.0-static.26 → 4.0.0-static.27

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 (22) hide show
  1. package/dist/css/index.css +1 -1
  2. package/dist/css/index.css.map +1 -1
  3. package/dist/index.js +57 -53
  4. package/dist/index.js.map +1 -1
  5. package/package.json +5 -5
  6. package/src/core/components/menu/MenuItem.tsx +0 -2
  7. package/src/core/components/menu/__workshop__/DataProps.tsx +27 -0
  8. package/src/core/components/menu/__workshop__/index.ts +6 -1
  9. package/src/core/primitives/button/Button.tsx +2 -2
  10. package/src/core/primitives/button/__workshop__/DataProps.tsx +22 -0
  11. package/src/core/primitives/button/__workshop__/index.ts +5 -0
  12. package/src/core/primitives/card/Card.tsx +4 -4
  13. package/src/core/primitives/card/__workshop__/DataProps.tsx +30 -0
  14. package/src/core/primitives/card/__workshop__/index.ts +1 -0
  15. package/src/core/primitives/selectable/Selectable.tsx +1 -1
  16. package/src/core/primitives/selectable/__workshop__/DataProps.tsx +27 -0
  17. package/src/core/primitives/selectable/__workshop__/index.ts +14 -0
  18. package/src/css/primitives/_input/_input.css.ts +6 -5
  19. package/src/css/primitives/box/box.css.ts +0 -2
  20. package/src/css/primitives/button/button.css.ts +251 -183
  21. package/src/css/primitives/card/card.css.ts +136 -80
  22. package/src/css/primitives/selectable/selectable.css.ts +79 -44
package/src/css/primitives/button/button.css.ts CHANGED
@@ -25,10 +25,6 @@ export const root: string = _style(layers.primitives, {
25
25
  color: vars.color.fg,
26
26
  inlineSize: 'max-content',
27
27
 
28
- //
29
- transition:
30
- 'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
31
-
32
28
  selectors: {
33
29
  '&::-moz-focus-inner': {
34
30
  border: 0,
@@ -70,215 +66,287 @@ export const tones: Record<ElementTone, string> = {
70
66
  const solid = vars.color.solid[t]
71
67
  const tinted = vars.color.tinted[t]
72
68
 
69
+ const stateVars = {
70
+ default: {
71
+ enabled: {
72
+ [vars.color.bg]: solid.bg[0],
73
+ [vars.color.border]: solid.border[1],
74
+ [vars.color.code.bg]: solid.bg[1],
75
+ [vars.color.code.fg]: solid.fg[4],
76
+ [vars.color.fg]: solid.fg[0],
77
+ [vars.color.muted.bg]: solid.bg[1],
78
+ [vars.color.muted.fg]: solid.fg[4],
79
+ [vars.button.boxShadow]: 'none',
80
+ },
81
+
82
+ hovered: {
83
+ [vars.color.bg]: solid.bg[1],
84
+ [vars.color.border]: solid.border[2],
85
+ [vars.color.code.bg]: solid.bg[2],
86
+ [vars.color.code.fg]: solid.fg[4],
87
+ [vars.color.fg]: solid.fg[0],
88
+ [vars.color.muted.bg]: solid.bg[2],
89
+ [vars.color.muted.fg]: solid.fg[4],
90
+ },
91
+
92
+ // NOTE: also used for `selected` state
93
+ pressed: {
94
+ [vars.color.bg]: solid.bg[2],
95
+ [vars.color.border]: solid.border[3],
96
+ [vars.color.code.bg]: solid.bg[3],
97
+ [vars.color.code.fg]: solid.fg[4],
98
+ [vars.color.fg]: solid.fg[0],
99
+ [vars.color.muted.bg]: solid.bg[3],
100
+ [vars.color.muted.fg]: solid.fg[4],
101
+ },
102
+
103
+ disabled: {
104
+ ..._fromEntries(
105
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[3]]),
106
+ ),
107
+
108
+ [vars.color.bg]: vars.color.tinted.default.bg[1],
109
+ [vars.color.border]: vars.color.tinted.default.border[1],
110
+ [vars.color.code.bg]: vars.color.tinted.default.bg[2],
111
+ [vars.color.code.fg]: vars.color.tinted.default.border[4],
112
+ [vars.color.fg]: vars.color.tinted.default.border[4],
113
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
114
+ [vars.color.muted.fg]: vars.color.tinted.default.border[4],
115
+ },
116
+ },
117
+
118
+ ghost: {
119
+ enabled: {
120
+ [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
121
+ [vars.color.border]: tinted.border[0],
122
+ [vars.color.fg]: tinted.fg[2],
123
+ [vars.color.code.bg]: tinted.bg[2],
124
+ [vars.color.code.fg]: tinted.fg[4],
125
+ [vars.color.muted.bg]: tinted.bg[2],
126
+ [vars.color.muted.fg]: tinted.fg[4],
127
+ [vars.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
128
+ },
129
+
130
+ hovered: {
131
+ [vars.color.bg]: tinted.bg[1],
132
+ [vars.color.border]: tinted.border[1],
133
+ [vars.color.code.bg]: tinted.bg[3],
134
+ [vars.color.code.fg]: tinted.fg[3],
135
+ [vars.color.fg]: tinted.fg[1],
136
+ [vars.color.muted.bg]: tinted.bg[3],
137
+ [vars.color.muted.fg]: tinted.fg[3],
138
+ },
139
+
140
+ // NOTE: also used for `selected` state
141
+ pressed: {
142
+ [vars.color.bg]: tinted.bg[2],
143
+ [vars.color.border]: tinted.border[2],
144
+ [vars.color.code.bg]: tinted.bg[4],
145
+ [vars.color.code.fg]: tinted.fg[3],
146
+ [vars.color.fg]: tinted.fg[1],
147
+ [vars.color.muted.bg]: tinted.bg[4],
148
+ [vars.color.muted.fg]: tinted.fg[3],
149
+ [vars.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
150
+ },
151
+
152
+ disabled: {
153
+ ..._fromEntries(
154
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[2]]),
155
+ ),
156
+
157
+ [vars.color.bg]: vars.color.tinted.default.bg[0],
158
+ [vars.color.border]: vars.color.tinted.default.border[0],
159
+ [vars.color.code.bg]: vars.color.tinted.default.bg[1],
160
+ [vars.color.code.fg]: vars.color.tinted.default.border[3],
161
+ [vars.color.fg]: vars.color.tinted.default.border[4],
162
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
163
+ [vars.color.muted.fg]: vars.color.tinted.default.border[3],
164
+ },
165
+ },
166
+
167
+ bleed: {
168
+ enabled: {
169
+ [vars.color.bg]: tinted.bg[0],
170
+ [vars.color.border]: tinted.border[1],
171
+ [vars.color.fg]: tinted.fg[2],
172
+ [vars.color.muted.bg]: tinted.bg[1],
173
+ [vars.color.muted.fg]: tinted.fg[4],
174
+ [vars.button.boxShadow]: 'none',
175
+ },
176
+
177
+ hovered: {
178
+ [vars.color.bg]: tinted.bg[1],
179
+ [vars.color.border]: tinted.border[2],
180
+ [vars.color.fg]: tinted.fg[1],
181
+ [vars.color.muted.bg]: tinted.bg[2],
182
+ [vars.color.muted.fg]: tinted.fg[3],
183
+ },
184
+
185
+ // NOTE: also used for `selected` state
186
+ pressed: {
187
+ [vars.color.bg]: tinted.bg[2],
188
+ [vars.color.border]: tinted.border[3],
189
+ [vars.color.fg]: tinted.fg[1],
190
+ [vars.color.muted.bg]: tinted.bg[3],
191
+ [vars.color.muted.fg]: tinted.fg[3],
192
+ },
193
+
194
+ disabled: {
195
+ ..._fromEntries(
196
+ AVATAR_COLORS.map((c) => [vars.color.avatar[c].bg, vars.color.tinted.default.bg[2]]),
197
+ ),
198
+
199
+ [vars.color.bg]: vars.color.tinted.default.bg[0],
200
+ [vars.color.border]: vars.color.tinted.default.border[0],
201
+ [vars.color.code.bg]: vars.color.tinted.default.bg[1],
202
+ [vars.color.code.fg]: vars.color.tinted.default.border[3],
203
+ [vars.color.fg]: vars.color.tinted.default.border[4],
204
+ [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
205
+ [vars.color.muted.fg]: vars.color.tinted.default.border[3],
206
+ },
207
+ },
208
+ }
209
+
73
210
  return [
74
211
  t,
75
212
  _style(layers.primitives, {
76
- selectors: {
77
- // default
78
-
79
- [`&.${modes.default}`]: {
80
- vars: {
81
- [vars.color.bg]: solid.bg[0],
82
- [vars.color.border]: solid.border[1],
83
- [vars.color.code.bg]: solid.bg[1],
84
- [vars.color.code.fg]: solid.fg[4],
85
- [vars.color.fg]: solid.fg[0],
86
- [vars.color.muted.bg]: solid.bg[1],
87
- [vars.color.muted.fg]: solid.fg[4],
88
- [vars.button.boxShadow]: 'none',
89
- },
90
- },
213
+ '@media': {
214
+ '(hover: hover)': {
215
+ selectors: {
216
+ [[
217
+ `&.${modes.default}`,
218
+ ':not(:active)',
219
+ ':not(:focus)',
220
+ ':not(:disabled)',
221
+ ':not([aria-pressed="true"])',
222
+ ':not([data-pressed])',
223
+ ':not([data-focused])',
224
+ ':not([data-selected])',
225
+ ':not([data-disabled])',
226
+ ':hover',
227
+ ].join('')]: {
228
+ vars: stateVars.default.hovered,
229
+ },
91
230
 
92
- [`&.${modes.default}:not([data-disabled]):hover`]: {
93
- vars: {
94
- [vars.color.bg]: solid.bg[1],
95
- [vars.color.border]: solid.border[2],
96
- [vars.color.code.bg]: solid.bg[2],
97
- [vars.color.code.fg]: solid.fg[4],
98
- [vars.color.fg]: solid.fg[0],
99
- [vars.color.muted.bg]: solid.bg[2],
100
- [vars.color.muted.fg]: solid.fg[4],
101
- },
102
- },
231
+ [[
232
+ `&.${modes.ghost}`,
233
+ ':not(:active)',
234
+ ':not(:focus)',
235
+ ':not(:disabled)',
236
+ ':not([aria-pressed="true"])',
237
+ ':not([data-pressed])',
238
+ ':not([data-focused])',
239
+ ':not([data-selected])',
240
+ ':not([data-disabled])',
241
+ ':hover',
242
+ ].join('')]: {
243
+ vars: stateVars.ghost.hovered,
244
+ },
103
245
 
104
- [`&.${modes.default}:not([data-disabled]):active`]: {
105
- vars: {
106
- [vars.color.bg]: solid.bg[2],
107
- [vars.color.border]: solid.border[3],
108
- [vars.color.code.bg]: solid.bg[3],
109
- [vars.color.code.fg]: solid.fg[4],
110
- [vars.color.fg]: solid.fg[0],
111
- [vars.color.muted.bg]: solid.bg[3],
112
- [vars.color.muted.fg]: solid.fg[4],
246
+ [[
247
+ `&.${modes.bleed}`,
248
+ ':not(:active)',
249
+ ':not(:focus)',
250
+ ':not(:disabled)',
251
+ ':not([aria-pressed="true"])',
252
+ ':not([data-pressed])',
253
+ ':not([data-focused])',
254
+ ':not([data-selected])',
255
+ ':not([data-disabled])',
256
+ ':hover',
257
+ ].join('')]: {
258
+ vars: stateVars.bleed.hovered,
259
+ },
113
260
  },
114
261
  },
262
+ },
115
263
 
116
- [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
117
- vars: {
118
- [vars.color.bg]: solid.bg[2],
119
- [vars.color.border]: solid.border[3],
120
- [vars.color.code.bg]: solid.bg[3],
121
- [vars.color.code.fg]: solid.fg[4],
122
- [vars.color.fg]: solid.fg[0],
123
- [vars.color.muted.bg]: solid.bg[3],
124
- [vars.color.muted.fg]: solid.fg[4],
125
- },
264
+ 'selectors': {
265
+ // default - enabled
266
+ [`&.${modes.default}:not([data-disabled])`]: {
267
+ vars: stateVars.default.enabled,
126
268
  },
127
269
 
128
- [`&.${modes.default}[data-disabled]`]: {
129
- vars: {
130
- ..._fromEntries(
131
- AVATAR_COLORS.map((c) => [
132
- vars.color.avatar[c].bg,
133
- vars.color.tinted.default.bg[3],
134
- ]),
135
- ),
136
-
137
- [vars.color.bg]: vars.color.tinted.default.bg[1],
138
- [vars.color.border]: vars.color.tinted.default.border[1],
139
- [vars.color.code.bg]: vars.color.tinted.default.bg[2],
140
- [vars.color.code.fg]: vars.color.tinted.default.border[4],
141
- [vars.color.fg]: vars.color.tinted.default.border[4],
142
- [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
143
- [vars.color.muted.fg]: vars.color.tinted.default.border[4],
144
- },
270
+ // default - hovered
271
+ [[
272
+ // `&.${modes.default}:not([data-disabled]):hover`,
273
+ `&.${modes.default}:not([data-disabled])[data-hovered]`,
274
+ ].join(',')]: {
275
+ vars: stateVars.default.hovered,
145
276
  },
146
277
 
147
- // ghost
148
-
149
- [`&.${modes.ghost}`]: {
150
- vars: {
151
- [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
152
- [vars.color.border]: tinted.border[0],
153
- [vars.color.fg]: tinted.fg[2],
154
- [vars.color.code.bg]: tinted.bg[2],
155
- [vars.color.code.fg]: tinted.fg[4],
156
- [vars.color.muted.bg]: tinted.bg[2],
157
- [vars.color.muted.fg]: tinted.fg[4],
158
- [vars.button.boxShadow]:
159
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
160
- },
278
+ // default - pressed
279
+ // default - selected
280
+ [[
281
+ `&.${modes.default}:not([data-disabled]):active`,
282
+ `&.${modes.default}:not([data-disabled])[aria-pressed="true"]`,
283
+ `&.${modes.default}:not([data-disabled])[data-pressed]`,
284
+ `&.${modes.default}:not([data-disabled])[data-selected]`,
285
+ ].join(',')]: {
286
+ vars: stateVars.default.pressed,
161
287
  },
162
288
 
163
- [`&.${modes.ghost}:not([data-disabled]):hover`]: {
164
- vars: {
165
- [vars.color.bg]: tinted.bg[1],
166
- [vars.color.border]: tinted.border[1],
167
- [vars.color.code.bg]: tinted.bg[3],
168
- [vars.color.code.fg]: tinted.fg[3],
169
- [vars.color.fg]: tinted.fg[1],
170
- [vars.color.muted.bg]: tinted.bg[3],
171
- [vars.color.muted.fg]: tinted.fg[3],
172
- },
289
+ // default - disabled
290
+ [[`&.${modes.default}:disabled`, `&.${modes.default}[data-disabled]`].join(',')]: {
291
+ vars: stateVars.default.disabled,
173
292
  },
174
293
 
175
- [`&.${modes.ghost}:not([data-disabled]):active`]: {
176
- vars: {
177
- [vars.color.bg]: tinted.bg[2],
178
- [vars.color.border]: tinted.border[2],
179
- [vars.color.code.bg]: tinted.bg[4],
180
- [vars.color.code.fg]: tinted.fg[3],
181
- [vars.color.fg]: tinted.fg[1],
182
- [vars.color.muted.bg]: tinted.bg[4],
183
- [vars.color.muted.fg]: tinted.fg[3],
184
- [vars.button.boxShadow]:
185
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
186
- },
294
+ // ghost - enabled
295
+ [`&.${modes.ghost}:not([data-disabled])`]: {
296
+ vars: stateVars.ghost.enabled,
187
297
  },
188
298
 
189
- [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
190
- vars: {
191
- [vars.color.bg]: tinted.bg[2],
192
- [vars.color.border]: tinted.border[2],
193
- [vars.color.code.bg]: tinted.bg[4],
194
- [vars.color.code.fg]: tinted.fg[3],
195
- [vars.color.fg]: tinted.fg[1],
196
- [vars.color.muted.bg]: tinted.bg[4],
197
- [vars.color.muted.fg]: tinted.fg[3],
198
- [vars.button.boxShadow]:
199
- `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
200
- },
299
+ // ghost - hovered
300
+ [[
301
+ // `&.${modes.ghost}:not([data-disabled]):hover`,
302
+ `&.${modes.ghost}:not([data-disabled])[data-hovered]`,
303
+ ].join(',')]: {
304
+ vars: stateVars.ghost.hovered,
201
305
  },
202
306
 
203
- [`&.${modes.ghost}[data-disabled]`]: {
204
- vars: {
205
- ..._fromEntries(
206
- AVATAR_COLORS.map((c) => [
207
- vars.color.avatar[c].bg,
208
- vars.color.tinted.default.bg[2],
209
- ]),
210
- ),
211
-
212
- [vars.color.bg]: vars.color.tinted.default.bg[0],
213
- [vars.color.border]: vars.color.tinted.default.border[0],
214
- [vars.color.code.bg]: vars.color.tinted.default.bg[1],
215
- [vars.color.code.fg]: vars.color.tinted.default.border[3],
216
- [vars.color.fg]: vars.color.tinted.default.border[4],
217
- [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
218
- [vars.color.muted.fg]: vars.color.tinted.default.border[3],
219
- },
307
+ // ghost - pressed
308
+ // ghost - selected
309
+ [[
310
+ `&.${modes.ghost}:not([data-disabled]):active`,
311
+ `&.${modes.ghost}:not([data-disabled])[aria-pressed="true"]`,
312
+ `&.${modes.ghost}:not([data-disabled])[data-pressed]`,
313
+ `&.${modes.ghost}:not([data-disabled])[data-selected]`,
314
+ ].join(',')]: {
315
+ vars: stateVars.ghost.pressed,
220
316
  },
221
317
 
222
- // bleed
223
-
224
- [`&.${modes.bleed}`]: {
225
- vars: {
226
- [vars.color.bg]: tinted.bg[0],
227
- [vars.color.border]: tinted.border[1],
228
- [vars.color.fg]: tinted.fg[2],
229
- [vars.color.muted.bg]: tinted.bg[1],
230
- [vars.color.muted.fg]: tinted.fg[4],
231
- [vars.button.boxShadow]: 'none',
232
- },
318
+ // ghost - disabled
319
+ [[`&.${modes.ghost}:disabled`, `&.${modes.ghost}[data-disabled]`].join(',')]: {
320
+ vars: stateVars.ghost.disabled,
233
321
  },
234
322
 
235
- [`&.${modes.bleed}:not([data-disabled]):hover`]: {
236
- vars: {
237
- [vars.color.bg]: tinted.bg[1],
238
- [vars.color.border]: tinted.border[2],
239
- [vars.color.fg]: tinted.fg[1],
240
- [vars.color.muted.bg]: tinted.bg[2],
241
- [vars.color.muted.fg]: tinted.fg[3],
242
- },
323
+ // bleed - enabled
324
+ [`&.${modes.bleed}:not([data-disabled])`]: {
325
+ vars: stateVars.bleed.enabled,
243
326
  },
244
327
 
245
- [`&.${modes.bleed}:not([data-disabled]):active`]: {
246
- vars: {
247
- [vars.color.bg]: tinted.bg[2],
248
- [vars.color.border]: tinted.border[3],
249
- [vars.color.fg]: tinted.fg[1],
250
- [vars.color.muted.bg]: tinted.bg[3],
251
- [vars.color.muted.fg]: tinted.fg[3],
252
- },
328
+ // bleed - hovered
329
+ [[
330
+ // `&.${modes.bleed}:not([data-disabled]):hover`,
331
+ `&.${modes.bleed}:not([data-disabled])[data-hovered]`,
332
+ ].join(',')]: {
333
+ vars: stateVars.bleed.hovered,
253
334
  },
254
335
 
255
- [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
256
- vars: {
257
- [vars.color.bg]: tinted.bg[2],
258
- [vars.color.border]: tinted.border[3],
259
- [vars.color.fg]: tinted.fg[1],
260
- [vars.color.muted.bg]: tinted.bg[3],
261
- [vars.color.muted.fg]: tinted.fg[3],
262
- },
336
+ // bleed - pressed
337
+ // bleed - selected
338
+ [[
339
+ `&.${modes.bleed}:not([data-disabled]):active`,
340
+ `&.${modes.bleed}:not([data-disabled])[aria-pressed="true"]`,
341
+ `&.${modes.bleed}:not([data-disabled])[data-pressed]`,
342
+ `&.${modes.bleed}:not([data-disabled])[data-selected]`,
343
+ ].join(',')]: {
344
+ vars: stateVars.bleed.pressed,
263
345
  },
264
346
 
265
- [`&.${modes.bleed}[data-disabled]`]: {
266
- vars: {
267
- ..._fromEntries(
268
- AVATAR_COLORS.map((c) => [
269
- vars.color.avatar[c].bg,
270
- vars.color.tinted.default.bg[2],
271
- ]),
272
- ),
273
-
274
- [vars.color.bg]: vars.color.tinted.default.bg[0],
275
- [vars.color.border]: vars.color.tinted.default.border[0],
276
- [vars.color.code.bg]: vars.color.tinted.default.bg[1],
277
- [vars.color.code.fg]: vars.color.tinted.default.border[3],
278
- [vars.color.fg]: vars.color.tinted.default.border[4],
279
- [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
280
- [vars.color.muted.fg]: vars.color.tinted.default.border[3],
281
- },
347
+ // bleed - disabled
348
+ [[`&.${modes.bleed}:disabled`, `&.${modes.bleed}[data-disabled]`].join(',')]: {
349
+ vars: stateVars.bleed.disabled,
282
350
  },
283
351
  },
284
352
  }),