@sanity/ui 4.0.0-static.2 → 4.0.0-static.21

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 (74) hide show
  1. package/dist/css/index.css +2 -1
  2. package/dist/css/index.css.map +1 -0
  3. package/dist/css/index.d.ts +29 -1
  4. package/dist/css/index.js +17965 -50
  5. package/dist/css/index.js.map +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +14 -16
  8. package/dist/index.js.map +1 -1
  9. package/package.json +38 -48
  10. package/src/core/components/autocomplete/__workshop__/custom.tsx +14 -1
  11. package/src/core/components/autocomplete/__workshop__/example.tsx +12 -1
  12. package/src/core/components/dialog/__workshop__/position.tsx +9 -1
  13. package/src/core/components/dialog/__workshop__/props.tsx +2 -0
  14. package/src/core/components/menu/__workshop__/menuButton.tsx +6 -1
  15. package/src/core/components/menu/__workshop__/tones.tsx +7 -1
  16. package/src/core/components/menu/menu.tsx +1 -1
  17. package/src/core/components/menu/menuButton.tsx +10 -5
  18. package/src/core/components/menu/menuContext.ts +1 -1
  19. package/src/core/components/menu/menuGroup.tsx +7 -4
  20. package/src/core/components/menu/menuItem.tsx +1 -1
  21. package/src/core/components/toast/__workshop__/toast.tsx +2 -0
  22. package/src/core/primitives/avatar/__workshop__/asButton.tsx +8 -1
  23. package/src/core/primitives/avatar/__workshop__/stack.tsx +5 -1
  24. package/src/core/primitives/badge/__workshop__/props.tsx +12 -1
  25. package/src/core/primitives/box/__workshop__/props.tsx +6 -1
  26. package/src/core/primitives/button/__workshop__/props.tsx +22 -0
  27. package/src/core/primitives/button/__workshop__/stacked.tsx +16 -0
  28. package/src/core/primitives/card/__workshop__/props.tsx +10 -0
  29. package/src/core/primitives/card/__workshop__/selected.tsx +1 -1
  30. package/src/core/primitives/card/card.tsx +2 -2
  31. package/src/core/primitives/code/__workshop__/props.tsx +6 -1
  32. package/src/core/primitives/container/__workshop__/example.tsx +6 -1
  33. package/src/core/primitives/flex/__workshop__/example.tsx +7 -1
  34. package/src/core/primitives/heading/__workshop__/plain.tsx +12 -1
  35. package/src/core/primitives/inline/__workshop__/plain.tsx +5 -1
  36. package/src/core/primitives/label/__workshop__/plain.tsx +15 -1
  37. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +13 -1
  38. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +2 -0
  39. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +8 -0
  40. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +7 -1
  41. package/src/core/primitives/popover/__workshop__/TestStory.tsx +6 -0
  42. package/src/core/primitives/popover/popover.tsx +0 -1
  43. package/src/core/primitives/select/__workshop__/plain.tsx +4 -0
  44. package/src/core/primitives/skeleton/__workshop__/delay.tsx +9 -1
  45. package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +9 -1
  46. package/src/core/primitives/spinner/__workshop__/Props.tsx +6 -1
  47. package/src/core/primitives/stack/__workshop__/plain.tsx +4 -1
  48. package/src/core/primitives/text/__workshop__/colored.tsx +8 -1
  49. package/src/core/primitives/text/__workshop__/example.tsx +15 -1
  50. package/src/core/primitives/textArea/__workshop__/plain.tsx +8 -0
  51. package/src/core/primitives/textInput/__workshop__/plain.tsx +34 -4
  52. package/src/core/primitives/textInput/__workshop__/typed.tsx +7 -1
  53. package/src/core/primitives/textInput/textInput.tsx +1 -1
  54. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +2 -0
  55. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +2 -0
  56. package/src/core/primitives/tooltip/__workshop__/props.tsx +12 -0
  57. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +5 -0
  58. package/src/css/primitives/avatar/avatar.css.ts +9 -5
  59. package/src/css/primitives/card/__workshop__/color.tsx +9 -1
  60. package/src/css/primitives/card/card.css.ts +10 -0
  61. package/src/css/theme/buildCSSTheme.ts +4 -0
  62. package/src/css/types.ts +4 -0
  63. package/src/css/vars.css.ts +4 -0
  64. package/dist/_chunks-cjs/refractor.cjs +0 -22
  65. package/dist/_chunks-cjs/refractor.cjs.map +0 -1
  66. package/dist/css/index.cjs +0 -966
  67. package/dist/css/index.cjs.map +0 -1
  68. package/dist/css/index.d.cts +0 -1370
  69. package/dist/index.cjs +0 -4515
  70. package/dist/index.cjs.map +0 -1
  71. package/dist/index.d.cts +0 -2521
  72. package/dist/theme.cjs +0 -870
  73. package/dist/theme.cjs.map +0 -1
  74. package/dist/theme.d.cts +0 -499
package/dist/theme.cjs DELETED
@@ -1,870 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: !0 });
3
- var color = require("@sanity/color");
4
- const HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], AVATAR_SIZE = [0, 1, 2, 3], CONTAINER_SCALE = [0, 1, 2, 3, 4, 5], CONTAINER = [...CONTAINER_SCALE, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6], SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5], COLOR_SCHEMES = ["light", "dark"], COLOR_VARIANTS = ["tinted", "solid"], AVATAR_COLORS = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], CARD_TONES = [
5
- "transparent",
6
- "default",
7
- "neutral",
8
- "primary",
9
- // selections
10
- "suggest",
11
- "positive",
12
- "caution",
13
- "critical"
14
- ], ELEMENT_TONES = [
15
- "default",
16
- "neutral",
17
- "primary",
18
- // selections
19
- "suggest",
20
- "positive",
21
- "caution",
22
- "critical"
23
- ], BUTTON_MODES = ["default", "ghost", "bleed"], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
24
- function _parseColorToken(str, options) {
25
- const {
26
- defaultHue
27
- } = options;
28
- let cursor = 0;
29
- return parseColorNode();
30
- function _consume(s) {
31
- if (str.startsWith(s, cursor))
32
- return cursor += s.length, s;
33
- }
34
- function _peek() {
35
- return str[cursor];
36
- }
37
- function parseColorNode() {
38
- ignoreWhitespace();
39
- let v = _consume("black") || _consume("white");
40
- if (v)
41
- return {
42
- type: "color",
43
- name: v,
44
- opacity: parseOpacity() ?? 1,
45
- mix: parseMix() ?? 1
46
- };
47
- for (const hue of HUES)
48
- if (v = _consume(String(hue)), v) {
49
- if (_peek() !== "-")
50
- throw new Error('Expected "-" after hue key');
51
- cursor += 1;
52
- const tint2 = parseTint();
53
- if (!tint2)
54
- throw new Error("Expected tint after hue");
55
- return {
56
- type: "tint",
57
- hue,
58
- tint: tint2,
59
- opacity: parseOpacity() ?? 1,
60
- mix: parseMix() ?? 1
61
- };
62
- }
63
- const tint = parseTint();
64
- if (tint)
65
- return {
66
- type: "tint",
67
- hue: defaultHue,
68
- tint,
69
- opacity: parseOpacity() ?? 1,
70
- mix: parseMix() ?? 1
71
- };
72
- if (str === "inherit")
73
- return {
74
- type: "inherit"
75
- };
76
- throw new Error(`Invalid color: ${str}`);
77
- }
78
- function parseTint() {
79
- ignoreWhitespace();
80
- let v = Number(str.slice(cursor, cursor + 3));
81
- if (TINTS.includes(v))
82
- return cursor += 3, v;
83
- if (v = Number(str.slice(cursor, cursor + 2)), TINTS.includes(v))
84
- return cursor += 2, v;
85
- }
86
- function parseMix() {
87
- ignoreWhitespace();
88
- const match = RE_PERCENTAGE.exec(str.slice(cursor));
89
- if (match)
90
- return cursor += match[0].length, parseFloat(match[1]) / 100;
91
- }
92
- function parseOpacity() {
93
- if (ignoreWhitespace(), _peek() === "/") {
94
- cursor += 1;
95
- const match = RE_OPACITY.exec(str.slice(cursor));
96
- if (match)
97
- return cursor += match[0].length, parseFloat(match[1]);
98
- cursor -= 1;
99
- }
100
- }
101
- function ignoreWhitespace() {
102
- for (; _peek() === " "; )
103
- cursor++;
104
- }
105
- }
106
- const defaultColor = {
107
- "*": {
108
- backdrop: ["gray-100/0.5", "black/0.5"],
109
- code: {
110
- bg: ["50", "950"],
111
- fg: ["700", "300"],
112
- token: {
113
- atrule: ["purple-600", "purple-400"],
114
- attrName: ["green-600", "green-400"],
115
- attrValue: ["yellow-600", "yellow-400"],
116
- attribute: ["yellow-600", "yellow-400"],
117
- boolean: ["purple-600", "purple-400"],
118
- builtin: ["purple-600", "purple-400"],
119
- cdata: ["yellow-600", "yellow-400"],
120
- char: ["yellow-600", "yellow-400"],
121
- class: ["orange-600", "orange-400"],
122
- className: ["cyan-600", "cyan-400"],
123
- comment: ["gray-400", "gray-600"],
124
- constant: ["purple-600", "purple-400"],
125
- deleted: ["red-600", "red-400"],
126
- entity: ["red-600", "red-400"],
127
- function: ["green-600", "green-400"],
128
- hexcode: ["blue-600", "blue-400"],
129
- id: ["purple-600", "purple-400"],
130
- important: ["purple-600", "purple-400"],
131
- inserted: ["green-600", "green-400"],
132
- keyword: ["magenta-600", "magenta-400"],
133
- number: ["purple-600", "purple-400"],
134
- operator: ["magenta-600", "magenta-400"],
135
- prolog: ["gray-600", "gray-400"],
136
- property: ["blue-600", "blue-400"],
137
- pseudoClass: ["yellow-600", "yellow-400"],
138
- pseudoElement: ["yellow-600", "yellow-400"],
139
- punctuation: ["gray-600", "gray-400"],
140
- regex: ["blue-600", "blue-400"],
141
- selector: ["red-600", "red-400"],
142
- string: ["yellow-600", "yellow-400"],
143
- symbol: ["purple-600", "purple-400"],
144
- tag: ["red-600", "red-400"],
145
- unit: ["orange-600", "orange-400"],
146
- url: ["red-600", "red-400"],
147
- variable: ["red-600", "red-400"]
148
- }
149
- },
150
- focusRing: ["blue-500", "blue-500"],
151
- link: {
152
- fg: ["blue-600", "blue-400"]
153
- },
154
- shadow: {
155
- outline: ["600/0.3", "500/0.4"],
156
- umbra: ["600/0.1", "black/0.2"],
157
- penumbra: ["600/0.07", "black/0.14"],
158
- ambient: ["600/0.06", "black/0.12"]
159
- },
160
- skeleton: {
161
- from: ["200 70%", "800 35%"],
162
- to: ["200 40%", "800 50%"]
163
- },
164
- variant: {
165
- tinted: {
166
- "*": {
167
- bg: {
168
- 0: ["100 75%", "900 75%"],
169
- 4: ["300", "700"]
170
- },
171
- border: {
172
- 0: ["200", "700 50%"],
173
- 4: ["300 75%", "500"]
174
- },
175
- fg: {
176
- 0: ["900", "100"],
177
- 4: ["700", "300"]
178
- }
179
- },
180
- primary: {
181
- _hue: "blue",
182
- bg: {
183
- 0: ["inherit", "inherit"]
184
- }
185
- },
186
- suggest: {
187
- _hue: "purple",
188
- bg: {
189
- 0: ["inherit", "inherit"]
190
- }
191
- },
192
- positive: {
193
- _hue: "green",
194
- bg: {
195
- 0: ["inherit", "inherit"]
196
- }
197
- },
198
- caution: {
199
- _hue: "yellow",
200
- bg: {
201
- 0: ["inherit", "inherit"]
202
- }
203
- },
204
- critical: {
205
- _hue: "red",
206
- bg: {
207
- 0: ["inherit", "inherit"]
208
- }
209
- }
210
- },
211
- solid: {
212
- "*": {
213
- bg: {
214
- 0: ["500", "400"],
215
- 4: ["600", "300"]
216
- },
217
- border: {
218
- 0: ["400", "200"],
219
- 4: ["500", "100"]
220
- },
221
- fg: {
222
- 0: ["white", "black"],
223
- 4: ["200", "700"]
224
- }
225
- },
226
- default: {
227
- bg: {
228
- 0: ["800", "200"],
229
- 4: ["black", "white"]
230
- },
231
- border: {
232
- 0: ["700", "300"],
233
- 4: ["800", "200"]
234
- }
235
- },
236
- primary: {
237
- _hue: "blue"
238
- },
239
- suggest: {
240
- _hue: "purple"
241
- },
242
- positive: {
243
- _hue: "green"
244
- },
245
- caution: {
246
- _hue: "yellow"
247
- },
248
- critical: {
249
- _hue: "red"
250
- }
251
- }
252
- }
253
- },
254
- transparent: {
255
- variant: {
256
- tinted: {
257
- "*": {
258
- bg: {
259
- 0: ["gray-50", "black"],
260
- 4: ["300 75%", "700 75%"]
261
- },
262
- border: {
263
- 0: ["200", "800 75%"],
264
- 4: ["400", "700"]
265
- },
266
- fg: {
267
- 0: ["black", "100"],
268
- 4: ["700", "400"]
269
- }
270
- }
271
- }
272
- }
273
- },
274
- default: {
275
- variant: {
276
- tinted: {
277
- "*": {
278
- bg: {
279
- 0: ["white", "950"],
280
- 4: ["300 75%", "700"]
281
- },
282
- border: {
283
- 0: ["100", "800 75%"],
284
- 4: ["300", "700"]
285
- },
286
- fg: {
287
- 0: ["black", "white"],
288
- 4: ["600", "400"]
289
- }
290
- }
291
- }
292
- }
293
- },
294
- primary: {
295
- _hue: "blue"
296
- },
297
- suggest: {
298
- _hue: "purple"
299
- },
300
- positive: {
301
- _hue: "green"
302
- },
303
- caution: {
304
- _hue: "yellow"
305
- },
306
- critical: {
307
- _hue: "red"
308
- }
309
- }, defaultTheme = {
310
- avatar: {
311
- sizes: [{
312
- distance: -4,
313
- size: 19
314
- }, {
315
- distance: -4,
316
- size: 25
317
- }, {
318
- distance: -8,
319
- size: 33
320
- }, {
321
- distance: -12,
322
- size: 49
323
- }],
324
- focusRing: {
325
- offset: 1,
326
- width: 1
327
- }
328
- },
329
- button: {
330
- textWeight: "medium",
331
- border: {
332
- width: 1
333
- },
334
- focusRing: {
335
- offset: -1,
336
- width: 1
337
- }
338
- },
339
- card: {
340
- border: {
341
- width: 1
342
- },
343
- focusRing: {
344
- offset: -1,
345
- width: 1
346
- },
347
- shadow: {
348
- outline: 0.5
349
- }
350
- },
351
- container: [320, 640, 960, 1280, 1600, 1920],
352
- media: [360, 600, 900, 1200, 1800, 2400],
353
- layer: {
354
- dialog: {
355
- zOffset: 600
356
- },
357
- popover: {
358
- zOffset: 400
359
- },
360
- tooltip: {
361
- zOffset: 200
362
- }
363
- },
364
- radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
365
- shadow: [void 0, {
366
- umbra: [0, 0, 0, 0],
367
- penumbra: [0, 0, 0, 0],
368
- ambient: [0, 0, 0, 0]
369
- }, {
370
- umbra: [0, 3, 5, -2],
371
- penumbra: [0, 6, 10, 0],
372
- ambient: [0, 1, 18, 1]
373
- }, {
374
- umbra: [0, 7, 8, -4],
375
- penumbra: [0, 12, 17, 2],
376
- ambient: [0, 5, 22, 4]
377
- }, {
378
- umbra: [0, 9, 11, -5],
379
- penumbra: [0, 18, 28, 2],
380
- ambient: [0, 7, 34, 6]
381
- }, {
382
- umbra: [0, 11, 15, -7],
383
- penumbra: [0, 24, 38, 3],
384
- ambient: [0, 9, 46, 8]
385
- }],
386
- space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
387
- input: {
388
- border: {
389
- width: 1
390
- },
391
- checkbox: {
392
- size: 17,
393
- focusRing: {
394
- offset: -1,
395
- width: 1
396
- }
397
- },
398
- radio: {
399
- size: 17,
400
- markSize: 9,
401
- focusRing: {
402
- offset: -1,
403
- width: 1
404
- }
405
- },
406
- switch: {
407
- width: 25,
408
- height: 17,
409
- padding: 5,
410
- transitionDurationMs: 150,
411
- transitionTimingFunction: "ease-out",
412
- focusRing: {
413
- offset: 1,
414
- width: 1
415
- }
416
- },
417
- select: {
418
- focusRing: {
419
- offset: -1,
420
- width: 1
421
- }
422
- },
423
- text: {
424
- focusRing: {
425
- offset: -1,
426
- width: 1
427
- }
428
- }
429
- }
430
- }, defaultFonts = {
431
- code: {
432
- family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
433
- weight: {
434
- regular: 400,
435
- medium: 500,
436
- semibold: 600,
437
- bold: 700
438
- },
439
- scale: [{
440
- ascenderHeight: 4,
441
- descenderHeight: 4,
442
- fontSize: 10,
443
- iconSize: 17,
444
- lineHeight: 15,
445
- letterSpacing: 0,
446
- customIconSize: 12
447
- }, {
448
- ascenderHeight: 5,
449
- descenderHeight: 5,
450
- fontSize: 13,
451
- iconSize: 21,
452
- lineHeight: 19,
453
- letterSpacing: 0,
454
- customIconSize: 16
455
- }, {
456
- ascenderHeight: 6,
457
- descenderHeight: 6,
458
- fontSize: 16,
459
- iconSize: 25,
460
- lineHeight: 23,
461
- letterSpacing: 0,
462
- customIconSize: 20
463
- }, {
464
- ascenderHeight: 7,
465
- descenderHeight: 7,
466
- fontSize: 18.75,
467
- iconSize: 29,
468
- lineHeight: 27,
469
- letterSpacing: 0,
470
- customIconSize: 24
471
- }, {
472
- ascenderHeight: 8,
473
- descenderHeight: 8,
474
- fontSize: 21.5,
475
- iconSize: 33,
476
- lineHeight: 31,
477
- letterSpacing: 0,
478
- customIconSize: 28
479
- }]
480
- },
481
- heading: {
482
- family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
483
- featureSettings: "'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1",
484
- weight: {
485
- regular: 600,
486
- medium: 700,
487
- semibold: 800,
488
- bold: 900
489
- },
490
- scale: [{
491
- ascenderHeight: 5,
492
- descenderHeight: 5,
493
- fontSize: 13,
494
- iconSize: 17,
495
- lineHeight: 19,
496
- letterSpacing: 0,
497
- customIconSize: 12
498
- }, {
499
- ascenderHeight: 6,
500
- descenderHeight: 6,
501
- fontSize: 16,
502
- iconSize: 25,
503
- lineHeight: 23,
504
- letterSpacing: 0,
505
- customIconSize: 20
506
- }, {
507
- ascenderHeight: 7,
508
- descenderHeight: 7,
509
- fontSize: 21,
510
- iconSize: 33,
511
- lineHeight: 29,
512
- letterSpacing: -0.25,
513
- customIconSize: 28
514
- }, {
515
- ascenderHeight: 8,
516
- descenderHeight: 8,
517
- fontSize: 27,
518
- iconSize: 41,
519
- lineHeight: 35,
520
- letterSpacing: -0.5,
521
- customIconSize: 36
522
- }, {
523
- ascenderHeight: 9.5,
524
- descenderHeight: 8.5,
525
- fontSize: 33,
526
- iconSize: 49,
527
- lineHeight: 41,
528
- letterSpacing: -1,
529
- customIconSize: 44
530
- }, {
531
- ascenderHeight: 10.5,
532
- descenderHeight: 9.5,
533
- fontSize: 38,
534
- iconSize: 53,
535
- lineHeight: 47,
536
- letterSpacing: -1,
537
- customIconSize: 48
538
- }]
539
- },
540
- label: {
541
- family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
542
- weight: {
543
- regular: 500,
544
- medium: 600,
545
- semibold: 700,
546
- bold: 800
547
- },
548
- scale: [{
549
- ascenderHeight: 2,
550
- descenderHeight: 2,
551
- fontSize: 8.1,
552
- iconSize: 13,
553
- lineHeight: 10,
554
- letterSpacing: 0.5,
555
- customIconSize: 8
556
- }, {
557
- ascenderHeight: 1.5,
558
- descenderHeight: 2.5,
559
- fontSize: 9.5,
560
- iconSize: 15,
561
- lineHeight: 11,
562
- letterSpacing: 0.5,
563
- customIconSize: 10
564
- }, {
565
- ascenderHeight: 2,
566
- descenderHeight: 2,
567
- fontSize: 10.8,
568
- iconSize: 17,
569
- lineHeight: 12,
570
- letterSpacing: 0.5,
571
- customIconSize: 12
572
- }, {
573
- ascenderHeight: 2,
574
- descenderHeight: 2,
575
- fontSize: 12.25,
576
- iconSize: 19,
577
- lineHeight: 13,
578
- letterSpacing: 0.5,
579
- customIconSize: 14
580
- }, {
581
- ascenderHeight: 1.5,
582
- descenderHeight: 2.5,
583
- fontSize: 13.6,
584
- iconSize: 21,
585
- lineHeight: 14,
586
- letterSpacing: 0.5,
587
- customIconSize: 16
588
- }, {
589
- ascenderHeight: 2,
590
- descenderHeight: 2,
591
- fontSize: 15,
592
- iconSize: 23,
593
- lineHeight: 15,
594
- letterSpacing: 0.5,
595
- customIconSize: 18
596
- }]
597
- },
598
- text: {
599
- family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
600
- weight: {
601
- regular: 400,
602
- medium: 500,
603
- semibold: 600,
604
- bold: 700
605
- },
606
- scale: [{
607
- ascenderHeight: 4,
608
- descenderHeight: 4,
609
- fontSize: 9.75,
610
- iconSize: 17,
611
- lineHeight: 15,
612
- letterSpacing: 0,
613
- customIconSize: 12
614
- }, {
615
- ascenderHeight: 5,
616
- descenderHeight: 5,
617
- fontSize: 12.5,
618
- iconSize: 21,
619
- lineHeight: 19,
620
- letterSpacing: 0,
621
- customIconSize: 16
622
- }, {
623
- ascenderHeight: 6,
624
- descenderHeight: 6,
625
- fontSize: 15.25,
626
- iconSize: 25,
627
- lineHeight: 23,
628
- letterSpacing: 0,
629
- customIconSize: 20
630
- }, {
631
- ascenderHeight: 7,
632
- descenderHeight: 7,
633
- fontSize: 18,
634
- iconSize: 29,
635
- lineHeight: 27,
636
- letterSpacing: 0,
637
- customIconSize: 24
638
- }, {
639
- ascenderHeight: 8,
640
- descenderHeight: 8,
641
- fontSize: 20.75,
642
- iconSize: 33,
643
- lineHeight: 31,
644
- letterSpacing: 0,
645
- customIconSize: 28
646
- }]
647
- }
648
- };
649
- function merge(...records) {
650
- return records.filter(Boolean).reduce(_merge, {});
651
- }
652
- function _merge(acc, source) {
653
- for (const key of Object.keys(source)) {
654
- const prevValue = acc[key], nextValue = source[key];
655
- isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
656
- }
657
- return acc;
658
- }
659
- function isRecord(value) {
660
- return value !== null && typeof value == "object" && !Array.isArray(value);
661
- }
662
- const defaultElementTokens = {
663
- bg: {
664
- 0: ["950", "50"],
665
- 4: ["700", "300"]
666
- },
667
- border: {
668
- 0: ["700", "300"],
669
- 4: ["400", "600"]
670
- },
671
- fg: {
672
- 0: ["100", "900"],
673
- 4: ["400", "600"]
674
- }
675
- };
676
- function resolveTokens(tokens = {}) {
677
- return {
678
- color: {
679
- "*": resolveCardColorTokens(tokens.color?.["*"]),
680
- ...CARD_TONES.reduce((acc, tone) => ({
681
- ...acc,
682
- [tone]: resolveCardColorTokens(merge(tokens.color?.["*"], tokens.color?.[tone]))
683
- }), {})
684
- }
685
- };
686
- }
687
- function resolveCardColorTokens(tokens) {
688
- return {
689
- _hue: tokens?._hue ?? "gray",
690
- avatar: {
691
- gray: {
692
- _hue: tokens?.avatar?.gray?._hue ?? "gray",
693
- bg: tokens?.avatar?.gray?.bg ?? ["500", "400"],
694
- fg: tokens?.avatar?.gray?.fg ?? ["white", "900"]
695
- },
696
- blue: {
697
- _hue: tokens?.avatar?.blue?._hue ?? "blue",
698
- bg: tokens?.avatar?.blue?.bg ?? ["500", "400"],
699
- fg: tokens?.avatar?.blue?.fg ?? ["white", "900"]
700
- },
701
- purple: {
702
- _hue: tokens?.avatar?.purple?._hue ?? "purple",
703
- bg: tokens?.avatar?.purple?.bg ?? ["500", "400"],
704
- fg: tokens?.avatar?.purple?.fg ?? ["white", "900"]
705
- },
706
- magenta: {
707
- _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
708
- bg: tokens?.avatar?.magenta?.bg ?? ["500", "400"],
709
- fg: tokens?.avatar?.magenta?.fg ?? ["white", "900"]
710
- },
711
- red: {
712
- _hue: tokens?.avatar?.red?._hue ?? "red",
713
- bg: tokens?.avatar?.red?.bg ?? ["500", "400"],
714
- fg: tokens?.avatar?.red?.fg ?? ["white", "900"]
715
- },
716
- orange: {
717
- _hue: tokens?.avatar?.orange?._hue ?? "orange",
718
- bg: tokens?.avatar?.orange?.bg ?? ["500", "400"],
719
- fg: tokens?.avatar?.orange?.fg ?? ["white", "900"]
720
- },
721
- yellow: {
722
- _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
723
- bg: tokens?.avatar?.yellow?.bg ?? ["500", "400"],
724
- fg: tokens?.avatar?.yellow?.fg ?? ["white", "900"]
725
- },
726
- green: {
727
- _hue: tokens?.avatar?.green?._hue ?? "green",
728
- bg: tokens?.avatar?.green?.bg ?? ["500", "400"],
729
- fg: tokens?.avatar?.green?.fg ?? ["white", "900"]
730
- },
731
- cyan: {
732
- _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
733
- bg: tokens?.avatar?.cyan?.bg ?? ["500", "400"],
734
- fg: tokens?.avatar?.cyan?.fg ?? ["white", "900"]
735
- }
736
- },
737
- backdrop: tokens?.backdrop ?? ["100", "900"],
738
- code: {
739
- bg: tokens?.code?.bg ?? ["50", "950"],
740
- fg: tokens?.code?.fg ?? ["600", "400"],
741
- token: {
742
- atrule: tokens?.code?.token?.atrule ?? ["600", "400"],
743
- attribute: tokens?.code?.token?.attribute ?? ["600", "400"],
744
- attrName: tokens?.code?.token?.attrName ?? ["600", "400"],
745
- attrValue: tokens?.code?.token?.attrValue ?? ["600", "400"],
746
- boolean: tokens?.code?.token?.boolean ?? ["600", "400"],
747
- builtin: tokens?.code?.token?.builtin ?? ["600", "400"],
748
- cdata: tokens?.code?.token?.cdata ?? ["600", "400"],
749
- char: tokens?.code?.token?.char ?? ["600", "400"],
750
- class: tokens?.code?.token?.class ?? ["600", "400"],
751
- className: tokens?.code?.token?.className ?? ["600", "400"],
752
- comment: tokens?.code?.token?.comment ?? ["400", "600"],
753
- constant: tokens?.code?.token?.constant ?? ["600", "400"],
754
- deleted: tokens?.code?.token?.deleted ?? ["600", "400"],
755
- doctype: tokens?.code?.token?.doctype ?? ["600", "400"],
756
- entity: tokens?.code?.token?.entity ?? ["600", "400"],
757
- function: tokens?.code?.token?.function ?? ["600", "400"],
758
- hexcode: tokens?.code?.token?.hexcode ?? ["600", "400"],
759
- id: tokens?.code?.token?.id ?? ["600", "400"],
760
- important: tokens?.code?.token?.important ?? ["600", "400"],
761
- inserted: tokens?.code?.token?.inserted ?? ["600", "400"],
762
- keyword: tokens?.code?.token?.keyword ?? ["600", "400"],
763
- number: tokens?.code?.token?.number ?? ["600", "400"],
764
- operator: tokens?.code?.token?.operator ?? ["600", "400"],
765
- prolog: tokens?.code?.token?.prolog ?? ["600", "400"],
766
- property: tokens?.code?.token?.property ?? ["600", "400"],
767
- pseudoClass: tokens?.code?.token?.pseudoClass ?? ["600", "400"],
768
- pseudoElement: tokens?.code?.token?.pseudoElement ?? ["600", "400"],
769
- punctuation: tokens?.code?.token?.punctuation ?? ["600", "400"],
770
- regex: tokens?.code?.token?.regex ?? ["600", "400"],
771
- selector: tokens?.code?.token?.selector ?? ["600", "400"],
772
- string: tokens?.code?.token?.string ?? ["600", "400"],
773
- symbol: tokens?.code?.token?.symbol ?? ["600", "400"],
774
- tag: tokens?.code?.token?.tag ?? ["600", "400"],
775
- unit: tokens?.code?.token?.unit ?? ["600", "400"],
776
- url: tokens?.code?.token?.url ?? ["600", "400"],
777
- variable: tokens?.code?.token?.variable ?? ["600", "400"]
778
- }
779
- },
780
- focusRing: tokens?.focusRing ?? ["500", "500"],
781
- link: {
782
- fg: tokens?.link?.fg ?? ["600", "400"]
783
- },
784
- shadow: {
785
- outline: tokens?.shadow?.outline ?? ["500", "500"],
786
- umbra: tokens?.shadow?.umbra ?? ["500", "500"],
787
- penumbra: tokens?.shadow?.penumbra ?? ["500", "500"],
788
- ambient: tokens?.shadow?.ambient ?? ["500", "500"]
789
- },
790
- skeleton: {
791
- from: tokens?.skeleton?.from ?? ["100", "900"],
792
- to: tokens?.skeleton?.to ?? ["50", "950"]
793
- },
794
- variant: {
795
- solid: {
796
- "*": resolveElementTokens(tokens?.variant?.solid?.["*"]),
797
- ...ELEMENT_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.solid?.["*"], tokens?.variant?.solid?.[tone])), acc), {})
798
- },
799
- tinted: {
800
- "*": resolveElementTokens(tokens?.variant?.tinted?.["*"]),
801
- ...ELEMENT_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.tinted?.["*"], tokens?.variant?.tinted?.[tone])), acc), {})
802
- }
803
- }
804
- };
805
- }
806
- function resolveElementTokens(tokens) {
807
- return {
808
- _hue: tokens?._hue ?? "gray",
809
- bg: {
810
- 0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
811
- 4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4]
812
- },
813
- border: {
814
- 0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
815
- 4: tokens?.border?.[4] ?? defaultElementTokens.border[4]
816
- },
817
- fg: {
818
- 0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
819
- 4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4]
820
- }
821
- };
822
- }
823
- function buildTheme(options) {
824
- const tokens = resolveTokens({
825
- color: options?.color ?? defaultColor
826
- });
827
- return {
828
- _version: 3,
829
- _tokens: tokens,
830
- avatar: defaultTheme.avatar,
831
- button: defaultTheme.button,
832
- card: defaultTheme.card,
833
- color: tokens.color,
834
- container: defaultTheme.container,
835
- font: defaultFonts,
836
- input: defaultTheme.input,
837
- layer: defaultTheme.layer,
838
- media: defaultTheme.media,
839
- palette: {
840
- black: color.black,
841
- white: color.white,
842
- hues: color.hues
843
- },
844
- radius: defaultTheme.radius,
845
- shadow: defaultTheme.shadow,
846
- space: defaultTheme.space
847
- };
848
- }
849
- exports.AVATAR_COLORS = AVATAR_COLORS;
850
- exports.AVATAR_SIZE = AVATAR_SIZE;
851
- exports.BUTTON_MODES = BUTTON_MODES;
852
- exports.CARD_TONES = CARD_TONES;
853
- exports.COLOR_SCHEMES = COLOR_SCHEMES;
854
- exports.COLOR_VARIANTS = COLOR_VARIANTS;
855
- exports.CONTAINER = CONTAINER;
856
- exports.CONTAINER_SCALE = CONTAINER_SCALE;
857
- exports.ELEMENT_TONES = ELEMENT_TONES;
858
- exports.FONT_CODE_SIZE = FONT_CODE_SIZE;
859
- exports.FONT_HEADING_SIZE = FONT_HEADING_SIZE;
860
- exports.FONT_LABEL_SIZE = FONT_LABEL_SIZE;
861
- exports.FONT_TEXT_SIZE = FONT_TEXT_SIZE;
862
- exports.HUES = HUES;
863
- exports.RADIUS = RADIUS;
864
- exports.SHADOW = SHADOW;
865
- exports.SPACE = SPACE;
866
- exports.TINTS = TINTS;
867
- exports._parseColorToken = _parseColorToken;
868
- exports.buildTheme = buildTheme;
869
- exports.resolveTokens = resolveTokens;
870
- //# sourceMappingURL=theme.cjs.map