@dialpad/dialtone 8.1.1-version8.1 → 8.2.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 (4) hide show
  1. package/lib/build/less/components/button.less +56 -56
  2. package/lib/dist/css/dialtone.css +69 -68
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +1 -1
package/lib/build/less/components/button.less CHANGED
@@ -20,8 +20,8 @@
20
20
  .d-btn--md {
21
21
  // Component specific CSS Vars
22
22
  // ------------------------------------------------------------------------
23
- --button-color-text: var(--dt-color-purple-400);
24
- --button-color-background: transparent;
23
+ --button-color-text: var(--dt-action-color-foreground-base-default);
24
+ --button-color-background: var(--dt-action-color-background-base-default);
25
25
  --button-color-border: transparent;
26
26
  --button-gap: calc(var(--button-padding-x) / 2);
27
27
  --button-border-radius: var(--dt-size-400);
@@ -78,18 +78,17 @@
78
78
  // -- STATES
79
79
  // ------------------------------------------------------------------------
80
80
  &:hover:not([disabled]) {
81
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
82
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) ~' / ' 4%);
81
+ --button-color-text: var(--dt-action-color-foreground-base-hover);
82
+ --button-color-background: var(--dt-action-color-background-base-hover);
83
83
  }
84
84
 
85
85
  &:active:not([disabled]),
86
86
  &.d-btn--active:not([disabled]),
87
87
  &.d-btn--active:active:not([disabled]) {
88
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
89
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) ~' / ' 14%);
88
+ --button-color-text: var(--dt-action-color-foreground-base-active);
89
+ --button-color-background: var(--dt-action-color-background-base-active);
90
90
  }
91
91
 
92
-
93
92
  &:focus-visible {
94
93
  outline: none;
95
94
  box-shadow: var(--dt-shadow-focus);
@@ -97,8 +96,8 @@
97
96
 
98
97
  &[disabled] {
99
98
  --button-color-border: transparent !important;
100
- --button-color-text: var(--dt-color-foreground-disabled) !important;
101
- --button-color-background: var(--dt-color-black-300) !important;
99
+ --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
100
+ --button-color-background: var(--dt-action-color-background-disabled-default) !important;
102
101
 
103
102
  cursor: not-allowed;
104
103
  transition: none;
@@ -234,19 +233,19 @@
234
233
  .d-btn--circle {
235
234
  --button-padding-x: var(--button-padding-y-md);
236
235
  --button-padding-y: var(--button-padding-y-md);
237
- --button-color-text: var(--dt-color-black-800);
236
+ --button-color-text: var(--dt-action-color-foreground-muted-default);
238
237
  --button-border-radius: var(--dt-size-radius-circle);
239
238
 
240
239
  &:hover:not([disabled]) {
241
- --button-color-text: var(--muted-color-hover);
242
- --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 3%);
240
+ --button-color-text: var(--dt-action-color-foreground-muted-hover);
241
+ --button-color-background: var(--dt-action-color-background-muted-hover);
243
242
  }
244
243
 
245
244
  &:active:not([disabled]),
246
245
  &.d-btn--active:not([disabled]),
247
246
  &.d-btn--active:active:not([disabled]) {
248
- --button-color-text: var(--dt-color-foreground-secondary);
249
- --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 9%);
247
+ --button-color-text: var(--dt-action-color-foreground-muted-active);
248
+ --button-color-background: var(--dt-action-color-background-muted-active);
250
249
  }
251
250
 
252
251
  .d-btn__icon {
@@ -258,10 +257,10 @@
258
257
  }
259
258
 
260
259
  &.d-btn--outlined {
261
- --button-color-border: var(--dt-color-black-600);
260
+ --button-color-border: var(--dt-action-color-border-muted-outlined-default);
262
261
  }
263
262
 
264
- // Adjust padding based on sizes
263
+ // Adjust padding based on sizes
265
264
  &.d-btn--xs {
266
265
  --button-padding-y: var(--button-padding-y-xs);
267
266
  --button-padding-x: var(--button-padding-y-xs);
@@ -291,85 +290,86 @@
291
290
  // $$ OUTLINED BUTTON
292
291
  // ----------------------------------------------------------------------------
293
292
  .d-btn--outlined {
294
- --button-color-border: var(--dt-color-purple-400);
293
+ --button-color-border: var(--dt-action-color-border-base-outlined-default);
295
294
  }
296
295
 
297
296
  // $$ PRIMARY BUTTON
298
297
  // ----------------------------------------------------------------------------
299
298
  .d-btn--primary {
300
- --button-color-text: var(--dt-color-neutral-white);
301
- --button-color-background: var(--dt-color-purple-400);
299
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
300
+ --button-color-background: var(--dt-action-color-background-base-primary-default);
302
301
 
303
302
  &:hover:not([disabled]) {
304
- --button-color-text: var(--dt-color-neutral-white);
305
- --button-color-background: hsl(var(--dt-color-purple-400-h), var(--dt-color-purple-400-s), calc(var(--dt-color-purple-400-l) - 6%));
303
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
304
+ --button-color-background: var(--dt-action-color-background-base-primary-hover);
306
305
  }
307
306
 
308
307
  &:active:not([disabled]),
309
308
  &.d-btn--active:not([disabled]),
310
309
  &.d-btn--active:active:not([disabled]) {
311
- --button-color-text: var(--dt-color-neutral-white);
312
- --button-color-background: hsl(var(--dt-color-purple-400-h), var(--dt-color-purple-400-s), calc(var(--dt-color-purple-400-l) - 12%));
310
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
311
+ --button-color-background: var(--dt-action-color-background-base-primary-active);
313
312
  }
314
313
  }
315
314
 
316
315
  // $$ MUTED BUTTON
317
316
  // ----------------------------------------------------------------------------
318
317
  .d-btn--muted {
319
- --button-color-text: var(--dt-color-foreground-secondary);
318
+ --button-color-text: var(--dt-action-color-foreground-muted-default);
320
319
 
321
320
  &:hover:not([disabled]) {
322
- --button-color-text: var(--dt-color-foreground-secondary);
323
- --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 5%);
321
+ --button-color-text: var(--dt-action-color-foreground-muted-hover);
322
+ --button-color-background: var(--dt-action-color-background-muted-hover);
324
323
  }
325
324
 
326
325
  &:active:not([disabled]),
327
326
  &.d-btn--active:not([disabled]),
328
327
  &.d-btn--active:active:not([disabled]) {
329
- --button-color-text: var(--dt-color-foreground-secondary);
330
- --button-color-background: hsla(var(--dt-color-black-800-hsl) ~' / ' 10%);
328
+ --button-color-text: var(--dt-action-color-foreground-muted-active);
329
+ --button-color-background: var(--dt-action-color-background-muted-active);
331
330
  }
332
331
 
333
332
  &.d-btn--outlined {
334
- --button-color-border: var(--dt-color-black-600);
333
+ --button-color-border: var(--dt-action-color-border-muted-outlined-default);
335
334
  }
336
335
  }
337
336
 
338
337
  // $$ DANGER BUTTON
339
338
  // ----------------------------------------------------------------------------
340
339
  .d-btn--danger {
341
- --button-color-text: var(--dt-color-red-300);
340
+ --button-color-text: var(--dt-action-color-foreground-critical-default);
341
+ --button-color-background: var(--dt-action-color-background-critical-default);
342
342
 
343
343
  &:hover:not([disabled]) {
344
- --button-color-text: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
345
- --button-color-background: hsla(var(--dt-color-red-300-hsl) / 0.03);
344
+ --button-color-text: var(--dt-action-color-foreground-critical-hover);
345
+ --button-color-background: var(--dt-action-color-background-critical-hover);
346
346
  }
347
347
 
348
348
  &:active:not([disabled]),
349
349
  &.d-btn--active:not([disabled]),
350
350
  &.d-btn--active:active:not([disabled]) {
351
- --button-color-text: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
352
- --button-color-background: hsla(var(--dt-color-red-300-hsl) / 0.09);
351
+ --button-color-text: var(--dt-action-color-foreground-critical-active);
352
+ --button-color-background: var(--dt-action-color-background-critical-active);
353
353
  }
354
354
 
355
355
  &.d-btn--outlined {
356
- --button-color-border: var(--dt-color-red-300);
356
+ --button-color-border: var(--dt-action-color-border-critical-outlined-default);
357
357
  }
358
358
 
359
359
  &.d-btn--primary {
360
- --button-color-text: var(--dt-color-neutral-white);
361
- --button-color-background: var(--dt-color-red-300);
360
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
361
+ --button-color-background: var(--dt-action-color-background-critical-primary-default);
362
362
 
363
363
  &:hover:not([disabled]) {
364
- --button-color-text: var(--dt-color-neutral-white);
365
- --button-color-background: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 4%));
364
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
365
+ --button-color-background: var(--dt-action-color-background-critical-primary-hover);
366
366
  }
367
367
 
368
368
  &:active:not([disabled]),
369
369
  &.d-btn--active:not([disabled]),
370
370
  &.d-btn--active:active:not([disabled]) {
371
- --button-color-text: var(--dt-color-neutral-white);
372
- --button-color-background: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
371
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
372
+ --button-color-background: var(--dt-action-color-background-critical-primary-active);
373
373
  }
374
374
  }
375
375
  }
@@ -378,41 +378,41 @@
378
378
  // ----------------------------------------------------------------------------
379
379
  // -- Base, clear inverted button
380
380
  .d-btn--inverted {
381
- --button-color-text: var(--dt-color-foreground-primary-inverted);
382
- --button-color-background: transparent;
381
+ --button-color-text: var(--dt-action-color-foreground-inverted-default);
382
+ --button-color-background: var(--dt-action-color-background-inverted-default);
383
383
 
384
384
  &:hover:not([disabled]) {
385
- --button-color-text: var(--dt-color-foreground-primary-inverted);
386
- --button-color-background: hsla(var(--dt-color-neutral-white-hsl) ~' / ' 15%);
385
+ --button-color-text: var(--dt-action-color-foreground-inverted-hover);
386
+ --button-color-background: var(--dt-action-color-background-inverted-hover);
387
387
  }
388
388
 
389
389
  &:active:not([disabled]),
390
390
  &.d-btn--active:not([disabled]),
391
391
  &.d-btn--active:active:not([disabled]) {
392
- --button-color-text: var(--dt-color-foreground-primary-inverted);
393
- --button-color-background: hsla(var(--dt-color-neutral-white-hsl) ~' / ' 30%);
392
+ --button-color-text: var(--dt-action-color-foreground-inverted-active);
393
+ --button-color-background: var(--dt-action-color-background-inverted-active);
394
394
  }
395
395
 
396
396
  // -- OUTLINED
397
397
  &.d-btn--outlined {
398
- --button-color-border: var(--dt-color-border-bold-inverted);
398
+ --button-color-border: var(--dt-action-color-border-inverted-outlined-default);
399
399
  }
400
400
 
401
401
  // -- PRIMARY
402
402
  &.d-btn--primary {
403
- --button-color-text: var(--dt-color-purple-400);
404
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 100%);
403
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-default);
404
+ --button-color-background: var(--dt-action-color-background-inverted-primary-default);
405
405
 
406
406
  &:hover:not([disabled]) {
407
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
408
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 94%);
407
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-hover);
408
+ --button-color-background: var(--dt-action-color-background-inverted-primary-hover);
409
409
  }
410
410
 
411
411
  &:active:not([disabled]),
412
412
  &.d-btn--active:not([disabled]),
413
413
  &.d-btn--active:active:not([disabled]) {
414
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
415
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 91%);
414
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-active);
415
+ --button-color-background: var(--dt-action-color-background-inverted-primary-active);
416
416
  }
417
417
  }
418
418
  }
@@ -463,8 +463,8 @@
463
463
  // $$ DISABLED STATE
464
464
  // ----------------------------------------------------------------------------
465
465
  .d-btn--disabled {
466
- --button-color-text: var(--dt-color-foreground-disabled) !important;
467
- --button-color-background: var(--dt-color-black-300) !important;
466
+ --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
467
+ --button-color-background: var(--dt-action-color-background-disabled-default) !important;
468
468
  --button-color-border: transparent !important;
469
469
 
470
470
  cursor: not-allowed;
package/lib/dist/css/dialtone.css CHANGED
@@ -752,8 +752,8 @@ template {
752
752
  }
753
753
  .d-btn,
754
754
  .d-btn--md {
755
- --button-color-text: var(--dt-color-purple-400);
756
- --button-color-background: transparent;
755
+ --button-color-text: var(--dt-action-color-foreground-base-default);
756
+ --button-color-background: var(--dt-action-color-background-base-default);
757
757
  --button-color-border: transparent;
758
758
  --button-gap: calc(var(--button-padding-x) / 2);
759
759
  --button-border-radius: var(--dt-size-400);
@@ -808,8 +808,8 @@ template {
808
808
  }
809
809
  .d-btn:hover:not([disabled]),
810
810
  .d-btn--md:hover:not([disabled]) {
811
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
812
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) / 4%);
811
+ --button-color-text: var(--dt-action-color-foreground-base-hover);
812
+ --button-color-background: var(--dt-action-color-background-base-hover);
813
813
  }
814
814
  .d-btn:active:not([disabled]),
815
815
  .d-btn--md:active:not([disabled]),
@@ -817,8 +817,8 @@ template {
817
817
  .d-btn--md.d-btn--active:not([disabled]),
818
818
  .d-btn.d-btn--active:active:not([disabled]),
819
819
  .d-btn--md.d-btn--active:active:not([disabled]) {
820
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
821
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) / 14%);
820
+ --button-color-text: var(--dt-action-color-foreground-base-active);
821
+ --button-color-background: var(--dt-action-color-background-base-active);
822
822
  }
823
823
  .d-btn:focus-visible,
824
824
  .d-btn--md:focus-visible {
@@ -828,8 +828,8 @@ template {
828
828
  .d-btn[disabled],
829
829
  .d-btn--md[disabled] {
830
830
  --button-color-border: transparent !important;
831
- --button-color-text: var(--dt-color-foreground-disabled) !important;
832
- --button-color-background: var(--dt-color-black-300) !important;
831
+ --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
832
+ --button-color-background: var(--dt-action-color-background-disabled-default) !important;
833
833
  cursor: not-allowed;
834
834
  transition: none;
835
835
  }
@@ -911,18 +911,18 @@ template {
911
911
  .d-btn--circle {
912
912
  --button-padding-x: var(--button-padding-y-md);
913
913
  --button-padding-y: var(--button-padding-y-md);
914
- --button-color-text: var(--dt-color-black-800);
914
+ --button-color-text: var(--dt-action-color-foreground-muted-default);
915
915
  --button-border-radius: var(--dt-size-radius-circle);
916
916
  }
917
917
  .d-btn--circle:hover:not([disabled]) {
918
- --button-color-text: var(--muted-color-hover);
919
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 3%);
918
+ --button-color-text: var(--dt-action-color-foreground-muted-hover);
919
+ --button-color-background: var(--dt-action-color-background-muted-hover);
920
920
  }
921
921
  .d-btn--circle:active:not([disabled]),
922
922
  .d-btn--circle.d-btn--active:not([disabled]),
923
923
  .d-btn--circle.d-btn--active:active:not([disabled]) {
924
- --button-color-text: var(--dt-color-foreground-secondary);
925
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 9%);
924
+ --button-color-text: var(--dt-action-color-foreground-muted-active);
925
+ --button-color-background: var(--dt-action-color-background-muted-active);
926
926
  }
927
927
  .d-btn--circle .d-btn__icon {
928
928
  margin: unset;
@@ -931,7 +931,7 @@ template {
931
931
  display: none;
932
932
  }
933
933
  .d-btn--circle.d-btn--outlined {
934
- --button-color-border: var(--dt-color-black-600);
934
+ --button-color-border: var(--dt-action-color-border-muted-outlined-default);
935
935
  }
936
936
  .d-btn--circle.d-btn--xs {
937
937
  --button-padding-y: var(--button-padding-y-xs);
@@ -954,98 +954,99 @@ template {
954
954
  --button-padding-y: calc(var(--button-padding-y-xl) + var(--dt-space-300));
955
955
  }
956
956
  .d-btn--outlined {
957
- --button-color-border: var(--dt-color-purple-400);
957
+ --button-color-border: var(--dt-action-color-border-base-outlined-default);
958
958
  }
959
959
  .d-btn--primary {
960
- --button-color-text: var(--dt-color-neutral-white);
961
- --button-color-background: var(--dt-color-purple-400);
960
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
961
+ --button-color-background: var(--dt-action-color-background-base-primary-default);
962
962
  }
963
963
  .d-btn--primary:hover:not([disabled]) {
964
- --button-color-text: var(--dt-color-neutral-white);
965
- --button-color-background: hsl(var(--dt-color-purple-400-h), var(--dt-color-purple-400-s), calc(var(--dt-color-purple-400-l) - 6%));
964
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
965
+ --button-color-background: var(--dt-action-color-background-base-primary-hover);
966
966
  }
967
967
  .d-btn--primary:active:not([disabled]),
968
968
  .d-btn--primary.d-btn--active:not([disabled]),
969
969
  .d-btn--primary.d-btn--active:active:not([disabled]) {
970
- --button-color-text: var(--dt-color-neutral-white);
971
- --button-color-background: hsl(var(--dt-color-purple-400-h), var(--dt-color-purple-400-s), calc(var(--dt-color-purple-400-l) - 12%));
970
+ --button-color-text: var(--dt-action-color-foreground-base-primary-default);
971
+ --button-color-background: var(--dt-action-color-background-base-primary-active);
972
972
  }
973
973
  .d-btn--muted {
974
- --button-color-text: var(--dt-color-foreground-secondary);
974
+ --button-color-text: var(--dt-action-color-foreground-muted-default);
975
975
  }
976
976
  .d-btn--muted:hover:not([disabled]) {
977
- --button-color-text: var(--dt-color-foreground-secondary);
978
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 5%);
977
+ --button-color-text: var(--dt-action-color-foreground-muted-hover);
978
+ --button-color-background: var(--dt-action-color-background-muted-hover);
979
979
  }
980
980
  .d-btn--muted:active:not([disabled]),
981
981
  .d-btn--muted.d-btn--active:not([disabled]),
982
982
  .d-btn--muted.d-btn--active:active:not([disabled]) {
983
- --button-color-text: var(--dt-color-foreground-secondary);
984
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 10%);
983
+ --button-color-text: var(--dt-action-color-foreground-muted-active);
984
+ --button-color-background: var(--dt-action-color-background-muted-active);
985
985
  }
986
986
  .d-btn--muted.d-btn--outlined {
987
- --button-color-border: var(--dt-color-black-600);
987
+ --button-color-border: var(--dt-action-color-border-muted-outlined-default);
988
988
  }
989
989
  .d-btn--danger {
990
- --button-color-text: var(--dt-color-red-300);
990
+ --button-color-text: var(--dt-action-color-foreground-critical-default);
991
+ --button-color-background: var(--dt-action-color-background-critical-default);
991
992
  }
992
993
  .d-btn--danger:hover:not([disabled]) {
993
- --button-color-text: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
994
- --button-color-background: hsla(var(--dt-color-red-300-hsl) / 0.03);
994
+ --button-color-text: var(--dt-action-color-foreground-critical-hover);
995
+ --button-color-background: var(--dt-action-color-background-critical-hover);
995
996
  }
996
997
  .d-btn--danger:active:not([disabled]),
997
998
  .d-btn--danger.d-btn--active:not([disabled]),
998
999
  .d-btn--danger.d-btn--active:active:not([disabled]) {
999
- --button-color-text: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
1000
- --button-color-background: hsla(var(--dt-color-red-300-hsl) / 0.09);
1000
+ --button-color-text: var(--dt-action-color-foreground-critical-active);
1001
+ --button-color-background: var(--dt-action-color-background-critical-active);
1001
1002
  }
1002
1003
  .d-btn--danger.d-btn--outlined {
1003
- --button-color-border: var(--dt-color-red-300);
1004
+ --button-color-border: var(--dt-action-color-border-critical-outlined-default);
1004
1005
  }
1005
1006
  .d-btn--danger.d-btn--primary {
1006
- --button-color-text: var(--dt-color-neutral-white);
1007
- --button-color-background: var(--dt-color-red-300);
1007
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1008
+ --button-color-background: var(--dt-action-color-background-critical-primary-default);
1008
1009
  }
1009
1010
  .d-btn--danger.d-btn--primary:hover:not([disabled]) {
1010
- --button-color-text: var(--dt-color-neutral-white);
1011
- --button-color-background: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 4%));
1011
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1012
+ --button-color-background: var(--dt-action-color-background-critical-primary-hover);
1012
1013
  }
1013
1014
  .d-btn--danger.d-btn--primary:active:not([disabled]),
1014
1015
  .d-btn--danger.d-btn--primary.d-btn--active:not([disabled]),
1015
1016
  .d-btn--danger.d-btn--primary.d-btn--active:active:not([disabled]) {
1016
- --button-color-text: var(--dt-color-neutral-white);
1017
- --button-color-background: hsl(var(--dt-color-red-300-h), var(--dt-color-red-300-s), calc(var(--dt-color-red-300-l) - 8%));
1017
+ --button-color-text: var(--dt-action-color-foreground-critical-primary-default);
1018
+ --button-color-background: var(--dt-action-color-background-critical-primary-active);
1018
1019
  }
1019
1020
  .d-btn--inverted {
1020
- --button-color-text: var(--dt-color-foreground-primary-inverted);
1021
- --button-color-background: transparent;
1021
+ --button-color-text: var(--dt-action-color-foreground-inverted-default);
1022
+ --button-color-background: var(--dt-action-color-background-inverted-default);
1022
1023
  }
1023
1024
  .d-btn--inverted:hover:not([disabled]) {
1024
- --button-color-text: var(--dt-color-foreground-primary-inverted);
1025
- --button-color-background: hsla(var(--dt-color-neutral-white-hsl) / 15%);
1025
+ --button-color-text: var(--dt-action-color-foreground-inverted-hover);
1026
+ --button-color-background: var(--dt-action-color-background-inverted-hover);
1026
1027
  }
1027
1028
  .d-btn--inverted:active:not([disabled]),
1028
1029
  .d-btn--inverted.d-btn--active:not([disabled]),
1029
1030
  .d-btn--inverted.d-btn--active:active:not([disabled]) {
1030
- --button-color-text: var(--dt-color-foreground-primary-inverted);
1031
- --button-color-background: hsla(var(--dt-color-neutral-white-hsl) / 30%);
1031
+ --button-color-text: var(--dt-action-color-foreground-inverted-active);
1032
+ --button-color-background: var(--dt-action-color-background-inverted-active);
1032
1033
  }
1033
1034
  .d-btn--inverted.d-btn--outlined {
1034
- --button-color-border: var(--dt-color-border-bold-inverted);
1035
+ --button-color-border: var(--dt-action-color-border-inverted-outlined-default);
1035
1036
  }
1036
1037
  .d-btn--inverted.d-btn--primary {
1037
- --button-color-text: var(--dt-color-purple-400);
1038
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 100%);
1038
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-default);
1039
+ --button-color-background: var(--dt-action-color-background-inverted-primary-default);
1039
1040
  }
1040
1041
  .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
1041
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
1042
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 94%);
1042
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-hover);
1043
+ --button-color-background: var(--dt-action-color-background-inverted-primary-hover);
1043
1044
  }
1044
1045
  .d-btn--inverted.d-btn--primary:active:not([disabled]),
1045
1046
  .d-btn--inverted.d-btn--primary.d-btn--active:not([disabled]),
1046
1047
  .d-btn--inverted.d-btn--primary.d-btn--active:active:not([disabled]) {
1047
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
1048
- --button-color-background: hsl(var(--dt-color-purple-100-h), var(--dt-color-purple-100-s), 91%);
1048
+ --button-color-text: var(--dt-action-color-foreground-inverted-primary-active);
1049
+ --button-color-background: var(--dt-action-color-background-inverted-primary-active);
1049
1050
  }
1050
1051
  .d-btn--icon-only {
1051
1052
  --button-padding-x: var(--button-padding-y-md);
@@ -1093,8 +1094,8 @@ template {
1093
1094
  content: '';
1094
1095
  }
1095
1096
  .d-btn--disabled {
1096
- --button-color-text: var(--dt-color-foreground-disabled) !important;
1097
- --button-color-background: var(--dt-color-black-300) !important;
1097
+ --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
1098
+ --button-color-background: var(--dt-action-color-background-disabled-default) !important;
1098
1099
  --button-color-border: transparent !important;
1099
1100
  cursor: not-allowed;
1100
1101
  transition: none;
@@ -1247,8 +1248,8 @@ template {
1247
1248
  height: var(--dt-icon-size-300);
1248
1249
  }
1249
1250
  .d-chip__close {
1250
- --button-color-text: var(--dt-color-purple-400);
1251
- --button-color-background: transparent;
1251
+ --button-color-text: var(--dt-action-color-foreground-base-default);
1252
+ --button-color-background: var(--dt-action-color-background-base-default);
1252
1253
  --button-color-border: transparent;
1253
1254
  --button-gap: calc(var(--button-padding-x) / 2);
1254
1255
  --button-border-radius: var(--dt-size-400);
@@ -1301,7 +1302,7 @@ template {
1301
1302
  fill: currentColor;
1302
1303
  --button-padding-x: var(--button-padding-y-md);
1303
1304
  --button-padding-y: var(--button-padding-y-md);
1304
- --button-color-text: var(--dt-color-black-800);
1305
+ --button-color-text: var(--dt-action-color-foreground-muted-default);
1305
1306
  --button-border-radius: var(--dt-size-radius-circle);
1306
1307
  position: absolute;
1307
1308
  right: var(--dt-space-200);
@@ -1309,14 +1310,14 @@ template {
1309
1310
  border-width: 0;
1310
1311
  }
1311
1312
  .d-chip__close:hover:not([disabled]) {
1312
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
1313
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) / 4%);
1313
+ --button-color-text: var(--dt-action-color-foreground-base-hover);
1314
+ --button-color-background: var(--dt-action-color-background-base-hover);
1314
1315
  }
1315
1316
  .d-chip__close:active:not([disabled]),
1316
1317
  .d-chip__close.d-btn--active:not([disabled]),
1317
1318
  .d-chip__close.d-btn--active:active:not([disabled]) {
1318
- --button-color-text: hsl(var(--dt-color-purple-400-h) var(--dt-color-purple-400-s) calc(var(--dt-color-purple-400-l) - 10%));
1319
- --button-color-background: hsla(var(--dt-color-purple-400-hsl) / 14%);
1319
+ --button-color-text: var(--dt-action-color-foreground-base-active);
1320
+ --button-color-background: var(--dt-action-color-background-base-active);
1320
1321
  }
1321
1322
  .d-chip__close:focus-visible {
1322
1323
  outline: none;
@@ -1324,8 +1325,8 @@ template {
1324
1325
  }
1325
1326
  .d-chip__close[disabled] {
1326
1327
  --button-color-border: transparent !important;
1327
- --button-color-text: var(--dt-color-foreground-disabled) !important;
1328
- --button-color-background: var(--dt-color-black-300) !important;
1328
+ --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
1329
+ --button-color-background: var(--dt-action-color-background-disabled-default) !important;
1329
1330
  cursor: not-allowed;
1330
1331
  transition: none;
1331
1332
  }
@@ -1334,14 +1335,14 @@ template {
1334
1335
  height: var(--dt-size-500);
1335
1336
  }
1336
1337
  .d-chip__close:hover:not([disabled]) {
1337
- --button-color-text: var(--muted-color-hover);
1338
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 3%);
1338
+ --button-color-text: var(--dt-action-color-foreground-muted-hover);
1339
+ --button-color-background: var(--dt-action-color-background-muted-hover);
1339
1340
  }
1340
1341
  .d-chip__close:active:not([disabled]),
1341
1342
  .d-chip__close.d-btn--active:not([disabled]),
1342
1343
  .d-chip__close.d-btn--active:active:not([disabled]) {
1343
- --button-color-text: var(--dt-color-foreground-secondary);
1344
- --button-color-background: hsla(var(--dt-color-black-800-hsl) / 9%);
1344
+ --button-color-text: var(--dt-action-color-foreground-muted-active);
1345
+ --button-color-background: var(--dt-action-color-background-muted-active);
1345
1346
  }
1346
1347
  .d-chip__close .d-btn__icon {
1347
1348
  margin: unset;
@@ -1350,7 +1351,7 @@ template {
1350
1351
  display: none;
1351
1352
  }
1352
1353
  .d-chip__close.d-btn--outlined {
1353
- --button-color-border: var(--dt-color-black-600);
1354
+ --button-color-border: var(--dt-action-color-border-muted-outlined-default);
1354
1355
  }
1355
1356
  .d-chip__close.d-btn--xs {
1356
1357
  --button-padding-y: var(--button-padding-y-xs);