@dialpad/dialtone 8.5.2-version8.1 → 8.6.0-version8.1

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 (10) hide show
  1. package/lib/build/less/components/avatar.less +21 -31
  2. package/lib/build/less/components/badge.less +10 -11
  3. package/lib/build/less/components/breadcrumbs.less +3 -3
  4. package/lib/build/less/components/chip.less +5 -5
  5. package/lib/build/less/components/radio-checkbox.less +14 -15
  6. package/lib/build/less/themes/default.less +0 -6
  7. package/lib/build/less/variables/layout.less +1 -40
  8. package/lib/dist/css/dialtone.css +69 -69
  9. package/lib/dist/css/dialtone.min.css +1 -1
  10. package/package.json +2 -2
package/lib/build/less/components/avatar.less CHANGED
@@ -19,14 +19,8 @@
19
19
  .d-avatar {
20
20
  // Component CSS Vars
21
21
  // ------------------------------------------------------------------------
22
- // Hard-coded. Identical in all theme modes.
23
- // To be replaced by `var (--dt-color-neutral-black)`,
24
- // or possibly an Avatar-specific Design Token
25
- --avatar-color-background: #e0e0e0;
26
- // Hard-coded. Identical in all theme modes.
27
- // To be replaced by `var (--dt-color-neutral-black)`,
28
- // or possibly an Avatar-specific Design Token
29
- --avatar-color-text: #000;
22
+ --avatar-color-background: var(--dt-avatar-color-background-000);
23
+ --avatar-color-text: var(--dt-avatar-color-foreground);
30
24
  --avatar-size-shape: var(--dt-size-600);
31
25
  --avatar-size-image: 100%;
32
26
  --avatar-size-text: var(--dt-font-size-200);
@@ -40,27 +34,24 @@
40
34
 
41
35
  // -- COLOR VARIANTS
42
36
  // ------------------------------------------------------------------------
43
-
44
- // hard-coded. identical in all theme modes.
45
- // To be replaced by Avatar-specific Design Tokens,
46
- &--color-100 { --avatar-color-background: #1aa340; }
47
- &--color-200 { --avatar-color-background: #aaff83; }
48
- &--color-300 { --avatar-color-background: #adea88; }
49
- &--color-400 { --avatar-color-background: #77eca6; }
50
- &--color-500 { --avatar-color-background: #7aedbd; }
51
- &--color-600 { --avatar-color-background: #77deec; }
52
- &--color-700 { --avatar-color-background: #5ed8ff; }
53
- &--color-800 { --avatar-color-background: #99e7ff; }
54
- &--color-900 { --avatar-color-background: #51a0fe; }
55
- &--color-1000 { --avatar-color-background: #b6cfff; }
56
- &--color-1100 { --avatar-color-background: #f1b7e8; }
57
- &--color-1200 { --avatar-color-background: #ec77bd; }
58
- &--color-1300 { --avatar-color-background: #ff67be; }
59
- &--color-1400 { --avatar-color-background: #f87e7e; }
60
- &--color-1500 { --avatar-color-background: #eca877; }
61
- &--color-1600 { --avatar-color-background: #ffbe41; }
62
- &--color-1700 { --avatar-color-background: #ffd646; }
63
- &--color-1800 { --avatar-color-background: #f1dab7; }
37
+ &--color-100 { --avatar-color-background: var(--dt-avatar-color-background-100); }
38
+ &--color-200 { --avatar-color-background: var(--dt-avatar-color-background-200); }
39
+ &--color-300 { --avatar-color-background: var(--dt-avatar-color-background-300); }
40
+ &--color-400 { --avatar-color-background: var(--dt-avatar-color-background-400); }
41
+ &--color-500 { --avatar-color-background: var(--dt-avatar-color-background-500); }
42
+ &--color-600 { --avatar-color-background: var(--dt-avatar-color-background-600); }
43
+ &--color-700 { --avatar-color-background: var(--dt-avatar-color-background-700); }
44
+ &--color-800 { --avatar-color-background: var(--dt-avatar-color-background-800); }
45
+ &--color-900 { --avatar-color-background: var(--dt-avatar-color-background-900); }
46
+ &--color-1000 { --avatar-color-background: var(--dt-avatar-color-background-1000); }
47
+ &--color-1100 { --avatar-color-background: var(--dt-avatar-color-background-1100); }
48
+ &--color-1200 { --avatar-color-background: var(--dt-avatar-color-background-1200); }
49
+ &--color-1300 { --avatar-color-background: var(--dt-avatar-color-background-1300); }
50
+ &--color-1400 { --avatar-color-background: var(--dt-avatar-color-background-1400); }
51
+ &--color-1500 { --avatar-color-background: var(--dt-avatar-color-background-1500); }
52
+ &--color-1600 { --avatar-color-background: var(--dt-avatar-color-background-1600); }
53
+ &--color-1700 { --avatar-color-background: var(--dt-avatar-color-background-1700); }
54
+ &--color-1800 { --avatar-color-background: var(--dt-avatar-color-background-1800); }
64
55
 
65
56
  // -- CHILDREN
66
57
  // ------------------------------------------------------------------------
@@ -73,7 +64,6 @@
73
64
  height: var(--avatar-size-shape);
74
65
  overflow: hidden;
75
66
  background-color: var(--avatar-color-background);
76
- background-image: var(--avatar-gradient);
77
67
  border-radius: var(--dt-size-radius-pill);
78
68
  }
79
69
 
@@ -117,7 +107,7 @@
117
107
  font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
118
108
  line-height: var(--dt-font-line-height-100);
119
109
  text-align: center;
120
- background-color: var(--dt-color-black-600);
110
+ background-color: var(--dt-color-surface-strong);
121
111
  border-radius: var(--dt-size-radius-pill);
122
112
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
123
113
 
package/lib/build/less/components/badge.less CHANGED
@@ -20,9 +20,8 @@
20
20
  .d-badge {
21
21
  // COMPONENT CSS VARIABLES
22
22
  // --------------------------------------------------------------------------
23
- --badge-color-text: var(--dt-color-foreground-primary);
24
- --badge-color-background: var(--dt-color-surface-moderate-opaque);
25
- --badge-color-background-ai: linear-gradient(to bottom right, var(--dt-color-magenta-300) 0%, var(--dt-color-purple-400) 100%);
23
+ --badge-color-text: var(--dt-badge-color-foreground-default);
24
+ --badge-color-background: var(--dt-badge-color-background-default);
26
25
  --badge-radius: var(--dt-size-300);
27
26
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
28
27
  --badge-font-size: var(--dt-font-size-100);
@@ -67,31 +66,31 @@
67
66
  // --------------------------------------------------------------------------
68
67
 
69
68
  &--info {
70
- --badge-color-background: var(--dt-color-surface-info);
69
+ --badge-color-background: var(--dt-badge-color-background-info);
71
70
  }
72
71
 
73
72
  &--success {
74
- --badge-color-background: var(--dt-color-surface-success);
73
+ --badge-color-background: var(--dt-badge-color-background-success);
75
74
  }
76
75
 
77
76
  &--warning {
78
- --badge-color-background: var(--dt-color-surface-warning);
77
+ --badge-color-background: var(--dt-badge-color-background-warning);
79
78
  }
80
79
 
81
80
  &--critical {
82
- --badge-color-background: var(--dt-color-surface-critical);
81
+ --badge-color-background: var(--dt-badge-color-background-critical);
83
82
  }
84
83
 
85
84
  &--bulletin {
86
- --badge-color-text: var(--theme-mention-color-foreground);
87
- --badge-color-background: var(--theme-mention-color-background);
85
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin);
86
+ --badge-color-background: var(--dt-badge-color-background-bulletin);
88
87
  }
89
88
 
90
89
  &--ai {
91
- --badge-color-text: var(--theme-mention-color-foreground);
90
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin); // missing token or is ok to use this one?
92
91
  --badge-color-background: var(--dt-color-magenta-300);
93
92
 
94
- background-image: var(--badge-color-background-ai);
93
+ background-image: var(--dt-badge-color-background-ai);
95
94
  }
96
95
 
97
96
  &--decorate-black-400 { --badge-decorative-color: var(--dt-color-black-400); }
package/lib/build/less/components/breadcrumbs.less CHANGED
@@ -15,14 +15,14 @@
15
15
  --breadcrumbs-font-size: var(--dt-font-size-200);
16
16
  --breadcrumbs-line-height: var(--dt-font-line-height-300);
17
17
  --breadcrumbs-color-separator: var(--dt-color-black-500);
18
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary);
18
+ --breadcrumbs-color-text: var(--dt-color-link-muted);
19
19
 
20
20
  // ============================================================================
21
21
  // $ INVERTED STYLE
22
22
  // ----------------------------------------------------------------------------
23
23
  &--inverted {
24
- --breadcrumbs-color-separator: var(--dt-color-black-300);
25
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary-inverted);
24
+ --breadcrumbs-color-separator: var(--dt-color-black-400);
25
+ --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
26
26
  }
27
27
 
28
28
  // ============================================================================
package/lib/build/less/components/chip.less CHANGED
@@ -46,8 +46,8 @@
46
46
  // not nested within the chip. Only apply if close button exists (more than one child).
47
47
  &:not(:only-child)::after {
48
48
  flex-shrink: 0;
49
- width: calc(var(--dt-size-500) + var(--dt-space-200));
50
- height: calc(var(--dt-size-500) + var(--dt-space-200));
49
+ width: calc(var(--dt-size-500) + var(--dt-size-200));
50
+ height: calc(var(--dt-size-500) + var(--dt-size-200));
51
51
  content: '';
52
52
  }
53
53
 
@@ -76,7 +76,7 @@
76
76
  }
77
77
 
78
78
  .d-avatar {
79
- --avatar-size-shape: var(--dt-space-550);
79
+ --avatar-size-shape: var(--dt-size-550);
80
80
 
81
81
  margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
82
82
  }
@@ -205,8 +205,8 @@
205
205
  padding: var(--dt-space-200);
206
206
 
207
207
  &::before {
208
- width: var(--dt-space-550);
209
- height: var(--dt-space-550);
208
+ width: var(--dt-size-550);
209
+ height: var(--dt-size-550);
210
210
  }
211
211
 
212
212
  .d-btn__icon .d-svg {
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -24,11 +24,12 @@
24
24
  .d-radio {
25
25
  // Component specific CSS Vars
26
26
  // ------------------------------------------------------------------------
27
- --check-radio-color: var(--dt-color-purple-400);
28
- --check-radio-color-border: var(--dt-color-black-400);
29
- --check-radio-color-border-disabled: hsla(var(--dt-color-black-900-hsl) / 0.09);
30
- --check-radio-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
31
- --check-radio-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
27
+ --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
28
+ --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
29
+ --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
30
+ --check-radio-color-background: var(--dt-inputs-color-background-default);
31
+ --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
32
+ --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
32
33
  --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50)); // 1.5
33
34
 
34
35
  // [1] Check to see if we can use custom styles, if so reset the defaults
@@ -56,14 +57,12 @@
56
57
 
57
58
  &:focus,
58
59
  &:checked:focus {
59
- --check-radio-color-border: var(--check-radio-color);
60
-
61
60
  outline: 0;
62
61
  box-shadow: var(--dt-shadow-focus);
63
62
  }
64
63
 
65
64
  &:checked {
66
- --check-radio-color-border: var(--check-radio-color);
65
+ --check-radio-color-border: var(--check-radio-color-border-checked);
67
66
  }
68
67
  }
69
68
 
@@ -132,7 +131,7 @@
132
131
  display: inline-flex;
133
132
  flex: 1 auto;
134
133
  flex-direction: column;
135
- color: var(--dt-color-black-800);
134
+ color: var(--dt-color-foreground-primary);
136
135
  font-weight: var(--dt-font-weight-normal);
137
136
  font-size: var(--dt-font-size-200);
138
137
  line-height: var(--dt-font-line-height-400);
@@ -155,7 +154,7 @@
155
154
  }
156
155
 
157
156
  &:checked {
158
- --check-radio-color-background: var(--check-radio-color);
157
+ --check-radio-color-background: var(--check-radio-color-background-checked);
159
158
 
160
159
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
161
160
 
@@ -176,8 +175,8 @@
176
175
 
177
176
  &--indeterminate,
178
177
  &:indeterminate {
179
- --check-radio-color-background: var(--check-radio-color);
180
- --check-radio-color-border: var(--check-radio-color);
178
+ --check-radio-color-background: var(--check-radio-color-background-checked);
179
+ --check-radio-color-border: var(--check-radio-color-border-checked);
181
180
 
182
181
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
183
182
 
@@ -228,19 +227,19 @@
228
227
  }
229
228
 
230
229
  &:checked {
231
- --check-radio-color-background: var(--check-radio-color);
230
+ --check-radio-color-background: var(--check-radio-color-background-checked);
232
231
 
233
232
  box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
234
233
 
235
234
  // Disabled
236
235
  &[disabled] {
237
- --check-radio-color-background: var(--dt-color-black-400);
236
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
238
237
  }
239
238
  }
240
239
 
241
240
  &--disabled:checked {
242
241
  --check-radio-color-border: var(--check-radio-color-border-disabled);
243
- --check-radio-color-background: var(--dt-color-black-400);
242
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
244
243
  }
245
244
  }
246
245
  }
package/lib/build/less/themes/default.less CHANGED
@@ -128,12 +128,6 @@ body {
128
128
  --@{key}: @value;
129
129
  });
130
130
 
131
- // $$ Z-INDEX
132
- // ------------------------------------------------------------------------
133
- each(@zi-vars, {
134
- --@{key}: @value;
135
- });
136
-
137
131
  // $$ THEME VARS
138
132
  // These should always come last
139
133
  // ------------------------------------------------------------------------
package/lib/build/less/variables/layout.less CHANGED
@@ -1,46 +1,7 @@
1
1
  //
2
2
  // DIALTONE
3
- // TOKENS: Z-INDEX
3
+ // TOKENS: Grid-vars
4
4
  //
5
- // These are z-index constants for Dialpad's design system Dialtone.
6
- // For further documentation of these and other classes,
7
- // visit https://dialpad.design/tokens/z-index
8
- //
9
- // ============================================================================
10
- // $ Z-INDEX
11
- // ----------------------------------------------------------------------------
12
- @zi-hide: -1;
13
- @zi-base: 0;
14
- @zi-base1: 1;
15
- @zi-selected: 25;
16
- @zi-active: 50;
17
- @zi-navigation: 100;
18
- @zi-navigation-fixed: 150;
19
- @zi-dropdown: 200;
20
- @zi-popover: 300;
21
- @zi-tooltip: 400;
22
- @zi-drawer: 500;
23
- @zi-modal: 600;
24
- @zi-modal-element: 650;
25
- @zi-notification: 700;
26
-
27
- @zi-vars: {
28
- zi-hide: @zi-hide;
29
- zi-base: @zi-base;
30
- zi-base1: @zi-base1;
31
- zi-selected: @zi-selected;
32
- zi-active: @zi-active;
33
- zi-navigation: @zi-navigation;
34
- zi-navigation-fixed: @zi-navigation-fixed;
35
- zi-dropdown: @zi-dropdown;
36
- zi-popover: @zi-popover;
37
- zi-tooltip: @zi-tooltip;
38
- zi-drawer: @zi-drawer;
39
- zi-modal: @zi-modal;
40
- zi-modal-element: @zi-modal-element;
41
- zi-notification: @zi-notification;
42
- }
43
-
44
5
  // ============================================================================
45
6
  // $ GRID VARIABLES
46
7
  // ----------------------------------------------------------------------------
package/lib/dist/css/dialtone.css CHANGED
@@ -317,8 +317,8 @@ template {
317
317
  }
318
318
  /* stylelint-disable meowtec/no-px */
319
319
  .d-avatar {
320
- --avatar-color-background: #e0e0e0;
321
- --avatar-color-text: #000;
320
+ --avatar-color-background: var(--dt-avatar-color-background-000);
321
+ --avatar-color-text: var(--dt-avatar-color-foreground);
322
322
  --avatar-size-shape: var(--dt-size-600);
323
323
  --avatar-size-image: 100%;
324
324
  --avatar-size-text: var(--dt-font-size-200);
@@ -330,58 +330,58 @@ template {
330
330
  color: var(--avatar-color-text);
331
331
  }
332
332
  .d-avatar--color-100 {
333
- --avatar-color-background: #1aa340;
333
+ --avatar-color-background: var(--dt-avatar-color-background-100);
334
334
  }
335
335
  .d-avatar--color-200 {
336
- --avatar-color-background: #aaff83;
336
+ --avatar-color-background: var(--dt-avatar-color-background-200);
337
337
  }
338
338
  .d-avatar--color-300 {
339
- --avatar-color-background: #adea88;
339
+ --avatar-color-background: var(--dt-avatar-color-background-300);
340
340
  }
341
341
  .d-avatar--color-400 {
342
- --avatar-color-background: #77eca6;
342
+ --avatar-color-background: var(--dt-avatar-color-background-400);
343
343
  }
344
344
  .d-avatar--color-500 {
345
- --avatar-color-background: #7aedbd;
345
+ --avatar-color-background: var(--dt-avatar-color-background-500);
346
346
  }
347
347
  .d-avatar--color-600 {
348
- --avatar-color-background: #77deec;
348
+ --avatar-color-background: var(--dt-avatar-color-background-600);
349
349
  }
350
350
  .d-avatar--color-700 {
351
- --avatar-color-background: #5ed8ff;
351
+ --avatar-color-background: var(--dt-avatar-color-background-700);
352
352
  }
353
353
  .d-avatar--color-800 {
354
- --avatar-color-background: #99e7ff;
354
+ --avatar-color-background: var(--dt-avatar-color-background-800);
355
355
  }
356
356
  .d-avatar--color-900 {
357
- --avatar-color-background: #51a0fe;
357
+ --avatar-color-background: var(--dt-avatar-color-background-900);
358
358
  }
359
359
  .d-avatar--color-1000 {
360
- --avatar-color-background: #b6cfff;
360
+ --avatar-color-background: var(--dt-avatar-color-background-1000);
361
361
  }
362
362
  .d-avatar--color-1100 {
363
- --avatar-color-background: #f1b7e8;
363
+ --avatar-color-background: var(--dt-avatar-color-background-1100);
364
364
  }
365
365
  .d-avatar--color-1200 {
366
- --avatar-color-background: #ec77bd;
366
+ --avatar-color-background: var(--dt-avatar-color-background-1200);
367
367
  }
368
368
  .d-avatar--color-1300 {
369
- --avatar-color-background: #ff67be;
369
+ --avatar-color-background: var(--dt-avatar-color-background-1300);
370
370
  }
371
371
  .d-avatar--color-1400 {
372
- --avatar-color-background: #f87e7e;
372
+ --avatar-color-background: var(--dt-avatar-color-background-1400);
373
373
  }
374
374
  .d-avatar--color-1500 {
375
- --avatar-color-background: #eca877;
375
+ --avatar-color-background: var(--dt-avatar-color-background-1500);
376
376
  }
377
377
  .d-avatar--color-1600 {
378
- --avatar-color-background: #ffbe41;
378
+ --avatar-color-background: var(--dt-avatar-color-background-1600);
379
379
  }
380
380
  .d-avatar--color-1700 {
381
- --avatar-color-background: #ffd646;
381
+ --avatar-color-background: var(--dt-avatar-color-background-1700);
382
382
  }
383
383
  .d-avatar--color-1800 {
384
- --avatar-color-background: #f1dab7;
384
+ --avatar-color-background: var(--dt-avatar-color-background-1800);
385
385
  }
386
386
  .d-avatar__canvas {
387
387
  display: flex;
@@ -391,7 +391,6 @@ template {
391
391
  height: var(--avatar-size-shape);
392
392
  overflow: hidden;
393
393
  background-color: var(--avatar-color-background);
394
- background-image: var(--avatar-gradient);
395
394
  border-radius: var(--dt-size-radius-pill);
396
395
  }
397
396
  .d-avatar__image {
@@ -430,7 +429,7 @@ template {
430
429
  font-size: calc(var(--dt-font-size-100) - var(--dt-size-200));
431
430
  line-height: var(--dt-font-line-height-100);
432
431
  text-align: center;
433
- background-color: var(--dt-color-black-600);
432
+ background-color: var(--dt-color-surface-strong);
434
433
  border-radius: var(--dt-size-radius-pill);
435
434
  box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
436
435
  }
@@ -473,9 +472,8 @@ template {
473
472
  height: var(--dt-size-550);
474
473
  }
475
474
  .d-badge {
476
- --badge-color-text: var(--dt-color-foreground-primary);
477
- --badge-color-background: var(--dt-color-surface-moderate-opaque);
478
- --badge-color-background-ai: linear-gradient(to bottom right, var(--dt-color-magenta-300) 0%, var(--dt-color-purple-400) 100%);
475
+ --badge-color-text: var(--dt-badge-color-foreground-default);
476
+ --badge-color-background: var(--dt-badge-color-background-default);
479
477
  --badge-radius: var(--dt-size-300);
480
478
  --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
481
479
  --badge-font-size: var(--dt-font-size-100);
@@ -510,25 +508,25 @@ template {
510
508
  --badge-line-height: var(--dt-size-500);
511
509
  }
512
510
  .d-badge--info {
513
- --badge-color-background: var(--dt-color-surface-info);
511
+ --badge-color-background: var(--dt-badge-color-background-info);
514
512
  }
515
513
  .d-badge--success {
516
- --badge-color-background: var(--dt-color-surface-success);
514
+ --badge-color-background: var(--dt-badge-color-background-success);
517
515
  }
518
516
  .d-badge--warning {
519
- --badge-color-background: var(--dt-color-surface-warning);
517
+ --badge-color-background: var(--dt-badge-color-background-warning);
520
518
  }
521
519
  .d-badge--critical {
522
- --badge-color-background: var(--dt-color-surface-critical);
520
+ --badge-color-background: var(--dt-badge-color-background-critical);
523
521
  }
524
522
  .d-badge--bulletin {
525
- --badge-color-text: var(--theme-mention-color-foreground);
526
- --badge-color-background: var(--theme-mention-color-background);
523
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin);
524
+ --badge-color-background: var(--dt-badge-color-background-bulletin);
527
525
  }
528
526
  .d-badge--ai {
529
- --badge-color-text: var(--theme-mention-color-foreground);
527
+ --badge-color-text: var(--dt-badge-color-foreground-bulletin);
530
528
  --badge-color-background: var(--dt-color-magenta-300);
531
- background-image: var(--badge-color-background-ai);
529
+ background-image: var(--dt-badge-color-background-ai);
532
530
  }
533
531
  .d-badge--decorate-black-400 {
534
532
  --badge-decorative-color: var(--dt-color-black-400);
@@ -706,11 +704,11 @@ template {
706
704
  --breadcrumbs-font-size: var(--dt-font-size-200);
707
705
  --breadcrumbs-line-height: var(--dt-font-line-height-300);
708
706
  --breadcrumbs-color-separator: var(--dt-color-black-500);
709
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary);
707
+ --breadcrumbs-color-text: var(--dt-color-link-muted);
710
708
  }
711
709
  .d-breadcrumbs--inverted {
712
- --breadcrumbs-color-separator: var(--dt-color-black-300);
713
- --breadcrumbs-color-text: var(--dt-color-foreground-secondary-inverted);
710
+ --breadcrumbs-color-separator: var(--dt-color-black-400);
711
+ --breadcrumbs-color-text: var(--dt-color-link-muted-inverted);
714
712
  }
715
713
  .d-breadcrumbs > ol {
716
714
  display: flex;
@@ -1208,8 +1206,8 @@ template {
1208
1206
  }
1209
1207
  .d-chip__label:not(:only-child)::after {
1210
1208
  flex-shrink: 0;
1211
- width: calc(var(--dt-size-500) + var(--dt-space-200));
1212
- height: calc(var(--dt-size-500) + var(--dt-space-200));
1209
+ width: calc(var(--dt-size-500) + var(--dt-size-200));
1210
+ height: calc(var(--dt-size-500) + var(--dt-size-200));
1213
1211
  content: '';
1214
1212
  }
1215
1213
  .d-chip__label:is(a),
@@ -1240,7 +1238,7 @@ template {
1240
1238
  box-shadow: var(--dt-shadow-focus);
1241
1239
  }
1242
1240
  .d-chip__label .d-avatar {
1243
- --avatar-size-shape: var(--dt-space-550);
1241
+ --avatar-size-shape: var(--dt-size-550);
1244
1242
  margin: var(--dt-space-200-negative) var(--dt-space-300) var(--dt-space-200-negative) var(--dt-space-350-negative);
1245
1243
  }
1246
1244
  .d-chip__label .d-svg {
@@ -1450,8 +1448,8 @@ template {
1450
1448
  padding: var(--dt-space-200);
1451
1449
  }
1452
1450
  .d-chip__close--sm::before {
1453
- width: var(--dt-space-550);
1454
- height: var(--dt-space-550);
1451
+ width: var(--dt-size-550);
1452
+ height: var(--dt-size-550);
1455
1453
  }
1456
1454
  .d-chip__close--sm .d-btn__icon .d-svg {
1457
1455
  width: var(--dt-size-500);
@@ -2516,11 +2514,12 @@ legend .d-label {
2516
2514
  }
2517
2515
  .d-checkbox,
2518
2516
  .d-radio {
2519
- --check-radio-color: var(--dt-color-purple-400);
2520
- --check-radio-color-border: var(--dt-color-black-400);
2521
- --check-radio-color-border-disabled: hsla(var(--dt-color-black-900-hsl) / 0.09);
2522
- --check-radio-color-background: hsla(var(--dt-color-black-900-hsl) / 0.03);
2523
- --check-radio-color-background-disabled: hsla(var(--dt-color-black-900-hsl) / 0.12);
2517
+ --check-radio-color-border: var(--dt-checkbox-color-border-unchecked);
2518
+ --check-radio-color-border-checked: var(--dt-checkbox-color-border-checked);
2519
+ --check-radio-color-border-disabled: var(--dt-inputs-color-border-disabled);
2520
+ --check-radio-color-background: var(--dt-inputs-color-background-default);
2521
+ --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
2522
+ --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
2524
2523
  --check-radio-border-width: calc(var(--dt-size-100) + var(--dt-size-50));
2525
2524
  flex: 0 auto;
2526
2525
  align-self: flex-start;
@@ -2552,13 +2551,12 @@ legend .d-label {
2552
2551
  .d-radio:focus,
2553
2552
  .d-checkbox:checked:focus,
2554
2553
  .d-radio:checked:focus {
2555
- --check-radio-color-border: var(--check-radio-color);
2556
2554
  outline: 0;
2557
2555
  box-shadow: var(--dt-shadow-focus);
2558
2556
  }
2559
2557
  .d-checkbox:checked,
2560
2558
  .d-radio:checked {
2561
- --check-radio-color-border: var(--check-radio-color);
2559
+ --check-radio-color-border: var(--check-radio-color-border-checked);
2562
2560
  }
2563
2561
  }
2564
2562
  .d-checkbox[disabled],
@@ -2602,7 +2600,7 @@ legend .d-label {
2602
2600
  display: inline-flex;
2603
2601
  flex: 1 auto;
2604
2602
  flex-direction: column;
2605
- color: var(--dt-color-black-800);
2603
+ color: var(--dt-color-foreground-primary);
2606
2604
  font-weight: var(--dt-font-weight-normal);
2607
2605
  font-size: var(--dt-font-size-200);
2608
2606
  line-height: var(--dt-font-line-height-400);
@@ -2620,7 +2618,7 @@ legend .d-label {
2620
2618
  box-shadow: var(--dt-shadow-focus);
2621
2619
  }
2622
2620
  .d-checkbox:checked {
2623
- --check-radio-color-background: var(--check-radio-color);
2621
+ --check-radio-color-background: var(--check-radio-color-background-checked);
2624
2622
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff'/%3E%3C/svg%3E");
2625
2623
  }
2626
2624
  .d-checkbox:checked[disabled] {
@@ -2634,8 +2632,8 @@ legend .d-label {
2634
2632
  }
2635
2633
  .d-checkbox--indeterminate,
2636
2634
  .d-checkbox:indeterminate {
2637
- --check-radio-color-background: var(--check-radio-color);
2638
- --check-radio-color-border: var(--check-radio-color);
2635
+ --check-radio-color-background: var(--check-radio-color-background-checked);
2636
+ --check-radio-color-border: var(--check-radio-color-border-checked);
2639
2637
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5v-2h14v2z' fill='%23fff'/%3E%3C/svg%3E");
2640
2638
  }
2641
2639
  .d-checkbox--indeterminate[disabled],
@@ -2672,15 +2670,15 @@ legend .d-label {
2672
2670
  box-shadow: var(--dt-shadow-focus), inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
2673
2671
  }
2674
2672
  .d-radio:checked {
2675
- --check-radio-color-background: var(--check-radio-color);
2673
+ --check-radio-color-background: var(--check-radio-color-background-checked);
2676
2674
  box-shadow: inset 0 0 0 var(--dt-size-200) var(--dt-color-neutral-white);
2677
2675
  }
2678
2676
  .d-radio:checked[disabled] {
2679
- --check-radio-color-background: var(--dt-color-black-400);
2677
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
2680
2678
  }
2681
2679
  .d-radio--disabled:checked {
2682
2680
  --check-radio-color-border: var(--check-radio-color-border-disabled);
2683
- --check-radio-color-background: var(--dt-color-black-400);
2681
+ --check-radio-color-background: var(--check-radio-color-background-disabled);
2684
2682
  }
2685
2683
  }
2686
2684
  .d-select {
@@ -6811,20 +6809,6 @@ body {
6811
6809
  --lh20: calc(1em + 20px);
6812
6810
  --lh24: calc(1em + 24px);
6813
6811
  --ls-content: '\1F44D';
6814
- --zi-hide: -1;
6815
- --zi-base: 0;
6816
- --zi-base1: 1;
6817
- --zi-selected: 25;
6818
- --zi-active: 50;
6819
- --zi-navigation: 100;
6820
- --zi-navigation-fixed: 150;
6821
- --zi-dropdown: 200;
6822
- --zi-popover: 300;
6823
- --zi-tooltip: 400;
6824
- --zi-drawer: 500;
6825
- --zi-modal: 600;
6826
- --zi-modal-element: 650;
6827
- --zi-notification: 700;
6828
6812
  --primary-color-h: var(--dt-color-purple-400-h);
6829
6813
  --primary-color-s: var(--dt-color-purple-400-s);
6830
6814
  --primary-color-l: var(--dt-color-purple-400-l);
@@ -14268,6 +14252,20 @@ body {
14268
14252
  --dt-font-size-300-tv: 4.1rem;
14269
14253
  --dt-font-size-400-tv: 5.8rem;
14270
14254
  --dt-font-size-500-tv: 8.2rem;
14255
+ --zi-hide: -1;
14256
+ --zi-base: 0;
14257
+ --zi-base1: 1;
14258
+ --zi-selected: 25;
14259
+ --zi-active: 50;
14260
+ --zi-navigation: 100;
14261
+ --zi-navigation-fixed: 150;
14262
+ --zi-dropdown: 200;
14263
+ --zi-popover: 300;
14264
+ --zi-tooltip: 400;
14265
+ --zi-drawer: 500;
14266
+ --zi-modal: 600;
14267
+ --zi-modal-element: 650;
14268
+ --zi-zi-notification: 700;
14271
14269
  --dt-shadow-small: var(--dt-shadow-small-0-x) var(--dt-shadow-small-0-y) var(--dt-shadow-small-0-blur) var(--dt-shadow-small-0-spread) var(--dt-shadow-small-0-color);
14272
14270
  --dt-shadow-medium: var(--dt-shadow-medium-0-x) var(--dt-shadow-medium-0-y) var(--dt-shadow-medium-0-blur) var(--dt-shadow-medium-0-spread) var(--dt-shadow-medium-0-color);
14273
14271
  --dt-shadow-large: var(--dt-shadow-large-0-x) var(--dt-shadow-large-0-y) var(--dt-shadow-large-0-blur) var(--dt-shadow-large-0-spread) var(--dt-shadow-large-0-color);
@@ -14539,6 +14537,7 @@ body {
14539
14537
  --dt-color-neutral-black-l: 0%;
14540
14538
  --dt-color-neutral-black-hsl: var(--dt-color-neutral-black-h) var(--dt-color-neutral-black-s) var(--dt-color-neutral-black-l);
14541
14539
  --dt-color-neutral-black-hsla: hsla(var(--dt-color-neutral-black-h) var(--dt-color-neutral-black-s) var(--dt-color-neutral-black-l) / var(--alpha, 100%));
14540
+ color-scheme: dark;
14542
14541
  }
14543
14542
 
14544
14543
  .dialtone-theme-light {
@@ -14777,6 +14776,7 @@ body {
14777
14776
  --dt-color-tan-500-l: 7.0588235294117645%;
14778
14777
  --dt-color-tan-500-hsl: var(--dt-color-tan-500-h) var(--dt-color-tan-500-s) var(--dt-color-tan-500-l);
14779
14778
  --dt-color-tan-500-hsla: hsla(var(--dt-color-tan-500-h) var(--dt-color-tan-500-s) var(--dt-color-tan-500-l) / var(--alpha, 100%));
14779
+ color-scheme: light;
14780
14780
  }
14781
14781
 
14782
14782
  @media (max-width: 480px) {