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

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 (28) hide show
  1. package/lib/build/js/dialtone_migrate/index.mjs +856 -0
  2. package/lib/build/js/dialtone_migrate_props/index.mjs +2 -1
  3. package/lib/build/js/dialtone_migration_helper/configs/physical-to-logical.mjs +7 -7
  4. package/lib/build/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs +17 -0
  5. package/lib/build/less/components/box.less +2 -2
  6. package/lib/build/less/components/card.less +1 -1
  7. package/lib/build/less/components/image-viewer.less +0 -1
  8. package/lib/build/less/components/modal.less +1 -1
  9. package/lib/build/less/components/popover.less +1 -1
  10. package/lib/build/less/components/toast.less +2 -2
  11. package/lib/build/less/recipes/contact_info.less +0 -1
  12. package/lib/build/less/recipes/unread_pill.less +1 -1
  13. package/lib/build/less/utilities/effects.less +5 -11
  14. package/lib/dist/dialtone-default-theme.css +74 -184
  15. package/lib/dist/dialtone-default-theme.min.css +1 -1
  16. package/lib/dist/dialtone-docs.json +1 -1
  17. package/lib/dist/dialtone.css +30 -23
  18. package/lib/dist/dialtone.min.css +1 -1
  19. package/lib/dist/js/dialtone_migrate/index.mjs +856 -0
  20. package/lib/dist/js/dialtone_migrate_props/index.mjs +2 -1
  21. package/lib/dist/js/dialtone_migrate_tshirt_to_numeric/index.mjs +0 -0
  22. package/lib/dist/js/dialtone_migration_helper/configs/physical-to-logical.mjs +7 -7
  23. package/lib/dist/js/dialtone_migration_helper/configs/vue3-to-vue-imports.mjs +17 -0
  24. package/lib/dist/tokens/tokens-base-dark.css +126 -267
  25. package/lib/dist/tokens/tokens-base-light.css +44 -161
  26. package/lib/dist/tokens/tokens-debug-base.css +41 -158
  27. package/lib/dist/tokens-docs.json +1 -1
  28. package/package.json +4 -1
@@ -5,162 +5,20 @@
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;
88
8
  --dt-shadow-card-3-type: dropShadow;
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;
9
+ --dt-shadow-card-3-color: oklch(0 0 0 / 0.0784);
94
10
  --dt-shadow-card-2-type: dropShadow;
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;
11
+ --dt-shadow-card-2-color: oklch(0 0 0 / 0.0392);
100
12
  --dt-shadow-card-1-type: dropShadow;
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;
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);
164
22
  --dt-opacity-1300: 1;
165
23
  --dt-opacity-1200: 0.9;
166
24
  --dt-opacity-1100: 0.8;
@@ -486,6 +344,34 @@
486
344
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
487
345
  --dt-shadow-focus-1-spread: var(--dt-size-100);
488
346
  --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);
489
375
  --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. */
490
376
  --dt-color-black-1000: oklch(0.1595 0.0045 84.59);
491
377
  --dt-color-black-950: oklch(0.2083 0.006 91.63);
@@ -641,15 +527,12 @@
641
527
  --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
642
528
  --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
643
529
  --dt-shadow-focus-1-color: oklch(0.9748 0.0025 48.72);
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);
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);
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
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;
531
+ --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);
653
536
  --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);
654
537
  --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
655
538
  --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */
@@ -5,162 +5,20 @@
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;
88
8
  --dt-shadow-card-3-type: dropShadow;
89
9
  --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;
94
10
  --dt-shadow-card-2-type: dropShadow;
95
11
  --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;
100
12
  --dt-shadow-card-1-type: dropShadow;
101
13
  --dt-shadow-card-1-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;
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);
164
22
  --dt-opacity-1300: 1;
165
23
  --dt-opacity-1200: 0.9;
166
24
  --dt-opacity-1100: 0.8;
@@ -486,6 +344,34 @@
486
344
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
487
345
  --dt-shadow-focus-1-spread: var(--dt-size-100);
488
346
  --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);
489
375
  --dt-color-gradient-magenta-purple: oklch(0.7 0.25 54.01); /* Gradient for Ai-oriented treatments. */
490
376
  --dt-color-black-1000: oklch(0.7 0.25 54.01);
491
377
  --dt-color-black-950: oklch(0.7 0.25 54.01);
@@ -641,15 +527,12 @@
641
527
  --dt-font-size-75: calc(var(--dt-font-size-root) * 1.1); /* xs / extra small */
642
528
  --dt-font-size-50: var(--dt-font-size-root); /* xxs / extra extra small */
643
529
  --dt-shadow-focus-1-color: oklch(0.7 0.25 54.01);
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);
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);
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
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;
531
+ --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);
653
536
  --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);
654
537
  --dt-layout-1600: calc(var(--dt-layout-base) * 16); /* 1024px */
655
538
  --dt-layout-1550: calc(var(--dt-layout-base) * 15.5); /* 992px */