@dialpad/dialtone 9.104.2 → 9.105.0-rebrand-2025-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/README.md +0 -1
  2. package/dist/css/dialtone-default-theme.css +6306 -1552
  3. package/dist/css/dialtone-default-theme.min.css +1 -1
  4. package/dist/css/dialtone-docs.json +1 -1
  5. package/dist/css/dialtone.css +1848 -197
  6. package/dist/css/dialtone.min.css +1 -1
  7. package/dist/css/fonts/SeasonMix-Bold.woff2 +0 -0
  8. package/dist/css/fonts/SeasonMix-Regular.woff2 +0 -0
  9. package/dist/css/fonts/SeasonMix-SemiBold.woff2 +0 -0
  10. package/dist/css/tokens/tokens-base-dark.css +526 -161
  11. package/dist/css/tokens/tokens-base-deca-dark.css +98 -48
  12. package/dist/css/tokens/tokens-base-deca-light.css +94 -44
  13. package/dist/css/tokens/tokens-base-light.css +493 -128
  14. package/dist/css/tokens/tokens-debug-base.css +368 -3
  15. package/dist/css/tokens/tokens-debug-dp.css +1027 -669
  16. package/dist/css/tokens/tokens-deca-dark.css +797 -768
  17. package/dist/css/tokens/tokens-deca-light.css +722 -693
  18. package/dist/css/tokens/tokens-dp-dark.css +1272 -914
  19. package/dist/css/tokens/tokens-dp-light.css +1331 -973
  20. package/dist/css/tokens/tokens-expressive-dark.css +1272 -914
  21. package/dist/css/tokens/tokens-expressive-light.css +1328 -970
  22. package/dist/css/tokens/tokens-expressive-sm-dark.css +1272 -914
  23. package/dist/css/tokens/tokens-expressive-sm-light.css +1328 -970
  24. package/dist/css/tokens/tokens-tmo-dark.css +1258 -900
  25. package/dist/css/tokens/tokens-tmo-light.css +1283 -925
  26. package/dist/css/tokens-docs.json +1 -1
  27. package/dist/tokens/css/tokens-base-dark.css +526 -161
  28. package/dist/tokens/css/tokens-base-deca-dark.css +98 -48
  29. package/dist/tokens/css/tokens-base-deca-light.css +94 -44
  30. package/dist/tokens/css/tokens-base-light.css +493 -128
  31. package/dist/tokens/css/tokens-debug-base.css +368 -3
  32. package/dist/tokens/css/tokens-debug-dp.css +1027 -669
  33. package/dist/tokens/css/tokens-deca-dark.css +797 -768
  34. package/dist/tokens/css/tokens-deca-light.css +722 -693
  35. package/dist/tokens/css/tokens-dp-dark.css +1272 -914
  36. package/dist/tokens/css/tokens-dp-light.css +1331 -973
  37. package/dist/tokens/css/tokens-expressive-dark.css +1272 -914
  38. package/dist/tokens/css/tokens-expressive-light.css +1328 -970
  39. package/dist/tokens/css/tokens-expressive-sm-dark.css +1272 -914
  40. package/dist/tokens/css/tokens-expressive-sm-light.css +1328 -970
  41. package/dist/tokens/css/tokens-tmo-dark.css +1258 -900
  42. package/dist/tokens/css/tokens-tmo-light.css +1283 -925
  43. package/dist/tokens/doc.json +105450 -85189
  44. package/dist/tokens/less/tokens-base-dark.less +99 -46
  45. package/dist/tokens/less/tokens-base-deca-dark.less +23 -15
  46. package/dist/tokens/less/tokens-base-deca-light.less +22 -14
  47. package/dist/tokens/less/tokens-base-light.less +90 -37
  48. package/dist/tokens/less/tokens-deca-dark.less +187 -182
  49. package/dist/tokens/less/tokens-deca-light.less +173 -168
  50. package/dist/tokens/less/tokens-dp-dark.less +238 -186
  51. package/dist/tokens/less/tokens-dp-light.less +237 -185
  52. package/dist/tokens/less/tokens-expressive-dark.less +261 -209
  53. package/dist/tokens/less/tokens-expressive-light.less +260 -208
  54. package/dist/tokens/less/tokens-expressive-sm-dark.less +261 -209
  55. package/dist/tokens/less/tokens-expressive-sm-light.less +260 -208
  56. package/dist/tokens/less/tokens-tmo-dark.less +236 -184
  57. package/dist/tokens/less/tokens-tmo-light.less +220 -168
  58. package/dist/tokens/themes/chunks/tokens-base-dark-BjqCt8ke.js +1 -0
  59. package/dist/tokens/themes/chunks/tokens-base-dark-DtZ_Inhl.js +4 -0
  60. package/dist/tokens/themes/chunks/tokens-base-light-CIQSO1H9.js +4 -0
  61. package/dist/tokens/themes/chunks/tokens-base-light-Cll0VrKT.js +1 -0
  62. package/dist/tokens/themes/debug.cjs +1 -1
  63. package/dist/tokens/themes/debug.js +1 -1
  64. package/dist/tokens/themes/dp-dark.cjs +1 -1
  65. package/dist/tokens/themes/dp-dark.js +2 -2
  66. package/dist/tokens/themes/dp-deca-dark.cjs +1 -1
  67. package/dist/tokens/themes/dp-deca-dark.js +1 -1
  68. package/dist/tokens/themes/dp-deca-light.cjs +1 -1
  69. package/dist/tokens/themes/dp-deca-light.js +2 -2
  70. package/dist/tokens/themes/dp-light.cjs +1 -1
  71. package/dist/tokens/themes/dp-light.js +2 -2
  72. package/dist/tokens/themes/expressive-dark.cjs +1 -1
  73. package/dist/tokens/themes/expressive-dark.js +3 -3
  74. package/dist/tokens/themes/expressive-light.cjs +1 -1
  75. package/dist/tokens/themes/expressive-light.js +3 -3
  76. package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
  77. package/dist/tokens/themes/expressive-sm-dark.js +3 -3
  78. package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
  79. package/dist/tokens/themes/expressive-sm-light.js +3 -3
  80. package/dist/tokens/themes/tmo-dark.cjs +1 -1
  81. package/dist/tokens/themes/tmo-dark.js +2 -2
  82. package/dist/tokens/themes/tmo-light.cjs +1 -1
  83. package/dist/tokens/themes/tmo-light.js +2 -2
  84. package/dist/tokens/tokens-base-dark.json +99 -46
  85. package/dist/tokens/tokens-base-deca-dark.json +20 -12
  86. package/dist/tokens/tokens-base-deca-light.json +19 -11
  87. package/dist/tokens/tokens-base-light.json +90 -37
  88. package/dist/tokens/tokens-deca-dark.json +184 -179
  89. package/dist/tokens/tokens-deca-light.json +171 -166
  90. package/dist/tokens/tokens-dp-dark.json +223 -171
  91. package/dist/tokens/tokens-dp-light.json +234 -182
  92. package/dist/tokens/tokens-expressive-dark.json +246 -194
  93. package/dist/tokens/tokens-expressive-light.json +257 -205
  94. package/dist/tokens/tokens-expressive-sm-dark.json +246 -194
  95. package/dist/tokens/tokens-expressive-sm-light.json +257 -205
  96. package/dist/tokens/tokens-tmo-dark.json +221 -169
  97. package/dist/tokens/tokens-tmo-light.json +211 -159
  98. package/dist/vue2/components/pagination/pagination.vue.cjs +2 -2
  99. package/dist/vue2/components/pagination/pagination.vue.cjs.map +1 -1
  100. package/dist/vue2/components/pagination/pagination.vue.js +2 -2
  101. package/dist/vue2/components/pagination/pagination.vue.js.map +1 -1
  102. package/dist/vue2/components/popover/popover.vue.cjs +2 -2
  103. package/dist/vue2/components/popover/popover.vue.cjs.map +1 -1
  104. package/dist/vue2/components/popover/popover.vue.js +2 -2
  105. package/dist/vue2/components/popover/popover.vue.js.map +1 -1
  106. package/dist/vue2/components/tab/tab_panel.vue.cjs +1 -1
  107. package/dist/vue2/components/tab/tab_panel.vue.cjs.map +1 -1
  108. package/dist/vue2/components/tab/tab_panel.vue.js +1 -1
  109. package/dist/vue2/components/tab/tab_panel.vue.js.map +1 -1
  110. package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.cjs.map +1 -1
  111. package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.js.map +1 -1
  112. package/dist/vue2/types/components/tab/tab_panel.vue.d.ts.map +1 -1
  113. package/dist/vue3/components/pagination/pagination.vue.cjs +2 -2
  114. package/dist/vue3/components/pagination/pagination.vue.cjs.map +1 -1
  115. package/dist/vue3/components/pagination/pagination.vue.js +2 -2
  116. package/dist/vue3/components/pagination/pagination.vue.js.map +1 -1
  117. package/dist/vue3/components/popover/popover.vue.cjs +2 -2
  118. package/dist/vue3/components/popover/popover.vue.cjs.map +1 -1
  119. package/dist/vue3/components/popover/popover.vue.js +2 -2
  120. package/dist/vue3/components/popover/popover.vue.js.map +1 -1
  121. package/dist/vue3/components/tab/tab_panel.vue.cjs +1 -2
  122. package/dist/vue3/components/tab/tab_panel.vue.cjs.map +1 -1
  123. package/dist/vue3/components/tab/tab_panel.vue.js +1 -2
  124. package/dist/vue3/components/tab/tab_panel.vue.js.map +1 -1
  125. package/dist/vue3/types/components/tab/tab_panel.vue.d.ts.map +1 -1
  126. package/package.json +5 -5
  127. package/dist/css/fonts/Archivo-Bold.woff2 +0 -0
  128. package/dist/css/fonts/Archivo-Regular.woff2 +0 -0
  129. package/dist/css/fonts/Archivo-SemiBold.woff2 +0 -0
  130. package/dist/css/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
  131. package/dist/css/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
  132. package/dist/css/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
  133. package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +0 -4
  134. package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +0 -1
  135. package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +0 -4
  136. package/dist/tokens/themes/chunks/tokens-base-light-DWLxg2cD.js +0 -1
@@ -8,260 +8,304 @@
8
8
  @dt-font-size-500: 65px; // extra large / xxl
9
9
  @dt-font-size-600: 105px;
10
10
  @dt-size-border-focus: 0.3rem;
11
- @dt-color-foreground-primary: #000000; // Default text color throughout the UI.
11
+ @dt-color-foreground-primary: #1C1C1C; // Default text color throughout the UI.
12
12
  @dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
13
- @dt-color-foreground-tertiary: #555555; // 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% 13.3% / 0.5);
13
+ @dt-color-foreground-tertiary: #535353; // 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% 0% / 0.5);
15
15
  @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
16
16
  @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
17
- @dt-color-foreground-critical: #EC0E0E; // Expresses an error, danger, or otherwise critical state.
18
- @dt-color-foreground-critical-strong: #B70B0B; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
19
- @dt-color-foreground-success: #1AA340; // Indicates a positive state.
20
- @dt-color-foreground-success-strong: #124620; // Indicates a strong positive state on surfaces that require a stronger contrast.
17
+ @dt-color-foreground-critical: #FF1356; // Expresses an error, danger, or otherwise critical state.
18
+ @dt-color-foreground-critical-strong: #AF0032; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
19
+ @dt-color-foreground-success: #008E52; // Indicates a positive state.
20
+ @dt-color-foreground-success-strong: #004F2E; // Indicates a strong positive state on surfaces that require a stronger contrast.
21
21
  @dt-color-foreground-warning: #815008; // Indicates information that requires user’s attention and further action may be necessary.
22
- @dt-color-foreground-primary-inverted: #ffffff; // Primary text that sits on high-contrast surfaces or backgrounds.
22
+ @dt-color-foreground-primary-inverted: #F9F9F9; // Primary text that sits on high-contrast surfaces or backgrounds.
23
23
  @dt-color-foreground-secondary-inverted: #E9E9E9; // Secondary text color that sits on high-contrast surfaces or backgrounds.
24
24
  @dt-color-foreground-tertiary-inverted: #D2D2D2; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
25
- @dt-color-foreground-muted-inverted: hsl(0 0% 91.4% / 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: #FF8585; // Critical text that sits on high-contrast surfaces or backgrounds
29
- @dt-color-foreground-critical-strong-inverted: hsl(0 100% 82.1%); // Critical strong text that sits on high-contrast surfaces or backgrounds
30
- @dt-color-foreground-success-inverted: #B0FFA3; // Success text that sits on high-contrast surfaces or backgrounds
31
- @dt-color-foreground-success-strong-inverted: hsl(112 100% 90.1%); // Success strong text that sits on high-contrast surfaces or backgrounds
32
- @dt-color-foreground-warning-inverted: #FFF4CC; // Warning text that sits on high-contrast surfaces or backgrounds
25
+ @dt-color-foreground-muted-inverted: hsl(0 0% 97.6% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
26
+ @dt-color-foreground-placeholder-inverted: #AAAAAA; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
27
+ @dt-color-foreground-disabled-inverted: #AAAAAA; // Disabled text color that sits on high-contrast surfaces or backgrounds.
28
+ @dt-color-foreground-critical-inverted: #FF716F; // Critical text that sits on high-contrast surfaces or backgrounds
29
+ @dt-color-foreground-critical-strong-inverted: #FFABA4; // Critical strong text that sits on high-contrast surfaces or backgrounds
30
+ @dt-color-foreground-success-inverted: #AEFB3C; // Success text that sits on high-contrast surfaces or backgrounds
31
+ @dt-color-foreground-success-strong-inverted: #DBFFA9; // Success strong text that sits on high-contrast surfaces or backgrounds
32
+ @dt-color-foreground-warning-inverted: #FF9E0E; // Warning text that sits on high-contrast surfaces or backgrounds
33
33
  @dt-color-link-primary: #7C52FF;
34
- @dt-color-link-critical: #EC0E0E;
35
- @dt-color-link-success: #1AA340; // positive
34
+ @dt-color-link-primary-hover: #5023DD;
35
+ @dt-color-link-critical: #FF1356;
36
+ @dt-color-link-critical-hover: #AF0032;
37
+ @dt-color-link-success: #008E52; // positive
38
+ @dt-color-link-success-hover: #004F2E;
36
39
  @dt-color-link-warning: #815008;
40
+ @dt-color-link-warning-hover: #533204;
37
41
  @dt-color-link-muted: #3A3A3A;
42
+ @dt-color-link-muted-hover: #1C1C1C;
38
43
  @dt-color-link-disabled: #808080;
39
- @dt-color-link-primary-inverted: #AB7EFF;
40
- @dt-color-link-critical-inverted: #FF8585;
41
- @dt-color-link-success-inverted: #B0FFA3;
42
- @dt-color-link-warning-inverted: #FFF4CC;
43
- @dt-color-link-muted-inverted: #E9E9E9;
44
- @dt-color-link-disabled-inverted: #808080;
45
- @dt-color-link-primary-hover: #3A1D95;
46
- @dt-color-link-critical-hover: #B70B0B;
47
- @dt-color-link-success-hover: #124620;
48
- @dt-color-link-warning-hover: #555555;
49
- @dt-color-link-muted-hover: #000000;
50
44
  @dt-color-link-disabled-hover: #808080;
51
- @dt-color-link-primary-inverted-hover: #DAC7FF;
52
- @dt-color-link-critical-inverted-hover: hsl(0 100% 82.1%);
53
- @dt-color-link-success-inverted-hover: hsl(112 100% 90.1%);
54
- @dt-color-link-warning-inverted-hover: #F9F9F9;
45
+ @dt-color-link-primary-inverted: #BBA6FC;
46
+ @dt-color-link-primary-inverted-hover: #D3BCFF;
47
+ @dt-color-link-critical-inverted: #FF716F;
48
+ @dt-color-link-critical-inverted-hover: #FFABA4;
49
+ @dt-color-link-success-inverted: #AEFB3C;
50
+ @dt-color-link-success-inverted-hover: #DBFFA9;
51
+ @dt-color-link-warning-inverted: #FF9E0E;
52
+ @dt-color-link-warning-inverted-hover: #FFDB80;
53
+ @dt-color-link-muted-inverted: #E9E9E9;
55
54
  @dt-color-link-muted-inverted-hover: #F9F9F9;
56
- @dt-color-link-disabled-inverted-hover: #808080;
57
- @dt-color-surface-secondary-opaque: hsl(0 0% 0% / 0.02); // Secondary surface as opaque background color.
58
- @dt-color-surface-moderate-opaque: hsl(0 0% 0% / 0.09); // Moderate surface as opaque background color.
59
- @dt-color-surface-bold-opaque: hsl(0 0% 0% / 0.18); // Bold surface as opaque background color.
60
- @dt-color-surface-strong-opaque: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
61
- @dt-color-surface-contrast-opaque: hsl(0 0% 0% / 0.87); // Contrast surface as opaque background color.
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.8% 49% / 0.11); // Critical surface as opaque background color.
64
- @dt-color-surface-critical-subtle-opaque: hsl(0 88.8% 49% / 0.05); // Critical subtle surface as opaque background color.
65
- @dt-color-surface-warning-opaque: hsl(43 100% 75.1% / 0.38); // Warning surface as opaque background color
66
- @dt-color-surface-warning-subtle-opaque: hsl(43 100% 75.1% / 0.18); // Warning subtle surface as opaque background color
67
- @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.08); // Success surface as opaque background color.
68
- @dt-color-surface-success-subtle-opaque: hsl(137 72.5% 37.1% / 0.03); // Success subtle surface as opaque background color.
69
- @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.09); // Info surface as opaque background color.
70
- @dt-color-surface-info-subtle-opaque: hsl(212 79.2% 43.3% / 0.04); // Info surface as opaque background color.
55
+ @dt-color-link-disabled-inverted: #AAAAAA;
56
+ @dt-color-link-disabled-inverted-hover: #AAAAAA;
71
57
  @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
72
58
  @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
73
59
  @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
74
60
  @dt-color-surface-bold: #D2D2D2; // Highlight or call attention to specific areas of the interface.
75
- @dt-color-surface-strong: #555555; // Use sparingly to draw the eye to a relatively important region.
76
- @dt-color-surface-contrast: #222222; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
61
+ @dt-color-surface-strong: #535353; // Use sparingly to draw the eye to a relatively important region.
62
+ @dt-color-surface-contrast: #252525; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
77
63
  @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
78
- @dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
79
- @dt-color-surface-critical-strong: #B70B0B; // A contrasting critical surface, most likely paired with inverted foreground colors.
80
64
  @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
81
- @dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
82
- @dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
83
65
  @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
84
- @dt-color-surface-success-subtle: hsl(111 53.8% 98%); // A softer version of the default success surface.
85
- @dt-color-surface-success-strong: #1AA340; // A contrasting positive state surface, most likely paired with inverted foreground colors.
86
66
  @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
87
- @dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
67
+ @dt-color-surface-brand: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
68
+ @dt-color-surface-critical-subtle: #FFF2F3; // A softer version of the Critical surface.
69
+ @dt-color-surface-warning-subtle: #fffae5; // A softer version of the default warning surface.
70
+ @dt-color-surface-success-subtle: #f6fcf5; // A softer version of the default success surface.
71
+ @dt-color-surface-info-subtle: #f5f9fd; // A softer version of the default informational surface.
72
+ @dt-color-surface-brand-subtle: #f9f6ff; // A softer version of the default informational surface.
73
+ @dt-color-surface-critical-strong: #D90A45; // A contrasting critical surface, most likely paired with inverted foreground colors.
74
+ @dt-color-surface-warning-strong: #FFBD48; // A contrasting warning surface, most likely paired with inverted foreground colors.
75
+ @dt-color-surface-success-strong: #008E52; // A contrasting positive state surface, most likely paired with inverted foreground colors.
88
76
  @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
89
- @dt-color-border-subtle: hsl(0 0% 0% / 0.1);
90
- @dt-color-border-default: hsl(0 0% 0% / 0.18);
91
- @dt-color-border-moderate: hsl(0 0% 0% / 0.34);
92
- @dt-color-border-bold: hsl(0 0% 0% / 0.5);
93
- @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.14);
94
- @dt-color-border-default-inverted: hsl(0 0% 100% / 0.22);
95
- @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.38);
96
- @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
97
- @dt-color-border-focus: #51A0FE;
98
- @dt-color-border-critical: #EC0E0E;
99
- @dt-color-border-success: #1AA340;
100
- @dt-color-border-warning: #D28F2B;
77
+ @dt-color-surface-brand-strong: #7C52FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
78
+ @dt-color-surface-primary-opaque: hsl(0 0% 100% / 0.96); // Primary surface as opaque background color.
79
+ @dt-color-surface-secondary-opaque: hsl(0 0% 11% / 0.02); // Secondary surface as opaque background color.
80
+ @dt-color-surface-moderate-opaque: hsl(0 0% 11% / 0.1); // Moderate surface as opaque background color.
81
+ @dt-color-surface-bold-opaque: hsl(0 0% 11% / 0.19); // Bold surface as opaque background color.
82
+ @dt-color-surface-strong-opaque: hsl(0 0% 11% / 0.76); // Strong surface as opaque background color.
83
+ @dt-color-surface-contrast-opaque: hsl(0 0% 11% / 0.94); // Contrast surface as opaque background color.
84
+ @dt-color-surface-critical-opaque: hsl(4.62 100% 82.2% / 0.31); // Critical surface as opaque background color.
85
+ @dt-color-surface-warning-opaque: hsl(46.1 100% 80.6% / 0.5); // Warning surface as opaque background color
86
+ @dt-color-surface-success-opaque: hsl(85.1 100% 83.1% / 0.25); // Success surface as opaque background color.
87
+ @dt-color-surface-info-opaque: hsl(201 100% 87.1% / 0.35); // Info surface as opaque background color.
88
+ @dt-color-surface-brand-opaque: hsl(261 100% 86.9% / 0.27); // Info surface as opaque background color.
89
+ @dt-color-surface-critical-subtle-opaque: hsl(358 100% 94.9% / 0.5); // Critical subtle surface as opaque background color.
90
+ @dt-color-surface-warning-subtle-opaque: hsl(47.1 100% 90% / 0.5); // Warning subtle surface as opaque background color
91
+ @dt-color-surface-success-subtle-opaque: hsl(111 53.8% 94.9% / 0.5); // Success subtle surface as opaque background color.
92
+ @dt-color-surface-info-subtle-opaque: hsl(210 61.5% 94.9% / 0.5); // Info surface as opaque background color.
93
+ @dt-color-surface-brand-subtle-opaque: hsl(261 100% 86.9% / 0.2); // Info surface as opaque background color.
94
+ @dt-color-surface-primary-inverted: #000000; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
95
+ @dt-color-surface-secondary-inverted: #252525; // For adjacent or complementary regions.
96
+ @dt-color-surface-moderate-inverted: #3A3A3A; // A tertiary surface level, prominent without being too overpowering.
97
+ @dt-color-surface-bold-inverted: #535353; // Highlight or call attention to specific areas of the interface.
98
+ @dt-color-surface-strong-inverted: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
99
+ @dt-color-surface-contrast-inverted: #F9F9F9; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
100
+ @dt-color-surface-critical-inverted: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
101
+ @dt-color-surface-warning-inverted: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
102
+ @dt-color-surface-success-inverted: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
103
+ @dt-color-surface-info-inverted: #001429; // Background surface color containing messaging or elements communicated as generally informational.
104
+ @dt-color-surface-brand-inverted: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
105
+ @dt-color-surface-critical-subtle-inverted: #1C0108; // A softer version of the Critical surface.
106
+ @dt-color-surface-warning-subtle-inverted: #201301; // A softer version of the default warning surface.
107
+ @dt-color-surface-success-subtle-inverted: #00150D; // A softer version of the default success surface.
108
+ @dt-color-surface-info-subtle-inverted: #010B16; // A softer version of the default informational surface.
109
+ @dt-color-surface-brand-subtle-inverted: #10022C; // A softer version of the default informational surface.
110
+ @dt-color-surface-critical-strong-inverted: #FF716F; // A contrasting critical surface, most likely paired with inverted foreground colors.
111
+ @dt-color-surface-warning-strong-inverted: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
112
+ @dt-color-surface-success-strong-inverted: #AEFB3C; // A contrasting positive state surface, most likely paired with inverted foreground colors.
113
+ @dt-color-surface-info-strong-inverted: #4AA9EA; // A contrasting informational surface, most likely paired with inverted foreground colors.
114
+ @dt-color-surface-brand-strong-inverted: #BBA6FC; // A contrasting informational surface, most likely paired with inverted foreground colors.
115
+ @dt-color-surface-primary-opaque-inverted: hsl(0 0% 0% / 0.85); // Secondary surface as opaque background color.
116
+ @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 100% / 0.15); // Secondary surface as opaque background color.
117
+ @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 100% / 0.23); // Moderate surface as opaque background color.
118
+ @dt-color-surface-bold-opaque-inverted: hsl(0 0% 100% / 0.32); // Bold surface as opaque background color.
119
+ @dt-color-surface-strong-opaque-inverted: hsl(0 0% 100% / 0.67); // Strong surface as opaque background color.
120
+ @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 100% / 0.97); // Contrast surface as opaque background color.
121
+ @dt-color-surface-critical-opaque-inverted: hsl(342 85.2% 21.2% / 0.5); // Critical surface as opaque background color.
122
+ @dt-color-surface-warning-opaque-inverted: hsl(34.9 90.8% 17.1% / 0.35); // Warning surface as opaque background color
123
+ @dt-color-surface-success-opaque-inverted: hsl(155 100% 15.5% / 0.3); // Success surface as opaque background color.
124
+ @dt-color-surface-info-opaque-inverted: hsl(211 100% 8.04% / 0.6); // Info surface as opaque background color.
125
+ @dt-color-surface-brand-opaque-inverted: hsl(260 97.7% 16.9% / 0.8); // Info surface as opaque background color.
126
+ @dt-color-surface-critical-subtle-opaque-inverted: hsl(344 93.1% 5.69% / 0.6); // Critical subtle surface as opaque background color.
127
+ @dt-color-surface-warning-subtle-opaque-inverted: hsl(34.8 93.9% 6.47% / 0.7); // Warning subtle surface as opaque background color
128
+ @dt-color-surface-success-subtle-opaque-inverted: hsl(157 100% 4.12% / 0.66); // Success subtle surface as opaque background color.
129
+ @dt-color-surface-info-subtle-opaque-inverted: hsl(211 91.3% 4.51% / 0.66); // Info surface as opaque background color.
130
+ @dt-color-surface-brand-subtle-opaque-inverted: hsl(260 91.3% 9.02% / 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(140deg, #FF5E2F 0%, #ff1356 25%, #FF1BA4 66%, #9D42EA 100%);
133
+ @dt-color-border-subtle: hsl(0 0% 11% / 0.11);
134
+ @dt-color-border-default: hsl(0 0% 11% / 0.17);
135
+ @dt-color-border-moderate: hsl(0 0% 11% / 0.3);
136
+ @dt-color-border-bold: hsl(0 0% 11% / 0.5);
137
+ @dt-color-border-critical: #FF1356;
138
+ @dt-color-border-success: #2EA834;
139
+ @dt-color-border-warning: #FF9E0E;
101
140
  @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: #FF8585;
105
- @dt-color-border-critical-strong: #B70B0B;
106
- @dt-color-border-success-subtle: #B0FFA3;
107
- @dt-color-border-success-strong: #124620;
141
+ @dt-color-border-critical-subtle: #FF716F;
142
+ @dt-color-border-success-subtle: #D1FF76;
108
143
  @dt-color-border-warning-subtle: #FFDB80;
109
- @dt-color-border-warning-strong: hsl(35.7 88.3% 21.5%);
110
- @dt-color-border-brand-subtle: #DAC7FF;
111
- @dt-color-border-brand-strong: #3A1D95;
112
- @dt-color-border-critical-inverted: #FF8585;
113
- @dt-color-border-success-inverted: #B0FFA3;
114
- @dt-color-border-warning-inverted: #FFDB80;
115
- @dt-color-border-brand-inverted: #7C52FF;
116
- @dt-color-border-critical-subtle-inverted: #B70B0B;
117
- @dt-color-border-critical-strong-inverted: #FFE5E6;
118
- @dt-color-border-success-subtle-inverted: #1AA340;
119
- @dt-color-border-success-strong-inverted: #EDF9EB;
120
- @dt-color-border-warning-subtle-inverted: #D28F2B;
121
- @dt-color-border-warning-strong-inverted: #FFF4CC;
122
- @dt-color-border-brand-subtle-inverted: #3A1D95;
123
- @dt-color-border-brand-strong-inverted: #DAC7FF;
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.
144
+ @dt-color-border-brand-subtle: #BBA6FC;
145
+ @dt-color-border-critical-strong: #93173A;
146
+ @dt-color-border-success-strong: #004F2E;
147
+ @dt-color-border-warning-strong: #D57F00;
148
+ @dt-color-border-brand-strong: #5023DD;
149
+ @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.12);
150
+ @dt-color-border-default-inverted: hsl(0 0% 100% / 0.2);
151
+ @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.35);
152
+ @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
153
+ @dt-color-border-critical-inverted: #FF716F;
154
+ @dt-color-border-success-inverted: #52C926;
155
+ @dt-color-border-warning-inverted: #EA8F07;
156
+ @dt-color-border-brand-inverted: #A38FF9;
157
+ @dt-color-border-critical-subtle-inverted: #640823;
158
+ @dt-color-border-success-subtle-inverted: #004F2E;
159
+ @dt-color-border-warning-subtle-inverted: #815008;
160
+ @dt-color-border-brand-subtle-inverted: #7C52FF;
161
+ @dt-color-border-critical-strong-inverted: #FFABA4;
162
+ @dt-color-border-success-strong-inverted: #84EE0B;
163
+ @dt-color-border-warning-strong-inverted: #FFDB80;
164
+ @dt-color-border-brand-strong-inverted: #D3BCFF;
165
+ @dt-color-border-focus: #2C83D5;
166
+ @dt-color-border-ai: linear-gradient(140deg, #FF5E2F 0%, #ff1356 25%, #FF1BA4 66%, #9D42EA 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.
125
169
  @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
126
170
  @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
127
171
  @dt-typography-body-md-font-size: 20px; // Base default medium text style for main content.
128
172
  @dt-typography-body-md-text-case: none; // Base default medium text style for main content.
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.
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.
130
174
  @dt-typography-body-md-compact-font-weight: 400; // A tighter-spaced version of medium body style.
131
175
  @dt-typography-body-md-compact-line-height: 1.4; // A tighter-spaced version of medium body style.
132
176
  @dt-typography-body-md-compact-font-size: 20px; // A tighter-spaced version of medium body style.
133
177
  @dt-typography-body-md-compact-text-case: none; // A tighter-spaced version of medium body style.
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.
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.
135
179
  @dt-typography-body-sm-font-weight: 400; // Reduced small text style for less prominent or adjacent content.
136
180
  @dt-typography-body-sm-line-height: 1.4; // Reduced small text style for less prominent or adjacent content.
137
181
  @dt-typography-body-sm-font-size: 16px; // Reduced small text style for less prominent or adjacent content.
138
182
  @dt-typography-body-sm-text-case: none; // Reduced small text style for less prominent or adjacent content.
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.
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.
140
184
  @dt-typography-body-sm-compact-font-weight: 400; // A tighter-spaced version of small body style.
141
185
  @dt-typography-body-sm-compact-line-height: 1.2; // A tighter-spaced version of small body style.
142
186
  @dt-typography-body-sm-compact-font-size: 16px; // A tighter-spaced version of small body style.
143
187
  @dt-typography-body-sm-compact-text-case: none; // A tighter-spaced version of small body style.
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.
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.
145
189
  @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.
146
190
  @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.
147
191
  @dt-typography-headline-eyebrow-font-size: 16px; // Visually concise and uppercase title text used above a paired headline. Also known as a kicker or overline.
148
192
  @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.
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.
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.
150
194
  @dt-typography-headline-sm-font-weight: 700; // Smaller text size for secondary information or subheadings.
151
195
  @dt-typography-headline-sm-line-height: 1.4; // Smaller text size for secondary information or subheadings.
152
196
  @dt-typography-headline-sm-font-size: 20px; // Smaller text size for secondary information or subheadings.
153
197
  @dt-typography-headline-sm-text-case: none; // Smaller text size for secondary information or subheadings.
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.
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.
155
199
  @dt-typography-headline-sm-compact-font-weight: 700; // A tighter-spaced version of small headline style.
156
200
  @dt-typography-headline-sm-compact-line-height: 1.2; // A tighter-spaced version of small headline style.
157
201
  @dt-typography-headline-sm-compact-font-size: 20px; // A tighter-spaced version of small headline style.
158
202
  @dt-typography-headline-sm-compact-text-case: none; // A tighter-spaced 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.
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.
160
204
  @dt-typography-headline-sm-soft-font-weight: 500; // A softer font weight version of small headline style.
161
205
  @dt-typography-headline-sm-soft-line-height: 1.4; // A softer font weight version of small headline style.
162
206
  @dt-typography-headline-sm-soft-font-size: 20px; // A softer font weight version of small headline style.
163
207
  @dt-typography-headline-sm-soft-text-case: none; // A softer font weight 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.
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.
165
209
  @dt-typography-headline-sm-soft-compact-font-weight: 500; // A softer font weight, tighter-spaced version of small headline style.
166
210
  @dt-typography-headline-sm-soft-compact-line-height: 1.2; // A softer font weight, tighter-spaced version of small headline style.
167
211
  @dt-typography-headline-sm-soft-compact-font-size: 20px; // A softer font weight, tighter-spaced version of small headline style.
168
212
  @dt-typography-headline-sm-soft-compact-text-case: none; // A softer font weight, tighter-spaced version of small headline style.
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.
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.
170
214
  @dt-typography-headline-md-font-weight: 700; // Medium-sized base text style for headlines.
171
215
  @dt-typography-headline-md-line-height: 1.6; // Medium-sized base text style for headlines.
172
216
  @dt-typography-headline-md-font-size: 28px; // Medium-sized base text style for headlines.
173
217
  @dt-typography-headline-md-text-case: none; // Medium-sized base text style for headlines.
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.
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.
175
219
  @dt-typography-headline-md-compact-font-weight: 700; // A tighter-spaced version of medium headline style.
176
220
  @dt-typography-headline-md-compact-line-height: 1.4; // A tighter-spaced version of medium headline style.
177
221
  @dt-typography-headline-md-compact-font-size: 28px; // A tighter-spaced version of medium headline style.
178
222
  @dt-typography-headline-md-compact-text-case: none; // A tighter-spaced version of medium headline style.
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.
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.
180
224
  @dt-typography-headline-lg-font-weight: 700; // Large text style for headlines to attract attention.
181
225
  @dt-typography-headline-lg-line-height: 1.6; // Large text style for headlines to attract attention.
182
226
  @dt-typography-headline-lg-font-size: 41px; // Large text style for headlines to attract attention.
183
227
  @dt-typography-headline-lg-text-case: none; // Large text style for headlines to attract attention.
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.
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.
185
229
  @dt-typography-headline-lg-soft-font-weight: 500; // A softer font weight version of large headline style.
186
230
  @dt-typography-headline-lg-soft-line-height: 1.6; // A softer font weight version of large headline style.
187
231
  @dt-typography-headline-lg-soft-font-size: 41px; // A softer font weight version of large headline style.
188
232
  @dt-typography-headline-lg-soft-text-case: none; // A softer font weight version of large headline 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.
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.
190
234
  @dt-typography-headline-lg-compact-font-weight: 700; // A tighter-spaced version of large body style.
191
235
  @dt-typography-headline-lg-compact-line-height: 1.4; // A tighter-spaced version of large body style.
192
236
  @dt-typography-headline-lg-compact-font-size: 41px; // A tighter-spaced version of large body style.
193
237
  @dt-typography-headline-lg-compact-text-case: none; // A tighter-spaced version of large body 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.
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.
195
239
  @dt-typography-headline-lg-soft-compact-font-weight: 500; // A softer font weight, tighter spaced version of large headline style.
196
240
  @dt-typography-headline-lg-soft-compact-line-height: 1.4; // A softer font weight, tighter spaced version of large headline style.
197
241
  @dt-typography-headline-lg-soft-compact-font-size: 41px; // A softer font weight, tighter spaced version of large headline style.
198
242
  @dt-typography-headline-lg-soft-compact-text-case: none; // A softer font weight, tighter spaced version of large headline style.
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.
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.
200
244
  @dt-typography-headline-xl-font-weight: 500; // Extra large text style for high importance headlines.
201
245
  @dt-typography-headline-xl-line-height: 1.2; // Extra large text style for high importance headlines.
202
246
  @dt-typography-headline-xl-font-size: 65px; // Extra large text style for high importance headlines.
203
247
  @dt-typography-headline-xl-text-case: none; // Extra large text style for high importance headlines.
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.
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.
205
249
  @dt-typography-headline-xl-compact-font-weight: 500; // A tighter-spaced version of extra large headline style.
206
250
  @dt-typography-headline-xl-compact-line-height: 1; // A tighter-spaced version of extra large headline style.
207
251
  @dt-typography-headline-xl-compact-font-size: 65px; // A tighter-spaced version of extra large headline style.
208
252
  @dt-typography-headline-xl-compact-text-case: none; // A tighter-spaced version of extra large headline style.
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.
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.
210
254
  @dt-typography-headline-xxl-font-weight: 500; // Largest text style for extra extra large content.
211
255
  @dt-typography-headline-xxl-line-height: 1.2; // Largest text style for extra extra large content.
212
256
  @dt-typography-headline-xxl-font-size: 105px; // Largest text style for extra extra large content.
213
257
  @dt-typography-headline-xxl-text-case: none; // Largest text style for extra extra large content.
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.
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.
215
259
  @dt-typography-headline-xxl-compact-font-weight: 500; // A tighter-spaced version of extra extra large headline style.
216
260
  @dt-typography-headline-xxl-compact-line-height: 1; // A tighter-spaced version of extra extra large headline style.
217
261
  @dt-typography-headline-xxl-compact-font-size: 105px; // A tighter-spaced version of extra extra large headline style.
218
262
  @dt-typography-headline-xxl-compact-text-case: none; // A tighter-spaced version of extra extra large headline style.
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.
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.
220
264
  @dt-typography-label-md-font-weight: 600; // Base default medium-sized text style for labels, providing clear identification and categorization.
221
265
  @dt-typography-label-md-line-height: 1.6; // Base default medium-sized text style for labels, providing clear identification and categorization.
222
266
  @dt-typography-label-md-font-size: 20px; // Base default medium-sized text style for labels, providing clear identification and categorization.
223
267
  @dt-typography-label-md-text-case: none; // Base default medium-sized text style for labels, providing clear identification and categorization.
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.
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.
225
269
  @dt-typography-label-md-compact-font-weight: 600; // A tighter-spaced version of medium label style.
226
270
  @dt-typography-label-md-compact-line-height: 1.4; // A tighter-spaced version of medium label style.
227
271
  @dt-typography-label-md-compact-font-size: 20px; // A tighter-spaced version of medium label style.
228
272
  @dt-typography-label-md-compact-text-case: none; // A tighter-spaced 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.
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.
230
274
  @dt-typography-label-md-plain-font-weight: 400; // A non-bold version of medium label style.
231
275
  @dt-typography-label-md-plain-line-height: 1.6; // A non-bold version of medium label style.
232
276
  @dt-typography-label-md-plain-font-size: 20px; // A non-bold version of medium label style.
233
277
  @dt-typography-label-md-plain-text-case: none; // A non-bold 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.
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.
235
279
  @dt-typography-label-md-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of medium label style.
236
280
  @dt-typography-label-md-plain-compact-line-height: 1.4; // A non-bolded, tighter-spaced version of medium label style.
237
281
  @dt-typography-label-md-plain-compact-font-size: 20px; // A non-bolded, tighter-spaced version of medium label style.
238
282
  @dt-typography-label-md-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of medium label style.
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.
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.
240
284
  @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.
241
285
  @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.
242
286
  @dt-typography-label-sm-font-size: 16px; // Smaller text style for labels when space is limited or for secondary information or to convey a slightly lower hierachy.
243
287
  @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.
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.
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.
245
289
  @dt-typography-label-sm-compact-font-weight: 600; // A tighter-spaced version of small label style.
246
290
  @dt-typography-label-sm-compact-line-height: 1.2; // A tighter-spaced version of small label style.
247
291
  @dt-typography-label-sm-compact-font-size: 16px; // A tighter-spaced version of small label style.
248
292
  @dt-typography-label-sm-compact-text-case: none; // A tighter-spaced 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.
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.
250
294
  @dt-typography-label-sm-plain-font-weight: 400; // A non-bold version of small label style.
251
295
  @dt-typography-label-sm-plain-line-height: 1.4; // A non-bold version of small label style.
252
296
  @dt-typography-label-sm-plain-font-size: 16px; // A non-bold version of small label style.
253
297
  @dt-typography-label-sm-plain-text-case: none; // A non-bold 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.
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.
255
299
  @dt-typography-label-sm-plain-compact-font-weight: 400; // A non-bolded, tighter-spaced version of small label style.
256
300
  @dt-typography-label-sm-plain-compact-line-height: 1.2; // A non-bolded, tighter-spaced version of small label style.
257
301
  @dt-typography-label-sm-plain-compact-font-size: 16px; // A non-bolded, tighter-spaced version of small label style.
258
302
  @dt-typography-label-sm-plain-compact-text-case: none; // A non-bolded, tighter-spaced version of small label style.
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.
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.
260
304
  @dt-typography-helper-md-font-weight: 400; // Base default medium-sized text style for supplementary contextual information.
261
305
  @dt-typography-helper-md-line-height: 1.4; // Base default medium-sized text style for supplementary contextual information.
262
306
  @dt-typography-helper-md-font-size: 20px; // Base default medium-sized text style for supplementary contextual information.
263
307
  @dt-typography-helper-md-text-case: none; // Base default medium-sized text style for supplementary contextual information.
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.
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.
265
309
  @dt-typography-helper-sm-font-weight: 400; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
266
310
  @dt-typography-helper-sm-line-height: 1.2; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
267
311
  @dt-typography-helper-sm-font-size: 16px; // Smaller text size for subtle guidance or additional context, minimizing visual disruption.
@@ -321,107 +365,108 @@
321
365
  @dt-inputs-color-foreground-default: #3A3A3A;
322
366
  @dt-inputs-color-foreground-placeholder: #808080;
323
367
  @dt-inputs-color-foreground-disabled: #808080;
324
- @dt-inputs-color-border-default: hsl(0 0% 0% / 0.18);
325
- @dt-inputs-color-border-focus: #51A0FE;
326
- @dt-inputs-color-border-critical: #EC0E0E;
327
- @dt-inputs-color-border-success: #1AA340;
328
- @dt-inputs-color-border-warning: #D28F2B;
368
+ @dt-inputs-color-border-default: hsl(0 0% 11% / 0.17);
369
+ @dt-inputs-color-border-hover: hsl(0 0% 11% / 0.3);
370
+ @dt-inputs-color-border-focus: #2C83D5;
371
+ @dt-inputs-color-border-critical: #FF1356;
372
+ @dt-inputs-color-border-success: #2EA834;
373
+ @dt-inputs-color-border-warning: #FF9E0E;
329
374
  @dt-inputs-color-border-disabled: transparent;
330
- @dt-inputs-color-background-default: hsl(0 0% 0% / 0.03);
331
- @dt-inputs-color-background-focus: hsl(0 0% 0% / 0.01);
332
- @dt-inputs-color-background-disabled: hsl(0 0% 0% / 0.12);
375
+ @dt-inputs-color-background-default: hsl(0 0% 11% / 0.02);
376
+ @dt-inputs-color-background-focus: #F9F9F9;
377
+ @dt-inputs-color-background-disabled: hsl(0 0% 11% / 0.1);
333
378
  @dt-action-color-foreground-base-default: #7C52FF;
334
- @dt-action-color-foreground-base-hover: hsl(255 100% 63.4%);
335
- @dt-action-color-foreground-base-active: hsl(255 100% 63.4%);
379
+ @dt-action-color-foreground-base-hover: #5023DD;
380
+ @dt-action-color-foreground-base-active: #5023DD;
336
381
  @dt-action-color-foreground-base-primary-default: #ffffff;
337
- @dt-action-color-foreground-critical-default: #EC0E0E;
338
- @dt-action-color-foreground-critical-hover: hsl(0 88.8% 45.1%);
339
- @dt-action-color-foreground-critical-active: hsl(0 88.8% 45.1%);
382
+ @dt-action-color-foreground-critical-default: #FF1356;
383
+ @dt-action-color-foreground-critical-hover: #AF0032;
384
+ @dt-action-color-foreground-critical-active: #AF0032;
340
385
  @dt-action-color-foreground-critical-primary-default: #ffffff;
341
- @dt-action-color-foreground-inverted-default: #ffffff;
342
- @dt-action-color-foreground-inverted-hover: #ffffff;
343
- @dt-action-color-foreground-inverted-active: #ffffff;
386
+ @dt-action-color-foreground-inverted-default: #F9F9F9;
387
+ @dt-action-color-foreground-inverted-hover: #F9F9F9;
388
+ @dt-action-color-foreground-inverted-active: #F9F9F9;
344
389
  @dt-action-color-foreground-inverted-primary-default: #7C52FF;
345
- @dt-action-color-foreground-inverted-primary-hover: #3A1D95;
346
- @dt-action-color-foreground-inverted-primary-active: #3A1D95;
390
+ @dt-action-color-foreground-inverted-primary-hover: #5023DD;
391
+ @dt-action-color-foreground-inverted-primary-active: #5023DD;
347
392
  @dt-action-color-foreground-muted-default: #3A3A3A;
348
- @dt-action-color-foreground-muted-hover: #3A3A3A;
349
- @dt-action-color-foreground-muted-active: #3A3A3A;
393
+ @dt-action-color-foreground-muted-hover: #1C1C1C;
394
+ @dt-action-color-foreground-muted-active: #1C1C1C;
350
395
  @dt-action-color-foreground-disabled-default: #808080;
351
- @dt-action-color-foreground-positive-default: #1AA340;
352
- @dt-action-color-foreground-positive-hover: hsl(137 72.5% 30.4%);
353
- @dt-action-color-foreground-positive-active: hsl(137 72.5% 30.4%);
396
+ @dt-action-color-foreground-positive-default: #008E52;
397
+ @dt-action-color-foreground-positive-hover: #004F2E;
398
+ @dt-action-color-foreground-positive-active: #004F2E;
354
399
  @dt-action-color-foreground-positive-primary-default: #ffffff;
355
400
  @dt-action-color-background-base-default: transparent;
356
- @dt-action-color-background-base-hover: hsl(255 100% 66.1% / 0.14);
357
- @dt-action-color-background-base-active: hsl(255 100% 66.1% / 0.18);
401
+ @dt-action-color-background-base-hover: hsl(261 100% 86.9% / 0.27);
402
+ @dt-action-color-background-base-active: hsl(261 100% 77.3% / 0.27);
358
403
  @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%);
404
+ @dt-action-color-background-base-primary-hover: #6538F1;
405
+ @dt-action-color-background-base-primary-active: #5023DD;
361
406
  @dt-action-color-background-critical-default: transparent;
362
- @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.07);
363
- @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.12);
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%);
407
+ @dt-action-color-background-critical-hover: hsl(4.62 100% 82.2% / 0.31);
408
+ @dt-action-color-background-critical-active: hsl(4.62 100% 73.2% / 0.31);
409
+ @dt-action-color-background-critical-primary-default: #FF1356;
410
+ @dt-action-color-background-critical-primary-hover: #D90A45;
411
+ @dt-action-color-background-critical-primary-active: #AF0032;
367
412
  @dt-action-color-background-inverted-default: transparent;
368
- @dt-action-color-background-inverted-hover: hsl(0 0% 100% / 0.15);
369
- @dt-action-color-background-inverted-active: hsl(0 0% 100% / 0.3);
370
- @dt-action-color-background-inverted-primary-default: #ffffff;
413
+ @dt-action-color-background-inverted-hover: hsl(0 0% 100% / 0.23);
414
+ @dt-action-color-background-inverted-active: hsl(0 0% 100% / 0.32);
415
+ @dt-action-color-background-inverted-primary-default: #F9F9F9;
371
416
  @dt-action-color-background-inverted-primary-hover: #F5F0FF;
372
- @dt-action-color-background-inverted-primary-active: hsl(260 100% 93.2%);
417
+ @dt-action-color-background-inverted-primary-active: #D3BCFF;
373
418
  @dt-action-color-background-muted-default: transparent;
374
- @dt-action-color-background-muted-hover: hsl(0 0% 13.3% / 0.1);
375
- @dt-action-color-background-muted-active: hsl(0 0% 13.3% / 0.16);
376
- @dt-action-color-background-disabled-default: #D2D2D2;
419
+ @dt-action-color-background-muted-hover: hsl(0 0% 11% / 0.1);
420
+ @dt-action-color-background-muted-active: hsl(0 0% 11% / 0.14);
421
+ @dt-action-color-background-disabled-default: hsl(0 0% 11% / 0.19);
377
422
  @dt-action-color-background-positive-default: transparent;
378
- @dt-action-color-background-positive-hover: hsl(111 53.8% 98%);
379
- @dt-action-color-background-positive-active: hsl(137 72.5% 37.1% / 0.08);
380
- @dt-action-color-background-positive-primary-default: #1AA340;
381
- @dt-action-color-background-positive-primary-hover: hsl(137 72.5% 33.4%);
382
- @dt-action-color-background-positive-primary-active: hsl(137 72.5% 31.1%);
423
+ @dt-action-color-background-positive-hover: hsl(85.1 100% 83.1% / 0.25);
424
+ @dt-action-color-background-positive-active: hsl(85.1 100% 58.2% / 0.25);
425
+ @dt-action-color-background-positive-primary-default: #2EA834; // Postive, accepting, or success actions.
426
+ @dt-action-color-background-positive-primary-hover: #008E52;
427
+ @dt-action-color-background-positive-primary-active: hsl(155 100% 24.8%);
383
428
  @dt-action-color-border-base-outlined-default: #7C52FF;
384
- @dt-action-color-border-critical-outlined-default: #EC0E0E;
385
- @dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.22);
386
- @dt-action-color-border-muted-outlined-default: hsl(0 0% 0% / 0.18);
387
- @dt-theme-color-base: #000000;
388
- @dt-theme-topbar-color-foreground: hsl(0 0% 0% / 0.75);
429
+ @dt-action-color-border-critical-outlined-default: #FF1356;
430
+ @dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.2);
431
+ @dt-action-color-border-muted-outlined-default: hsl(0 0% 11% / 0.17);
432
+ @dt-theme-color-base: #1C1C1C;
433
+ @dt-theme-topbar-color-foreground: hsl(0 0% 11% / 0.8);
389
434
  @dt-theme-topbar-color-background: #F9F9F9;
390
- @dt-theme-topbar-field-color-foreground: hsl(0 0% 0% / 0.5);
391
- @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 0% / 0.75);
392
- @dt-theme-topbar-field-color-background: hsl(0 0% 0% / 0.05);
435
+ @dt-theme-topbar-field-color-foreground: hsl(0 0% 11% / 0.5);
436
+ @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 11% / 0.75);
437
+ @dt-theme-topbar-field-color-background: hsl(0 0% 11% / 0.05);
393
438
  @dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
394
- @dt-theme-topbar-field-color-border: hsl(0 0% 0% / 0);
395
- @dt-theme-topbar-field-color-border-hover: hsl(0 0% 0% / 0.1);
396
- @dt-theme-topbar-field-color-border-active: hsl(0 0% 0% / 0.2);
397
- @dt-theme-topbar-button-color-foreground: hsl(0 0% 0% / 0.65);
398
- @dt-theme-topbar-button-color-foreground-hover: #000000;
399
- @dt-theme-topbar-button-color-background: hsl(0 0% 0% / 0);
400
- @dt-theme-topbar-button-color-background-hover: hsl(0 0% 0% / 0.05);
401
- @dt-theme-topbar-button-color-background-active: hsl(0 0% 0% / 0.1);
402
- @dt-theme-topbar-profile-color-foreground: hsl(0 0% 0% / 0.75);
403
- @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 100% / 0.75);
404
- @dt-theme-topbar-profile-color-background: hsl(0 0% 0% / 0.05);
405
- @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 0% / 0.75);
406
- @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 0% / 0.1);
407
- @dt-theme-topbar-profile-color-background-active: hsl(0 0% 0% / 0.14);
439
+ @dt-theme-topbar-field-color-border: hsl(0 0% 11% / 0);
440
+ @dt-theme-topbar-field-color-border-hover: hsl(0 0% 11% / 0.1);
441
+ @dt-theme-topbar-field-color-border-active: hsl(0 0% 11% / 0.2);
442
+ @dt-theme-topbar-button-color-foreground: hsl(0 0% 11% / 0.65);
443
+ @dt-theme-topbar-button-color-foreground-hover: #1C1C1C;
444
+ @dt-theme-topbar-button-color-background: hsl(0 0% 11% / 0);
445
+ @dt-theme-topbar-button-color-background-hover: hsl(0 0% 11% / 0.05);
446
+ @dt-theme-topbar-button-color-background-active: hsl(0 0% 11% / 0.1);
447
+ @dt-theme-topbar-profile-color-foreground: hsl(0 0% 11% / 0.8);
448
+ @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 97.6% / 0.75);
449
+ @dt-theme-topbar-profile-color-background: hsl(0 0% 11% / 0.05);
450
+ @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 11% / 0.75);
451
+ @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 11% / 0.1);
452
+ @dt-theme-topbar-profile-color-background-active: hsl(0 0% 11% / 0.14);
408
453
  @dt-theme-sidebar-color-foreground: #3A3A3A;
409
- @dt-theme-sidebar-color-foreground-unread: #000000;
454
+ @dt-theme-sidebar-color-foreground-unread: #1C1C1C;
410
455
  @dt-theme-sidebar-color-background: #F9F9F9;
411
456
  @dt-theme-sidebar-icon-color-foreground: #3A3A3A;
412
- @dt-theme-sidebar-status-color-foreground: #555555;
413
- @dt-theme-sidebar-row-color-background: hsl(0 0% 0% / 0);
414
- @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 0% / 0.12);
415
- @dt-theme-sidebar-row-color-background-active: hsl(0 0% 0% / 0.16);
416
- @dt-theme-sidebar-selected-row-color-foreground: #000000;
417
- @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 0% / 0.1);
418
- @dt-theme-sidebar-section-color-foreground: #555555;
419
- @dt-theme-presence-color-background-available: #1AA340;
420
- @dt-theme-presence-color-background-busy-unavailable: #EC0E0E;
421
- @dt-theme-presence-color-background-busy: #F6AB3C;
457
+ @dt-theme-sidebar-status-color-foreground: #535353;
458
+ @dt-theme-sidebar-row-color-background: hsl(0 0% 11% / 0);
459
+ @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 11% / 0.11);
460
+ @dt-theme-sidebar-row-color-background-active: hsl(0 0% 11% / 0.15);
461
+ @dt-theme-sidebar-selected-row-color-foreground: #1C1C1C;
462
+ @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 11% / 0.09);
463
+ @dt-theme-sidebar-section-color-foreground: #535353;
464
+ @dt-theme-presence-color-background-available: #52C926;
465
+ @dt-theme-presence-color-background-busy-unavailable: #FF1356;
466
+ @dt-theme-presence-color-background-busy: #FF9E0E;
422
467
  @dt-theme-presence-color-background-offline: #ffffff;
423
468
  @dt-theme-mention-color-foreground: #ffffff;
424
- @dt-theme-mention-color-foreground-strong: #ffffff;
469
+ @dt-theme-mention-color-foreground-strong: #F9F9F9;
425
470
  @dt-theme-mention-color-background: #7C52FF;
426
471
  @dt-theme-mention-color-background-strong: #3A1D95;
427
472
  @dt-avatar-color-foreground: #000000;
@@ -444,25 +489,29 @@
444
489
  @dt-avatar-color-background-1700: #ffd646;
445
490
  @dt-avatar-color-background-1800: #f1dab7;
446
491
  @dt-avatar-color-background-000: #e0e0e0;
447
- @dt-badge-color-background-default: hsl(0 0% 0% / 0.09);
448
- @dt-badge-color-background-info: #EAF2FA;
449
- @dt-badge-color-background-success: #EDF9EB;
450
- @dt-badge-color-background-warning: #FFF4CC;
451
- @dt-badge-color-background-critical: #FFE5E6;
492
+ @dt-badge-color-background-default: hsl(0 0% 11% / 0.1);
493
+ @dt-badge-color-background-info: #BDE8FF;
494
+ @dt-badge-color-background-success: #DBFFA9;
495
+ @dt-badge-color-background-warning: #FFE89C;
496
+ @dt-badge-color-background-critical: #FFABA4;
452
497
  @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%);
498
+ @dt-badge-color-background-bulletin-subtle: #D3BCFF;
499
+ @dt-badge-color-background-ai: linear-gradient(140deg, #FF5E2F 0%, #ff1356 25%, #FF1BA4 66%, #9D42EA 100%);
455
500
  @dt-badge-color-foreground-default: #000000;
456
501
  @dt-badge-color-foreground-bulletin: #ffffff;
457
- @dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
458
- @dt-badge-color-border-default: hsl(0 0% 0% / 0.1);
502
+ @dt-badge-color-foreground-bulletin-subtle: #3A1D95;
503
+ @dt-badge-color-foreground-ai: #ffffff;
504
+ @dt-badge-color-border-default: hsl(0 0% 11% / 0.11);
459
505
  @dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
460
506
  @dt-checkbox-size-width: 1.6rem;
461
507
  @dt-checkbox-size-height: 1.6rem;
462
508
  @dt-checkbox-size-radius: 0.4rem;
463
- @dt-checkbox-color-border-unchecked: hsl(0 0% 0% / 0.34);
509
+ @dt-checkbox-color-border-unchecked: hsl(0 0% 11% / 0.3);
510
+ @dt-checkbox-color-border-unchecked-hover: hsl(0 0% 11% / 0.5);
464
511
  @dt-checkbox-color-border-checked: #7C52FF;
465
512
  @dt-checkbox-color-background-checked: #7C52FF;
513
+ @dt-checkbox-color-foreground-default: transparent;
514
+ @dt-checkbox-color-foreground-checked: #F9F9F9;
466
515
  @dt-icon-size-100: 12px;
467
516
  @dt-icon-size-200: 14px;
468
517
  @dt-icon-size-300: 18px;
@@ -482,6 +531,9 @@
482
531
  @dt-radio-size-width: 1.6rem;
483
532
  @dt-radio-size-height: 1.6rem;
484
533
  @dt-radio-size-radius: 50%;
485
- @dt-radio-color-border-unchecked: hsl(0 0% 0% / 0.34);
534
+ @dt-radio-color-border-unchecked: hsl(0 0% 11% / 0.3);
535
+ @dt-radio-color-border-unchecked-hover: hsl(0 0% 11% / 0.5);
486
536
  @dt-radio-color-border-checked: #7C52FF;
487
537
  @dt-radio-color-background-checked: #7C52FF;
538
+ @dt-radio-color-foreground-default: transparent;
539
+ @dt-radio-color-foreground-checked: #F9F9F9;