@dialpad/dialtone 9.109.0-rebrand-2025-beta.1 → 9.110.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 (191) hide show
  1. package/dist/css/dialtone-default-theme.css +3283 -12107
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone-docs.json +1 -1
  4. package/dist/css/dialtone.css +415 -3489
  5. package/dist/css/dialtone.min.css +1 -1
  6. package/dist/css/fonts/Archivo-Bold.woff2 +0 -0
  7. package/dist/css/fonts/Archivo-Regular.woff2 +0 -0
  8. package/dist/css/fonts/Archivo-SemiBold.woff2 +0 -0
  9. package/dist/css/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  10. package/dist/css/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  11. package/dist/css/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  12. package/dist/css/tokens/tokens-base-dark.css +161 -946
  13. package/dist/css/tokens/tokens-base-deca-dark.css +56 -526
  14. package/dist/css/tokens/tokens-base-deca-light.css +52 -522
  15. package/dist/css/tokens/tokens-base-light.css +128 -913
  16. package/dist/css/tokens/tokens-debug-base.css +3 -788
  17. package/dist/css/tokens/tokens-debug-dp.css +653 -1018
  18. package/dist/css/tokens/tokens-deca-dark.css +748 -784
  19. package/dist/css/tokens/tokens-deca-light.css +708 -744
  20. package/dist/css/tokens/tokens-dp-dark.css +924 -1289
  21. package/dist/css/tokens/tokens-dp-light.css +973 -1338
  22. package/dist/css/tokens/tokens-expressive-dark.css +924 -1289
  23. package/dist/css/tokens/tokens-expressive-light.css +970 -1335
  24. package/dist/css/tokens/tokens-expressive-sm-dark.css +924 -1289
  25. package/dist/css/tokens/tokens-expressive-sm-light.css +970 -1335
  26. package/dist/css/tokens/tokens-tmo-dark.css +1080 -1445
  27. package/dist/css/tokens/tokens-tmo-light.css +1115 -1480
  28. package/dist/css/tokens-docs.json +1 -1
  29. package/dist/tokens/css/tokens-base-dark.css +161 -946
  30. package/dist/tokens/css/tokens-base-deca-dark.css +56 -526
  31. package/dist/tokens/css/tokens-base-deca-light.css +52 -522
  32. package/dist/tokens/css/tokens-base-light.css +128 -913
  33. package/dist/tokens/css/tokens-debug-base.css +3 -788
  34. package/dist/tokens/css/tokens-debug-dp.css +653 -1018
  35. package/dist/tokens/css/tokens-deca-dark.css +748 -784
  36. package/dist/tokens/css/tokens-deca-light.css +708 -744
  37. package/dist/tokens/css/tokens-dp-dark.css +924 -1289
  38. package/dist/tokens/css/tokens-dp-light.css +973 -1338
  39. package/dist/tokens/css/tokens-expressive-dark.css +924 -1289
  40. package/dist/tokens/css/tokens-expressive-light.css +970 -1335
  41. package/dist/tokens/css/tokens-expressive-sm-dark.css +924 -1289
  42. package/dist/tokens/css/tokens-expressive-sm-light.css +970 -1335
  43. package/dist/tokens/css/tokens-tmo-dark.css +1080 -1445
  44. package/dist/tokens/css/tokens-tmo-light.css +1115 -1480
  45. package/dist/tokens/doc.json +45539 -71265
  46. package/dist/tokens/less/tokens-base-dark.less +46 -159
  47. package/dist/tokens/less/tokens-base-deca-dark.less +17 -85
  48. package/dist/tokens/less/tokens-base-deca-light.less +16 -84
  49. package/dist/tokens/less/tokens-base-light.less +37 -150
  50. package/dist/tokens/less/tokens-deca-dark.less +183 -189
  51. package/dist/tokens/less/tokens-deca-light.less +174 -180
  52. package/dist/tokens/less/tokens-dp-dark.less +187 -240
  53. package/dist/tokens/less/tokens-dp-light.less +185 -238
  54. package/dist/tokens/less/tokens-expressive-dark.less +210 -263
  55. package/dist/tokens/less/tokens-expressive-light.less +208 -261
  56. package/dist/tokens/less/tokens-expressive-sm-dark.less +210 -263
  57. package/dist/tokens/less/tokens-expressive-sm-light.less +208 -261
  58. package/dist/tokens/less/tokens-tmo-dark.less +207 -260
  59. package/dist/tokens/less/tokens-tmo-light.less +198 -251
  60. package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +4 -0
  61. package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +1 -0
  62. package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +4 -0
  63. package/dist/tokens/themes/chunks/tokens-base-light-DWLxg2cD.js +1 -0
  64. package/dist/tokens/themes/debug.cjs +1 -1
  65. package/dist/tokens/themes/debug.js +1 -1
  66. package/dist/tokens/themes/dp-dark.cjs +1 -1
  67. package/dist/tokens/themes/dp-dark.js +2 -2
  68. package/dist/tokens/themes/dp-deca-dark.cjs +1 -1
  69. package/dist/tokens/themes/dp-deca-dark.js +1 -1
  70. package/dist/tokens/themes/dp-deca-light.cjs +1 -1
  71. package/dist/tokens/themes/dp-deca-light.js +2 -2
  72. package/dist/tokens/themes/dp-light.cjs +1 -1
  73. package/dist/tokens/themes/dp-light.js +2 -2
  74. package/dist/tokens/themes/expressive-dark.cjs +1 -1
  75. package/dist/tokens/themes/expressive-dark.js +3 -3
  76. package/dist/tokens/themes/expressive-light.cjs +1 -1
  77. package/dist/tokens/themes/expressive-light.js +3 -3
  78. package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
  79. package/dist/tokens/themes/expressive-sm-dark.js +3 -3
  80. package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
  81. package/dist/tokens/themes/expressive-sm-light.js +3 -3
  82. package/dist/tokens/themes/tmo-dark.cjs +1 -1
  83. package/dist/tokens/themes/tmo-dark.js +2 -2
  84. package/dist/tokens/themes/tmo-light.cjs +1 -1
  85. package/dist/tokens/themes/tmo-light.js +2 -2
  86. package/dist/tokens/tokens-base-dark.json +46 -159
  87. package/dist/tokens/tokens-base-deca-dark.json +14 -82
  88. package/dist/tokens/tokens-base-deca-light.json +13 -81
  89. package/dist/tokens/tokens-base-light.json +37 -150
  90. package/dist/tokens/tokens-deca-dark.json +180 -186
  91. package/dist/tokens/tokens-deca-light.json +172 -178
  92. package/dist/tokens/tokens-dp-dark.json +171 -224
  93. package/dist/tokens/tokens-dp-light.json +182 -235
  94. package/dist/tokens/tokens-expressive-dark.json +194 -247
  95. package/dist/tokens/tokens-expressive-light.json +205 -258
  96. package/dist/tokens/tokens-expressive-sm-dark.json +194 -247
  97. package/dist/tokens/tokens-expressive-sm-light.json +205 -258
  98. package/dist/tokens/tokens-tmo-dark.json +196 -249
  99. package/dist/tokens/tokens-tmo-light.json +193 -246
  100. package/dist/vue2/component-documentation.json +1 -1
  101. package/dist/vue2/components/button/button.vue.cjs +1 -1
  102. package/dist/vue2/components/button/button.vue.cjs.map +1 -1
  103. package/dist/vue2/components/button/button.vue.js +1 -1
  104. package/dist/vue2/components/button/button.vue.js.map +1 -1
  105. package/dist/vue2/components/button/button_constants.cjs +2 -3
  106. package/dist/vue2/components/button/button_constants.cjs.map +1 -1
  107. package/dist/vue2/components/button/button_constants.js +2 -3
  108. package/dist/vue2/components/button/button_constants.js.map +1 -1
  109. package/dist/vue2/components/popover/popover.vue.cjs +1 -9
  110. package/dist/vue2/components/popover/popover.vue.cjs.map +1 -1
  111. package/dist/vue2/components/popover/popover.vue.js +1 -9
  112. package/dist/vue2/components/popover/popover.vue.js.map +1 -1
  113. package/dist/vue2/components/popover/popover_header_footer.vue.cjs +4 -10
  114. package/dist/vue2/components/popover/popover_header_footer.vue.cjs.map +1 -1
  115. package/dist/vue2/components/popover/popover_header_footer.vue.js +4 -10
  116. package/dist/vue2/components/popover/popover_header_footer.vue.js.map +1 -1
  117. package/dist/vue2/components/stack/stack.vue.cjs +1 -1
  118. package/dist/vue2/components/stack/stack.vue.cjs.map +1 -1
  119. package/dist/vue2/components/stack/stack.vue.js +1 -1
  120. package/dist/vue2/components/stack/stack.vue.js.map +1 -1
  121. package/dist/vue2/components/stack/stack_constants.cjs +1 -1
  122. package/dist/vue2/components/stack/stack_constants.cjs.map +1 -1
  123. package/dist/vue2/components/stack/stack_constants.js +1 -1
  124. package/dist/vue2/components/stack/stack_constants.js.map +1 -1
  125. package/dist/vue2/dialtone-vue.cjs +2 -0
  126. package/dist/vue2/dialtone-vue.cjs.map +1 -1
  127. package/dist/vue2/dialtone-vue.js +2 -0
  128. package/dist/vue2/dialtone-vue.js.map +1 -1
  129. package/dist/vue2/localization/dp-DP.ftl.cjs +5 -0
  130. package/dist/vue2/localization/dp-DP.ftl.cjs.map +1 -0
  131. package/dist/vue2/localization/dp-DP.ftl.js +5 -0
  132. package/dist/vue2/localization/dp-DP.ftl.js.map +1 -0
  133. package/dist/vue2/localization/en-US.ftl.cjs +5 -0
  134. package/dist/vue2/localization/en-US.ftl.cjs.map +1 -0
  135. package/dist/vue2/localization/en-US.ftl.js +5 -0
  136. package/dist/vue2/localization/en-US.ftl.js.map +1 -0
  137. package/dist/vue2/localization/es-LA.ftl.cjs +5 -0
  138. package/dist/vue2/localization/es-LA.ftl.cjs.map +1 -0
  139. package/dist/vue2/localization/es-LA.ftl.js +5 -0
  140. package/dist/vue2/localization/es-LA.ftl.js.map +1 -0
  141. package/dist/vue2/localization/index.cjs +33 -0
  142. package/dist/vue2/localization/index.cjs.map +1 -0
  143. package/dist/vue2/localization/index.js +33 -0
  144. package/dist/vue2/localization/index.js.map +1 -0
  145. package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.cjs.map +1 -1
  146. package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.js.map +1 -1
  147. package/dist/vue2/recipes/leftbar/callbox/callbox.vue.cjs +1 -1
  148. package/dist/vue2/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
  149. package/dist/vue2/recipes/leftbar/callbox/callbox.vue.js +1 -1
  150. package/dist/vue2/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
  151. package/dist/vue2/types/components/button/button_constants.d.ts +1 -2
  152. package/dist/vue2/types/components/button/button_constants.d.ts.map +1 -1
  153. package/dist/vue2/types/components/popover/popover.vue.d.ts +0 -9
  154. package/dist/vue2/types/components/popover/popover.vue.d.ts.map +1 -1
  155. package/dist/vue2/types/components/popover/popover_header_footer.vue.d.ts +1 -9
  156. package/dist/vue2/types/components/stack/stack_constants.d.ts.map +1 -1
  157. package/dist/vue2/types/index.d.ts +1 -0
  158. package/dist/vue2/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
  159. package/dist/vue3/component-documentation.json +1 -1
  160. package/dist/vue3/components/button/button.vue.cjs +1 -1
  161. package/dist/vue3/components/button/button.vue.cjs.map +1 -1
  162. package/dist/vue3/components/button/button.vue.js +1 -1
  163. package/dist/vue3/components/button/button.vue.js.map +1 -1
  164. package/dist/vue3/components/button/button_constants.cjs +2 -3
  165. package/dist/vue3/components/button/button_constants.cjs.map +1 -1
  166. package/dist/vue3/components/button/button_constants.js +2 -3
  167. package/dist/vue3/components/button/button_constants.js.map +1 -1
  168. package/dist/vue3/components/stack/stack.vue.cjs +1 -1
  169. package/dist/vue3/components/stack/stack.vue.cjs.map +1 -1
  170. package/dist/vue3/components/stack/stack.vue.js +1 -1
  171. package/dist/vue3/components/stack/stack.vue.js.map +1 -1
  172. package/dist/vue3/components/stack/stack_constants.cjs +1 -1
  173. package/dist/vue3/components/stack/stack_constants.cjs.map +1 -1
  174. package/dist/vue3/components/stack/stack_constants.js +1 -1
  175. package/dist/vue3/components/stack/stack_constants.js.map +1 -1
  176. package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs +6 -2
  177. package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
  178. package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js +7 -3
  179. package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
  180. package/dist/vue3/types/components/button/button_constants.d.ts +1 -2
  181. package/dist/vue3/types/components/button/button_constants.d.ts.map +1 -1
  182. package/dist/vue3/types/components/stack/stack_constants.d.ts.map +1 -1
  183. package/dist/vue3/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
  184. package/package.json +7 -7
  185. package/dist/css/fonts/SeasonMix-Bold.woff2 +0 -0
  186. package/dist/css/fonts/SeasonMix-Regular.woff2 +0 -0
  187. package/dist/css/fonts/SeasonMix-SemiBold.woff2 +0 -0
  188. package/dist/tokens/themes/chunks/tokens-base-dark-B42c8NRe.js +0 -1
  189. package/dist/tokens/themes/chunks/tokens-base-dark-D3XlzClW.js +0 -4
  190. package/dist/tokens/themes/chunks/tokens-base-light-5p3ZOPKU.js +0 -1
  191. package/dist/tokens/themes/chunks/tokens-base-light-C_G4p7UU.js +0 -4
@@ -9,303 +9,259 @@
9
9
  @dt-font-size-600: 51px;
10
10
  @dt-size-border-focus: 0.3rem;
11
11
  @dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
12
- @dt-color-foreground-secondary: #c7c7c7; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
13
- @dt-color-foreground-tertiary: #B0B0B0; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
14
- @dt-color-foreground-muted: hsl(0 0% 83.1% / 0.65);
15
- @dt-color-foreground-placeholder: #B0B0B0;
16
- @dt-color-foreground-disabled: #B0B0B0;
17
- @dt-color-foreground-critical: #FF716F;
18
- @dt-color-foreground-critical-strong: #FFABA4;
19
- @dt-color-foreground-success: #AEFB3C;
20
- @dt-color-foreground-success-strong: #DBFFA9;
21
- @dt-color-foreground-warning: #FFBD48;
12
+ @dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
13
+ @dt-color-foreground-tertiary: #AAAAAA; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
14
+ @dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
15
+ @dt-color-foreground-placeholder: #AAAAAA;
16
+ @dt-color-foreground-disabled: #AAAAAA;
17
+ @dt-color-foreground-critical: #FF8585;
18
+ @dt-color-foreground-critical-strong: hsl(0 100% 82.1%);
19
+ @dt-color-foreground-success: #B0FFA3; // Indicates a positive state.
20
+ @dt-color-foreground-success-strong: hsl(112 100% 88.3%);
21
+ @dt-color-foreground-warning: #FFDB80;
22
22
  @dt-color-foreground-primary-inverted: #000000;
23
- @dt-color-foreground-secondary-inverted: #3d3d3d;
23
+ @dt-color-foreground-secondary-inverted: #3A3A3A;
24
24
  @dt-color-foreground-tertiary-inverted: #555555;
25
- @dt-color-foreground-muted-inverted: hsl(0 0% 9.02% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
26
- @dt-color-foreground-placeholder-inverted: #555555; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
27
- @dt-color-foreground-disabled-inverted: #555555; // Disabled text color that sits on high-contrast surfaces or backgrounds.
28
- @dt-color-foreground-critical-inverted: #FF1356;
29
- @dt-color-foreground-critical-strong-inverted: #640823; // Critical strong text that sits on high-contrast surfaces or backgrounds
30
- @dt-color-foreground-success-inverted: #008E52;
31
- @dt-color-foreground-success-strong-inverted: #004F2E;
32
- @dt-color-foreground-warning-inverted: #815008;
33
- @dt-color-link-primary: #BBA6FC;
34
- @dt-color-link-primary-hover: #D3BCFF;
35
- @dt-color-link-critical: #FF716F;
36
- @dt-color-link-critical-hover: #FFABA4;
37
- @dt-color-link-success: #AEFB3C; // positive
38
- @dt-color-link-success-hover: #DBFFA9;
39
- @dt-color-link-warning: #FFBD48;
40
- @dt-color-link-warning-hover: #FFE89C;
41
- @dt-color-link-muted: #c7c7c7;
42
- @dt-color-link-muted-hover: #E6E6E6;
43
- @dt-color-link-disabled: #B0B0B0;
44
- @dt-color-link-disabled-hover: #B0B0B0;
25
+ @dt-color-foreground-muted-inverted: hsl(0 0% 14.9% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
26
+ @dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
27
+ @dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
28
+ @dt-color-foreground-critical-inverted: #EC0E0E;
29
+ @dt-color-foreground-critical-strong-inverted: #B70B0B;
30
+ @dt-color-foreground-success-inverted: #1AA340; // Success text that sits on high-contrast surfaces or backgrounds
31
+ @dt-color-foreground-success-strong-inverted: #124620;
32
+ @dt-color-foreground-warning-inverted: #815008; // Warning text that sits on high-contrast surfaces or backgrounds
33
+ @dt-color-link-primary: hsl(261 100% 78.2%);
34
+ @dt-color-link-critical: #FF8585;
35
+ @dt-color-link-success: #B0FFA3; // positive
36
+ @dt-color-link-warning: #FFDB80;
37
+ @dt-color-link-muted: #C2C2C2;
38
+ @dt-color-link-disabled: #AAAAAA;
45
39
  @dt-color-link-primary-inverted: #7C52FF;
46
- @dt-color-link-primary-inverted-hover: #5023DD;
47
- @dt-color-link-critical-inverted: #FF1356;
48
- @dt-color-link-critical-inverted-hover: #640823;
49
- @dt-color-link-success-inverted: #008E52;
50
- @dt-color-link-success-inverted-hover: #004F2E;
40
+ @dt-color-link-critical-inverted: #EC0E0E;
41
+ @dt-color-link-success-inverted: #1AA340;
51
42
  @dt-color-link-warning-inverted: #815008;
52
- @dt-color-link-warning-inverted-hover: #533204;
53
- @dt-color-link-muted-inverted: #3d3d3d;
54
- @dt-color-link-muted-inverted-hover: #171717;
55
- @dt-color-link-disabled-inverted: #555555;
56
- @dt-color-link-disabled-inverted-hover: #555555;
57
- @dt-color-surface-primary: #171717;
58
- @dt-color-surface-secondary: #1f1f1f;
59
- @dt-color-surface-moderate: #3d3d3d;
43
+ @dt-color-link-muted-inverted: #3A3A3A;
44
+ @dt-color-link-disabled-inverted: #808080;
45
+ @dt-color-link-primary-hover: #DAC7FF;
46
+ @dt-color-link-critical-hover: #FFE5E6;
47
+ @dt-color-link-success-hover: #EDF9EB;
48
+ @dt-color-link-warning-hover: #FFF4CC;
49
+ @dt-color-link-muted-hover: #E6E6E6;
50
+ @dt-color-link-disabled-hover: #AAAAAA;
51
+ @dt-color-link-primary-inverted-hover: #3A1D95;
52
+ @dt-color-link-critical-inverted-hover: #B70B0B;
53
+ @dt-color-link-success-inverted-hover: #124620;
54
+ @dt-color-link-warning-inverted-hover: #262626;
55
+ @dt-color-link-muted-inverted-hover: #000000;
56
+ @dt-color-link-disabled-inverted-hover: #808080;
57
+ @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.06);
58
+ @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.15);
59
+ @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.27);
60
+ @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.65);
61
+ @dt-color-surface-contrast-opaque: hsl(0 0% 90.2% / 0.96);
62
+ @dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
63
+ @dt-color-surface-critical-opaque: hsl(0 88.7% 38% / 0.32);
64
+ @dt-color-surface-critical-subtle-opaque: hsl(0 89.6% 9.41% / 0.5);
65
+ @dt-color-surface-warning-opaque: hsl(35.9 66% 49.6% / 0.48);
66
+ @dt-color-surface-warning-subtle-opaque: hsl(35.7 88.3% 13.4% / 0.5);
67
+ @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.26);
68
+ @dt-color-surface-success-subtle-opaque: hsl(136 59.1% 8.63% / 0.5);
69
+ @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.29);
70
+ @dt-color-surface-info-subtle-opaque: hsl(213 98.2% 12.9% / 0.5);
71
+ @dt-color-surface-primary: hsl(0 0% 12%);
72
+ @dt-color-surface-secondary: #262626;
73
+ @dt-color-surface-moderate: #3A3A3A;
60
74
  @dt-color-surface-bold: #555555;
61
- @dt-color-surface-strong: #B0B0B0;
62
- @dt-color-surface-contrast: #ffffff;
63
- @dt-color-surface-critical: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
64
- @dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
65
- @dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
66
- @dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
67
- @dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
68
- @dt-color-surface-critical-subtle: hsl(343 100% 5.49%);
69
- @dt-color-surface-warning-subtle: hsl(35.7 91.3% 4.51%);
70
- @dt-color-surface-success-subtle: hsl(155 95% 3.92%);
71
- @dt-color-surface-info-subtle: hsl(211 100% 4.82%);
72
- @dt-color-surface-brand-subtle: #10022C; // A softer version of the default informational surface.
73
- @dt-color-surface-critical-strong: #FF716F;
74
- @dt-color-surface-warning-strong: #FFDB80;
75
- @dt-color-surface-success-strong: #AEFB3C;
76
- @dt-color-surface-info-strong: #4AA9EA;
77
- @dt-color-surface-brand-strong: #BBA6FC;
78
- @dt-color-surface-primary-opaque: hsl(0 0% 9.02% / 0.9);
79
- @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
80
- @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
81
- @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
82
- @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
83
- @dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
84
- @dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
85
- @dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
86
- @dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
87
- @dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
88
- @dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
89
- @dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
90
- @dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
91
- @dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
92
- @dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
93
- @dt-color-surface-brand-subtle-opaque: hsl(260 91.3% 9.02% / 0.65);
94
- @dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
95
- @dt-color-surface-secondary-inverted: #F9F9F9;
96
- @dt-color-surface-moderate-inverted: #E6E6E6;
97
- @dt-color-surface-bold-inverted: #D4D4D4;
98
- @dt-color-surface-strong-inverted: #555555; // Use sparingly to draw the eye to a relatively important region.
99
- @dt-color-surface-contrast-inverted: #171717; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
100
- @dt-color-surface-critical-inverted: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
101
- @dt-color-surface-warning-inverted: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
102
- @dt-color-surface-success-inverted: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
103
- @dt-color-surface-info-inverted: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
104
- @dt-color-surface-brand-inverted: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
105
- @dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
106
- @dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
107
- @dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
108
- @dt-color-surface-info-subtle-inverted: #f5f9fd; // A softer version of the default informational surface.
109
- @dt-color-surface-brand-subtle-inverted: #f9f6ff; // A softer version of the default informational surface.
110
- @dt-color-surface-critical-strong-inverted: #D90A45;
111
- @dt-color-surface-warning-strong-inverted: #FFBD48;
112
- @dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
113
- @dt-color-surface-info-strong-inverted: #1768C6;
114
- @dt-color-surface-brand-strong-inverted: #7C52FF;
115
- @dt-color-surface-primary-opaque-inverted: hsl(0 0% 100% / 0.85); // Secondary surface as opaque background color.
116
- @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 0% / 0.04);
117
- @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 0% / 0.11);
118
- @dt-color-surface-bold-opaque-inverted: hsl(0 0% 0% / 0.18);
119
- @dt-color-surface-strong-opaque-inverted: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
120
- @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 0% / 0.97); // Contrast surface as opaque background color.
121
- @dt-color-surface-critical-opaque-inverted: hsl(4.62 100% 82.2% / 0.5);
122
- @dt-color-surface-warning-opaque-inverted: hsl(46.1 100% 80.6% / 0.5);
123
- @dt-color-surface-success-opaque-inverted: hsl(85.1 100% 83.1% / 0.3); // Success surface as opaque background color.
124
- @dt-color-surface-info-opaque-inverted: hsl(210 61.5% 94.9% / 0.6); // Info surface as opaque background color.
125
- @dt-color-surface-brand-opaque-inverted: hsl(260 100% 97.1% / 0.8); // Info surface as opaque background color.
126
- @dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
127
- @dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
128
- @dt-color-surface-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
129
- @dt-color-surface-info-subtle-opaque-inverted: hsl(210 66.7% 97.6% / 0.66); // Info surface as opaque background color.
130
- @dt-color-surface-brand-subtle-opaque-inverted: hsl(260 100% 98.2% / 0.66); // Info surface as opaque background color.
131
- @dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
132
- @dt-color-surface-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
75
+ @dt-color-surface-strong: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
76
+ @dt-color-surface-contrast: #E6E6E6;
77
+ @dt-color-surface-critical: #5B0505; // Background surface color containing error, danger, or otherwise critical messaging or elements.
78
+ @dt-color-surface-critical-subtle: hsl(0 89.6% 9.41%);
79
+ @dt-color-surface-critical-strong: #FF8585; // A contrasting critical surface, most likely paired with inverted foreground colors.
80
+ @dt-color-surface-warning: #815008; // Background surface color highlighting messaging or elements that may require user's attention.
81
+ @dt-color-surface-warning-subtle: hsl(35.7 88.3% 13.4%);
82
+ @dt-color-surface-warning-strong: #D28F2B; // A contrasting warning surface, most likely paired with inverted foreground colors.
83
+ @dt-color-surface-success: #124620; // Background surface color containing messaging or elements expressing a positive or successful state.
84
+ @dt-color-surface-success-subtle: hsl(136 59.1% 8.63%);
85
+ @dt-color-surface-success-strong: #B0FFA3; // A contrasting positive state surface, most likely paired with inverted foreground colors.
86
+ @dt-color-surface-info: #01326D; // Background surface color containing messaging or elements communicated as generally informational.
87
+ @dt-color-surface-info-subtle: hsl(213 98.2% 12.9%);
88
+ @dt-color-surface-info-strong: #99C8FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
133
89
  @dt-color-border-subtle: hsl(0 0% 100% / 0.14);
134
90
  @dt-color-border-default: hsl(0 0% 100% / 0.22);
135
91
  @dt-color-border-moderate: hsl(0 0% 100% / 0.36);
136
92
  @dt-color-border-bold: hsl(0 0% 100% / 0.5);
137
- @dt-color-border-critical: #FF716F;
138
- @dt-color-border-success: #D1FF76;
139
- @dt-color-border-warning: #FFDB80;
140
- @dt-color-border-brand: #BBA6FC;
141
- @dt-color-border-critical-subtle: #93173A;
142
- @dt-color-border-success-subtle: #52C926;
143
- @dt-color-border-warning-subtle: #FF9E0E;
144
- @dt-color-border-brand-subtle: #7C52FF;
145
- @dt-color-border-critical-strong: #FFABA4;
146
- @dt-color-border-success-strong: #AEFB3C;
147
- @dt-color-border-warning-strong: #FFE89C;
148
- @dt-color-border-brand-strong: #D3BCFF;
149
93
  @dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
150
94
  @dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
151
95
  @dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
152
96
  @dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
153
- @dt-color-border-critical-inverted: #FF1356;
154
- @dt-color-border-success-inverted: #31B237;
155
- @dt-color-border-warning-inverted: #FF9E0E;
97
+ @dt-color-border-focus: #51A0FE;
98
+ @dt-color-border-critical: #FF8585;
99
+ @dt-color-border-success: #B0FFA3;
100
+ @dt-color-border-warning: #FFDB80;
101
+ @dt-color-border-brand: #7C52FF;
102
+ @dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
103
+ @dt-color-border-accent: #F9008E;
104
+ @dt-color-border-critical-subtle: #B70B0B;
105
+ @dt-color-border-critical-strong: #FFE5E6;
106
+ @dt-color-border-success-subtle: #1AA340;
107
+ @dt-color-border-success-strong: #EDF9EB;
108
+ @dt-color-border-warning-subtle: #D28F2B;
109
+ @dt-color-border-warning-strong: #FFF4CC;
110
+ @dt-color-border-brand-subtle: #3A1D95;
111
+ @dt-color-border-brand-strong: #DAC7FF;
112
+ @dt-color-border-critical-inverted: #EC0E0E;
113
+ @dt-color-border-success-inverted: #1AA340;
114
+ @dt-color-border-warning-inverted: #D28F2B;
156
115
  @dt-color-border-brand-inverted: #7C52FF;
157
- @dt-color-border-critical-subtle-inverted: #FF716F;
158
- @dt-color-border-success-subtle-inverted: #D1FF76;
116
+ @dt-color-border-critical-subtle-inverted: #FF8585;
117
+ @dt-color-border-critical-strong-inverted: #B70B0B;
118
+ @dt-color-border-success-subtle-inverted: #B0FFA3;
119
+ @dt-color-border-success-strong-inverted: #124620;
159
120
  @dt-color-border-warning-subtle-inverted: #FFDB80;
160
- @dt-color-border-brand-subtle-inverted: #BBA6FC;
161
- @dt-color-border-critical-strong-inverted: #93173A;
162
- @dt-color-border-success-strong-inverted: #004F2E;
163
- @dt-color-border-warning-strong-inverted: #D57F00;
164
- @dt-color-border-brand-strong-inverted: #5023DD;
165
- @dt-color-border-focus: #3B96DF;
166
- @dt-color-border-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
167
- @dt-color-border-accent: #FF1BA4;
168
- @dt-typography-body-md-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium text style for main content.
121
+ @dt-color-border-warning-strong-inverted: #815008;
122
+ @dt-color-border-brand-subtle-inverted: #DAC7FF;
123
+ @dt-color-border-brand-strong-inverted: #3A1D95;
124
+ @dt-typography-body-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium text style for main content.
169
125
  @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
170
126
  @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
171
127
  @dt-typography-body-md-font-size: 16px; // Base default medium text style for main content.
172
128
  @dt-typography-body-md-text-case: none; // Base default medium text style for main content.
173
- @dt-typography-body-md-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium body style.
129
+ @dt-typography-body-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium body style.
174
130
  @dt-typography-body-md-compact-font-weight: 400; // A tighter-spaced version of medium body style.
175
131
  @dt-typography-body-md-compact-line-height: 1.4; // A tighter-spaced version of medium body style.
176
132
  @dt-typography-body-md-compact-font-size: 16px; // A tighter-spaced version of medium body style.
177
133
  @dt-typography-body-md-compact-text-case: none; // A tighter-spaced version of medium body style.
178
- @dt-typography-body-sm-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Reduced small text style for less prominent or adjacent content.
134
+ @dt-typography-body-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Reduced small text style for less prominent or adjacent content.
179
135
  @dt-typography-body-sm-font-weight: 400; // Reduced small text style for less prominent or adjacent content.
180
136
  @dt-typography-body-sm-line-height: 1.4; // Reduced small text style for less prominent or adjacent content.
181
137
  @dt-typography-body-sm-font-size: 12px; // Reduced small text style for less prominent or adjacent content.
182
138
  @dt-typography-body-sm-text-case: none; // Reduced small text style for less prominent or adjacent content.
183
- @dt-typography-body-sm-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small body style.
139
+ @dt-typography-body-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small body style.
184
140
  @dt-typography-body-sm-compact-font-weight: 400; // A tighter-spaced version of small body style.
185
141
  @dt-typography-body-sm-compact-line-height: 1.2; // A tighter-spaced version of small body style.
186
142
  @dt-typography-body-sm-compact-font-size: 12px; // A tighter-spaced version of small body style.
187
143
  @dt-typography-body-sm-compact-text-case: none; // A tighter-spaced version of small body style.
188
- @dt-typography-headline-eyebrow-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
144
+ @dt-typography-headline-eyebrow-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
189
145
  @dt-typography-headline-eyebrow-font-weight: 400; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
190
146
  @dt-typography-headline-eyebrow-line-height: 1.4; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
191
147
  @dt-typography-headline-eyebrow-font-size: 12px; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
192
148
  @dt-typography-headline-eyebrow-text-case: uppercase; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
193
- @dt-typography-headline-sm-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for secondary information or subheadings.
149
+ @dt-typography-headline-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for secondary information or subheadings.
194
150
  @dt-typography-headline-sm-font-weight: 700; // Smaller text size for secondary information or subheadings.
195
151
  @dt-typography-headline-sm-line-height: 1.4; // Smaller text size for secondary information or subheadings.
196
152
  @dt-typography-headline-sm-font-size: 16px; // Smaller text size for secondary information or subheadings.
197
153
  @dt-typography-headline-sm-text-case: none; // Smaller text size for secondary information or subheadings.
198
- @dt-typography-headline-sm-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small headline style.
154
+ @dt-typography-headline-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small headline style.
199
155
  @dt-typography-headline-sm-compact-font-weight: 700; // A tighter-spaced version of small headline style.
200
156
  @dt-typography-headline-sm-compact-line-height: 1.2; // A tighter-spaced version of small headline style.
201
157
  @dt-typography-headline-sm-compact-font-size: 16px; // A tighter-spaced version of small headline style.
202
158
  @dt-typography-headline-sm-compact-text-case: none; // A tighter-spaced version of small headline style.
203
- @dt-typography-headline-sm-soft-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of small headline style.
159
+ @dt-typography-headline-sm-soft-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of small headline style.
204
160
  @dt-typography-headline-sm-soft-font-weight: 500; // A softer font weight version of small headline style.
205
161
  @dt-typography-headline-sm-soft-line-height: 1.4; // A softer font weight version of small headline style.
206
162
  @dt-typography-headline-sm-soft-font-size: 16px; // A softer font weight version of small headline style.
207
163
  @dt-typography-headline-sm-soft-text-case: none; // A softer font weight version of small headline style.
208
- @dt-typography-headline-sm-soft-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter-spaced version of small headline style.
164
+ @dt-typography-headline-sm-soft-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter-spaced version of small headline style.
209
165
  @dt-typography-headline-sm-soft-compact-font-weight: 500; // A softer font weight, tighter-spaced version of small headline style.
210
166
  @dt-typography-headline-sm-soft-compact-line-height: 1.2; // A softer font weight, tighter-spaced version of small headline style.
211
167
  @dt-typography-headline-sm-soft-compact-font-size: 16px; // A softer font weight, tighter-spaced version of small headline style.
212
168
  @dt-typography-headline-sm-soft-compact-text-case: none; // A softer font weight, tighter-spaced version of small headline style.
213
- @dt-typography-headline-md-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Medium-sized base text style for headlines.
169
+ @dt-typography-headline-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Medium-sized base text style for headlines.
214
170
  @dt-typography-headline-md-font-weight: 700; // Medium-sized base text style for headlines.
215
171
  @dt-typography-headline-md-line-height: 1.6; // Medium-sized base text style for headlines.
216
172
  @dt-typography-headline-md-font-size: 20px; // Medium-sized base text style for headlines.
217
173
  @dt-typography-headline-md-text-case: none; // Medium-sized base text style for headlines.
218
- @dt-typography-headline-md-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium headline style.
174
+ @dt-typography-headline-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium headline style.
219
175
  @dt-typography-headline-md-compact-font-weight: 700; // A tighter-spaced version of medium headline style.
220
176
  @dt-typography-headline-md-compact-line-height: 1.4; // A tighter-spaced version of medium headline style.
221
177
  @dt-typography-headline-md-compact-font-size: 20px; // A tighter-spaced version of medium headline style.
222
178
  @dt-typography-headline-md-compact-text-case: none; // A tighter-spaced version of medium headline style.
223
- @dt-typography-headline-lg-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Large text style for headlines to attract attention.
179
+ @dt-typography-headline-lg-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Large text style for headlines to attract attention.
224
180
  @dt-typography-headline-lg-font-weight: 700; // Large text style for headlines to attract attention.
225
181
  @dt-typography-headline-lg-line-height: 1.6; // Large text style for headlines to attract attention.
226
182
  @dt-typography-headline-lg-font-size: 28px; // Large text style for headlines to attract attention.
227
183
  @dt-typography-headline-lg-text-case: none; // Large text style for headlines to attract attention.
228
- @dt-typography-headline-lg-soft-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of large headline style.
184
+ @dt-typography-headline-lg-soft-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight version of large headline style.
229
185
  @dt-typography-headline-lg-soft-font-weight: 500; // A softer font weight version of large headline style.
230
186
  @dt-typography-headline-lg-soft-line-height: 1.6; // A softer font weight version of large headline style.
231
187
  @dt-typography-headline-lg-soft-font-size: 28px; // A softer font weight version of large headline style.
232
188
  @dt-typography-headline-lg-soft-text-case: none; // A softer font weight version of large headline style.
233
- @dt-typography-headline-lg-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of large body style.
189
+ @dt-typography-headline-lg-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of large body style.
234
190
  @dt-typography-headline-lg-compact-font-weight: 700; // A tighter-spaced version of large body style.
235
191
  @dt-typography-headline-lg-compact-line-height: 1.4; // A tighter-spaced version of large body style.
236
192
  @dt-typography-headline-lg-compact-font-size: 28px; // A tighter-spaced version of large body style.
237
193
  @dt-typography-headline-lg-compact-text-case: none; // A tighter-spaced version of large body style.
238
- @dt-typography-headline-lg-soft-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter spaced version of large headline style.
194
+ @dt-typography-headline-lg-soft-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A softer font weight, tighter spaced version of large headline style.
239
195
  @dt-typography-headline-lg-soft-compact-font-weight: 500; // A softer font weight, tighter spaced version of large headline style.
240
196
  @dt-typography-headline-lg-soft-compact-line-height: 1.4; // A softer font weight, tighter spaced version of large headline style.
241
197
  @dt-typography-headline-lg-soft-compact-font-size: 28px; // A softer font weight, tighter spaced version of large headline style.
242
198
  @dt-typography-headline-lg-soft-compact-text-case: none; // A softer font weight, tighter spaced version of large headline style.
243
- @dt-typography-headline-xl-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Extra large text style for high importance headlines.
199
+ @dt-typography-headline-xl-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Extra large text style for high importance headlines.
244
200
  @dt-typography-headline-xl-font-weight: 500; // Extra large text style for high importance headlines.
245
201
  @dt-typography-headline-xl-line-height: 1.2; // Extra large text style for high importance headlines.
246
202
  @dt-typography-headline-xl-font-size: 41px; // Extra large text style for high importance headlines.
247
203
  @dt-typography-headline-xl-text-case: none; // Extra large text style for high importance headlines.
248
- @dt-typography-headline-xl-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra large headline style.
204
+ @dt-typography-headline-xl-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra large headline style.
249
205
  @dt-typography-headline-xl-compact-font-weight: 500; // A tighter-spaced version of extra large headline style.
250
206
  @dt-typography-headline-xl-compact-line-height: 1; // A tighter-spaced version of extra large headline style.
251
207
  @dt-typography-headline-xl-compact-font-size: 41px; // A tighter-spaced version of extra large headline style.
252
208
  @dt-typography-headline-xl-compact-text-case: none; // A tighter-spaced version of extra large headline style.
253
- @dt-typography-headline-xxl-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Largest text style for extra extra large content.
209
+ @dt-typography-headline-xxl-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Largest text style for extra extra large content.
254
210
  @dt-typography-headline-xxl-font-weight: 500; // Largest text style for extra extra large content.
255
211
  @dt-typography-headline-xxl-line-height: 1.2; // Largest text style for extra extra large content.
256
212
  @dt-typography-headline-xxl-font-size: 51px; // Largest text style for extra extra large content.
257
213
  @dt-typography-headline-xxl-text-case: none; // Largest text style for extra extra large content.
258
- @dt-typography-headline-xxl-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra extra large headline style.
214
+ @dt-typography-headline-xxl-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of extra extra large headline style.
259
215
  @dt-typography-headline-xxl-compact-font-weight: 500; // A tighter-spaced version of extra extra large headline style.
260
216
  @dt-typography-headline-xxl-compact-line-height: 1; // A tighter-spaced version of extra extra large headline style.
261
217
  @dt-typography-headline-xxl-compact-font-size: 51px; // A tighter-spaced version of extra extra large headline style.
262
218
  @dt-typography-headline-xxl-compact-text-case: none; // A tighter-spaced version of extra extra large headline style.
263
- @dt-typography-label-md-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for labels, providing clear identification and categorization.
219
+ @dt-typography-label-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for labels, providing clear identification and categorization.
264
220
  @dt-typography-label-md-font-weight: 600; // Base default medium-sized text style for labels, providing clear identification and categorization.
265
221
  @dt-typography-label-md-line-height: 1.6; // Base default medium-sized text style for labels, providing clear identification and categorization.
266
222
  @dt-typography-label-md-font-size: 16px; // Base default medium-sized text style for labels, providing clear identification and categorization.
267
223
  @dt-typography-label-md-text-case: none; // Base default medium-sized text style for labels, providing clear identification and categorization.
268
- @dt-typography-label-md-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium label style.
224
+ @dt-typography-label-md-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of medium label style.
269
225
  @dt-typography-label-md-compact-font-weight: 600; // A tighter-spaced version of medium label style.
270
226
  @dt-typography-label-md-compact-line-height: 1.4; // A tighter-spaced version of medium label style.
271
227
  @dt-typography-label-md-compact-font-size: 16px; // A tighter-spaced version of medium label style.
272
228
  @dt-typography-label-md-compact-text-case: none; // A tighter-spaced version of medium label style.
273
- @dt-typography-label-md-plain-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of medium label style.
229
+ @dt-typography-label-md-plain-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of medium label style.
274
230
  @dt-typography-label-md-plain-font-weight: 400; // A non-bold version of medium label style.
275
231
  @dt-typography-label-md-plain-line-height: 1.6; // A non-bold version of medium label style.
276
232
  @dt-typography-label-md-plain-font-size: 16px; // A non-bold version of medium label style.
277
233
  @dt-typography-label-md-plain-text-case: none; // A non-bold version of medium label style.
278
- @dt-typography-label-md-plain-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of medium label style.
234
+ @dt-typography-label-md-plain-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of medium label style.
279
235
  @dt-typography-label-md-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of medium label style.
280
236
  @dt-typography-label-md-plain-compact-line-height: 1.4; // A non-bolded, tighter-spaced version of medium label style.
281
237
  @dt-typography-label-md-plain-compact-font-size: 16px; // A non-bolded, tighter-spaced version of medium label style.
282
238
  @dt-typography-label-md-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of medium label style.
283
- @dt-typography-label-sm-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
239
+ @dt-typography-label-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
284
240
  @dt-typography-label-sm-font-weight: 600; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
285
241
  @dt-typography-label-sm-line-height: 1.4; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
286
242
  @dt-typography-label-sm-font-size: 12px; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
287
243
  @dt-typography-label-sm-text-case: none; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
288
- @dt-typography-label-sm-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small label style.
244
+ @dt-typography-label-sm-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A tighter-spaced version of small label style.
289
245
  @dt-typography-label-sm-compact-font-weight: 600; // A tighter-spaced version of small label style.
290
246
  @dt-typography-label-sm-compact-line-height: 1.2; // A tighter-spaced version of small label style.
291
247
  @dt-typography-label-sm-compact-font-size: 12px; // A tighter-spaced version of small label style.
292
248
  @dt-typography-label-sm-compact-text-case: none; // A tighter-spaced version of small label style.
293
- @dt-typography-label-sm-plain-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of small label style.
249
+ @dt-typography-label-sm-plain-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bold version of small label style.
294
250
  @dt-typography-label-sm-plain-font-weight: 400; // A non-bold version of small label style.
295
251
  @dt-typography-label-sm-plain-line-height: 1.4; // A non-bold version of small label style.
296
252
  @dt-typography-label-sm-plain-font-size: 12px; // A non-bold version of small label style.
297
253
  @dt-typography-label-sm-plain-text-case: none; // A non-bold version of small label style.
298
- @dt-typography-label-sm-plain-compact-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of small label style.
254
+ @dt-typography-label-sm-plain-compact-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // A non-bolded, tighter-spaced version of small label style.
299
255
  @dt-typography-label-sm-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of small label style.
300
256
  @dt-typography-label-sm-plain-compact-line-height: 1.2; // A non-bolded, tighter-spaced version of small label style.
301
257
  @dt-typography-label-sm-plain-compact-font-size: 12px; // A non-bolded, tighter-spaced version of small label style.
302
258
  @dt-typography-label-sm-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of small label style.
303
- @dt-typography-helper-md-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for supplementary contextual information.
259
+ @dt-typography-helper-md-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Base default medium-sized text style for supplementary contextual information.
304
260
  @dt-typography-helper-md-font-weight: 400; // Base default medium-sized text style for supplementary contextual information.
305
261
  @dt-typography-helper-md-line-height: 1.4; // Base default medium-sized text style for supplementary contextual information.
306
262
  @dt-typography-helper-md-font-size: 16px; // Base default medium-sized text style for supplementary contextual information.
307
263
  @dt-typography-helper-md-text-case: none; // Base default medium-sized text style for supplementary contextual information.
308
- @dt-typography-helper-sm-font-family: "Season Mix", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
264
+ @dt-typography-helper-sm-font-family: Archivo, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI Adjusted", "Segoe UI", SFMono, "Helvetica Neue", Cantarell, Ubuntu, Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
309
265
  @dt-typography-helper-sm-font-weight: 400; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
310
266
  @dt-typography-helper-sm-line-height: 1.2; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
311
267
  @dt-typography-helper-sm-font-size: 12px; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
@@ -363,80 +319,78 @@
363
319
  @dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
364
320
  @dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
365
321
  @dt-inputs-color-foreground-default: #E6E6E6;
366
- @dt-inputs-color-foreground-placeholder: #B0B0B0;
367
- @dt-inputs-color-foreground-disabled: #B0B0B0;
322
+ @dt-inputs-color-foreground-placeholder: #AAAAAA;
323
+ @dt-inputs-color-foreground-disabled: #AAAAAA;
368
324
  @dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
369
- @dt-inputs-color-border-hover: hsl(0 0% 100% / 0.36);
370
- @dt-inputs-color-border-focus: #3B96DF;
371
- @dt-inputs-color-border-critical: #FF716F;
372
- @dt-inputs-color-border-success: #D1FF76;
325
+ @dt-inputs-color-border-focus: #51A0FE;
326
+ @dt-inputs-color-border-critical: #FF8585;
327
+ @dt-inputs-color-border-success: #B0FFA3;
373
328
  @dt-inputs-color-border-warning: #FFDB80;
374
329
  @dt-inputs-color-border-disabled: transparent;
375
- @dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.03);
376
- @dt-inputs-color-background-focus: #171717;
377
- @dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.18);
378
- @dt-action-color-foreground-base-default: #BBA6FC;
379
- @dt-action-color-foreground-base-hover: #D3BCFF;
380
- @dt-action-color-foreground-base-active: #D3BCFF;
381
- @dt-action-color-foreground-base-primary-default: #000000;
382
- @dt-action-color-foreground-critical-default: #FF716F;
383
- @dt-action-color-foreground-critical-hover: #FFABA4;
384
- @dt-action-color-foreground-critical-active: #FFABA4;
385
- @dt-action-color-foreground-critical-primary-default: #000000;
330
+ @dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.06);
331
+ @dt-inputs-color-background-focus: hsl(0 0% 90.2% / 0.03);
332
+ @dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.15);
333
+ @dt-action-color-foreground-base-default: #AB7EFF;
334
+ @dt-action-color-foreground-base-hover: lch(69.4 56.1 303);
335
+ @dt-action-color-foreground-base-active: lch(69.4 56.1 303);
336
+ @dt-action-color-foreground-base-primary-default: #ffffff;
337
+ @dt-action-color-foreground-critical-default: #FF8585;
338
+ @dt-action-color-foreground-critical-hover: lch(77.4 39.2 25.4);
339
+ @dt-action-color-foreground-critical-active: lch(77.4 39.2 25.4);
340
+ @dt-action-color-foreground-critical-primary-default: #ffffff;
386
341
  @dt-action-color-foreground-inverted-default: #000000;
387
342
  @dt-action-color-foreground-inverted-hover: #000000;
388
343
  @dt-action-color-foreground-inverted-active: #000000;
389
- @dt-action-color-foreground-inverted-primary-default: #BBA6FC;
390
- @dt-action-color-foreground-inverted-primary-hover: #D3BCFF;
391
- @dt-action-color-foreground-inverted-primary-active: #D3BCFF;
392
- @dt-action-color-foreground-muted-default: #c7c7c7;
393
- @dt-action-color-foreground-muted-hover: #E6E6E6;
394
- @dt-action-color-foreground-muted-active: #E6E6E6;
395
- @dt-action-color-foreground-disabled-default: #B0B0B0;
396
- @dt-action-color-foreground-positive-default: #AEFB3C;
397
- @dt-action-color-foreground-positive-hover: #DBFFA9;
398
- @dt-action-color-foreground-positive-active: #DBFFA9;
399
- @dt-action-color-foreground-positive-primary-default: #000000;
344
+ @dt-action-color-foreground-inverted-primary-default: #AB7EFF;
345
+ @dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
346
+ @dt-action-color-foreground-inverted-primary-active: #DAC7FF;
347
+ @dt-action-color-foreground-muted-default: #C2C2C2;
348
+ @dt-action-color-foreground-muted-hover: #C2C2C2;
349
+ @dt-action-color-foreground-muted-active: #C2C2C2;
350
+ @dt-action-color-foreground-disabled-default: #AAAAAA;
351
+ @dt-action-color-foreground-positive-default: #B0FFA3;
352
+ @dt-action-color-foreground-positive-hover: hsl(112 100% 67.2%);
353
+ @dt-action-color-foreground-positive-active: hsl(112 100% 67.2%);
354
+ @dt-action-color-foreground-positive-primary-default: #ffffff;
400
355
  @dt-action-color-background-base-default: transparent;
401
- @dt-action-color-background-base-hover: hsl(253 95.9% 71.6% / 0.2);
402
- @dt-action-color-background-base-active: hsl(253 95.9% 71.6% / 0.3);
403
- @dt-action-color-background-base-primary-default: #BBA6FC;
404
- @dt-action-color-background-base-primary-hover: #D3BCFF;
405
- @dt-action-color-background-base-primary-active: #BBA6FC;
356
+ @dt-action-color-background-base-hover: hsl(261 100% 74.7% / 0.1);
357
+ @dt-action-color-background-base-active: hsl(261 100% 74.7% / 0.2);
358
+ @dt-action-color-background-base-primary-default: #7C52FF;
359
+ @dt-action-color-background-base-primary-hover: hsl(255 100% 63.4%);
360
+ @dt-action-color-background-base-primary-active: hsl(255 100% 60.8%);
406
361
  @dt-action-color-background-critical-default: transparent;
407
- @dt-action-color-background-critical-hover: hsl(343 72.9% 33.3% / 0.2);
408
- @dt-action-color-background-critical-active: hsl(343 72.9% 50% / 0.2);
409
- @dt-action-color-background-critical-primary-default: #FF716F;
410
- @dt-action-color-background-critical-primary-hover: #FFABA4;
411
- @dt-action-color-background-critical-primary-active: #FF716F;
362
+ @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.2);
363
+ @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.3);
364
+ @dt-action-color-background-critical-primary-default: #EC0E0E;
365
+ @dt-action-color-background-critical-primary-hover: hsl(0 88.8% 45.1%);
366
+ @dt-action-color-background-critical-primary-active: hsl(0 88.8% 43.1%);
412
367
  @dt-action-color-background-inverted-default: transparent;
413
- @dt-action-color-background-inverted-hover: hsl(0 0% 0% / 0.11);
414
- @dt-action-color-background-inverted-active: hsl(0 0% 0% / 0.18);
415
- @dt-action-color-background-inverted-primary-default: #171717;
416
- @dt-action-color-background-inverted-primary-hover: #1D0155;
368
+ @dt-action-color-background-inverted-hover: hsl(0 0% 12% / 0.15);
369
+ @dt-action-color-background-inverted-active: hsl(0 0% 12% / 0.3);
370
+ @dt-action-color-background-inverted-primary-default: hsl(0 0% 12%);
371
+ @dt-action-color-background-inverted-primary-hover: #10022C;
417
372
  @dt-action-color-background-inverted-primary-active: #3A1D95;
418
373
  @dt-action-color-background-muted-default: transparent;
419
- @dt-action-color-background-muted-hover: hsl(0 0% 90.2% / 0.18);
420
- @dt-action-color-background-muted-active: hsl(0 0% 90.2% / 0.3);
421
- @dt-action-color-background-disabled-default: hsl(0 0% 90.2% / 0.3);
374
+ @dt-action-color-background-muted-hover: hsl(0 0% 83.1% / 0.1);
375
+ @dt-action-color-background-muted-active: hsl(0 0% 83.1% / 0.16);
376
+ @dt-action-color-background-disabled-default: #3A3A3A;
422
377
  @dt-action-color-background-positive-default: transparent;
423
- @dt-action-color-background-positive-hover: hsl(155 100% 15.5% / 0.28);
424
- @dt-action-color-background-positive-active: hsl(155 100% 36.6% / 0.28);
425
- @dt-action-color-background-positive-primary-default: #AEFB3C; // Postive, accepting, or success actions.
426
- @dt-action-color-background-positive-primary-hover: #D1FF76;
427
- @dt-action-color-background-positive-primary-active: #AEFB3C;
428
- @dt-action-color-border-base-outlined-default: #BBA6FC;
429
- @dt-action-color-border-critical-outlined-default: #FF716F;
378
+ @dt-action-color-background-positive-hover: hsl(136 59.1% 66.9%);
379
+ @dt-action-color-background-positive-active: hsl(112 100% 82% / 0.08);
380
+ @dt-action-color-background-positive-primary-default: #B0FFA3;
381
+ @dt-action-color-background-positive-primary-hover: hsl(112 100% 73.8%);
382
+ @dt-action-color-background-positive-primary-active: hsl(112 100% 68.8%);
383
+ @dt-action-color-border-base-outlined-default: #AB7EFF;
384
+ @dt-action-color-border-critical-outlined-default: #FF8585;
430
385
  @dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
431
386
  @dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
432
- @dt-action-color-border-positive-outlined-default: #D1FF76;
433
387
  @dt-theme-color-base: #E6E6E6;
434
- @dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
435
- @dt-theme-topbar-color-background: #1f1f1f;
388
+ @dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.75);
389
+ @dt-theme-topbar-color-background: #262626;
436
390
  @dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
437
391
  @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
438
392
  @dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
439
- @dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
393
+ @dt-theme-topbar-field-color-background-hover: hsl(0 0% 10.1%);
440
394
  @dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
441
395
  @dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
442
396
  @dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
@@ -445,31 +399,31 @@
445
399
  @dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
446
400
  @dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
447
401
  @dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
448
- @dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
402
+ @dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.75);
449
403
  @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
450
404
  @dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
451
405
  @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
452
406
  @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
453
407
  @dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
454
- @dt-theme-sidebar-color-foreground: #c7c7c7;
408
+ @dt-theme-sidebar-color-foreground: #C2C2C2;
455
409
  @dt-theme-sidebar-color-foreground-unread: #E6E6E6;
456
- @dt-theme-sidebar-color-background: #1f1f1f;
457
- @dt-theme-sidebar-icon-color-foreground: #c7c7c7;
458
- @dt-theme-sidebar-status-color-foreground: #B0B0B0;
410
+ @dt-theme-sidebar-color-background: #262626;
411
+ @dt-theme-sidebar-icon-color-foreground: #C2C2C2;
412
+ @dt-theme-sidebar-status-color-foreground: #AAAAAA;
459
413
  @dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
460
- @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
461
- @dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
414
+ @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.18);
415
+ @dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.24);
462
416
  @dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
463
- @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
464
- @dt-theme-sidebar-section-color-foreground: #B0B0B0;
465
- @dt-theme-presence-color-background-available: #84EE0B;
466
- @dt-theme-presence-color-background-busy-unavailable: #FF415B;
467
- @dt-theme-presence-color-background-busy: #FFBD48;
417
+ @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.2);
418
+ @dt-theme-sidebar-section-color-foreground: #AAAAAA;
419
+ @dt-theme-presence-color-background-available: #B0FFA3;
420
+ @dt-theme-presence-color-background-busy-unavailable: #FF8585;
421
+ @dt-theme-presence-color-background-busy: #F6AB3C;
468
422
  @dt-theme-presence-color-background-offline: #ffffff;
469
- @dt-theme-mention-color-foreground: #000000;
423
+ @dt-theme-mention-color-foreground: #ffffff;
470
424
  @dt-theme-mention-color-foreground-strong: #000000;
471
- @dt-theme-mention-color-background: #BBA6FC;
472
- @dt-theme-mention-color-background-strong: #F5F0FF;
425
+ @dt-theme-mention-color-background: #7C52FF;
426
+ @dt-theme-mention-color-background-strong: #DAC7FF;
473
427
  @dt-avatar-color-foreground: #000000;
474
428
  @dt-avatar-color-background-100: #1aa340;
475
429
  @dt-avatar-color-background-200: #aaff83;
@@ -490,29 +444,25 @@
490
444
  @dt-avatar-color-background-1700: #ffd646;
491
445
  @dt-avatar-color-background-1800: #f1dab7;
492
446
  @dt-avatar-color-background-000: #e0e0e0;
493
- @dt-badge-color-background-default: hsl(0 0% 90.2% / 0.18);
494
- @dt-badge-color-background-info: #003165;
495
- @dt-badge-color-background-success: #004F2E;
496
- @dt-badge-color-background-warning: #533204;
497
- @dt-badge-color-background-critical: #640823;
498
- @dt-badge-color-background-bulletin: #BBA6FC;
499
- @dt-badge-color-background-bulletin-subtle: #3A1D95;
500
- @dt-badge-color-background-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
501
- @dt-badge-color-foreground-default: #ffffff;
502
- @dt-badge-color-foreground-bulletin: #000000;
503
- @dt-badge-color-foreground-bulletin-subtle: #D3BCFF;
504
- @dt-badge-color-foreground-ai: #ffffff;
447
+ @dt-badge-color-background-default: hsl(0 0% 90.2% / 0.15);
448
+ @dt-badge-color-background-info: #01326D;
449
+ @dt-badge-color-background-success: #124620;
450
+ @dt-badge-color-background-warning: #815008;
451
+ @dt-badge-color-background-critical: #5B0505;
452
+ @dt-badge-color-background-bulletin: #7C52FF;
453
+ @dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
454
+ @dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
455
+ @dt-badge-color-foreground-default: #E6E6E6;
456
+ @dt-badge-color-foreground-bulletin: #ffffff;
457
+ @dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
505
458
  @dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
506
459
  @dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
507
460
  @dt-checkbox-size-width: 1.6rem;
508
461
  @dt-checkbox-size-height: 1.6rem;
509
462
  @dt-checkbox-size-radius: 0.4rem;
510
463
  @dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
511
- @dt-checkbox-color-border-unchecked-hover: hsl(0 0% 100% / 0.5);
512
- @dt-checkbox-color-border-checked: #BBA6FC;
513
- @dt-checkbox-color-background-checked: #BBA6FC;
514
- @dt-checkbox-color-foreground-default: transparent;
515
- @dt-checkbox-color-foreground-checked: #000000;
464
+ @dt-checkbox-color-border-checked: #7C52FF;
465
+ @dt-checkbox-color-background-checked: #7C52FF;
516
466
  @dt-icon-size-100: 12px;
517
467
  @dt-icon-size-200: 14px;
518
468
  @dt-icon-size-300: 18px;
@@ -533,8 +483,5 @@
533
483
  @dt-radio-size-height: 1.6rem;
534
484
  @dt-radio-size-radius: 50%;
535
485
  @dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
536
- @dt-radio-color-border-unchecked-hover: hsl(0 0% 100% / 0.5);
537
- @dt-radio-color-border-checked: #BBA6FC;
538
- @dt-radio-color-background-checked: #BBA6FC;
539
- @dt-radio-color-foreground-default: transparent;
540
- @dt-radio-color-foreground-checked: #000000;
486
+ @dt-radio-color-border-checked: #7C52FF;
487
+ @dt-radio-color-background-checked: #7C52FF;