@dialpad/dialtone 9.108.0 → 9.109.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.
- package/README.md +0 -1
- package/dist/css/dialtone-default-theme.css +12085 -3150
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone-docs.json +1 -1
- package/dist/css/dialtone.css +3498 -313
- package/dist/css/dialtone.min.css +1 -1
- package/dist/css/fonts/SeasonMix-Bold.woff2 +0 -0
- package/dist/css/fonts/SeasonMix-Regular.woff2 +0 -0
- package/dist/css/fonts/SeasonMix-SemiBold.woff2 +0 -0
- package/dist/css/tokens/tokens-base-dark.css +946 -161
- package/dist/css/tokens/tokens-base-deca-dark.css +526 -56
- package/dist/css/tokens/tokens-base-deca-light.css +522 -52
- package/dist/css/tokens/tokens-base-light.css +913 -128
- package/dist/css/tokens/tokens-debug-base.css +788 -3
- package/dist/css/tokens/tokens-debug-dp.css +1034 -669
- package/dist/css/tokens/tokens-deca-dark.css +804 -768
- package/dist/css/tokens/tokens-deca-light.css +743 -707
- package/dist/css/tokens/tokens-dp-dark.css +1289 -924
- package/dist/css/tokens/tokens-dp-light.css +1338 -973
- package/dist/css/tokens/tokens-expressive-dark.css +1289 -924
- package/dist/css/tokens/tokens-expressive-light.css +1335 -970
- package/dist/css/tokens/tokens-expressive-sm-dark.css +1289 -924
- package/dist/css/tokens/tokens-expressive-sm-light.css +1335 -970
- package/dist/css/tokens/tokens-tmo-dark.css +1445 -1080
- package/dist/css/tokens/tokens-tmo-light.css +1480 -1115
- package/dist/css/tokens-docs.json +1 -1
- package/dist/tokens/css/tokens-base-dark.css +946 -161
- package/dist/tokens/css/tokens-base-deca-dark.css +526 -56
- package/dist/tokens/css/tokens-base-deca-light.css +522 -52
- package/dist/tokens/css/tokens-base-light.css +913 -128
- package/dist/tokens/css/tokens-debug-base.css +788 -3
- package/dist/tokens/css/tokens-debug-dp.css +1034 -669
- package/dist/tokens/css/tokens-deca-dark.css +804 -768
- package/dist/tokens/css/tokens-deca-light.css +743 -707
- package/dist/tokens/css/tokens-dp-dark.css +1289 -924
- package/dist/tokens/css/tokens-dp-light.css +1338 -973
- package/dist/tokens/css/tokens-expressive-dark.css +1289 -924
- package/dist/tokens/css/tokens-expressive-light.css +1335 -970
- package/dist/tokens/css/tokens-expressive-sm-dark.css +1289 -924
- package/dist/tokens/css/tokens-expressive-sm-light.css +1335 -970
- package/dist/tokens/css/tokens-tmo-dark.css +1445 -1080
- package/dist/tokens/css/tokens-tmo-light.css +1480 -1115
- package/dist/tokens/doc.json +98587 -72861
- package/dist/tokens/less/tokens-base-dark.less +159 -46
- package/dist/tokens/less/tokens-base-deca-dark.less +85 -17
- package/dist/tokens/less/tokens-base-deca-light.less +84 -16
- package/dist/tokens/less/tokens-base-light.less +150 -37
- package/dist/tokens/less/tokens-deca-dark.less +189 -183
- package/dist/tokens/less/tokens-deca-light.less +180 -174
- package/dist/tokens/less/tokens-dp-dark.less +240 -187
- package/dist/tokens/less/tokens-dp-light.less +238 -185
- package/dist/tokens/less/tokens-expressive-dark.less +263 -210
- package/dist/tokens/less/tokens-expressive-light.less +261 -208
- package/dist/tokens/less/tokens-expressive-sm-dark.less +263 -210
- package/dist/tokens/less/tokens-expressive-sm-light.less +261 -208
- package/dist/tokens/less/tokens-tmo-dark.less +260 -207
- package/dist/tokens/less/tokens-tmo-light.less +251 -198
- package/dist/tokens/themes/chunks/tokens-base-dark-B42c8NRe.js +1 -0
- package/dist/tokens/themes/chunks/tokens-base-dark-D3XlzClW.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-light-5p3ZOPKU.js +1 -0
- package/dist/tokens/themes/chunks/tokens-base-light-C_G4p7UU.js +4 -0
- package/dist/tokens/themes/debug.cjs +1 -1
- package/dist/tokens/themes/debug.js +1 -1
- package/dist/tokens/themes/dp-dark.cjs +1 -1
- package/dist/tokens/themes/dp-dark.js +2 -2
- package/dist/tokens/themes/dp-deca-dark.cjs +1 -1
- package/dist/tokens/themes/dp-deca-dark.js +1 -1
- package/dist/tokens/themes/dp-deca-light.cjs +1 -1
- package/dist/tokens/themes/dp-deca-light.js +2 -2
- package/dist/tokens/themes/dp-light.cjs +1 -1
- package/dist/tokens/themes/dp-light.js +2 -2
- package/dist/tokens/themes/expressive-dark.cjs +1 -1
- package/dist/tokens/themes/expressive-dark.js +3 -3
- package/dist/tokens/themes/expressive-light.cjs +1 -1
- package/dist/tokens/themes/expressive-light.js +3 -3
- package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
- package/dist/tokens/themes/expressive-sm-dark.js +3 -3
- package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
- package/dist/tokens/themes/expressive-sm-light.js +3 -3
- package/dist/tokens/themes/tmo-dark.cjs +1 -1
- package/dist/tokens/themes/tmo-dark.js +2 -2
- package/dist/tokens/themes/tmo-light.cjs +1 -1
- package/dist/tokens/themes/tmo-light.js +2 -2
- package/dist/tokens/tokens-base-dark.json +159 -46
- package/dist/tokens/tokens-base-deca-dark.json +82 -14
- package/dist/tokens/tokens-base-deca-light.json +81 -13
- package/dist/tokens/tokens-base-light.json +150 -37
- package/dist/tokens/tokens-deca-dark.json +186 -180
- package/dist/tokens/tokens-deca-light.json +178 -172
- package/dist/tokens/tokens-dp-dark.json +224 -171
- package/dist/tokens/tokens-dp-light.json +235 -182
- package/dist/tokens/tokens-expressive-dark.json +247 -194
- package/dist/tokens/tokens-expressive-light.json +258 -205
- package/dist/tokens/tokens-expressive-sm-dark.json +247 -194
- package/dist/tokens/tokens-expressive-sm-light.json +258 -205
- package/dist/tokens/tokens-tmo-dark.json +249 -196
- package/dist/tokens/tokens-tmo-light.json +246 -193
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/components/button/button.vue.cjs +1 -1
- package/dist/vue2/components/button/button.vue.cjs.map +1 -1
- package/dist/vue2/components/button/button.vue.js +1 -1
- package/dist/vue2/components/button/button.vue.js.map +1 -1
- package/dist/vue2/components/button/button_constants.cjs +3 -2
- package/dist/vue2/components/button/button_constants.cjs.map +1 -1
- package/dist/vue2/components/button/button_constants.js +3 -2
- package/dist/vue2/components/button/button_constants.js.map +1 -1
- package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.cjs.map +1 -1
- package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.js.map +1 -1
- package/dist/vue2/types/components/button/button_constants.d.ts +2 -1
- package/dist/vue2/types/components/button/button_constants.d.ts.map +1 -1
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/components/button/button.vue.cjs +1 -1
- package/dist/vue3/components/button/button.vue.cjs.map +1 -1
- package/dist/vue3/components/button/button.vue.js +1 -1
- package/dist/vue3/components/button/button.vue.js.map +1 -1
- package/dist/vue3/components/button/button_constants.cjs +3 -2
- package/dist/vue3/components/button/button_constants.cjs.map +1 -1
- package/dist/vue3/components/button/button_constants.js +3 -2
- package/dist/vue3/components/button/button_constants.js.map +1 -1
- package/dist/vue3/types/components/button/button_constants.d.ts +2 -1
- package/dist/vue3/types/components/button/button_constants.d.ts.map +1 -1
- package/package.json +5 -5
- package/dist/css/fonts/Archivo-Bold.woff2 +0 -0
- package/dist/css/fonts/Archivo-Regular.woff2 +0 -0
- package/dist/css/fonts/Archivo-SemiBold.woff2 +0 -0
- package/dist/css/fonts/ArchivoExpanded-SemiBold.woff2 +0 -0
- package/dist/css/fonts/ArchivoSemiExpanded-Medium.woff2 +0 -0
- package/dist/css/fonts/ArchivoSemiExpanded-SemiBold.woff2 +0 -0
- package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +0 -4
- package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +0 -1
- package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +0 -4
- 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: #
|
|
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: #
|
|
14
|
-
@dt-color-foreground-muted: hsl(0 0%
|
|
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: #
|
|
18
|
-
@dt-color-foreground-critical-strong: #
|
|
19
|
-
@dt-color-foreground-success: #
|
|
20
|
-
@dt-color-foreground-success-strong: #
|
|
17
|
+
@dt-color-foreground-critical: #D90A45; // 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: #
|
|
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%
|
|
26
|
-
@dt-color-foreground-placeholder-inverted: #
|
|
27
|
-
@dt-color-foreground-disabled-inverted: #
|
|
28
|
-
@dt-color-foreground-critical-inverted: #
|
|
29
|
-
@dt-color-foreground-critical-strong-inverted:
|
|
30
|
-
@dt-color-foreground-success-inverted: #
|
|
31
|
-
@dt-color-foreground-success-strong-inverted:
|
|
32
|
-
@dt-color-foreground-warning-inverted: #
|
|
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-
|
|
35
|
-
@dt-color-link-
|
|
34
|
+
@dt-color-link-primary-hover: #5023DD;
|
|
35
|
+
@dt-color-link-critical: #D90A45;
|
|
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
|
|
52
|
-
@dt-color-link-
|
|
53
|
-
@dt-color-link-
|
|
54
|
-
@dt-color-link-
|
|
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
|
|
57
|
-
@dt-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: #
|
|
76
|
-
@dt-color-surface-contrast: #
|
|
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-
|
|
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-
|
|
90
|
-
@dt-color-
|
|
91
|
-
@dt-color-
|
|
92
|
-
@dt-color-
|
|
93
|
-
@dt-color-
|
|
94
|
-
@dt-color-
|
|
95
|
-
@dt-color-
|
|
96
|
-
@dt-color-
|
|
97
|
-
@dt-color-
|
|
98
|
-
@dt-color-
|
|
99
|
-
@dt-color-
|
|
100
|
-
@dt-color-
|
|
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: #D90A45;
|
|
138
|
+
@dt-color-border-success: #2EA834;
|
|
139
|
+
@dt-color-border-warning: #FF9E0E;
|
|
101
140
|
@dt-color-border-brand: #7C52FF;
|
|
102
|
-
@dt-color-border-
|
|
103
|
-
@dt-color-border-
|
|
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-
|
|
110
|
-
@dt-color-border-
|
|
111
|
-
@dt-color-border-
|
|
112
|
-
@dt-color-border-
|
|
113
|
-
@dt-color-border-
|
|
114
|
-
@dt-color-border-
|
|
115
|
-
@dt-color-border-
|
|
116
|
-
@dt-color-border-
|
|
117
|
-
@dt-color-border-
|
|
118
|
-
@dt-color-border-
|
|
119
|
-
@dt-color-border-success-
|
|
120
|
-
@dt-color-border-warning-
|
|
121
|
-
@dt-color-border-
|
|
122
|
-
@dt-color-border-
|
|
123
|
-
@dt-color-border-
|
|
124
|
-
@dt-
|
|
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: #4AA9EA;
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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,109 @@
|
|
|
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%
|
|
325
|
-
@dt-inputs-color-border-
|
|
326
|
-
@dt-inputs-color-border-
|
|
327
|
-
@dt-inputs-color-border-
|
|
328
|
-
@dt-inputs-color-border-
|
|
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: #4AA9EA;
|
|
371
|
+
@dt-inputs-color-border-critical: #D90A45;
|
|
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%
|
|
331
|
-
@dt-inputs-color-background-focus:
|
|
332
|
-
@dt-inputs-color-background-disabled: hsl(0 0%
|
|
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:
|
|
335
|
-
@dt-action-color-foreground-base-active:
|
|
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: #
|
|
338
|
-
@dt-action-color-foreground-critical-hover:
|
|
339
|
-
@dt-action-color-foreground-critical-active:
|
|
382
|
+
@dt-action-color-foreground-critical-default: #D90A45;
|
|
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: #
|
|
342
|
-
@dt-action-color-foreground-inverted-hover: #
|
|
343
|
-
@dt-action-color-foreground-inverted-active: #
|
|
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: #
|
|
346
|
-
@dt-action-color-foreground-inverted-primary-active: #
|
|
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: #
|
|
349
|
-
@dt-action-color-foreground-muted-active: #
|
|
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: #
|
|
352
|
-
@dt-action-color-foreground-positive-hover:
|
|
353
|
-
@dt-action-color-foreground-positive-active:
|
|
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(
|
|
357
|
-
@dt-action-color-background-base-active: hsl(
|
|
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:
|
|
360
|
-
@dt-action-color-background-base-primary-active:
|
|
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(
|
|
363
|
-
@dt-action-color-background-critical-active: hsl(
|
|
364
|
-
@dt-action-color-background-critical-primary-default: #
|
|
365
|
-
@dt-action-color-background-critical-primary-hover:
|
|
366
|
-
@dt-action-color-background-critical-primary-active:
|
|
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.
|
|
369
|
-
@dt-action-color-background-inverted-active: hsl(0 0% 100% / 0.
|
|
370
|
-
@dt-action-color-background-inverted-primary-default: #
|
|
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:
|
|
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%
|
|
375
|
-
@dt-action-color-background-muted-active: hsl(0 0%
|
|
376
|
-
@dt-action-color-background-disabled-default:
|
|
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(
|
|
379
|
-
@dt-action-color-background-positive-active: hsl(
|
|
380
|
-
@dt-action-color-background-positive-primary-default: #
|
|
381
|
-
@dt-action-color-background-positive-primary-hover:
|
|
382
|
-
@dt-action-color-background-positive-primary-active: hsl(
|
|
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: #
|
|
385
|
-
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.
|
|
386
|
-
@dt-action-color-border-muted-outlined-default: hsl(0 0%
|
|
387
|
-
@dt-
|
|
388
|
-
@dt-theme-
|
|
429
|
+
@dt-action-color-border-critical-outlined-default: #D90A45;
|
|
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-action-color-border-positive-outlined-default: #2EA834;
|
|
433
|
+
@dt-theme-color-base: #1C1C1C;
|
|
434
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 11% / 0.8);
|
|
389
435
|
@dt-theme-topbar-color-background: #F9F9F9;
|
|
390
|
-
@dt-theme-topbar-field-color-foreground: hsl(0 0%
|
|
391
|
-
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0%
|
|
392
|
-
@dt-theme-topbar-field-color-background: hsl(0 0%
|
|
436
|
+
@dt-theme-topbar-field-color-foreground: hsl(0 0% 11% / 0.5);
|
|
437
|
+
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 11% / 0.75);
|
|
438
|
+
@dt-theme-topbar-field-color-background: hsl(0 0% 11% / 0.05);
|
|
393
439
|
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
|
|
394
|
-
@dt-theme-topbar-field-color-border: hsl(0 0%
|
|
395
|
-
@dt-theme-topbar-field-color-border-hover: hsl(0 0%
|
|
396
|
-
@dt-theme-topbar-field-color-border-active: hsl(0 0%
|
|
397
|
-
@dt-theme-topbar-button-color-foreground: hsl(0 0%
|
|
398
|
-
@dt-theme-topbar-button-color-foreground-hover: #
|
|
399
|
-
@dt-theme-topbar-button-color-background: hsl(0 0%
|
|
400
|
-
@dt-theme-topbar-button-color-background-hover: hsl(0 0%
|
|
401
|
-
@dt-theme-topbar-button-color-background-active: hsl(0 0%
|
|
402
|
-
@dt-theme-topbar-profile-color-foreground: hsl(0 0%
|
|
403
|
-
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0%
|
|
404
|
-
@dt-theme-topbar-profile-color-background: hsl(0 0%
|
|
405
|
-
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0%
|
|
406
|
-
@dt-theme-topbar-profile-color-background-hover: hsl(0 0%
|
|
407
|
-
@dt-theme-topbar-profile-color-background-active: hsl(0 0%
|
|
440
|
+
@dt-theme-topbar-field-color-border: hsl(0 0% 11% / 0);
|
|
441
|
+
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 11% / 0.1);
|
|
442
|
+
@dt-theme-topbar-field-color-border-active: hsl(0 0% 11% / 0.2);
|
|
443
|
+
@dt-theme-topbar-button-color-foreground: hsl(0 0% 11% / 0.65);
|
|
444
|
+
@dt-theme-topbar-button-color-foreground-hover: #1C1C1C;
|
|
445
|
+
@dt-theme-topbar-button-color-background: hsl(0 0% 11% / 0);
|
|
446
|
+
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 11% / 0.05);
|
|
447
|
+
@dt-theme-topbar-button-color-background-active: hsl(0 0% 11% / 0.1);
|
|
448
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 11% / 0.8);
|
|
449
|
+
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 97.6% / 0.75);
|
|
450
|
+
@dt-theme-topbar-profile-color-background: hsl(0 0% 11% / 0.05);
|
|
451
|
+
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 11% / 0.75);
|
|
452
|
+
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 11% / 0.1);
|
|
453
|
+
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 11% / 0.14);
|
|
408
454
|
@dt-theme-sidebar-color-foreground: #3A3A3A;
|
|
409
|
-
@dt-theme-sidebar-color-foreground-unread: #
|
|
455
|
+
@dt-theme-sidebar-color-foreground-unread: #1C1C1C;
|
|
410
456
|
@dt-theme-sidebar-color-background: #F9F9F9;
|
|
411
457
|
@dt-theme-sidebar-icon-color-foreground: #3A3A3A;
|
|
412
|
-
@dt-theme-sidebar-status-color-foreground: #
|
|
413
|
-
@dt-theme-sidebar-row-color-background: hsl(0 0%
|
|
414
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(0 0%
|
|
415
|
-
@dt-theme-sidebar-row-color-background-active: hsl(0 0%
|
|
416
|
-
@dt-theme-sidebar-selected-row-color-foreground: #
|
|
417
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(0 0%
|
|
418
|
-
@dt-theme-sidebar-section-color-foreground: #
|
|
419
|
-
@dt-theme-presence-color-background-available: #
|
|
420
|
-
@dt-theme-presence-color-background-busy-unavailable: #
|
|
421
|
-
@dt-theme-presence-color-background-busy: #
|
|
458
|
+
@dt-theme-sidebar-status-color-foreground: #535353;
|
|
459
|
+
@dt-theme-sidebar-row-color-background: hsl(0 0% 11% / 0);
|
|
460
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 11% / 0.11);
|
|
461
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 11% / 0.15);
|
|
462
|
+
@dt-theme-sidebar-selected-row-color-foreground: #1C1C1C;
|
|
463
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 11% / 0.09);
|
|
464
|
+
@dt-theme-sidebar-section-color-foreground: #535353;
|
|
465
|
+
@dt-theme-presence-color-background-available: #52C926;
|
|
466
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF1356;
|
|
467
|
+
@dt-theme-presence-color-background-busy: #FF9E0E;
|
|
422
468
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
423
469
|
@dt-theme-mention-color-foreground: #ffffff;
|
|
424
|
-
@dt-theme-mention-color-foreground-strong: #
|
|
470
|
+
@dt-theme-mention-color-foreground-strong: #F9F9F9;
|
|
425
471
|
@dt-theme-mention-color-background: #7C52FF;
|
|
426
472
|
@dt-theme-mention-color-background-strong: #3A1D95;
|
|
427
473
|
@dt-avatar-color-foreground: #000000;
|
|
@@ -444,25 +490,29 @@
|
|
|
444
490
|
@dt-avatar-color-background-1700: #ffd646;
|
|
445
491
|
@dt-avatar-color-background-1800: #f1dab7;
|
|
446
492
|
@dt-avatar-color-background-000: #e0e0e0;
|
|
447
|
-
@dt-badge-color-background-default: hsl(0 0%
|
|
448
|
-
@dt-badge-color-background-info: #
|
|
449
|
-
@dt-badge-color-background-success: #
|
|
450
|
-
@dt-badge-color-background-warning: #
|
|
451
|
-
@dt-badge-color-background-critical: #
|
|
493
|
+
@dt-badge-color-background-default: hsl(0 0% 11% / 0.1);
|
|
494
|
+
@dt-badge-color-background-info: #BDE8FF;
|
|
495
|
+
@dt-badge-color-background-success: #DBFFA9;
|
|
496
|
+
@dt-badge-color-background-warning: #FFE89C;
|
|
497
|
+
@dt-badge-color-background-critical: #FFABA4;
|
|
452
498
|
@dt-badge-color-background-bulletin: #7C52FF;
|
|
453
|
-
@dt-badge-color-background-bulletin-subtle:
|
|
454
|
-
@dt-badge-color-background-ai: linear-gradient(
|
|
499
|
+
@dt-badge-color-background-bulletin-subtle: #D3BCFF;
|
|
500
|
+
@dt-badge-color-background-ai: linear-gradient(140deg, #FF5E2F 0%, #ff1356 25%, #FF1BA4 66%, #9D42EA 100%);
|
|
455
501
|
@dt-badge-color-foreground-default: #000000;
|
|
456
502
|
@dt-badge-color-foreground-bulletin: #ffffff;
|
|
457
|
-
@dt-badge-color-foreground-bulletin-subtle:
|
|
458
|
-
@dt-badge-color-
|
|
503
|
+
@dt-badge-color-foreground-bulletin-subtle: #3A1D95;
|
|
504
|
+
@dt-badge-color-foreground-ai: #ffffff;
|
|
505
|
+
@dt-badge-color-border-default: hsl(0 0% 11% / 0.11);
|
|
459
506
|
@dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
|
|
460
507
|
@dt-checkbox-size-width: 1.6rem;
|
|
461
508
|
@dt-checkbox-size-height: 1.6rem;
|
|
462
509
|
@dt-checkbox-size-radius: 0.4rem;
|
|
463
|
-
@dt-checkbox-color-border-unchecked: hsl(0 0%
|
|
510
|
+
@dt-checkbox-color-border-unchecked: hsl(0 0% 11% / 0.3);
|
|
511
|
+
@dt-checkbox-color-border-unchecked-hover: hsl(0 0% 11% / 0.5);
|
|
464
512
|
@dt-checkbox-color-border-checked: #7C52FF;
|
|
465
513
|
@dt-checkbox-color-background-checked: #7C52FF;
|
|
514
|
+
@dt-checkbox-color-foreground-default: transparent;
|
|
515
|
+
@dt-checkbox-color-foreground-checked: #F9F9F9;
|
|
466
516
|
@dt-icon-size-100: 12px;
|
|
467
517
|
@dt-icon-size-200: 14px;
|
|
468
518
|
@dt-icon-size-300: 18px;
|
|
@@ -482,6 +532,9 @@
|
|
|
482
532
|
@dt-radio-size-width: 1.6rem;
|
|
483
533
|
@dt-radio-size-height: 1.6rem;
|
|
484
534
|
@dt-radio-size-radius: 50%;
|
|
485
|
-
@dt-radio-color-border-unchecked: hsl(0 0%
|
|
535
|
+
@dt-radio-color-border-unchecked: hsl(0 0% 11% / 0.3);
|
|
536
|
+
@dt-radio-color-border-unchecked-hover: hsl(0 0% 11% / 0.5);
|
|
486
537
|
@dt-radio-color-border-checked: #7C52FF;
|
|
487
538
|
@dt-radio-color-background-checked: #7C52FF;
|
|
539
|
+
@dt-radio-color-foreground-default: transparent;
|
|
540
|
+
@dt-radio-color-foreground-checked: #F9F9F9;
|