@dialpad/dialtone 9.87.0 → 9.88.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 (38) hide show
  1. package/dist/css/tokens/tokens-base-deca-dark.css +1325 -0
  2. package/dist/css/tokens/tokens-base-deca-light.css +1085 -0
  3. package/dist/css/tokens/tokens-deca-dark.css +2131 -0
  4. package/dist/css/tokens/tokens-deca-light.css +2131 -0
  5. package/dist/css/tokens/tokens-tmo-dark.css +62 -17
  6. package/dist/css/tokens/tokens-tmo-light.css +45 -0
  7. package/dist/tokens/css/tokens-base-deca-dark.css +1325 -0
  8. package/dist/tokens/css/tokens-base-deca-light.css +1085 -0
  9. package/dist/tokens/css/tokens-deca-dark.css +2131 -0
  10. package/dist/tokens/css/tokens-deca-light.css +2131 -0
  11. package/dist/tokens/css/tokens-tmo-dark.css +62 -17
  12. package/dist/tokens/css/tokens-tmo-light.css +45 -0
  13. package/dist/tokens/doc.json +78982 -23377
  14. package/dist/tokens/less/tokens-base-deca-dark.less +535 -0
  15. package/dist/tokens/less/tokens-base-deca-light.less +415 -0
  16. package/dist/tokens/less/tokens-deca-dark.less +521 -0
  17. package/dist/tokens/less/tokens-deca-light.less +521 -0
  18. package/dist/tokens/less/tokens-tmo-dark.less +43 -3
  19. package/dist/tokens/less/tokens-tmo-light.less +40 -0
  20. package/dist/tokens/themes/dp-deca-dark.cjs +1 -0
  21. package/dist/tokens/themes/dp-deca-dark.js +13 -0
  22. package/dist/tokens/themes/dp-deca-light.cjs +1 -0
  23. package/dist/tokens/themes/dp-deca-light.js +13 -0
  24. package/dist/tokens/themes/tmo-dark.cjs +1 -1
  25. package/dist/tokens/themes/tmo-dark.js +1 -1
  26. package/dist/tokens/themes/tmo-light.cjs +1 -1
  27. package/dist/tokens/themes/tmo-light.js +1 -1
  28. package/dist/tokens/tokens-base-deca-dark.json +534 -0
  29. package/dist/tokens/tokens-base-deca-light.json +414 -0
  30. package/dist/tokens/tokens-deca-dark.json +520 -0
  31. package/dist/tokens/tokens-deca-light.json +520 -0
  32. package/dist/tokens/tokens-tmo-dark.json +43 -3
  33. package/dist/tokens/tokens-tmo-light.json +40 -0
  34. package/dist/tokens/types/themes/dp-deca-dark.d.ts +13 -0
  35. package/dist/tokens/types/themes/dp-deca-dark.d.ts.map +1 -0
  36. package/dist/tokens/types/themes/dp-deca-light.d.ts +13 -0
  37. package/dist/tokens/types/themes/dp-deca-light.d.ts.map +1 -0
  38. package/package.json +3 -3
package/dist/css/tokens/tokens-tmo-dark.css CHANGED
@@ -176,20 +176,28 @@
176
176
  --dt-checkbox-color-background-checked-hsla: var(--dt-color-brand-purple-hsla);
177
177
  --dt-checkbox-color-background-checked: var(--dt-color-brand-purple);
178
178
  --dt-checkbox-size-width: var(--dt-size-500);
179
- --dt-badge-color-border-bulletin-subtle-h: 255;
179
+ --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
180
+ --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
181
+ --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
182
+ --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
183
+ --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
184
+ --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
185
+ --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
186
+ --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
187
+ --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
188
+ --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
189
+ --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
190
+ --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
191
+ --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
192
+ --dt-button-font-weight-sm: var(--dt-font-weight-medium); /* Font weight for SM button */
193
+ --dt-button-font-weight-xs: var(--dt-font-weight-medium); /* Font weight for XS button */
194
+ --dt-badge-color-border-bulletin-subtle-h: 261;
180
195
  --dt-badge-color-border-bulletin-subtle-s: 100%;
181
- --dt-badge-color-border-bulletin-subtle-l: 66.1%;
182
- --dt-badge-color-border-bulletin-subtle-a: 50%;
196
+ --dt-badge-color-border-bulletin-subtle-l: 74.7%;
197
+ --dt-badge-color-border-bulletin-subtle-a: 60%;
183
198
  --dt-badge-color-border-bulletin-subtle-hsl: var(--dt-badge-color-border-bulletin-subtle-h) var(--dt-badge-color-border-bulletin-subtle-s) var(--dt-badge-color-border-bulletin-subtle-l);
184
- --dt-badge-color-border-bulletin-subtle-hsla: hsl(var(--dt-badge-color-border-bulletin-subtle-h) var(--dt-badge-color-border-bulletin-subtle-s) var(--dt-badge-color-border-bulletin-subtle-l) / var(--alpha, 50%));
185
- --dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
186
- --dt-badge-color-foreground-bulletin-subtle-h: 255;
187
- --dt-badge-color-foreground-bulletin-subtle-s: 100%;
188
- --dt-badge-color-foreground-bulletin-subtle-l: 26.400000000000002%;
189
- --dt-badge-color-foreground-bulletin-subtle-a: 100%;
190
- --dt-badge-color-foreground-bulletin-subtle-hsl: var(--dt-badge-color-foreground-bulletin-subtle-h) var(--dt-badge-color-foreground-bulletin-subtle-s) var(--dt-badge-color-foreground-bulletin-subtle-l);
191
- --dt-badge-color-foreground-bulletin-subtle-hsla: hsl(var(--dt-badge-color-foreground-bulletin-subtle-h) var(--dt-badge-color-foreground-bulletin-subtle-s) var(--dt-badge-color-foreground-bulletin-subtle-l) / var(--alpha, 100%));
192
- --dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
199
+ --dt-badge-color-border-bulletin-subtle-hsla: hsl(var(--dt-badge-color-border-bulletin-subtle-h) var(--dt-badge-color-border-bulletin-subtle-s) var(--dt-badge-color-border-bulletin-subtle-l) / var(--alpha, 60%));
200
+ --dt-badge-color-border-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
193
201
  --dt-badge-color-foreground-bulletin-h: var(--dt-color-neutral-white-h);
194
202
  --dt-badge-color-foreground-bulletin-s: var(--dt-color-neutral-white-s);
195
203
  --dt-badge-color-foreground-bulletin-l: var(--dt-color-neutral-white-l);
@@ -197,13 +205,13 @@
197
205
  --dt-badge-color-foreground-bulletin-hsl: var(--dt-color-neutral-white-hsl);
198
206
  --dt-badge-color-foreground-bulletin-hsla: var(--dt-color-neutral-white-hsla);
199
207
  --dt-badge-color-foreground-bulletin: var(--dt-color-neutral-white);
200
- --dt-badge-color-background-bulletin-subtle-h: 255;
208
+ --dt-badge-color-background-bulletin-subtle-h: 261;
201
209
  --dt-badge-color-background-bulletin-subtle-s: 100%;
202
- --dt-badge-color-background-bulletin-subtle-l: 66.1%;
203
- --dt-badge-color-background-bulletin-subtle-a: 10%;
210
+ --dt-badge-color-background-bulletin-subtle-l: 74.7%;
211
+ --dt-badge-color-background-bulletin-subtle-a: 60%;
204
212
  --dt-badge-color-background-bulletin-subtle-hsl: var(--dt-badge-color-background-bulletin-subtle-h) var(--dt-badge-color-background-bulletin-subtle-s) var(--dt-badge-color-background-bulletin-subtle-l);
205
- --dt-badge-color-background-bulletin-subtle-hsla: hsl(var(--dt-badge-color-background-bulletin-subtle-h) var(--dt-badge-color-background-bulletin-subtle-s) var(--dt-badge-color-background-bulletin-subtle-l) / var(--alpha, 10%));
206
- --dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
213
+ --dt-badge-color-background-bulletin-subtle-hsla: hsl(var(--dt-badge-color-background-bulletin-subtle-h) var(--dt-badge-color-background-bulletin-subtle-s) var(--dt-badge-color-background-bulletin-subtle-l) / var(--alpha, 60%));
214
+ --dt-badge-color-background-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
207
215
  --dt-badge-color-background-bulletin-h: var(--dt-color-brand-purple-h);
208
216
  --dt-badge-color-background-bulletin-s: var(--dt-color-brand-purple-s);
209
217
  --dt-badge-color-background-bulletin-l: var(--dt-color-brand-purple-l);
@@ -620,6 +628,11 @@
620
628
  --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
621
629
  --dt-inputs-size-border-status: var(--dt-size-border-200);
622
630
  --dt-inputs-size-border-default: var(--dt-size-border-150);
631
+ --dt-typography-button-xl-font-family: var(--dt-font-family-body); /* Text style for extra large button */
632
+ --dt-typography-button-lg-font-family: var(--dt-font-family-body); /* Text style for large button */
633
+ --dt-typography-button-md-font-family: var(--dt-font-family-body); /* Text style for medium button */
634
+ --dt-typography-button-sm-font-family: var(--dt-font-family-body); /* Text style for small button */
635
+ --dt-typography-button-xs-font-family: var(--dt-font-family-body); /* Text style for extra small button */
623
636
  --dt-typography-inputs-xl-font-family: var(--dt-font-family-body); /* Text style for extra large inputs (e.g. input and textarea) */
624
637
  --dt-typography-inputs-lg-font-family: var(--dt-font-family-body); /* Text style for large inputs (e.g. input and textarea) */
625
638
  --dt-typography-inputs-md-font-family: var(--dt-font-family-body); /* Text style for medium inputs (e.g. input and textarea) */
@@ -1439,6 +1452,11 @@
1439
1452
  --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
1440
1453
  --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
1441
1454
  --dt-checkbox-size-height: var(--dt-checkbox-size-width);
1455
+ --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
1456
+ --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
1457
+ --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
1458
+ --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
1459
+ --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
1442
1460
  --dt-badge-color-border-default-h: var(--dt-color-border-subtle-h);
1443
1461
  --dt-badge-color-border-default-s: var(--dt-color-border-subtle-s);
1444
1462
  --dt-badge-color-border-default-l: var(--dt-color-border-subtle-l);
@@ -1446,6 +1464,13 @@
1446
1464
  --dt-badge-color-border-default-hsl: var(--dt-color-border-subtle-hsl);
1447
1465
  --dt-badge-color-border-default-hsla: var(--dt-color-border-subtle-hsla);
1448
1466
  --dt-badge-color-border-default: var(--dt-color-border-subtle);
1467
+ --dt-badge-color-foreground-bulletin-subtle-h: 0;
1468
+ --dt-badge-color-foreground-bulletin-subtle-s: 0%;
1469
+ --dt-badge-color-foreground-bulletin-subtle-l: 90.2%;
1470
+ --dt-badge-color-foreground-bulletin-subtle-a: 100%;
1471
+ --dt-badge-color-foreground-bulletin-subtle-hsl: var(--dt-badge-color-foreground-bulletin-subtle-h) var(--dt-badge-color-foreground-bulletin-subtle-s) var(--dt-badge-color-foreground-bulletin-subtle-l);
1472
+ --dt-badge-color-foreground-bulletin-subtle-hsla: hsl(var(--dt-badge-color-foreground-bulletin-subtle-h) var(--dt-badge-color-foreground-bulletin-subtle-s) var(--dt-badge-color-foreground-bulletin-subtle-l) / var(--alpha, 100%));
1473
+ --dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
1449
1474
  --dt-badge-color-foreground-default-h: var(--dt-color-foreground-primary-h);
1450
1475
  --dt-badge-color-foreground-default-s: var(--dt-color-foreground-primary-s);
1451
1476
  --dt-badge-color-foreground-default-l: var(--dt-color-foreground-primary-l);
@@ -1753,6 +1778,16 @@
1753
1778
  --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
1754
1779
  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
1755
1780
  --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
1781
+ --dt-typography-button-xl-line-height: var(--dt-button-line-height-xl); /* Text style for extra large button */
1782
+ --dt-typography-button-xl-font-weight: var(--dt-button-font-weight-xl); /* Text style for extra large button */
1783
+ --dt-typography-button-lg-line-height: var(--dt-button-line-height-lg); /* Text style for large button */
1784
+ --dt-typography-button-lg-font-weight: var(--dt-button-font-weight-lg); /* Text style for large button */
1785
+ --dt-typography-button-md-line-height: var(--dt-button-line-height-md); /* Text style for medium button */
1786
+ --dt-typography-button-md-font-weight: var(--dt-button-font-weight-md); /* Text style for medium button */
1787
+ --dt-typography-button-sm-line-height: var(--dt-button-line-height-sm); /* Text style for small button */
1788
+ --dt-typography-button-sm-font-weight: var(--dt-button-font-weight-sm); /* Text style for small button */
1789
+ --dt-typography-button-xs-line-height: var(--dt-button-line-height-xs); /* Text style for extra small button */
1790
+ --dt-typography-button-xs-font-weight: var(--dt-button-font-weight-xs); /* Text style for extra small button */
1756
1791
  --dt-typography-inputs-xl-line-height: var(--dt-inputs-line-height-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1757
1792
  --dt-typography-inputs-xl-font-weight: var(--dt-inputs-font-weight-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1758
1793
  --dt-typography-inputs-lg-line-height: var(--dt-inputs-line-height-lg); /* Text style for large inputs (e.g. input and textarea) */
@@ -1978,6 +2013,11 @@
1978
2013
  --dt-action-color-foreground-base-active-hsl: var(--dt-action-color-foreground-base-hover-hsl);
1979
2014
  --dt-action-color-foreground-base-active-hsla: var(--dt-action-color-foreground-base-hover-hsla);
1980
2015
  --dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
2016
+ --dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
2017
+ --dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
2018
+ --dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
2019
+ --dt-typography-button-sm-font-size: var(--dt-button-font-size-sm); /* Text style for small button */
2020
+ --dt-typography-button-xs-font-size: var(--dt-button-font-size-xs); /* Text style for extra small button */
1981
2021
  --dt-typography-inputs-xl-font-size: var(--dt-inputs-font-size-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1982
2022
  --dt-typography-inputs-lg-font-size: var(--dt-inputs-font-size-lg); /* Text style for large inputs (e.g. input and textarea) */
1983
2023
  --dt-typography-inputs-md-font-size: var(--dt-inputs-font-size-md); /* Text style for medium inputs (e.g. input and textarea) */
@@ -1988,6 +2028,11 @@
1988
2028
  --dt-typography-inputs-md: var(--dt-typography-inputs-md-font-weight) var(--dt-typography-inputs-md-font-size)/var(--dt-typography-inputs-md-line-height) var(--dt-typography-inputs-md-font-family);
1989
2029
  --dt-typography-inputs-lg: var(--dt-typography-inputs-lg-font-weight) var(--dt-typography-inputs-lg-font-size)/var(--dt-typography-inputs-lg-line-height) var(--dt-typography-inputs-lg-font-family);
1990
2030
  --dt-typography-inputs-xl: var(--dt-typography-inputs-xl-font-weight) var(--dt-typography-inputs-xl-font-size)/var(--dt-typography-inputs-xl-line-height) var(--dt-typography-inputs-xl-font-family);
2031
+ --dt-typography-button-xs: var(--dt-typography-button-xs-font-weight) var(--dt-typography-button-xs-font-size)/var(--dt-typography-button-xs-line-height) var(--dt-typography-button-xs-font-family);
2032
+ --dt-typography-button-sm: var(--dt-typography-button-sm-font-weight) var(--dt-typography-button-sm-font-size)/var(--dt-typography-button-sm-line-height) var(--dt-typography-button-sm-font-family);
2033
+ --dt-typography-button-md: var(--dt-typography-button-md-font-weight) var(--dt-typography-button-md-font-size)/var(--dt-typography-button-md-line-height) var(--dt-typography-button-md-font-family);
2034
+ --dt-typography-button-lg: var(--dt-typography-button-lg-font-weight) var(--dt-typography-button-lg-font-size)/var(--dt-typography-button-lg-line-height) var(--dt-typography-button-lg-font-family);
2035
+ --dt-typography-button-xl: var(--dt-typography-button-xl-font-weight) var(--dt-typography-button-xl-font-size)/var(--dt-typography-button-xl-line-height) var(--dt-typography-button-xl-font-family);
1991
2036
  --dt-typography-body-md: var(--dt-typography-body-md-font-weight) var(--dt-typography-body-md-font-size)/var(--dt-typography-body-md-line-height) var(--dt-typography-body-md-font-family);
1992
2037
  --dt-typography-body-md-compact: var(--dt-typography-body-md-compact-font-weight) var(--dt-typography-body-md-compact-font-size)/var(--dt-typography-body-md-compact-line-height) var(--dt-typography-body-md-compact-font-family);
1993
2038
  --dt-typography-body-sm: var(--dt-typography-body-sm-font-weight) var(--dt-typography-body-sm-font-size)/var(--dt-typography-body-sm-line-height) var(--dt-typography-body-sm-font-family);
package/dist/css/tokens/tokens-tmo-light.css CHANGED
@@ -176,6 +176,21 @@
176
176
  --dt-checkbox-color-background-checked-hsla: var(--dt-color-brand-purple-hsla);
177
177
  --dt-checkbox-color-background-checked: var(--dt-color-brand-purple);
178
178
  --dt-checkbox-size-width: var(--dt-size-500);
179
+ --dt-button-size-radius-xl: var(--dt-size-radius-500); /* Border radius for extra large button. */
180
+ --dt-button-size-radius-lg: var(--dt-size-radius-450); /* Border radius for large button. */
181
+ --dt-button-size-radius-md: var(--dt-size-radius-400); /* Border radius for medium button. */
182
+ --dt-button-size-radius-sm: var(--dt-size-radius-400); /* Border radius for small button */
183
+ --dt-button-size-radius-xs: var(--dt-size-radius-300); /* Border radius for extra small button */
184
+ --dt-button-line-height-xl: var(--dt-font-line-height-200); /* Line-height for XL button */
185
+ --dt-button-line-height-lg: var(--dt-font-line-height-200); /* Line-height for LG button */
186
+ --dt-button-line-height-md: var(--dt-font-line-height-200); /* Line-height for MD button */
187
+ --dt-button-line-height-sm: var(--dt-font-line-height-200); /* Line-height for SM button */
188
+ --dt-button-line-height-xs: var(--dt-font-line-height-200); /* Line-height for XS button */
189
+ --dt-button-font-weight-xl: var(--dt-font-weight-normal); /* Font weight for XL button */
190
+ --dt-button-font-weight-lg: var(--dt-font-weight-medium); /* Font weight for LG button */
191
+ --dt-button-font-weight-md: var(--dt-font-weight-medium); /* Font weight for MD button */
192
+ --dt-button-font-weight-sm: var(--dt-font-weight-medium); /* Font weight for SM button */
193
+ --dt-button-font-weight-xs: var(--dt-font-weight-medium); /* Font weight for XS button */
179
194
  --dt-badge-color-border-bulletin-subtle-h: 255;
180
195
  --dt-badge-color-border-bulletin-subtle-s: 100%;
181
196
  --dt-badge-color-border-bulletin-subtle-l: 66.1%;
@@ -620,6 +635,11 @@
620
635
  --dt-inputs-size-radius-xs: var(--dt-size-radius-300);
621
636
  --dt-inputs-size-border-status: var(--dt-size-border-200);
622
637
  --dt-inputs-size-border-default: var(--dt-size-border-150);
638
+ --dt-typography-button-xl-font-family: var(--dt-font-family-body); /* Text style for extra large button */
639
+ --dt-typography-button-lg-font-family: var(--dt-font-family-body); /* Text style for large button */
640
+ --dt-typography-button-md-font-family: var(--dt-font-family-body); /* Text style for medium button */
641
+ --dt-typography-button-sm-font-family: var(--dt-font-family-body); /* Text style for small button */
642
+ --dt-typography-button-xs-font-family: var(--dt-font-family-body); /* Text style for extra small button */
623
643
  --dt-typography-inputs-xl-font-family: var(--dt-font-family-body); /* Text style for extra large inputs (e.g. input and textarea) */
624
644
  --dt-typography-inputs-lg-font-family: var(--dt-font-family-body); /* Text style for large inputs (e.g. input and textarea) */
625
645
  --dt-typography-inputs-md-font-family: var(--dt-font-family-body); /* Text style for medium inputs (e.g. input and textarea) */
@@ -1460,6 +1480,11 @@
1460
1480
  --dt-checkbox-color-border-unchecked: var(--dt-color-border-moderate);
1461
1481
  --dt-checkbox-size-radius: var(--dt-inputs-size-radius-xs);
1462
1482
  --dt-checkbox-size-height: var(--dt-checkbox-size-width);
1483
+ --dt-button-font-size-xl: var(--dt-font-size-400); /* Extra large Button text size */
1484
+ --dt-button-font-size-lg: var(--dt-font-size-300); /* Large Button text size */
1485
+ --dt-button-font-size-md: var(--dt-font-size-200); /* Medium Button text size */
1486
+ --dt-button-font-size-sm: var(--dt-font-size-100); /* Small Button text size */
1487
+ --dt-button-font-size-xs: var(--dt-font-size-100); /* Extra small Button text size */
1463
1488
  --dt-badge-color-border-default-h: var(--dt-color-border-subtle-h);
1464
1489
  --dt-badge-color-border-default-s: var(--dt-color-border-subtle-s);
1465
1490
  --dt-badge-color-border-default-l: var(--dt-color-border-subtle-l);
@@ -1774,6 +1799,16 @@
1774
1799
  --dt-inputs-font-size-md: var(--dt-font-size-200); /* Font size for medium inputs (e.g. input and textarea) */
1775
1800
  --dt-inputs-font-size-sm: var(--dt-font-size-100); /* Font size for small inputs (e.g. input and textarea) */
1776
1801
  --dt-inputs-font-size-xs: var(--dt-font-size-100); /* Font size for extra small inputs (e.g. input and textarea) */
1802
+ --dt-typography-button-xl-line-height: var(--dt-button-line-height-xl); /* Text style for extra large button */
1803
+ --dt-typography-button-xl-font-weight: var(--dt-button-font-weight-xl); /* Text style for extra large button */
1804
+ --dt-typography-button-lg-line-height: var(--dt-button-line-height-lg); /* Text style for large button */
1805
+ --dt-typography-button-lg-font-weight: var(--dt-button-font-weight-lg); /* Text style for large button */
1806
+ --dt-typography-button-md-line-height: var(--dt-button-line-height-md); /* Text style for medium button */
1807
+ --dt-typography-button-md-font-weight: var(--dt-button-font-weight-md); /* Text style for medium button */
1808
+ --dt-typography-button-sm-line-height: var(--dt-button-line-height-sm); /* Text style for small button */
1809
+ --dt-typography-button-sm-font-weight: var(--dt-button-font-weight-sm); /* Text style for small button */
1810
+ --dt-typography-button-xs-line-height: var(--dt-button-line-height-xs); /* Text style for extra small button */
1811
+ --dt-typography-button-xs-font-weight: var(--dt-button-font-weight-xs); /* Text style for extra small button */
1777
1812
  --dt-typography-inputs-xl-line-height: var(--dt-inputs-line-height-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1778
1813
  --dt-typography-inputs-xl-font-weight: var(--dt-inputs-font-weight-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1779
1814
  --dt-typography-inputs-lg-line-height: var(--dt-inputs-line-height-lg); /* Text style for large inputs (e.g. input and textarea) */
@@ -1957,6 +1992,11 @@
1957
1992
  --dt-action-color-foreground-base-active-hsl: var(--dt-action-color-foreground-base-hover-hsl);
1958
1993
  --dt-action-color-foreground-base-active-hsla: var(--dt-action-color-foreground-base-hover-hsla);
1959
1994
  --dt-action-color-foreground-base-active: var(--dt-action-color-foreground-base-hover);
1995
+ --dt-typography-button-xl-font-size: var(--dt-button-font-size-xl); /* Text style for extra large button */
1996
+ --dt-typography-button-lg-font-size: var(--dt-button-font-size-lg); /* Text style for large button */
1997
+ --dt-typography-button-md-font-size: var(--dt-button-font-size-md); /* Text style for medium button */
1998
+ --dt-typography-button-sm-font-size: var(--dt-button-font-size-sm); /* Text style for small button */
1999
+ --dt-typography-button-xs-font-size: var(--dt-button-font-size-xs); /* Text style for extra small button */
1960
2000
  --dt-typography-inputs-xl-font-size: var(--dt-inputs-font-size-xl); /* Text style for extra large inputs (e.g. input and textarea) */
1961
2001
  --dt-typography-inputs-lg-font-size: var(--dt-inputs-font-size-lg); /* Text style for large inputs (e.g. input and textarea) */
1962
2002
  --dt-typography-inputs-md-font-size: var(--dt-inputs-font-size-md); /* Text style for medium inputs (e.g. input and textarea) */
@@ -1967,6 +2007,11 @@
1967
2007
  --dt-typography-inputs-md: var(--dt-typography-inputs-md-font-weight) var(--dt-typography-inputs-md-font-size)/var(--dt-typography-inputs-md-line-height) var(--dt-typography-inputs-md-font-family);
1968
2008
  --dt-typography-inputs-lg: var(--dt-typography-inputs-lg-font-weight) var(--dt-typography-inputs-lg-font-size)/var(--dt-typography-inputs-lg-line-height) var(--dt-typography-inputs-lg-font-family);
1969
2009
  --dt-typography-inputs-xl: var(--dt-typography-inputs-xl-font-weight) var(--dt-typography-inputs-xl-font-size)/var(--dt-typography-inputs-xl-line-height) var(--dt-typography-inputs-xl-font-family);
2010
+ --dt-typography-button-xs: var(--dt-typography-button-xs-font-weight) var(--dt-typography-button-xs-font-size)/var(--dt-typography-button-xs-line-height) var(--dt-typography-button-xs-font-family);
2011
+ --dt-typography-button-sm: var(--dt-typography-button-sm-font-weight) var(--dt-typography-button-sm-font-size)/var(--dt-typography-button-sm-line-height) var(--dt-typography-button-sm-font-family);
2012
+ --dt-typography-button-md: var(--dt-typography-button-md-font-weight) var(--dt-typography-button-md-font-size)/var(--dt-typography-button-md-line-height) var(--dt-typography-button-md-font-family);
2013
+ --dt-typography-button-lg: var(--dt-typography-button-lg-font-weight) var(--dt-typography-button-lg-font-size)/var(--dt-typography-button-lg-line-height) var(--dt-typography-button-lg-font-family);
2014
+ --dt-typography-button-xl: var(--dt-typography-button-xl-font-weight) var(--dt-typography-button-xl-font-size)/var(--dt-typography-button-xl-line-height) var(--dt-typography-button-xl-font-family);
1970
2015
  --dt-typography-body-md: var(--dt-typography-body-md-font-weight) var(--dt-typography-body-md-font-size)/var(--dt-typography-body-md-line-height) var(--dt-typography-body-md-font-family);
1971
2016
  --dt-typography-body-md-compact: var(--dt-typography-body-md-compact-font-weight) var(--dt-typography-body-md-compact-font-size)/var(--dt-typography-body-md-compact-line-height) var(--dt-typography-body-md-compact-font-family);
1972
2017
  --dt-typography-body-sm: var(--dt-typography-body-sm-font-weight) var(--dt-typography-body-sm-font-size)/var(--dt-typography-body-sm-line-height) var(--dt-typography-body-sm-font-family);