@sanity/ui 2.1.4 → 2.1.5
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/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/theme.esm.js +72 -10
- package/dist/theme.esm.js.map +1 -1
- package/dist/theme.js +72 -10
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +72 -10
- package/dist/theme.mjs.map +1 -1
- package/package.json +15 -15
- package/src/core/primitives/avatar/__workshop__/index.ts +10 -0
- package/src/core/primitives/avatar/__workshop__/withinButton.tsx +62 -0
- package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +69 -0
- package/src/core/theme/__workshop__/debug/story.tsx +256 -51
- package/src/theme/build/renderColorTheme.ts +1 -1
- package/src/theme/defaults/colorTokens.ts +70 -8
|
@@ -94,9 +94,9 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
94
94
|
},
|
|
95
95
|
avatar: {
|
|
96
96
|
'*': {
|
|
97
|
-
_blend: ['
|
|
98
|
-
bg: ['
|
|
99
|
-
fg: ['
|
|
97
|
+
_blend: ['screen', 'multiply'],
|
|
98
|
+
bg: ['500', '400'],
|
|
99
|
+
fg: ['white', 'black'],
|
|
100
100
|
},
|
|
101
101
|
},
|
|
102
102
|
badge: {
|
|
@@ -147,6 +147,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
147
147
|
accent: {
|
|
148
148
|
fg: ['100 70%', '900 70%'],
|
|
149
149
|
},
|
|
150
|
+
avatar: {
|
|
151
|
+
'*': {
|
|
152
|
+
_blend: ['screen', 'multiply'],
|
|
153
|
+
bg: ['gray/500', 'gray/400'],
|
|
154
|
+
fg: ['white', 'black'],
|
|
155
|
+
},
|
|
156
|
+
},
|
|
150
157
|
badge: {
|
|
151
158
|
'*': {
|
|
152
159
|
bg: ['gray/700', 'gray/300'],
|
|
@@ -156,9 +163,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
156
163
|
},
|
|
157
164
|
},
|
|
158
165
|
bg: ['300', '600'],
|
|
166
|
+
code: {
|
|
167
|
+
bg: ['950', '50'],
|
|
168
|
+
fg: ['300', '600'],
|
|
169
|
+
},
|
|
159
170
|
fg: ['300', '600'],
|
|
160
171
|
muted: {
|
|
161
|
-
bg: ['
|
|
172
|
+
bg: ['950', '50'],
|
|
162
173
|
fg: ['300', '600'],
|
|
163
174
|
},
|
|
164
175
|
kbd: {
|
|
@@ -173,6 +184,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
173
184
|
},
|
|
174
185
|
default: {
|
|
175
186
|
'*': {
|
|
187
|
+
avatar: {
|
|
188
|
+
'*': {
|
|
189
|
+
_blend: ['screen', 'multiply'],
|
|
190
|
+
bg: ['500', '400'],
|
|
191
|
+
fg: ['white', 'black'],
|
|
192
|
+
},
|
|
193
|
+
},
|
|
176
194
|
bg: ['800', '200'],
|
|
177
195
|
muted: {
|
|
178
196
|
bg: ['950', '50'],
|
|
@@ -197,6 +215,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
197
215
|
accent: {
|
|
198
216
|
fg: ['purple/700 60%', 'purple/300 70%'],
|
|
199
217
|
},
|
|
218
|
+
avatar: {
|
|
219
|
+
'*': {
|
|
220
|
+
_blend: ['screen', 'multiply'],
|
|
221
|
+
bg: ['500', '400'],
|
|
222
|
+
fg: ['white', 'black'],
|
|
223
|
+
},
|
|
224
|
+
},
|
|
200
225
|
badge: {
|
|
201
226
|
'*': {
|
|
202
227
|
bg: ['100', '900'],
|
|
@@ -247,6 +272,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
247
272
|
accent: {
|
|
248
273
|
fg: ['200', '800'],
|
|
249
274
|
},
|
|
275
|
+
avatar: {
|
|
276
|
+
'*': {
|
|
277
|
+
_blend: ['screen', 'multiply'],
|
|
278
|
+
bg: ['gray/100', 'gray/900'],
|
|
279
|
+
fg: ['white', 'black'],
|
|
280
|
+
},
|
|
281
|
+
},
|
|
250
282
|
badge: {
|
|
251
283
|
'*': {
|
|
252
284
|
_hue: 'gray',
|
|
@@ -264,7 +296,7 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
264
296
|
fg: ['400', '600'],
|
|
265
297
|
icon: ['300', '700'],
|
|
266
298
|
muted: {
|
|
267
|
-
fg: ['
|
|
299
|
+
fg: ['300', '700'],
|
|
268
300
|
},
|
|
269
301
|
kbd: {
|
|
270
302
|
bg: ['white', 'black'],
|
|
@@ -294,6 +326,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
294
326
|
accent: {
|
|
295
327
|
fg: ['purple/700 70%', 'purple/300 70%'],
|
|
296
328
|
},
|
|
329
|
+
avatar: {
|
|
330
|
+
'*': {
|
|
331
|
+
_blend: ['screen', 'multiply'],
|
|
332
|
+
bg: ['500', '400'],
|
|
333
|
+
fg: ['white', 'black'],
|
|
334
|
+
},
|
|
335
|
+
},
|
|
297
336
|
badge: {
|
|
298
337
|
'*': {
|
|
299
338
|
bg: ['100', '900'],
|
|
@@ -346,6 +385,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
346
385
|
accent: {
|
|
347
386
|
fg: ['200', '800'],
|
|
348
387
|
},
|
|
388
|
+
avatar: {
|
|
389
|
+
'*': {
|
|
390
|
+
_blend: ['screen', 'multiply'],
|
|
391
|
+
bg: ['gray/100', 'gray/900'],
|
|
392
|
+
fg: ['white', 'black'],
|
|
393
|
+
},
|
|
394
|
+
},
|
|
349
395
|
badge: {
|
|
350
396
|
'*': {
|
|
351
397
|
_hue: 'gray',
|
|
@@ -397,8 +443,9 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
397
443
|
fg: ['800', '200'],
|
|
398
444
|
},
|
|
399
445
|
disabled: {
|
|
400
|
-
fg: ['
|
|
446
|
+
fg: ['400', '600'],
|
|
401
447
|
border: ['100', '900'],
|
|
448
|
+
placeholder: ['200', '800 50%'],
|
|
402
449
|
},
|
|
403
450
|
},
|
|
404
451
|
invalid: {
|
|
@@ -415,6 +462,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
415
462
|
accent: {
|
|
416
463
|
fg: ['purple/700 70%', 'purple/300 70%'],
|
|
417
464
|
},
|
|
465
|
+
avatar: {
|
|
466
|
+
'*': {
|
|
467
|
+
_blend: ['screen', 'multiply'],
|
|
468
|
+
bg: ['500', '400'],
|
|
469
|
+
fg: ['white', 'black'],
|
|
470
|
+
},
|
|
471
|
+
},
|
|
418
472
|
badge: {
|
|
419
473
|
'*': {
|
|
420
474
|
bg: ['100', '900'],
|
|
@@ -440,7 +494,7 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
440
494
|
fg: ['blue/700 70%', 'blue/300 70%'],
|
|
441
495
|
},
|
|
442
496
|
muted: {
|
|
443
|
-
bg: ['
|
|
497
|
+
bg: ['50', '950'],
|
|
444
498
|
fg: ['700 75%', '300 75%'],
|
|
445
499
|
},
|
|
446
500
|
skeleton: {
|
|
@@ -491,7 +545,7 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
491
545
|
fg: ['blue/200', 'blue/600'],
|
|
492
546
|
},
|
|
493
547
|
muted: {
|
|
494
|
-
bg: ['
|
|
548
|
+
bg: ['500 10%', '400 10%'],
|
|
495
549
|
fg: ['100 70%', '900 70%'],
|
|
496
550
|
},
|
|
497
551
|
skeleton: {
|
|
@@ -504,6 +558,13 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
504
558
|
accent: {
|
|
505
559
|
fg: ['200', '800'],
|
|
506
560
|
},
|
|
561
|
+
avatar: {
|
|
562
|
+
'*': {
|
|
563
|
+
_blend: ['screen', 'multiply'],
|
|
564
|
+
bg: ['gray/100', 'gray/900'],
|
|
565
|
+
fg: ['white', 'black'],
|
|
566
|
+
},
|
|
567
|
+
},
|
|
507
568
|
badge: {
|
|
508
569
|
'*': {
|
|
509
570
|
_hue: 'gray',
|
|
@@ -529,6 +590,7 @@ export const defaultColorTokens: ThemeColorTokens = {
|
|
|
529
590
|
fg: ['200', '800'],
|
|
530
591
|
},
|
|
531
592
|
muted: {
|
|
593
|
+
bg: ['50 50%', '950 50%'],
|
|
532
594
|
fg: ['200', '800'],
|
|
533
595
|
},
|
|
534
596
|
},
|