@dialpad/dialtone 9.74.2 → 9.75.0

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 (48) hide show
  1. package/dist/css/dialtone-default-theme.css +9 -9
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/tokens/tokens-base-dark.css +8 -8
  4. package/dist/css/tokens/tokens-base-light.css +8 -8
  5. package/dist/css/tokens/tokens-dp-dark.css +1 -1
  6. package/dist/css/tokens/tokens-dp-light.css +1 -1
  7. package/dist/css/tokens/tokens-expressive-dark.css +1 -1
  8. package/dist/css/tokens/tokens-expressive-light.css +1 -1
  9. package/dist/css/tokens/tokens-expressive-sm-dark.css +1 -1
  10. package/dist/css/tokens/tokens-expressive-sm-light.css +1 -1
  11. package/dist/css/tokens/tokens-tmo-dark.css +1 -1
  12. package/dist/css/tokens/tokens-tmo-light.css +1 -1
  13. package/dist/tokens/css/tokens-base-dark.css +8 -8
  14. package/dist/tokens/css/tokens-base-light.css +8 -8
  15. package/dist/tokens/css/tokens-dp-dark.css +1 -1
  16. package/dist/tokens/css/tokens-dp-light.css +1 -1
  17. package/dist/tokens/css/tokens-expressive-dark.css +1 -1
  18. package/dist/tokens/css/tokens-expressive-light.css +1 -1
  19. package/dist/tokens/css/tokens-expressive-sm-dark.css +1 -1
  20. package/dist/tokens/css/tokens-expressive-sm-light.css +1 -1
  21. package/dist/tokens/css/tokens-tmo-dark.css +1 -1
  22. package/dist/tokens/css/tokens-tmo-light.css +1 -1
  23. package/dist/tokens/doc.json +6594 -6594
  24. package/dist/tokens/themes/chunks/tokens-base-dark-BspLyPe6.js +1 -0
  25. package/dist/tokens/themes/chunks/tokens-base-dark-D9QWQ06G.js +4 -0
  26. package/dist/tokens/themes/chunks/tokens-base-light-B2jKQq80.js +4 -0
  27. package/dist/tokens/themes/chunks/tokens-base-light-CCF-uj56.js +1 -0
  28. package/dist/tokens/themes/dp-dark.cjs +1 -1
  29. package/dist/tokens/themes/dp-dark.js +2 -2
  30. package/dist/tokens/themes/dp-light.cjs +1 -1
  31. package/dist/tokens/themes/dp-light.js +2 -2
  32. package/dist/tokens/themes/expressive-dark.cjs +1 -1
  33. package/dist/tokens/themes/expressive-dark.js +2 -2
  34. package/dist/tokens/themes/expressive-light.cjs +1 -1
  35. package/dist/tokens/themes/expressive-light.js +2 -2
  36. package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
  37. package/dist/tokens/themes/expressive-sm-dark.js +2 -2
  38. package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
  39. package/dist/tokens/themes/expressive-sm-light.js +2 -2
  40. package/dist/tokens/themes/tmo-dark.cjs +1 -1
  41. package/dist/tokens/themes/tmo-dark.js +2 -2
  42. package/dist/tokens/themes/tmo-light.cjs +1 -1
  43. package/dist/tokens/themes/tmo-light.js +2 -2
  44. package/package.json +2 -2
  45. package/dist/tokens/themes/chunks/tokens-base-dark-D3v4_NMT.js +0 -4
  46. package/dist/tokens/themes/chunks/tokens-base-dark-SlAAMLw5.js +0 -1
  47. package/dist/tokens/themes/chunks/tokens-base-light-BUcyLIIS.js +0 -4
  48. package/dist/tokens/themes/chunks/tokens-base-light-Dx0sRL2j.js +0 -1
package/dist/css/tokens/tokens-base-dark.css CHANGED
@@ -5,13 +5,6 @@
5
5
  :root {
6
6
  color-scheme: dark;
7
7
  --dt-shadow-focus-inset-type: innerShadow;
8
- --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;
9
- --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);
10
- --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), var(--dt-shadow-card-4-offset-x) var(--dt-shadow-card-4-offset-y) var(--dt-shadow-card-4-blur) var(--dt-shadow-card-4-spread) var(--dt-shadow-card-4-color), var(--dt-shadow-card-5-offset-x) var(--dt-shadow-card-5-offset-y) var(--dt-shadow-card-5-blur) var(--dt-shadow-card-5-spread) var(--dt-shadow-card-5-color), var(--dt-shadow-card-6-offset-x) var(--dt-shadow-card-6-offset-y) var(--dt-shadow-card-6-blur) var(--dt-shadow-card-6-spread) var(--dt-shadow-card-6-color), var(--dt-shadow-card-7-offset-x) var(--dt-shadow-card-7-offset-y) var(--dt-shadow-card-7-blur) var(--dt-shadow-card-7-spread) var(--dt-shadow-card-7-color);
11
- --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), var(--dt-shadow-extra-large-5-offset-x) var(--dt-shadow-extra-large-5-offset-y) var(--dt-shadow-extra-large-5-blur) var(--dt-shadow-extra-large-5-spread) var(--dt-shadow-extra-large-5-color);
12
- --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), var(--dt-shadow-large-4-offset-x) var(--dt-shadow-large-4-offset-y) var(--dt-shadow-large-4-blur) var(--dt-shadow-large-4-spread) var(--dt-shadow-large-4-color), var(--dt-shadow-large-5-offset-x) var(--dt-shadow-large-5-offset-y) var(--dt-shadow-large-5-blur) var(--dt-shadow-large-5-spread) var(--dt-shadow-large-5-color);
13
- --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), var(--dt-shadow-medium-4-offset-x) var(--dt-shadow-medium-4-offset-y) var(--dt-shadow-medium-4-blur) var(--dt-shadow-medium-4-spread) var(--dt-shadow-medium-4-color), var(--dt-shadow-medium-5-offset-x) var(--dt-shadow-medium-5-offset-y) var(--dt-shadow-medium-5-blur) var(--dt-shadow-medium-5-spread) var(--dt-shadow-medium-5-color);
14
- --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), var(--dt-shadow-small-4-offset-x) var(--dt-shadow-small-4-offset-y) var(--dt-shadow-small-4-blur) var(--dt-shadow-small-4-spread) var(--dt-shadow-small-4-color), var(--dt-shadow-small-5-offset-x) var(--dt-shadow-small-5-offset-y) var(--dt-shadow-small-5-blur) var(--dt-shadow-small-5-spread) var(--dt-shadow-small-5-color);
15
8
  --dt-shadow-focus-2-type: dropShadow;
16
9
  --dt-shadow-focus-1-type: dropShadow;
17
10
  --dt-shadow-card-7-type: dropShadow;
@@ -643,7 +636,7 @@
643
636
  --dt-shadow-focus-2-color-hsl: var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l);
644
637
  --dt-shadow-focus-2-color-hsla: hsla(var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l) / var(--alpha, 100%));
645
638
  --dt-shadow-focus-2-color: #51A0FE;
646
- --dt-shadow-focus-2-spread: var(--dt-size-200) + var(--dt-size-100);
639
+ --dt-shadow-focus-2-spread: calc(var(--dt-size-200) + var(--dt-size-100));
647
640
  --dt-shadow-focus-2-blur: var(--dt-size-0);
648
641
  --dt-shadow-focus-1-offset-y: var(--dt-size-0);
649
642
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
@@ -895,6 +888,13 @@
895
888
  --dt-shadow-small-1-color: rgba(0, 0, 0, 0.45);
896
889
  --dt-shadow-small-1-spread: var(--dt-size-0);
897
890
  --dt-shadow-small-1-blur: var(--dt-size-300);
891
+ --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;
892
+ --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);
893
+ --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), var(--dt-shadow-card-4-offset-x) var(--dt-shadow-card-4-offset-y) var(--dt-shadow-card-4-blur) var(--dt-shadow-card-4-spread) var(--dt-shadow-card-4-color), var(--dt-shadow-card-5-offset-x) var(--dt-shadow-card-5-offset-y) var(--dt-shadow-card-5-blur) var(--dt-shadow-card-5-spread) var(--dt-shadow-card-5-color), var(--dt-shadow-card-6-offset-x) var(--dt-shadow-card-6-offset-y) var(--dt-shadow-card-6-blur) var(--dt-shadow-card-6-spread) var(--dt-shadow-card-6-color), var(--dt-shadow-card-7-offset-x) var(--dt-shadow-card-7-offset-y) var(--dt-shadow-card-7-blur) var(--dt-shadow-card-7-spread) var(--dt-shadow-card-7-color);
894
+ --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), var(--dt-shadow-extra-large-5-offset-x) var(--dt-shadow-extra-large-5-offset-y) var(--dt-shadow-extra-large-5-blur) var(--dt-shadow-extra-large-5-spread) var(--dt-shadow-extra-large-5-color);
895
+ --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), var(--dt-shadow-large-4-offset-x) var(--dt-shadow-large-4-offset-y) var(--dt-shadow-large-4-blur) var(--dt-shadow-large-4-spread) var(--dt-shadow-large-4-color), var(--dt-shadow-large-5-offset-x) var(--dt-shadow-large-5-offset-y) var(--dt-shadow-large-5-blur) var(--dt-shadow-large-5-spread) var(--dt-shadow-large-5-color);
896
+ --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), var(--dt-shadow-medium-4-offset-x) var(--dt-shadow-medium-4-offset-y) var(--dt-shadow-medium-4-blur) var(--dt-shadow-medium-4-spread) var(--dt-shadow-medium-4-color), var(--dt-shadow-medium-5-offset-x) var(--dt-shadow-medium-5-offset-y) var(--dt-shadow-medium-5-blur) var(--dt-shadow-medium-5-spread) var(--dt-shadow-medium-5-color);
897
+ --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), var(--dt-shadow-small-4-offset-x) var(--dt-shadow-small-4-offset-y) var(--dt-shadow-small-4-blur) var(--dt-shadow-small-4-spread) var(--dt-shadow-small-4-color), var(--dt-shadow-small-5-offset-x) var(--dt-shadow-small-5-offset-y) var(--dt-shadow-small-5-blur) var(--dt-shadow-small-5-spread) var(--dt-shadow-small-5-color);
898
898
  --dt-color-gradient-magenta-purple-h: 0;
899
899
  --dt-color-gradient-magenta-purple-s: 0%;
900
900
  --dt-color-gradient-magenta-purple-l: 0%;
package/dist/css/tokens/tokens-base-light.css CHANGED
@@ -5,13 +5,6 @@
5
5
  :root {
6
6
  color-scheme: light;
7
7
  --dt-shadow-focus-inset-type: innerShadow;
8
- --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;
9
- --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);
10
- --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);
11
- --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);
12
- --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);
13
- --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);
14
- --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);
15
8
  --dt-shadow-focus-2-type: dropShadow;
16
9
  --dt-shadow-focus-1-type: dropShadow;
17
10
  --dt-shadow-card-3-type: dropShadow;
@@ -593,7 +586,7 @@
593
586
  --dt-shadow-focus-2-color-hsl: var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l);
594
587
  --dt-shadow-focus-2-color-hsla: hsla(var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l) / var(--alpha, 100%));
595
588
  --dt-shadow-focus-2-color: #51A0FE;
596
- --dt-shadow-focus-2-spread: var(--dt-size-200) + var(--dt-size-100);
589
+ --dt-shadow-focus-2-spread: calc(var(--dt-size-200) + var(--dt-size-100));
597
590
  --dt-shadow-focus-2-blur: var(--dt-size-0);
598
591
  --dt-shadow-focus-1-offset-y: var(--dt-size-0);
599
592
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
@@ -675,6 +668,13 @@
675
668
  --dt-shadow-small-color: rgba(0, 0, 0, 0.15);
676
669
  --dt-shadow-small-spread: var(--dt-size-0);
677
670
  --dt-shadow-small-blur: var(--dt-size-300);
671
+ --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;
672
+ --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);
673
+ --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);
674
+ --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);
675
+ --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);
676
+ --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);
677
+ --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);
678
678
  --dt-color-gradient-magenta-purple-h: 0;
679
679
  --dt-color-gradient-magenta-purple-s: 0%;
680
680
  --dt-color-gradient-magenta-purple-l: 0%;
package/dist/css/tokens/tokens-dp-dark.css CHANGED
@@ -1122,7 +1122,7 @@
1122
1122
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1123
1123
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1124
1124
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1125
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1125
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1126
1126
  --dt-radio-color-border-checked-h: 0;
1127
1127
  --dt-radio-color-border-checked-s: 0%;
1128
1128
  --dt-radio-color-border-checked-l: 0%;
package/dist/css/tokens/tokens-dp-light.css CHANGED
@@ -1140,7 +1140,7 @@
1140
1140
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1141
1141
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1142
1142
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1143
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1143
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1144
1144
  --dt-radio-color-border-checked-h: 0;
1145
1145
  --dt-radio-color-border-checked-s: 0%;
1146
1146
  --dt-radio-color-border-checked-l: 0%;
package/dist/css/tokens/tokens-expressive-dark.css CHANGED
@@ -1079,7 +1079,7 @@
1079
1079
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1080
1080
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1081
1081
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1082
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1082
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1083
1083
  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1084
1084
  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1085
1085
  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
package/dist/css/tokens/tokens-expressive-light.css CHANGED
@@ -1091,7 +1091,7 @@
1091
1091
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1092
1092
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1093
1093
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1094
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1094
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1095
1095
  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1096
1096
  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1097
1097
  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
package/dist/css/tokens/tokens-expressive-sm-dark.css CHANGED
@@ -1079,7 +1079,7 @@
1079
1079
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1080
1080
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1081
1081
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1082
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1082
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1083
1083
  --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1084
1084
  --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1085
1085
  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
package/dist/css/tokens/tokens-expressive-sm-light.css CHANGED
@@ -1091,7 +1091,7 @@
1091
1091
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1092
1092
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1093
1093
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1094
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1094
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1095
1095
  --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1096
1096
  --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1097
1097
  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
package/dist/css/tokens/tokens-tmo-dark.css CHANGED
@@ -1228,7 +1228,7 @@
1228
1228
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1229
1229
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1230
1230
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1231
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1231
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1232
1232
  --dt-radio-color-border-checked-h: 0;
1233
1233
  --dt-radio-color-border-checked-s: 0%;
1234
1234
  --dt-radio-color-border-checked-l: 0%;
package/dist/css/tokens/tokens-tmo-light.css CHANGED
@@ -1246,7 +1246,7 @@
1246
1246
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1247
1247
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1248
1248
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1249
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1249
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1250
1250
  --dt-radio-color-border-checked-h: 0;
1251
1251
  --dt-radio-color-border-checked-s: 0%;
1252
1252
  --dt-radio-color-border-checked-l: 0%;
package/dist/tokens/css/tokens-base-dark.css CHANGED
@@ -5,13 +5,6 @@
5
5
  :root {
6
6
  color-scheme: dark;
7
7
  --dt-shadow-focus-inset-type: innerShadow;
8
- --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;
9
- --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);
10
- --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), var(--dt-shadow-card-4-offset-x) var(--dt-shadow-card-4-offset-y) var(--dt-shadow-card-4-blur) var(--dt-shadow-card-4-spread) var(--dt-shadow-card-4-color), var(--dt-shadow-card-5-offset-x) var(--dt-shadow-card-5-offset-y) var(--dt-shadow-card-5-blur) var(--dt-shadow-card-5-spread) var(--dt-shadow-card-5-color), var(--dt-shadow-card-6-offset-x) var(--dt-shadow-card-6-offset-y) var(--dt-shadow-card-6-blur) var(--dt-shadow-card-6-spread) var(--dt-shadow-card-6-color), var(--dt-shadow-card-7-offset-x) var(--dt-shadow-card-7-offset-y) var(--dt-shadow-card-7-blur) var(--dt-shadow-card-7-spread) var(--dt-shadow-card-7-color);
11
- --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), var(--dt-shadow-extra-large-5-offset-x) var(--dt-shadow-extra-large-5-offset-y) var(--dt-shadow-extra-large-5-blur) var(--dt-shadow-extra-large-5-spread) var(--dt-shadow-extra-large-5-color);
12
- --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), var(--dt-shadow-large-4-offset-x) var(--dt-shadow-large-4-offset-y) var(--dt-shadow-large-4-blur) var(--dt-shadow-large-4-spread) var(--dt-shadow-large-4-color), var(--dt-shadow-large-5-offset-x) var(--dt-shadow-large-5-offset-y) var(--dt-shadow-large-5-blur) var(--dt-shadow-large-5-spread) var(--dt-shadow-large-5-color);
13
- --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), var(--dt-shadow-medium-4-offset-x) var(--dt-shadow-medium-4-offset-y) var(--dt-shadow-medium-4-blur) var(--dt-shadow-medium-4-spread) var(--dt-shadow-medium-4-color), var(--dt-shadow-medium-5-offset-x) var(--dt-shadow-medium-5-offset-y) var(--dt-shadow-medium-5-blur) var(--dt-shadow-medium-5-spread) var(--dt-shadow-medium-5-color);
14
- --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), var(--dt-shadow-small-4-offset-x) var(--dt-shadow-small-4-offset-y) var(--dt-shadow-small-4-blur) var(--dt-shadow-small-4-spread) var(--dt-shadow-small-4-color), var(--dt-shadow-small-5-offset-x) var(--dt-shadow-small-5-offset-y) var(--dt-shadow-small-5-blur) var(--dt-shadow-small-5-spread) var(--dt-shadow-small-5-color);
15
8
  --dt-shadow-focus-2-type: dropShadow;
16
9
  --dt-shadow-focus-1-type: dropShadow;
17
10
  --dt-shadow-card-7-type: dropShadow;
@@ -643,7 +636,7 @@
643
636
  --dt-shadow-focus-2-color-hsl: var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l);
644
637
  --dt-shadow-focus-2-color-hsla: hsla(var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l) / var(--alpha, 100%));
645
638
  --dt-shadow-focus-2-color: #51A0FE;
646
- --dt-shadow-focus-2-spread: var(--dt-size-200) + var(--dt-size-100);
639
+ --dt-shadow-focus-2-spread: calc(var(--dt-size-200) + var(--dt-size-100));
647
640
  --dt-shadow-focus-2-blur: var(--dt-size-0);
648
641
  --dt-shadow-focus-1-offset-y: var(--dt-size-0);
649
642
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
@@ -895,6 +888,13 @@
895
888
  --dt-shadow-small-1-color: rgba(0, 0, 0, 0.45);
896
889
  --dt-shadow-small-1-spread: var(--dt-size-0);
897
890
  --dt-shadow-small-1-blur: var(--dt-size-300);
891
+ --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;
892
+ --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);
893
+ --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), var(--dt-shadow-card-4-offset-x) var(--dt-shadow-card-4-offset-y) var(--dt-shadow-card-4-blur) var(--dt-shadow-card-4-spread) var(--dt-shadow-card-4-color), var(--dt-shadow-card-5-offset-x) var(--dt-shadow-card-5-offset-y) var(--dt-shadow-card-5-blur) var(--dt-shadow-card-5-spread) var(--dt-shadow-card-5-color), var(--dt-shadow-card-6-offset-x) var(--dt-shadow-card-6-offset-y) var(--dt-shadow-card-6-blur) var(--dt-shadow-card-6-spread) var(--dt-shadow-card-6-color), var(--dt-shadow-card-7-offset-x) var(--dt-shadow-card-7-offset-y) var(--dt-shadow-card-7-blur) var(--dt-shadow-card-7-spread) var(--dt-shadow-card-7-color);
894
+ --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), var(--dt-shadow-extra-large-5-offset-x) var(--dt-shadow-extra-large-5-offset-y) var(--dt-shadow-extra-large-5-blur) var(--dt-shadow-extra-large-5-spread) var(--dt-shadow-extra-large-5-color);
895
+ --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), var(--dt-shadow-large-4-offset-x) var(--dt-shadow-large-4-offset-y) var(--dt-shadow-large-4-blur) var(--dt-shadow-large-4-spread) var(--dt-shadow-large-4-color), var(--dt-shadow-large-5-offset-x) var(--dt-shadow-large-5-offset-y) var(--dt-shadow-large-5-blur) var(--dt-shadow-large-5-spread) var(--dt-shadow-large-5-color);
896
+ --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), var(--dt-shadow-medium-4-offset-x) var(--dt-shadow-medium-4-offset-y) var(--dt-shadow-medium-4-blur) var(--dt-shadow-medium-4-spread) var(--dt-shadow-medium-4-color), var(--dt-shadow-medium-5-offset-x) var(--dt-shadow-medium-5-offset-y) var(--dt-shadow-medium-5-blur) var(--dt-shadow-medium-5-spread) var(--dt-shadow-medium-5-color);
897
+ --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), var(--dt-shadow-small-4-offset-x) var(--dt-shadow-small-4-offset-y) var(--dt-shadow-small-4-blur) var(--dt-shadow-small-4-spread) var(--dt-shadow-small-4-color), var(--dt-shadow-small-5-offset-x) var(--dt-shadow-small-5-offset-y) var(--dt-shadow-small-5-blur) var(--dt-shadow-small-5-spread) var(--dt-shadow-small-5-color);
898
898
  --dt-color-gradient-magenta-purple-h: 0;
899
899
  --dt-color-gradient-magenta-purple-s: 0%;
900
900
  --dt-color-gradient-magenta-purple-l: 0%;
package/dist/tokens/css/tokens-base-light.css CHANGED
@@ -5,13 +5,6 @@
5
5
  :root {
6
6
  color-scheme: light;
7
7
  --dt-shadow-focus-inset-type: innerShadow;
8
- --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;
9
- --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);
10
- --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);
11
- --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);
12
- --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);
13
- --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);
14
- --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);
15
8
  --dt-shadow-focus-2-type: dropShadow;
16
9
  --dt-shadow-focus-1-type: dropShadow;
17
10
  --dt-shadow-card-3-type: dropShadow;
@@ -593,7 +586,7 @@
593
586
  --dt-shadow-focus-2-color-hsl: var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l);
594
587
  --dt-shadow-focus-2-color-hsla: hsla(var(--dt-shadow-focus-2-color-h) var(--dt-shadow-focus-2-color-s) var(--dt-shadow-focus-2-color-l) / var(--alpha, 100%));
595
588
  --dt-shadow-focus-2-color: #51A0FE;
596
- --dt-shadow-focus-2-spread: var(--dt-size-200) + var(--dt-size-100);
589
+ --dt-shadow-focus-2-spread: calc(var(--dt-size-200) + var(--dt-size-100));
597
590
  --dt-shadow-focus-2-blur: var(--dt-size-0);
598
591
  --dt-shadow-focus-1-offset-y: var(--dt-size-0);
599
592
  --dt-shadow-focus-1-offset-x: var(--dt-size-0);
@@ -675,6 +668,13 @@
675
668
  --dt-shadow-small-color: rgba(0, 0, 0, 0.15);
676
669
  --dt-shadow-small-spread: var(--dt-size-0);
677
670
  --dt-shadow-small-blur: var(--dt-size-300);
671
+ --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;
672
+ --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);
673
+ --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);
674
+ --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);
675
+ --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);
676
+ --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);
677
+ --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);
678
678
  --dt-color-gradient-magenta-purple-h: 0;
679
679
  --dt-color-gradient-magenta-purple-s: 0%;
680
680
  --dt-color-gradient-magenta-purple-l: 0%;
package/dist/tokens/css/tokens-dp-dark.css CHANGED
@@ -1122,7 +1122,7 @@
1122
1122
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1123
1123
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1124
1124
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1125
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1125
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1126
1126
  --dt-radio-color-border-checked-h: 0;
1127
1127
  --dt-radio-color-border-checked-s: 0%;
1128
1128
  --dt-radio-color-border-checked-l: 0%;
package/dist/tokens/css/tokens-dp-light.css CHANGED
@@ -1140,7 +1140,7 @@
1140
1140
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1141
1141
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1142
1142
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1143
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1143
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1144
1144
  --dt-radio-color-border-checked-h: 0;
1145
1145
  --dt-radio-color-border-checked-s: 0%;
1146
1146
  --dt-radio-color-border-checked-l: 0%;
package/dist/tokens/css/tokens-expressive-dark.css CHANGED
@@ -1079,7 +1079,7 @@
1079
1079
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1080
1080
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1081
1081
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1082
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1082
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1083
1083
  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1084
1084
  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1085
1085
  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
package/dist/tokens/css/tokens-expressive-light.css CHANGED
@@ -1091,7 +1091,7 @@
1091
1091
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1092
1092
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1093
1093
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1094
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1094
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1095
1095
  --dt-font-size-600: calc(var(--dt-font-size-root) * 10.5);
1096
1096
  --dt-font-size-500: calc(var(--dt-font-size-root) * 6.5); /* extra large / xxl */
1097
1097
  --dt-font-size-400: calc(var(--dt-font-size-root) * 4.1); /* extra large / xl */
package/dist/tokens/css/tokens-expressive-sm-dark.css CHANGED
@@ -1079,7 +1079,7 @@
1079
1079
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1080
1080
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1081
1081
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1082
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1082
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1083
1083
  --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1084
1084
  --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1085
1085
  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
package/dist/tokens/css/tokens-expressive-sm-light.css CHANGED
@@ -1091,7 +1091,7 @@
1091
1091
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1092
1092
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1093
1093
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1094
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1094
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1095
1095
  --dt-font-size-600: calc(var(--dt-font-size-root) * 5.1);
1096
1096
  --dt-font-size-500: calc(var(--dt-font-size-root) * 4.1); /* extra large / xxl */
1097
1097
  --dt-font-size-400: calc(var(--dt-font-size-root) * 2.8); /* extra large / xl */
package/dist/tokens/css/tokens-tmo-dark.css CHANGED
@@ -1228,7 +1228,7 @@
1228
1228
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1229
1229
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1230
1230
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1231
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1231
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1232
1232
  --dt-radio-color-border-checked-h: 0;
1233
1233
  --dt-radio-color-border-checked-s: 0%;
1234
1234
  --dt-radio-color-border-checked-l: 0%;
package/dist/tokens/css/tokens-tmo-light.css CHANGED
@@ -1246,7 +1246,7 @@
1246
1246
  --dt-color-foreground-primary-hsl: var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l);
1247
1247
  --dt-color-foreground-primary-hsla: hsla(var(--dt-color-foreground-primary-h) var(--dt-color-foreground-primary-s) var(--dt-color-foreground-primary-l) / var(--alpha, 100%));
1248
1248
  --dt-color-foreground-primary: var(--dt-color-black-900); /* Default text color throughout the UI. */
1249
- --dt-size-border-focus: var(--dt-size-border-200) + var(--dt-size-border-100);
1249
+ --dt-size-border-focus: calc(var(--dt-size-border-200) + var(--dt-size-border-100));
1250
1250
  --dt-radio-color-border-checked-h: 0;
1251
1251
  --dt-radio-color-border-checked-s: 0%;
1252
1252
  --dt-radio-color-border-checked-l: 0%;