@dialpad/dialtone-css 8.80.0-next.7 → 8.80.0-next.8

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 (20) hide show
  1. package/lib/build/less/components/box.less +11 -3
  2. package/lib/build/less/components/button.less +30 -25
  3. package/lib/build/less/components/card.less +1 -1
  4. package/lib/build/less/components/chip.less +32 -0
  5. package/lib/build/less/components/image-viewer.less +1 -0
  6. package/lib/build/less/components/modal.less +1 -1
  7. package/lib/build/less/components/popover.less +1 -1
  8. package/lib/build/less/components/toast.less +2 -2
  9. package/lib/build/less/recipes/unread_pill.less +1 -1
  10. package/lib/build/less/utilities/effects.less +11 -5
  11. package/lib/dist/dialtone-default-theme.css +541 -128
  12. package/lib/dist/dialtone-default-theme.min.css +1 -1
  13. package/lib/dist/dialtone-docs.json +1 -1
  14. package/lib/dist/dialtone.css +380 -84
  15. package/lib/dist/dialtone.min.css +1 -1
  16. package/lib/dist/tokens/tokens-base-dark.css +267 -126
  17. package/lib/dist/tokens/tokens-base-light.css +161 -44
  18. package/lib/dist/tokens/tokens-debug-base.css +158 -41
  19. package/lib/dist/tokens-docs.json +1 -1
  20. package/package.json +2 -2
package/lib/dist/tokens/tokens-base-light.css CHANGED
@@ -5,20 +5,162 @@
5
5
  --dt-shadow-focus-inset-type: dropShadow;
6
6
  --dt-shadow-focus-2-type: dropShadow;
7
7
  --dt-shadow-focus-1-type: dropShadow;
8
+ --dt-shadow-extra-large-4-offset-y: 3.2rem;
9
+ --dt-shadow-extra-large-4-offset-x: 0rem;
10
+ --dt-shadow-extra-large-4-type: dropShadow;
11
+ --dt-shadow-extra-large-4-color: oklch(0 0 0 / 0.16);
12
+ --dt-shadow-extra-large-4-spread: 0rem;
13
+ --dt-shadow-extra-large-4-blur: 3.2rem;
14
+ --dt-shadow-extra-large-3-offset-y: 1.2rem;
15
+ --dt-shadow-extra-large-3-offset-x: 0rem;
16
+ --dt-shadow-extra-large-3-type: dropShadow;
17
+ --dt-shadow-extra-large-3-color: oklch(0 0 0 / 0.08);
18
+ --dt-shadow-extra-large-3-spread: 0rem;
19
+ --dt-shadow-extra-large-3-blur: 1.6rem;
20
+ --dt-shadow-extra-large-2-offset-y: 0.4rem;
21
+ --dt-shadow-extra-large-2-offset-x: 0rem;
22
+ --dt-shadow-extra-large-2-type: dropShadow;
23
+ --dt-shadow-extra-large-2-color: oklch(0 0 0 / 0.06);
24
+ --dt-shadow-extra-large-2-spread: 0rem;
25
+ --dt-shadow-extra-large-2-blur: 0.6rem;
26
+ --dt-shadow-extra-large-1-offset-y: 0.2rem;
27
+ --dt-shadow-extra-large-1-offset-x: 0rem;
28
+ --dt-shadow-extra-large-1-type: dropShadow;
29
+ --dt-shadow-extra-large-1-color: oklch(0 0 0 / 0.02);
30
+ --dt-shadow-extra-large-1-spread: 0rem;
31
+ --dt-shadow-extra-large-1-blur: 0.2rem;
32
+ --dt-shadow-large-3-offset-y: 0.8rem;
33
+ --dt-shadow-large-3-offset-x: 0rem;
34
+ --dt-shadow-large-3-type: dropShadow;
35
+ --dt-shadow-large-3-color: oklch(0 0 0 / 0.08);
36
+ --dt-shadow-large-3-spread: 0rem;
37
+ --dt-shadow-large-3-blur: 1.2rem;
38
+ --dt-shadow-large-2-offset-y: 0.2rem;
39
+ --dt-shadow-large-2-offset-x: 0rem;
40
+ --dt-shadow-large-2-type: dropShadow;
41
+ --dt-shadow-large-2-color: oklch(0 0 0 / 0.06);
42
+ --dt-shadow-large-2-spread: 0rem;
43
+ --dt-shadow-large-2-blur: 0.8rem;
44
+ --dt-shadow-large-1-offset-y: 0.1rem;
45
+ --dt-shadow-large-1-offset-x: 0rem;
46
+ --dt-shadow-large-1-type: dropShadow;
47
+ --dt-shadow-large-1-color: oklch(0 0 0 / 0.04);
48
+ --dt-shadow-large-1-spread: 0rem;
49
+ --dt-shadow-large-1-blur: 0.2rem;
50
+ --dt-shadow-medium-3-offset-y: 0.8rem;
51
+ --dt-shadow-medium-3-offset-x: 0rem;
52
+ --dt-shadow-medium-3-type: dropShadow;
53
+ --dt-shadow-medium-3-color: oklch(0 0 0 / 0.08);
54
+ --dt-shadow-medium-3-spread: 0rem;
55
+ --dt-shadow-medium-3-blur: 1.2rem;
56
+ --dt-shadow-medium-2-offset-y: 0.2rem;
57
+ --dt-shadow-medium-2-offset-x: 0rem;
58
+ --dt-shadow-medium-2-type: dropShadow;
59
+ --dt-shadow-medium-2-color: oklch(0 0 0 / 0.06);
60
+ --dt-shadow-medium-2-spread: 0rem;
61
+ --dt-shadow-medium-2-blur: 0.8rem;
62
+ --dt-shadow-medium-1-offset-y: 0.1rem;
63
+ --dt-shadow-medium-1-offset-x: 0rem;
64
+ --dt-shadow-medium-1-type: dropShadow;
65
+ --dt-shadow-medium-1-color: oklch(0 0 0 / 0.04);
66
+ --dt-shadow-medium-1-spread: 0rem;
67
+ --dt-shadow-medium-1-blur: 0.2rem;
68
+ --dt-shadow-small-3-offset-y: 0.2rem;
69
+ --dt-shadow-small-3-offset-x: 0rem;
70
+ --dt-shadow-small-3-type: dropShadow;
71
+ --dt-shadow-small-3-color: oklch(0 0 0 / 0.12);
72
+ --dt-shadow-small-3-spread: 0rem;
73
+ --dt-shadow-small-3-blur: 0.4rem;
74
+ --dt-shadow-small-2-offset-y: 0.1rem;
75
+ --dt-shadow-small-2-offset-x: 0rem;
76
+ --dt-shadow-small-2-type: dropShadow;
77
+ --dt-shadow-small-2-color: oklch(0 0 0 / 0.06);
78
+ --dt-shadow-small-2-spread: 0rem;
79
+ --dt-shadow-small-2-blur: 0.2rem;
80
+ --dt-shadow-small-1-offset-y: -0.1rem;
81
+ --dt-shadow-small-1-offset-x: 0rem;
82
+ --dt-shadow-small-1-type: dropShadow;
83
+ --dt-shadow-small-1-color: oklch(0 0 0 / 0.04);
84
+ --dt-shadow-small-1-spread: 0rem;
85
+ --dt-shadow-small-1-blur: 0.1rem;
86
+ --dt-shadow-card-3-offset-y: 0.2rem;
87
+ --dt-shadow-card-3-offset-x: 0rem;
8
88
  --dt-shadow-card-3-type: dropShadow;
9
- --dt-shadow-card-3-color: oklch(0 0 0 / 0.0784);
89
+ --dt-shadow-card-3-color: oklch(0 0 0 / 0.12);
90
+ --dt-shadow-card-3-spread: 0rem;
91
+ --dt-shadow-card-3-blur: 0.4rem;
92
+ --dt-shadow-card-2-offset-y: 0.1rem;
93
+ --dt-shadow-card-2-offset-x: 0rem;
10
94
  --dt-shadow-card-2-type: dropShadow;
11
- --dt-shadow-card-2-color: oklch(0 0 0 / 0.0392);
95
+ --dt-shadow-card-2-color: oklch(0 0 0 / 0.06);
96
+ --dt-shadow-card-2-spread: 0rem;
97
+ --dt-shadow-card-2-blur: 0.2rem;
98
+ --dt-shadow-card-1-offset-y: -0.1rem;
99
+ --dt-shadow-card-1-offset-x: 0rem;
12
100
  --dt-shadow-card-1-type: dropShadow;
13
- --dt-shadow-card-1-color: oklch(0 0 0 / 0.0314);
14
- --dt-shadow-extra-large-type: dropShadow;
15
- --dt-shadow-extra-large-color: oklch(0 0 0 / 0.302);
16
- --dt-shadow-large-type: dropShadow;
17
- --dt-shadow-large-color: oklch(0 0 0 / 0.302);
18
- --dt-shadow-medium-type: dropShadow;
19
- --dt-shadow-medium-color: oklch(0 0 0 / 0.251);
20
- --dt-shadow-small-type: dropShadow;
21
- --dt-shadow-small-color: oklch(0 0 0 / 0.149);
101
+ --dt-shadow-card-1-color: oklch(0 0 0 / 0.04);
102
+ --dt-shadow-card-1-spread: 0rem;
103
+ --dt-shadow-card-1-blur: 0.1rem;
104
+ --dt-shadow-modal-4-offset-y: 3.2rem;
105
+ --dt-shadow-modal-4-offset-x: 0rem;
106
+ --dt-shadow-modal-4-type: dropShadow;
107
+ --dt-shadow-modal-4-color: oklch(0 0 0 / 0.16);
108
+ --dt-shadow-modal-4-spread: 0rem;
109
+ --dt-shadow-modal-4-blur: 3.2rem;
110
+ --dt-shadow-modal-3-offset-y: 1.2rem;
111
+ --dt-shadow-modal-3-offset-x: 0rem;
112
+ --dt-shadow-modal-3-type: dropShadow;
113
+ --dt-shadow-modal-3-color: oklch(0 0 0 / 0.08);
114
+ --dt-shadow-modal-3-spread: 0rem;
115
+ --dt-shadow-modal-3-blur: 1.6rem;
116
+ --dt-shadow-modal-2-offset-y: 0.4rem;
117
+ --dt-shadow-modal-2-offset-x: 0rem;
118
+ --dt-shadow-modal-2-type: dropShadow;
119
+ --dt-shadow-modal-2-color: oklch(0 0 0 / 0.06);
120
+ --dt-shadow-modal-2-spread: 0rem;
121
+ --dt-shadow-modal-2-blur: 0.6rem;
122
+ --dt-shadow-modal-1-offset-y: 0.2rem;
123
+ --dt-shadow-modal-1-offset-x: 0rem;
124
+ --dt-shadow-modal-1-type: dropShadow;
125
+ --dt-shadow-modal-1-color: oklch(0 0 0 / 0.02);
126
+ --dt-shadow-modal-1-spread: 0rem;
127
+ --dt-shadow-modal-1-blur: 0.2rem;
128
+ --dt-shadow-overlay-3-offset-y: 0.8rem;
129
+ --dt-shadow-overlay-3-offset-x: 0rem;
130
+ --dt-shadow-overlay-3-type: dropShadow;
131
+ --dt-shadow-overlay-3-color: oklch(0 0 0 / 0.08);
132
+ --dt-shadow-overlay-3-spread: 0rem;
133
+ --dt-shadow-overlay-3-blur: 1.2rem;
134
+ --dt-shadow-overlay-2-offset-y: 0.2rem;
135
+ --dt-shadow-overlay-2-offset-x: 0rem;
136
+ --dt-shadow-overlay-2-type: dropShadow;
137
+ --dt-shadow-overlay-2-color: oklch(0 0 0 / 0.06);
138
+ --dt-shadow-overlay-2-spread: 0rem;
139
+ --dt-shadow-overlay-2-blur: 0.8rem;
140
+ --dt-shadow-overlay-1-offset-y: 0.1rem;
141
+ --dt-shadow-overlay-1-offset-x: 0rem;
142
+ --dt-shadow-overlay-1-type: dropShadow;
143
+ --dt-shadow-overlay-1-color: oklch(0 0 0 / 0.04);
144
+ --dt-shadow-overlay-1-spread: 0rem;
145
+ --dt-shadow-overlay-1-blur: 0.2rem;
146
+ --dt-shadow-raised-3-offset-y: 0.2rem;
147
+ --dt-shadow-raised-3-offset-x: 0rem;
148
+ --dt-shadow-raised-3-type: dropShadow;
149
+ --dt-shadow-raised-3-color: oklch(0 0 0 / 0.12);
150
+ --dt-shadow-raised-3-spread: 0rem;
151
+ --dt-shadow-raised-3-blur: 0.4rem;
152
+ --dt-shadow-raised-2-offset-y: 0.1rem;
153
+ --dt-shadow-raised-2-offset-x: 0rem;
154
+ --dt-shadow-raised-2-type: dropShadow;
155
+ --dt-shadow-raised-2-color: oklch(0 0 0 / 0.06);
156
+ --dt-shadow-raised-2-spread: 0rem;
157
+ --dt-shadow-raised-2-blur: 0.2rem;
158
+ --dt-shadow-raised-1-offset-y: -0.1rem;
159
+ --dt-shadow-raised-1-offset-x: 0rem;
160
+ --dt-shadow-raised-1-type: dropShadow;
161
+ --dt-shadow-raised-1-color: oklch(0 0 0 / 0.04);
162
+ --dt-shadow-raised-1-spread: 0rem;
163
+ --dt-shadow-raised-1-blur: 0.1rem;
22
164
  --dt-opacity-1300: 1;
23
165
  --dt-opacity-1200: 0.9;
24
166
  --dt-opacity-1100: 0.8;
@@ -344,34 +486,6 @@
344
486
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
345
487
  --dt-shadow-focus-1-spread: var(--dt-size-100);
346
488
  --dt-shadow-focus-1-blur: var(--dt-size-0);
347
- --dt-shadow-card-3-offset-y: var(--dt-size-200);
348
- --dt-shadow-card-3-offset-x: var(--dt-size-0);
349
- --dt-shadow-card-3-spread: var(--dt-size-0);
350
- --dt-shadow-card-3-blur: var(--dt-size-500);
351
- --dt-shadow-card-2-offset-y: var(--dt-size-200);
352
- --dt-shadow-card-2-offset-x: var(--dt-size-0);
353
- --dt-shadow-card-2-spread: var(--dt-size-0);
354
- --dt-shadow-card-2-blur: var(--dt-size-300);
355
- --dt-shadow-card-1-offset-y: var(--dt-size-100);
356
- --dt-shadow-card-1-offset-x: var(--dt-size-0);
357
- --dt-shadow-card-1-spread: var(--dt-size-0);
358
- --dt-shadow-card-1-blur: var(--dt-size-200);
359
- --dt-shadow-extra-large-offset-y: var(--dt-size-200);
360
- --dt-shadow-extra-large-offset-x: var(--dt-size-0);
361
- --dt-shadow-extra-large-spread: var(--dt-size-0);
362
- --dt-shadow-extra-large-blur: var(--dt-size-600);
363
- --dt-shadow-large-offset-y: var(--dt-size-200);
364
- --dt-shadow-large-offset-x: var(--dt-size-0);
365
- --dt-shadow-large-spread: var(--dt-size-0);
366
- --dt-shadow-large-blur: var(--dt-size-500);
367
- --dt-shadow-medium-offset-y: var(--dt-size-200);
368
- --dt-shadow-medium-offset-x: var(--dt-size-0);
369
- --dt-shadow-medium-spread: var(--dt-size-0);
370
- --dt-shadow-medium-blur: var(--dt-size-400);
371
- --dt-shadow-small-offset-y: var(--dt-size-200);
372
- --dt-shadow-small-offset-x: var(--dt-size-0);
373
- --dt-shadow-small-spread: var(--dt-size-0);
374
- --dt-shadow-small-blur: var(--dt-size-300);
375
489
  --dt-color-gradient-magenta-purple: linear-gradient(135deg, var(--dt-color-brand-magenta) 10%, var(--dt-color-brand-purple) 90%); /* Gradient for Ai-oriented treatments. */
376
490
  --dt-color-black-1000: oklch(0.1595 0.0045 84.59);
377
491
  --dt-color-black-950: oklch(0.2083 0.006 91.63);
@@ -527,12 +641,15 @@
527
641
  --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
528
642
  --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
529
643
  --dt-shadow-focus-1-color: oklch(0.9748 0.0025 48.72);
530
- --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
644
+ --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-offset-x) var(--dt-shadow-extra-large-1-offset-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-offset-x) var(--dt-shadow-extra-large-2-offset-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-offset-x) var(--dt-shadow-extra-large-3-offset-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-offset-x) var(--dt-shadow-extra-large-4-offset-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color);
645
+ --dt-shadow-large: var(--dt-shadow-large-1-offset-x) var(--dt-shadow-large-1-offset-y) var(--dt-shadow-large-1-blur) var(--dt-shadow-large-1-spread) var(--dt-shadow-large-1-color), var(--dt-shadow-large-2-offset-x) var(--dt-shadow-large-2-offset-y) var(--dt-shadow-large-2-blur) var(--dt-shadow-large-2-spread) var(--dt-shadow-large-2-color), var(--dt-shadow-large-3-offset-x) var(--dt-shadow-large-3-offset-y) var(--dt-shadow-large-3-blur) var(--dt-shadow-large-3-spread) var(--dt-shadow-large-3-color);
646
+ --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color);
647
+ --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color);
531
648
  --dt-shadow-card: var(--dt-shadow-card-1-offset-x) var(--dt-shadow-card-1-offset-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-offset-x) var(--dt-shadow-card-2-offset-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-offset-x) var(--dt-shadow-card-3-offset-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
532
- --dt-shadow-extra-large: var(--dt-shadow-extra-large-offset-x) var(--dt-shadow-extra-large-offset-y) var(--dt-shadow-extra-large-blur) var(--dt-shadow-extra-large-spread) var(--dt-shadow-extra-large-color);
533
- --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
534
- --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
535
- --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
649
+ --dt-shadow-modal: var(--dt-shadow-modal-1-offset-x) var(--dt-shadow-modal-1-offset-y) var(--dt-shadow-modal-1-blur) var(--dt-shadow-modal-1-spread) var(--dt-shadow-modal-1-color), var(--dt-shadow-modal-2-offset-x) var(--dt-shadow-modal-2-offset-y) var(--dt-shadow-modal-2-blur) var(--dt-shadow-modal-2-spread) var(--dt-shadow-modal-2-color), var(--dt-shadow-modal-3-offset-x) var(--dt-shadow-modal-3-offset-y) var(--dt-shadow-modal-3-blur) var(--dt-shadow-modal-3-spread) var(--dt-shadow-modal-3-color), var(--dt-shadow-modal-4-offset-x) var(--dt-shadow-modal-4-offset-y) var(--dt-shadow-modal-4-blur) var(--dt-shadow-modal-4-spread) var(--dt-shadow-modal-4-color);
650
+ --dt-shadow-overlay: var(--dt-shadow-overlay-1-offset-x) var(--dt-shadow-overlay-1-offset-y) var(--dt-shadow-overlay-1-blur) var(--dt-shadow-overlay-1-spread) var(--dt-shadow-overlay-1-color), var(--dt-shadow-overlay-2-offset-x) var(--dt-shadow-overlay-2-offset-y) var(--dt-shadow-overlay-2-blur) var(--dt-shadow-overlay-2-spread) var(--dt-shadow-overlay-2-color), var(--dt-shadow-overlay-3-offset-x) var(--dt-shadow-overlay-3-offset-y) var(--dt-shadow-overlay-3-blur) var(--dt-shadow-overlay-3-spread) var(--dt-shadow-overlay-3-color);
651
+ --dt-shadow-raised: var(--dt-shadow-raised-1-offset-x) var(--dt-shadow-raised-1-offset-y) var(--dt-shadow-raised-1-blur) var(--dt-shadow-raised-1-spread) var(--dt-shadow-raised-1-color), var(--dt-shadow-raised-2-offset-x) var(--dt-shadow-raised-2-offset-y) var(--dt-shadow-raised-2-blur) var(--dt-shadow-raised-2-spread) var(--dt-shadow-raised-2-color), var(--dt-shadow-raised-3-offset-x) var(--dt-shadow-raised-3-offset-y) var(--dt-shadow-raised-3-blur) var(--dt-shadow-raised-3-spread) var(--dt-shadow-raised-3-color);
652
+ --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
536
653
  --dt-shadow-focus: var(--dt-shadow-focus-1-offset-x) var(--dt-shadow-focus-1-offset-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-offset-x) var(--dt-shadow-focus-2-offset-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
537
654
  --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
538
655
  --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */
package/lib/dist/tokens/tokens-debug-base.css CHANGED
@@ -5,20 +5,162 @@
5
5
  --dt-shadow-focus-inset-type: dropShadow;
6
6
  --dt-shadow-focus-2-type: dropShadow;
7
7
  --dt-shadow-focus-1-type: dropShadow;
8
+ --dt-shadow-extra-large-4-offset-y: 3.2rem;
9
+ --dt-shadow-extra-large-4-offset-x: 0rem;
10
+ --dt-shadow-extra-large-4-type: dropShadow;
11
+ --dt-shadow-extra-large-4-color: oklch(0.7 0.25 54.01);
12
+ --dt-shadow-extra-large-4-spread: 0rem;
13
+ --dt-shadow-extra-large-4-blur: 3.2rem;
14
+ --dt-shadow-extra-large-3-offset-y: 1.2rem;
15
+ --dt-shadow-extra-large-3-offset-x: 0rem;
16
+ --dt-shadow-extra-large-3-type: dropShadow;
17
+ --dt-shadow-extra-large-3-color: oklch(0.7 0.25 54.01);
18
+ --dt-shadow-extra-large-3-spread: 0rem;
19
+ --dt-shadow-extra-large-3-blur: 1.6rem;
20
+ --dt-shadow-extra-large-2-offset-y: 0.4rem;
21
+ --dt-shadow-extra-large-2-offset-x: 0rem;
22
+ --dt-shadow-extra-large-2-type: dropShadow;
23
+ --dt-shadow-extra-large-2-color: oklch(0.7 0.25 54.01);
24
+ --dt-shadow-extra-large-2-spread: 0rem;
25
+ --dt-shadow-extra-large-2-blur: 0.6rem;
26
+ --dt-shadow-extra-large-1-offset-y: 0.2rem;
27
+ --dt-shadow-extra-large-1-offset-x: 0rem;
28
+ --dt-shadow-extra-large-1-type: dropShadow;
29
+ --dt-shadow-extra-large-1-color: oklch(0.7 0.25 54.01);
30
+ --dt-shadow-extra-large-1-spread: 0rem;
31
+ --dt-shadow-extra-large-1-blur: 0.2rem;
32
+ --dt-shadow-large-3-offset-y: 0.8rem;
33
+ --dt-shadow-large-3-offset-x: 0rem;
34
+ --dt-shadow-large-3-type: dropShadow;
35
+ --dt-shadow-large-3-color: oklch(0.7 0.25 54.01);
36
+ --dt-shadow-large-3-spread: 0rem;
37
+ --dt-shadow-large-3-blur: 1.2rem;
38
+ --dt-shadow-large-2-offset-y: 0.2rem;
39
+ --dt-shadow-large-2-offset-x: 0rem;
40
+ --dt-shadow-large-2-type: dropShadow;
41
+ --dt-shadow-large-2-color: oklch(0.7 0.25 54.01);
42
+ --dt-shadow-large-2-spread: 0rem;
43
+ --dt-shadow-large-2-blur: 0.8rem;
44
+ --dt-shadow-large-1-offset-y: 0.1rem;
45
+ --dt-shadow-large-1-offset-x: 0rem;
46
+ --dt-shadow-large-1-type: dropShadow;
47
+ --dt-shadow-large-1-color: oklch(0.7 0.25 54.01);
48
+ --dt-shadow-large-1-spread: 0rem;
49
+ --dt-shadow-large-1-blur: 0.2rem;
50
+ --dt-shadow-medium-3-offset-y: 0.8rem;
51
+ --dt-shadow-medium-3-offset-x: 0rem;
52
+ --dt-shadow-medium-3-type: dropShadow;
53
+ --dt-shadow-medium-3-color: oklch(0.7 0.25 54.01);
54
+ --dt-shadow-medium-3-spread: 0rem;
55
+ --dt-shadow-medium-3-blur: 1.2rem;
56
+ --dt-shadow-medium-2-offset-y: 0.2rem;
57
+ --dt-shadow-medium-2-offset-x: 0rem;
58
+ --dt-shadow-medium-2-type: dropShadow;
59
+ --dt-shadow-medium-2-color: oklch(0.7 0.25 54.01);
60
+ --dt-shadow-medium-2-spread: 0rem;
61
+ --dt-shadow-medium-2-blur: 0.8rem;
62
+ --dt-shadow-medium-1-offset-y: 0.1rem;
63
+ --dt-shadow-medium-1-offset-x: 0rem;
64
+ --dt-shadow-medium-1-type: dropShadow;
65
+ --dt-shadow-medium-1-color: oklch(0.7 0.25 54.01);
66
+ --dt-shadow-medium-1-spread: 0rem;
67
+ --dt-shadow-medium-1-blur: 0.2rem;
68
+ --dt-shadow-small-3-offset-y: 0.2rem;
69
+ --dt-shadow-small-3-offset-x: 0rem;
70
+ --dt-shadow-small-3-type: dropShadow;
71
+ --dt-shadow-small-3-color: oklch(0.7 0.25 54.01);
72
+ --dt-shadow-small-3-spread: 0rem;
73
+ --dt-shadow-small-3-blur: 0.4rem;
74
+ --dt-shadow-small-2-offset-y: 0.1rem;
75
+ --dt-shadow-small-2-offset-x: 0rem;
76
+ --dt-shadow-small-2-type: dropShadow;
77
+ --dt-shadow-small-2-color: oklch(0.7 0.25 54.01);
78
+ --dt-shadow-small-2-spread: 0rem;
79
+ --dt-shadow-small-2-blur: 0.2rem;
80
+ --dt-shadow-small-1-offset-y: -0.1rem;
81
+ --dt-shadow-small-1-offset-x: 0rem;
82
+ --dt-shadow-small-1-type: dropShadow;
83
+ --dt-shadow-small-1-color: oklch(0.7 0.25 54.01);
84
+ --dt-shadow-small-1-spread: 0rem;
85
+ --dt-shadow-small-1-blur: 0.1rem;
86
+ --dt-shadow-card-3-offset-y: 0.2rem;
87
+ --dt-shadow-card-3-offset-x: 0rem;
8
88
  --dt-shadow-card-3-type: dropShadow;
9
89
  --dt-shadow-card-3-color: oklch(0.7 0.25 54.01);
90
+ --dt-shadow-card-3-spread: 0rem;
91
+ --dt-shadow-card-3-blur: 0.4rem;
92
+ --dt-shadow-card-2-offset-y: 0.1rem;
93
+ --dt-shadow-card-2-offset-x: 0rem;
10
94
  --dt-shadow-card-2-type: dropShadow;
11
95
  --dt-shadow-card-2-color: oklch(0.7 0.25 54.01);
96
+ --dt-shadow-card-2-spread: 0rem;
97
+ --dt-shadow-card-2-blur: 0.2rem;
98
+ --dt-shadow-card-1-offset-y: -0.1rem;
99
+ --dt-shadow-card-1-offset-x: 0rem;
12
100
  --dt-shadow-card-1-type: dropShadow;
13
101
  --dt-shadow-card-1-color: oklch(0.7 0.25 54.01);
14
- --dt-shadow-extra-large-type: dropShadow;
15
- --dt-shadow-extra-large-color: oklch(0.7 0.25 54.01);
16
- --dt-shadow-large-type: dropShadow;
17
- --dt-shadow-large-color: oklch(0.7 0.25 54.01);
18
- --dt-shadow-medium-type: dropShadow;
19
- --dt-shadow-medium-color: oklch(0.7 0.25 54.01);
20
- --dt-shadow-small-type: dropShadow;
21
- --dt-shadow-small-color: oklch(0.7 0.25 54.01);
102
+ --dt-shadow-card-1-spread: 0rem;
103
+ --dt-shadow-card-1-blur: 0.1rem;
104
+ --dt-shadow-modal-4-offset-y: 3.2rem;
105
+ --dt-shadow-modal-4-offset-x: 0rem;
106
+ --dt-shadow-modal-4-type: dropShadow;
107
+ --dt-shadow-modal-4-color: oklch(0.7 0.25 54.01);
108
+ --dt-shadow-modal-4-spread: 0rem;
109
+ --dt-shadow-modal-4-blur: 3.2rem;
110
+ --dt-shadow-modal-3-offset-y: 1.2rem;
111
+ --dt-shadow-modal-3-offset-x: 0rem;
112
+ --dt-shadow-modal-3-type: dropShadow;
113
+ --dt-shadow-modal-3-color: oklch(0.7 0.25 54.01);
114
+ --dt-shadow-modal-3-spread: 0rem;
115
+ --dt-shadow-modal-3-blur: 1.6rem;
116
+ --dt-shadow-modal-2-offset-y: 0.4rem;
117
+ --dt-shadow-modal-2-offset-x: 0rem;
118
+ --dt-shadow-modal-2-type: dropShadow;
119
+ --dt-shadow-modal-2-color: oklch(0.7 0.25 54.01);
120
+ --dt-shadow-modal-2-spread: 0rem;
121
+ --dt-shadow-modal-2-blur: 0.6rem;
122
+ --dt-shadow-modal-1-offset-y: 0.2rem;
123
+ --dt-shadow-modal-1-offset-x: 0rem;
124
+ --dt-shadow-modal-1-type: dropShadow;
125
+ --dt-shadow-modal-1-color: oklch(0.7 0.25 54.01);
126
+ --dt-shadow-modal-1-spread: 0rem;
127
+ --dt-shadow-modal-1-blur: 0.2rem;
128
+ --dt-shadow-overlay-3-offset-y: 0.8rem;
129
+ --dt-shadow-overlay-3-offset-x: 0rem;
130
+ --dt-shadow-overlay-3-type: dropShadow;
131
+ --dt-shadow-overlay-3-color: oklch(0.7 0.25 54.01);
132
+ --dt-shadow-overlay-3-spread: 0rem;
133
+ --dt-shadow-overlay-3-blur: 1.2rem;
134
+ --dt-shadow-overlay-2-offset-y: 0.2rem;
135
+ --dt-shadow-overlay-2-offset-x: 0rem;
136
+ --dt-shadow-overlay-2-type: dropShadow;
137
+ --dt-shadow-overlay-2-color: oklch(0.7 0.25 54.01);
138
+ --dt-shadow-overlay-2-spread: 0rem;
139
+ --dt-shadow-overlay-2-blur: 0.8rem;
140
+ --dt-shadow-overlay-1-offset-y: 0.1rem;
141
+ --dt-shadow-overlay-1-offset-x: 0rem;
142
+ --dt-shadow-overlay-1-type: dropShadow;
143
+ --dt-shadow-overlay-1-color: oklch(0.7 0.25 54.01);
144
+ --dt-shadow-overlay-1-spread: 0rem;
145
+ --dt-shadow-overlay-1-blur: 0.2rem;
146
+ --dt-shadow-raised-3-offset-y: 0.2rem;
147
+ --dt-shadow-raised-3-offset-x: 0rem;
148
+ --dt-shadow-raised-3-type: dropShadow;
149
+ --dt-shadow-raised-3-color: oklch(0.7 0.25 54.01);
150
+ --dt-shadow-raised-3-spread: 0rem;
151
+ --dt-shadow-raised-3-blur: 0.4rem;
152
+ --dt-shadow-raised-2-offset-y: 0.1rem;
153
+ --dt-shadow-raised-2-offset-x: 0rem;
154
+ --dt-shadow-raised-2-type: dropShadow;
155
+ --dt-shadow-raised-2-color: oklch(0.7 0.25 54.01);
156
+ --dt-shadow-raised-2-spread: 0rem;
157
+ --dt-shadow-raised-2-blur: 0.2rem;
158
+ --dt-shadow-raised-1-offset-y: -0.1rem;
159
+ --dt-shadow-raised-1-offset-x: 0rem;
160
+ --dt-shadow-raised-1-type: dropShadow;
161
+ --dt-shadow-raised-1-color: oklch(0.7 0.25 54.01);
162
+ --dt-shadow-raised-1-spread: 0rem;
163
+ --dt-shadow-raised-1-blur: 0.1rem;
22
164
  --dt-opacity-1300: 1;
23
165
  --dt-opacity-1200: 0.9;
24
166
  --dt-opacity-1100: 0.8;
@@ -344,34 +486,6 @@
344
486
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
345
487
  --dt-shadow-focus-1-spread: var(--dt-size-100);
346
488
  --dt-shadow-focus-1-blur: var(--dt-size-0);
347
- --dt-shadow-card-3-offset-y: var(--dt-size-200);
348
- --dt-shadow-card-3-offset-x: var(--dt-size-0);
349
- --dt-shadow-card-3-spread: var(--dt-size-0);
350
- --dt-shadow-card-3-blur: var(--dt-size-500);
351
- --dt-shadow-card-2-offset-y: var(--dt-size-200);
352
- --dt-shadow-card-2-offset-x: var(--dt-size-0);
353
- --dt-shadow-card-2-spread: var(--dt-size-0);
354
- --dt-shadow-card-2-blur: var(--dt-size-300);
355
- --dt-shadow-card-1-offset-y: var(--dt-size-100);
356
- --dt-shadow-card-1-offset-x: var(--dt-size-0);
357
- --dt-shadow-card-1-spread: var(--dt-size-0);
358
- --dt-shadow-card-1-blur: var(--dt-size-200);
359
- --dt-shadow-extra-large-offset-y: var(--dt-size-200);
360
- --dt-shadow-extra-large-offset-x: var(--dt-size-0);
361
- --dt-shadow-extra-large-spread: var(--dt-size-0);
362
- --dt-shadow-extra-large-blur: var(--dt-size-600);
363
- --dt-shadow-large-offset-y: var(--dt-size-200);
364
- --dt-shadow-large-offset-x: var(--dt-size-0);
365
- --dt-shadow-large-spread: var(--dt-size-0);
366
- --dt-shadow-large-blur: var(--dt-size-500);
367
- --dt-shadow-medium-offset-y: var(--dt-size-200);
368
- --dt-shadow-medium-offset-x: var(--dt-size-0);
369
- --dt-shadow-medium-spread: var(--dt-size-0);
370
- --dt-shadow-medium-blur: var(--dt-size-400);
371
- --dt-shadow-small-offset-y: var(--dt-size-200);
372
- --dt-shadow-small-offset-x: var(--dt-size-0);
373
- --dt-shadow-small-spread: var(--dt-size-0);
374
- --dt-shadow-small-blur: var(--dt-size-300);
375
489
  --dt-color-gradient-magenta-purple: oklch(0.7 0.25 54.01); /* Gradient for Ai-oriented treatments. */
376
490
  --dt-color-black-1000: oklch(0.7 0.25 54.01);
377
491
  --dt-color-black-950: oklch(0.7 0.25 54.01);
@@ -527,12 +641,15 @@
527
641
  --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
528
642
  --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
529
643
  --dt-shadow-focus-1-color: oklch(0.7 0.25 54.01);
530
- --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
644
+ --dt-shadow-extra-large: var(--dt-shadow-extra-large-1-offset-x) var(--dt-shadow-extra-large-1-offset-y) var(--dt-shadow-extra-large-1-blur) var(--dt-shadow-extra-large-1-spread) var(--dt-shadow-extra-large-1-color), var(--dt-shadow-extra-large-2-offset-x) var(--dt-shadow-extra-large-2-offset-y) var(--dt-shadow-extra-large-2-blur) var(--dt-shadow-extra-large-2-spread) var(--dt-shadow-extra-large-2-color), var(--dt-shadow-extra-large-3-offset-x) var(--dt-shadow-extra-large-3-offset-y) var(--dt-shadow-extra-large-3-blur) var(--dt-shadow-extra-large-3-spread) var(--dt-shadow-extra-large-3-color), var(--dt-shadow-extra-large-4-offset-x) var(--dt-shadow-extra-large-4-offset-y) var(--dt-shadow-extra-large-4-blur) var(--dt-shadow-extra-large-4-spread) var(--dt-shadow-extra-large-4-color);
645
+ --dt-shadow-large: var(--dt-shadow-large-1-offset-x) var(--dt-shadow-large-1-offset-y) var(--dt-shadow-large-1-blur) var(--dt-shadow-large-1-spread) var(--dt-shadow-large-1-color), var(--dt-shadow-large-2-offset-x) var(--dt-shadow-large-2-offset-y) var(--dt-shadow-large-2-blur) var(--dt-shadow-large-2-spread) var(--dt-shadow-large-2-color), var(--dt-shadow-large-3-offset-x) var(--dt-shadow-large-3-offset-y) var(--dt-shadow-large-3-blur) var(--dt-shadow-large-3-spread) var(--dt-shadow-large-3-color);
646
+ --dt-shadow-medium: var(--dt-shadow-medium-1-offset-x) var(--dt-shadow-medium-1-offset-y) var(--dt-shadow-medium-1-blur) var(--dt-shadow-medium-1-spread) var(--dt-shadow-medium-1-color), var(--dt-shadow-medium-2-offset-x) var(--dt-shadow-medium-2-offset-y) var(--dt-shadow-medium-2-blur) var(--dt-shadow-medium-2-spread) var(--dt-shadow-medium-2-color), var(--dt-shadow-medium-3-offset-x) var(--dt-shadow-medium-3-offset-y) var(--dt-shadow-medium-3-blur) var(--dt-shadow-medium-3-spread) var(--dt-shadow-medium-3-color);
647
+ --dt-shadow-small: var(--dt-shadow-small-1-offset-x) var(--dt-shadow-small-1-offset-y) var(--dt-shadow-small-1-blur) var(--dt-shadow-small-1-spread) var(--dt-shadow-small-1-color), var(--dt-shadow-small-2-offset-x) var(--dt-shadow-small-2-offset-y) var(--dt-shadow-small-2-blur) var(--dt-shadow-small-2-spread) var(--dt-shadow-small-2-color), var(--dt-shadow-small-3-offset-x) var(--dt-shadow-small-3-offset-y) var(--dt-shadow-small-3-blur) var(--dt-shadow-small-3-spread) var(--dt-shadow-small-3-color);
531
648
  --dt-shadow-card: var(--dt-shadow-card-1-offset-x) var(--dt-shadow-card-1-offset-y) var(--dt-shadow-card-1-blur) var(--dt-shadow-card-1-spread) var(--dt-shadow-card-1-color), var(--dt-shadow-card-2-offset-x) var(--dt-shadow-card-2-offset-y) var(--dt-shadow-card-2-blur) var(--dt-shadow-card-2-spread) var(--dt-shadow-card-2-color), var(--dt-shadow-card-3-offset-x) var(--dt-shadow-card-3-offset-y) var(--dt-shadow-card-3-blur) var(--dt-shadow-card-3-spread) var(--dt-shadow-card-3-color);
532
- --dt-shadow-extra-large: var(--dt-shadow-extra-large-offset-x) var(--dt-shadow-extra-large-offset-y) var(--dt-shadow-extra-large-blur) var(--dt-shadow-extra-large-spread) var(--dt-shadow-extra-large-color);
533
- --dt-shadow-large: var(--dt-shadow-large-offset-x) var(--dt-shadow-large-offset-y) var(--dt-shadow-large-blur) var(--dt-shadow-large-spread) var(--dt-shadow-large-color);
534
- --dt-shadow-medium: var(--dt-shadow-medium-offset-x) var(--dt-shadow-medium-offset-y) var(--dt-shadow-medium-blur) var(--dt-shadow-medium-spread) var(--dt-shadow-medium-color);
535
- --dt-shadow-small: var(--dt-shadow-small-offset-x) var(--dt-shadow-small-offset-y) var(--dt-shadow-small-blur) var(--dt-shadow-small-spread) var(--dt-shadow-small-color);
649
+ --dt-shadow-modal: var(--dt-shadow-modal-1-offset-x) var(--dt-shadow-modal-1-offset-y) var(--dt-shadow-modal-1-blur) var(--dt-shadow-modal-1-spread) var(--dt-shadow-modal-1-color), var(--dt-shadow-modal-2-offset-x) var(--dt-shadow-modal-2-offset-y) var(--dt-shadow-modal-2-blur) var(--dt-shadow-modal-2-spread) var(--dt-shadow-modal-2-color), var(--dt-shadow-modal-3-offset-x) var(--dt-shadow-modal-3-offset-y) var(--dt-shadow-modal-3-blur) var(--dt-shadow-modal-3-spread) var(--dt-shadow-modal-3-color), var(--dt-shadow-modal-4-offset-x) var(--dt-shadow-modal-4-offset-y) var(--dt-shadow-modal-4-blur) var(--dt-shadow-modal-4-spread) var(--dt-shadow-modal-4-color);
650
+ --dt-shadow-overlay: var(--dt-shadow-overlay-1-offset-x) var(--dt-shadow-overlay-1-offset-y) var(--dt-shadow-overlay-1-blur) var(--dt-shadow-overlay-1-spread) var(--dt-shadow-overlay-1-color), var(--dt-shadow-overlay-2-offset-x) var(--dt-shadow-overlay-2-offset-y) var(--dt-shadow-overlay-2-blur) var(--dt-shadow-overlay-2-spread) var(--dt-shadow-overlay-2-color), var(--dt-shadow-overlay-3-offset-x) var(--dt-shadow-overlay-3-offset-y) var(--dt-shadow-overlay-3-blur) var(--dt-shadow-overlay-3-spread) var(--dt-shadow-overlay-3-color);
651
+ --dt-shadow-raised: var(--dt-shadow-raised-1-offset-x) var(--dt-shadow-raised-1-offset-y) var(--dt-shadow-raised-1-blur) var(--dt-shadow-raised-1-spread) var(--dt-shadow-raised-1-color), var(--dt-shadow-raised-2-offset-x) var(--dt-shadow-raised-2-offset-y) var(--dt-shadow-raised-2-blur) var(--dt-shadow-raised-2-spread) var(--dt-shadow-raised-2-color), var(--dt-shadow-raised-3-offset-x) var(--dt-shadow-raised-3-offset-y) var(--dt-shadow-raised-3-blur) var(--dt-shadow-raised-3-spread) var(--dt-shadow-raised-3-color);
652
+ --dt-shadow-focus-inset: var(--dt-shadow-focus-inset-offset-x) var(--dt-shadow-focus-inset-offset-y) var(--dt-shadow-focus-inset-blur) var(--dt-shadow-focus-inset-spread) var(--dt-shadow-focus-inset-color) inset;
536
653
  --dt-shadow-focus: var(--dt-shadow-focus-1-offset-x) var(--dt-shadow-focus-1-offset-y) var(--dt-shadow-focus-1-blur) var(--dt-shadow-focus-1-spread) var(--dt-shadow-focus-1-color), var(--dt-shadow-focus-2-offset-x) var(--dt-shadow-focus-2-offset-y) var(--dt-shadow-focus-2-blur) var(--dt-shadow-focus-2-spread) var(--dt-shadow-focus-2-color);
537
654
  --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
538
655
  --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */