@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.
- package/README.md +0 -1
- package/dist/css/dialtone-default-theme.css +6306 -1552
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone-docs.json +1 -1
- package/dist/css/dialtone.css +1848 -197
- 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 +526 -161
- package/dist/css/tokens/tokens-base-deca-dark.css +98 -48
- package/dist/css/tokens/tokens-base-deca-light.css +94 -44
- package/dist/css/tokens/tokens-base-light.css +493 -128
- package/dist/css/tokens/tokens-debug-base.css +368 -3
- package/dist/css/tokens/tokens-debug-dp.css +1027 -669
- package/dist/css/tokens/tokens-deca-dark.css +797 -768
- package/dist/css/tokens/tokens-deca-light.css +722 -693
- package/dist/css/tokens/tokens-dp-dark.css +1272 -914
- package/dist/css/tokens/tokens-dp-light.css +1331 -973
- package/dist/css/tokens/tokens-expressive-dark.css +1272 -914
- package/dist/css/tokens/tokens-expressive-light.css +1328 -970
- package/dist/css/tokens/tokens-expressive-sm-dark.css +1272 -914
- package/dist/css/tokens/tokens-expressive-sm-light.css +1328 -970
- package/dist/css/tokens/tokens-tmo-dark.css +1258 -900
- package/dist/css/tokens/tokens-tmo-light.css +1283 -925
- package/dist/css/tokens-docs.json +1 -1
- package/dist/tokens/css/tokens-base-dark.css +526 -161
- package/dist/tokens/css/tokens-base-deca-dark.css +98 -48
- package/dist/tokens/css/tokens-base-deca-light.css +94 -44
- package/dist/tokens/css/tokens-base-light.css +493 -128
- package/dist/tokens/css/tokens-debug-base.css +368 -3
- package/dist/tokens/css/tokens-debug-dp.css +1027 -669
- package/dist/tokens/css/tokens-deca-dark.css +797 -768
- package/dist/tokens/css/tokens-deca-light.css +722 -693
- package/dist/tokens/css/tokens-dp-dark.css +1272 -914
- package/dist/tokens/css/tokens-dp-light.css +1331 -973
- package/dist/tokens/css/tokens-expressive-dark.css +1272 -914
- package/dist/tokens/css/tokens-expressive-light.css +1328 -970
- package/dist/tokens/css/tokens-expressive-sm-dark.css +1272 -914
- package/dist/tokens/css/tokens-expressive-sm-light.css +1328 -970
- package/dist/tokens/css/tokens-tmo-dark.css +1258 -900
- package/dist/tokens/css/tokens-tmo-light.css +1283 -925
- package/dist/tokens/doc.json +105450 -85189
- package/dist/tokens/less/tokens-base-dark.less +99 -46
- package/dist/tokens/less/tokens-base-deca-dark.less +23 -15
- package/dist/tokens/less/tokens-base-deca-light.less +22 -14
- package/dist/tokens/less/tokens-base-light.less +90 -37
- package/dist/tokens/less/tokens-deca-dark.less +187 -182
- package/dist/tokens/less/tokens-deca-light.less +173 -168
- package/dist/tokens/less/tokens-dp-dark.less +238 -186
- package/dist/tokens/less/tokens-dp-light.less +237 -185
- package/dist/tokens/less/tokens-expressive-dark.less +261 -209
- package/dist/tokens/less/tokens-expressive-light.less +260 -208
- package/dist/tokens/less/tokens-expressive-sm-dark.less +261 -209
- package/dist/tokens/less/tokens-expressive-sm-light.less +260 -208
- package/dist/tokens/less/tokens-tmo-dark.less +236 -184
- package/dist/tokens/less/tokens-tmo-light.less +220 -168
- package/dist/tokens/themes/chunks/tokens-base-dark-BjqCt8ke.js +1 -0
- package/dist/tokens/themes/chunks/tokens-base-dark-DtZ_Inhl.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-light-CIQSO1H9.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-light-Cll0VrKT.js +1 -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 +99 -46
- package/dist/tokens/tokens-base-deca-dark.json +20 -12
- package/dist/tokens/tokens-base-deca-light.json +19 -11
- package/dist/tokens/tokens-base-light.json +90 -37
- package/dist/tokens/tokens-deca-dark.json +184 -179
- package/dist/tokens/tokens-deca-light.json +171 -166
- package/dist/tokens/tokens-dp-dark.json +223 -171
- package/dist/tokens/tokens-dp-light.json +234 -182
- package/dist/tokens/tokens-expressive-dark.json +246 -194
- package/dist/tokens/tokens-expressive-light.json +257 -205
- package/dist/tokens/tokens-expressive-sm-dark.json +246 -194
- package/dist/tokens/tokens-expressive-sm-light.json +257 -205
- package/dist/tokens/tokens-tmo-dark.json +221 -169
- package/dist/tokens/tokens-tmo-light.json +211 -159
- package/dist/vue2/components/pagination/pagination.vue.cjs +2 -2
- package/dist/vue2/components/pagination/pagination.vue.cjs.map +1 -1
- package/dist/vue2/components/pagination/pagination.vue.js +2 -2
- package/dist/vue2/components/pagination/pagination.vue.js.map +1 -1
- package/dist/vue2/components/popover/popover.vue.cjs +2 -2
- package/dist/vue2/components/popover/popover.vue.cjs.map +1 -1
- package/dist/vue2/components/popover/popover.vue.js +2 -2
- package/dist/vue2/components/popover/popover.vue.js.map +1 -1
- package/dist/vue2/components/tab/tab_panel.vue.cjs +1 -1
- package/dist/vue2/components/tab/tab_panel.vue.cjs.map +1 -1
- package/dist/vue2/components/tab/tab_panel.vue.js +1 -1
- package/dist/vue2/components/tab/tab_panel.vue.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/tab/tab_panel.vue.d.ts.map +1 -1
- package/dist/vue3/components/pagination/pagination.vue.cjs +2 -2
- package/dist/vue3/components/pagination/pagination.vue.cjs.map +1 -1
- package/dist/vue3/components/pagination/pagination.vue.js +2 -2
- package/dist/vue3/components/pagination/pagination.vue.js.map +1 -1
- package/dist/vue3/components/popover/popover.vue.cjs +2 -2
- package/dist/vue3/components/popover/popover.vue.cjs.map +1 -1
- package/dist/vue3/components/popover/popover.vue.js +2 -2
- package/dist/vue3/components/popover/popover.vue.js.map +1 -1
- package/dist/vue3/components/tab/tab_panel.vue.cjs +1 -2
- package/dist/vue3/components/tab/tab_panel.vue.cjs.map +1 -1
- package/dist/vue3/components/tab/tab_panel.vue.js +1 -2
- package/dist/vue3/components/tab/tab_panel.vue.js.map +1 -1
- package/dist/vue3/types/components/tab/tab_panel.vue.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
|
@@ -3,118 +3,162 @@
|
|
|
3
3
|
|
|
4
4
|
@dt-size-border-focus: 0.3rem;
|
|
5
5
|
@dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
|
|
6
|
-
@dt-color-foreground-secondary: #
|
|
7
|
-
@dt-color-foreground-tertiary: #
|
|
6
|
+
@dt-color-foreground-secondary: #c7c7c7; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
7
|
+
@dt-color-foreground-tertiary: #B0B0B0; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
|
|
8
8
|
@dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
|
|
9
|
-
@dt-color-foreground-placeholder: #
|
|
10
|
-
@dt-color-foreground-disabled: #
|
|
11
|
-
@dt-color-foreground-critical: #
|
|
12
|
-
@dt-color-foreground-critical-strong:
|
|
13
|
-
@dt-color-foreground-success: #
|
|
14
|
-
@dt-color-foreground-success-strong:
|
|
15
|
-
@dt-color-foreground-warning: #
|
|
9
|
+
@dt-color-foreground-placeholder: #B0B0B0;
|
|
10
|
+
@dt-color-foreground-disabled: #B0B0B0;
|
|
11
|
+
@dt-color-foreground-critical: #FF716F;
|
|
12
|
+
@dt-color-foreground-critical-strong: #FFABA4;
|
|
13
|
+
@dt-color-foreground-success: #AEFB3C;
|
|
14
|
+
@dt-color-foreground-success-strong: #DBFFA9;
|
|
15
|
+
@dt-color-foreground-warning: #FFBD48;
|
|
16
16
|
@dt-color-foreground-primary-inverted: #000000;
|
|
17
|
-
@dt-color-foreground-secondary-inverted: #
|
|
17
|
+
@dt-color-foreground-secondary-inverted: #3d3d3d;
|
|
18
18
|
@dt-color-foreground-tertiary-inverted: #555555;
|
|
19
|
-
@dt-color-foreground-muted-inverted: hsl(0 0%
|
|
20
|
-
@dt-color-foreground-placeholder-inverted: #
|
|
21
|
-
@dt-color-foreground-disabled-inverted: #
|
|
22
|
-
@dt-color-foreground-critical-inverted: #
|
|
23
|
-
@dt-color-foreground-critical-strong-inverted: #
|
|
24
|
-
@dt-color-foreground-success-inverted: #
|
|
25
|
-
@dt-color-foreground-success-strong-inverted: #
|
|
26
|
-
@dt-color-foreground-warning-inverted: #815008;
|
|
27
|
-
@dt-color-link-primary:
|
|
28
|
-
@dt-color-link-
|
|
29
|
-
@dt-color-link-
|
|
30
|
-
@dt-color-link-
|
|
31
|
-
@dt-color-link-
|
|
32
|
-
@dt-color-link-
|
|
19
|
+
@dt-color-foreground-muted-inverted: hsl(0 0% 9.02% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
|
|
20
|
+
@dt-color-foreground-placeholder-inverted: #555555; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
21
|
+
@dt-color-foreground-disabled-inverted: #555555; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
22
|
+
@dt-color-foreground-critical-inverted: #FF1356;
|
|
23
|
+
@dt-color-foreground-critical-strong-inverted: #640823; // Critical strong text that sits on high-contrast surfaces or backgrounds
|
|
24
|
+
@dt-color-foreground-success-inverted: #008E52;
|
|
25
|
+
@dt-color-foreground-success-strong-inverted: #004F2E;
|
|
26
|
+
@dt-color-foreground-warning-inverted: #815008;
|
|
27
|
+
@dt-color-link-primary: #BBA6FC;
|
|
28
|
+
@dt-color-link-primary-hover: #D3BCFF;
|
|
29
|
+
@dt-color-link-critical: #FF716F;
|
|
30
|
+
@dt-color-link-critical-hover: #FFABA4;
|
|
31
|
+
@dt-color-link-success: #AEFB3C; // positive
|
|
32
|
+
@dt-color-link-success-hover: #DBFFA9;
|
|
33
|
+
@dt-color-link-warning: #FFBD48;
|
|
34
|
+
@dt-color-link-warning-hover: #FFE89C;
|
|
35
|
+
@dt-color-link-muted: #c7c7c7;
|
|
36
|
+
@dt-color-link-muted-hover: #E6E6E6;
|
|
37
|
+
@dt-color-link-disabled: #B0B0B0;
|
|
38
|
+
@dt-color-link-disabled-hover: #B0B0B0;
|
|
33
39
|
@dt-color-link-primary-inverted: #7C52FF;
|
|
34
|
-
@dt-color-link-
|
|
35
|
-
@dt-color-link-
|
|
40
|
+
@dt-color-link-primary-inverted-hover: #5023DD;
|
|
41
|
+
@dt-color-link-critical-inverted: #FF1356;
|
|
42
|
+
@dt-color-link-critical-inverted-hover: #640823;
|
|
43
|
+
@dt-color-link-success-inverted: #008E52;
|
|
44
|
+
@dt-color-link-success-inverted-hover: #004F2E;
|
|
36
45
|
@dt-color-link-warning-inverted: #815008;
|
|
37
|
-
@dt-color-link-
|
|
38
|
-
@dt-color-link-
|
|
39
|
-
@dt-color-link-
|
|
40
|
-
@dt-color-link-
|
|
41
|
-
@dt-color-link-
|
|
42
|
-
@dt-color-
|
|
43
|
-
@dt-color-
|
|
44
|
-
@dt-color-
|
|
45
|
-
@dt-color-link-primary-inverted-hover: #3A1D95;
|
|
46
|
-
@dt-color-link-critical-inverted-hover: #B70B0B;
|
|
47
|
-
@dt-color-link-success-inverted-hover: #124620;
|
|
48
|
-
@dt-color-link-warning-inverted-hover: #262626;
|
|
49
|
-
@dt-color-link-muted-inverted-hover: #000000;
|
|
50
|
-
@dt-color-link-disabled-inverted-hover: #808080;
|
|
51
|
-
@dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.06);
|
|
52
|
-
@dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.15);
|
|
53
|
-
@dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.27);
|
|
54
|
-
@dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.65);
|
|
55
|
-
@dt-color-surface-contrast-opaque: hsl(0 0% 90.2% / 0.96);
|
|
56
|
-
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
|
|
57
|
-
@dt-color-surface-critical-opaque: hsl(0 88.7% 38% / 0.32);
|
|
58
|
-
@dt-color-surface-critical-subtle-opaque: hsl(0 89.6% 9.41% / 0.5);
|
|
59
|
-
@dt-color-surface-warning-opaque: hsl(35.9 66% 49.6% / 0.48);
|
|
60
|
-
@dt-color-surface-warning-subtle-opaque: hsl(35.7 88.3% 13.4% / 0.5);
|
|
61
|
-
@dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.26);
|
|
62
|
-
@dt-color-surface-success-subtle-opaque: hsl(136 59.1% 8.63% / 0.5);
|
|
63
|
-
@dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.29);
|
|
64
|
-
@dt-color-surface-info-subtle-opaque: hsl(213 98.2% 12.9% / 0.5);
|
|
65
|
-
@dt-color-surface-primary: hsl(0 0% 12%);
|
|
66
|
-
@dt-color-surface-secondary: #262626;
|
|
67
|
-
@dt-color-surface-moderate: #3A3A3A;
|
|
46
|
+
@dt-color-link-warning-inverted-hover: #533204;
|
|
47
|
+
@dt-color-link-muted-inverted: #3d3d3d;
|
|
48
|
+
@dt-color-link-muted-inverted-hover: #171717;
|
|
49
|
+
@dt-color-link-disabled-inverted: #555555;
|
|
50
|
+
@dt-color-link-disabled-inverted-hover: #555555;
|
|
51
|
+
@dt-color-surface-primary: #171717;
|
|
52
|
+
@dt-color-surface-secondary: #1f1f1f;
|
|
53
|
+
@dt-color-surface-moderate: #3d3d3d;
|
|
68
54
|
@dt-color-surface-bold: #555555;
|
|
69
|
-
@dt-color-surface-strong: #
|
|
70
|
-
@dt-color-surface-contrast: #
|
|
71
|
-
@dt-color-surface-critical: #
|
|
72
|
-
@dt-color-surface-
|
|
73
|
-
@dt-color-surface-
|
|
74
|
-
@dt-color-surface-
|
|
75
|
-
@dt-color-surface-
|
|
76
|
-
@dt-color-surface-
|
|
77
|
-
@dt-color-surface-
|
|
78
|
-
@dt-color-surface-success-subtle: hsl(
|
|
79
|
-
@dt-color-surface-
|
|
80
|
-
@dt-color-surface-
|
|
81
|
-
@dt-color-surface-
|
|
82
|
-
@dt-color-surface-
|
|
55
|
+
@dt-color-surface-strong: #B0B0B0;
|
|
56
|
+
@dt-color-surface-contrast: #ffffff;
|
|
57
|
+
@dt-color-surface-critical: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
58
|
+
@dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
59
|
+
@dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
60
|
+
@dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
|
|
61
|
+
@dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
|
|
62
|
+
@dt-color-surface-critical-subtle: hsl(343 100% 5.49%);
|
|
63
|
+
@dt-color-surface-warning-subtle: hsl(35.7 91.3% 4.51%);
|
|
64
|
+
@dt-color-surface-success-subtle: hsl(155 95% 3.92%);
|
|
65
|
+
@dt-color-surface-info-subtle: hsl(211 100% 4.82%);
|
|
66
|
+
@dt-color-surface-brand-subtle: #10022C; // A softer version of the default informational surface.
|
|
67
|
+
@dt-color-surface-critical-strong: #FF716F;
|
|
68
|
+
@dt-color-surface-warning-strong: #FFDB80;
|
|
69
|
+
@dt-color-surface-success-strong: #AEFB3C;
|
|
70
|
+
@dt-color-surface-info-strong: #4AA9EA;
|
|
71
|
+
@dt-color-surface-brand-strong: #BBA6FC;
|
|
72
|
+
@dt-color-surface-primary-opaque: hsl(0 0% 9.02% / 0.9);
|
|
73
|
+
@dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
|
|
74
|
+
@dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
|
|
75
|
+
@dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
|
|
76
|
+
@dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
|
|
77
|
+
@dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
|
|
78
|
+
@dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
|
|
79
|
+
@dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
|
|
80
|
+
@dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
|
|
81
|
+
@dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
|
|
82
|
+
@dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
|
|
83
|
+
@dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
|
|
84
|
+
@dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
|
|
85
|
+
@dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
|
|
86
|
+
@dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
|
|
87
|
+
@dt-color-surface-brand-subtle-opaque: hsl(260 91.3% 9.02% / 0.65);
|
|
88
|
+
@dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
89
|
+
@dt-color-surface-secondary-inverted: #F9F9F9;
|
|
90
|
+
@dt-color-surface-moderate-inverted: #E6E6E6;
|
|
91
|
+
@dt-color-surface-bold-inverted: #D4D4D4;
|
|
92
|
+
@dt-color-surface-strong-inverted: #555555; // Use sparingly to draw the eye to a relatively important region.
|
|
93
|
+
@dt-color-surface-contrast-inverted: #171717; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
94
|
+
@dt-color-surface-critical-inverted: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
95
|
+
@dt-color-surface-warning-inverted: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
96
|
+
@dt-color-surface-success-inverted: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
97
|
+
@dt-color-surface-info-inverted: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
|
|
98
|
+
@dt-color-surface-brand-inverted: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
|
|
99
|
+
@dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
|
|
100
|
+
@dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
|
|
101
|
+
@dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
|
|
102
|
+
@dt-color-surface-info-subtle-inverted: #f5f9fd; // A softer version of the default informational surface.
|
|
103
|
+
@dt-color-surface-brand-subtle-inverted: #f9f6ff; // A softer version of the default informational surface.
|
|
104
|
+
@dt-color-surface-critical-strong-inverted: #D90A45;
|
|
105
|
+
@dt-color-surface-warning-strong-inverted: #FFBD48;
|
|
106
|
+
@dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
107
|
+
@dt-color-surface-info-strong-inverted: #1768C6;
|
|
108
|
+
@dt-color-surface-brand-strong-inverted: #7C52FF;
|
|
109
|
+
@dt-color-surface-primary-opaque-inverted: hsl(0 0% 100% / 0.85); // Secondary surface as opaque background color.
|
|
110
|
+
@dt-color-surface-secondary-opaque-inverted: hsl(0 0% 0% / 0.04);
|
|
111
|
+
@dt-color-surface-moderate-opaque-inverted: hsl(0 0% 0% / 0.11);
|
|
112
|
+
@dt-color-surface-bold-opaque-inverted: hsl(0 0% 0% / 0.18);
|
|
113
|
+
@dt-color-surface-strong-opaque-inverted: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
|
|
114
|
+
@dt-color-surface-contrast-opaque-inverted: hsl(0 0% 0% / 0.97); // Contrast surface as opaque background color.
|
|
115
|
+
@dt-color-surface-critical-opaque-inverted: hsl(4.62 100% 82.2% / 0.5);
|
|
116
|
+
@dt-color-surface-warning-opaque-inverted: hsl(46.1 100% 80.6% / 0.5);
|
|
117
|
+
@dt-color-surface-success-opaque-inverted: hsl(85.1 100% 83.1% / 0.3); // Success surface as opaque background color.
|
|
118
|
+
@dt-color-surface-info-opaque-inverted: hsl(210 61.5% 94.9% / 0.6); // Info surface as opaque background color.
|
|
119
|
+
@dt-color-surface-brand-opaque-inverted: hsl(260 100% 97.1% / 0.8); // Info surface as opaque background color.
|
|
120
|
+
@dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
|
|
121
|
+
@dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
|
|
122
|
+
@dt-color-surface-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
|
|
123
|
+
@dt-color-surface-info-subtle-opaque-inverted: hsl(210 66.7% 97.6% / 0.66); // Info surface as opaque background color.
|
|
124
|
+
@dt-color-surface-brand-subtle-opaque-inverted: hsl(260 100% 98.2% / 0.66); // Info surface as opaque background color.
|
|
125
|
+
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
|
|
126
|
+
@dt-color-surface-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
|
|
83
127
|
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
84
128
|
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
85
129
|
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
86
130
|
@dt-color-border-bold: hsl(0 0% 100% / 0.5);
|
|
131
|
+
@dt-color-border-critical: #FF716F;
|
|
132
|
+
@dt-color-border-success: #D1FF76;
|
|
133
|
+
@dt-color-border-warning: #FFDB80;
|
|
134
|
+
@dt-color-border-brand: #BBA6FC;
|
|
135
|
+
@dt-color-border-critical-subtle: #93173A;
|
|
136
|
+
@dt-color-border-success-subtle: #52C926;
|
|
137
|
+
@dt-color-border-warning-subtle: #FF9E0E;
|
|
138
|
+
@dt-color-border-brand-subtle: #7C52FF;
|
|
139
|
+
@dt-color-border-critical-strong: #FFABA4;
|
|
140
|
+
@dt-color-border-success-strong: #AEFB3C;
|
|
141
|
+
@dt-color-border-warning-strong: #FFE89C;
|
|
142
|
+
@dt-color-border-brand-strong: #D3BCFF;
|
|
87
143
|
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
88
144
|
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
89
145
|
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
90
146
|
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
91
|
-
@dt-color-border-
|
|
92
|
-
@dt-color-border-
|
|
93
|
-
@dt-color-border-
|
|
94
|
-
@dt-color-border-warning: #FFDB80;
|
|
95
|
-
@dt-color-border-brand: #7C52FF;
|
|
96
|
-
@dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
97
|
-
@dt-color-border-accent: #F9008E;
|
|
98
|
-
@dt-color-border-critical-subtle: #B70B0B;
|
|
99
|
-
@dt-color-border-critical-strong: #FFE5E6;
|
|
100
|
-
@dt-color-border-success-subtle: #1AA340;
|
|
101
|
-
@dt-color-border-success-strong: #EDF9EB;
|
|
102
|
-
@dt-color-border-warning-subtle: #D28F2B;
|
|
103
|
-
@dt-color-border-warning-strong: #FFF4CC;
|
|
104
|
-
@dt-color-border-brand-subtle: #3A1D95;
|
|
105
|
-
@dt-color-border-brand-strong: #DAC7FF;
|
|
106
|
-
@dt-color-border-critical-inverted: #EC0E0E;
|
|
107
|
-
@dt-color-border-success-inverted: #1AA340;
|
|
108
|
-
@dt-color-border-warning-inverted: #D28F2B;
|
|
147
|
+
@dt-color-border-critical-inverted: #FF1356;
|
|
148
|
+
@dt-color-border-success-inverted: #31B237;
|
|
149
|
+
@dt-color-border-warning-inverted: #FF9E0E;
|
|
109
150
|
@dt-color-border-brand-inverted: #7C52FF;
|
|
110
|
-
@dt-color-border-critical-subtle-inverted: #
|
|
111
|
-
@dt-color-border-
|
|
112
|
-
@dt-color-border-success-subtle-inverted: #B0FFA3;
|
|
113
|
-
@dt-color-border-success-strong-inverted: #124620;
|
|
151
|
+
@dt-color-border-critical-subtle-inverted: #FF716F;
|
|
152
|
+
@dt-color-border-success-subtle-inverted: #D1FF76;
|
|
114
153
|
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
115
|
-
@dt-color-border-
|
|
116
|
-
@dt-color-border-
|
|
117
|
-
@dt-color-border-
|
|
154
|
+
@dt-color-border-brand-subtle-inverted: #BBA6FC;
|
|
155
|
+
@dt-color-border-critical-strong-inverted: #93173A;
|
|
156
|
+
@dt-color-border-success-strong-inverted: #004F2E;
|
|
157
|
+
@dt-color-border-warning-strong-inverted: #D57F00;
|
|
158
|
+
@dt-color-border-brand-strong-inverted: #5023DD;
|
|
159
|
+
@dt-color-border-focus: #1768C6;
|
|
160
|
+
@dt-color-border-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
|
|
161
|
+
@dt-color-border-accent: #FF1BA4;
|
|
118
162
|
@dt-typography-body-md-font-family: -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.
|
|
119
163
|
@dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
|
|
120
164
|
@dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
|
|
@@ -291,15 +335,15 @@
|
|
|
291
335
|
@dt-typography-inputs-xl-font-size: 27px; // Text style for extra large inputs (e.g. input and textarea)
|
|
292
336
|
@dt-typography-inputs-xl-line-height: 1.2; // Text style for extra large inputs (e.g. input and textarea)
|
|
293
337
|
@dt-typography-button-xs-font-family: -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"; // Text style for extra small button
|
|
294
|
-
@dt-typography-button-xs-font-weight:
|
|
338
|
+
@dt-typography-button-xs-font-weight: 600; // Text style for extra small button
|
|
295
339
|
@dt-typography-button-xs-font-size: 12px; // Text style for extra small button
|
|
296
340
|
@dt-typography-button-xs-line-height: 1.2; // Text style for extra small button
|
|
297
341
|
@dt-typography-button-sm-font-family: -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"; // Text style for small button
|
|
298
|
-
@dt-typography-button-sm-font-weight:
|
|
342
|
+
@dt-typography-button-sm-font-weight: 600; // Text style for small button
|
|
299
343
|
@dt-typography-button-sm-font-size: 12px; // Text style for small button
|
|
300
344
|
@dt-typography-button-sm-line-height: 1.2; // Text style for small button
|
|
301
345
|
@dt-typography-button-md-font-family: -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"; // Text style for medium button
|
|
302
|
-
@dt-typography-button-md-font-weight:
|
|
346
|
+
@dt-typography-button-md-font-weight: 600; // Text style for medium button
|
|
303
347
|
@dt-typography-button-md-font-size: 15px; // Text style for medium button
|
|
304
348
|
@dt-typography-button-md-line-height: 1.2; // Text style for medium button
|
|
305
349
|
@dt-typography-button-lg-font-family: -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"; // Text style for large button
|
|
@@ -333,78 +377,79 @@
|
|
|
333
377
|
@dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
|
|
334
378
|
@dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
|
|
335
379
|
@dt-inputs-color-foreground-default: #E6E6E6;
|
|
336
|
-
@dt-inputs-color-foreground-placeholder: #
|
|
337
|
-
@dt-inputs-color-foreground-disabled: #
|
|
380
|
+
@dt-inputs-color-foreground-placeholder: #B0B0B0;
|
|
381
|
+
@dt-inputs-color-foreground-disabled: #B0B0B0;
|
|
338
382
|
@dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
|
|
339
|
-
@dt-inputs-color-border-
|
|
340
|
-
@dt-inputs-color-border-
|
|
341
|
-
@dt-inputs-color-border-
|
|
383
|
+
@dt-inputs-color-border-hover: hsl(0 0% 100% / 0.36);
|
|
384
|
+
@dt-inputs-color-border-focus: #1768C6;
|
|
385
|
+
@dt-inputs-color-border-critical: #FF716F;
|
|
386
|
+
@dt-inputs-color-border-success: #D1FF76;
|
|
342
387
|
@dt-inputs-color-border-warning: #FFDB80;
|
|
343
388
|
@dt-inputs-color-border-disabled: transparent;
|
|
344
|
-
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.
|
|
345
|
-
@dt-inputs-color-background-focus:
|
|
346
|
-
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.
|
|
347
|
-
@dt-action-color-foreground-base-default: #
|
|
348
|
-
@dt-action-color-foreground-base-hover:
|
|
349
|
-
@dt-action-color-foreground-base-active:
|
|
350
|
-
@dt-action-color-foreground-base-primary-default: #
|
|
351
|
-
@dt-action-color-foreground-critical-default: #
|
|
352
|
-
@dt-action-color-foreground-critical-hover:
|
|
353
|
-
@dt-action-color-foreground-critical-active:
|
|
354
|
-
@dt-action-color-foreground-critical-primary-default: #
|
|
389
|
+
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.03);
|
|
390
|
+
@dt-inputs-color-background-focus: #171717;
|
|
391
|
+
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.18);
|
|
392
|
+
@dt-action-color-foreground-base-default: #BBA6FC;
|
|
393
|
+
@dt-action-color-foreground-base-hover: #D3BCFF;
|
|
394
|
+
@dt-action-color-foreground-base-active: #D3BCFF;
|
|
395
|
+
@dt-action-color-foreground-base-primary-default: #000000;
|
|
396
|
+
@dt-action-color-foreground-critical-default: #FF716F;
|
|
397
|
+
@dt-action-color-foreground-critical-hover: #FFABA4;
|
|
398
|
+
@dt-action-color-foreground-critical-active: #FFABA4;
|
|
399
|
+
@dt-action-color-foreground-critical-primary-default: #000000;
|
|
355
400
|
@dt-action-color-foreground-inverted-default: #000000;
|
|
356
401
|
@dt-action-color-foreground-inverted-hover: #000000;
|
|
357
402
|
@dt-action-color-foreground-inverted-active: #000000;
|
|
358
|
-
@dt-action-color-foreground-inverted-primary-default: #
|
|
359
|
-
@dt-action-color-foreground-inverted-primary-hover: #
|
|
360
|
-
@dt-action-color-foreground-inverted-primary-active: #
|
|
361
|
-
@dt-action-color-foreground-muted-default: #
|
|
362
|
-
@dt-action-color-foreground-muted-hover: #
|
|
363
|
-
@dt-action-color-foreground-muted-active: #
|
|
364
|
-
@dt-action-color-foreground-disabled-default: #
|
|
365
|
-
@dt-action-color-foreground-positive-default: #
|
|
366
|
-
@dt-action-color-foreground-positive-hover:
|
|
367
|
-
@dt-action-color-foreground-positive-active:
|
|
368
|
-
@dt-action-color-foreground-positive-primary-default: #
|
|
403
|
+
@dt-action-color-foreground-inverted-primary-default: #BBA6FC;
|
|
404
|
+
@dt-action-color-foreground-inverted-primary-hover: #D3BCFF;
|
|
405
|
+
@dt-action-color-foreground-inverted-primary-active: #D3BCFF;
|
|
406
|
+
@dt-action-color-foreground-muted-default: #c7c7c7;
|
|
407
|
+
@dt-action-color-foreground-muted-hover: #E6E6E6;
|
|
408
|
+
@dt-action-color-foreground-muted-active: #E6E6E6;
|
|
409
|
+
@dt-action-color-foreground-disabled-default: #B0B0B0;
|
|
410
|
+
@dt-action-color-foreground-positive-default: #AEFB3C;
|
|
411
|
+
@dt-action-color-foreground-positive-hover: #DBFFA9;
|
|
412
|
+
@dt-action-color-foreground-positive-active: #DBFFA9;
|
|
413
|
+
@dt-action-color-foreground-positive-primary-default: #000000;
|
|
369
414
|
@dt-action-color-background-base-default: transparent;
|
|
370
|
-
@dt-action-color-background-base-hover: hsl(
|
|
371
|
-
@dt-action-color-background-base-active: hsl(
|
|
372
|
-
@dt-action-color-background-base-primary-default: #
|
|
373
|
-
@dt-action-color-background-base-primary-hover:
|
|
374
|
-
@dt-action-color-background-base-primary-active:
|
|
415
|
+
@dt-action-color-background-base-hover: hsl(253 95.9% 71.6% / 0.2);
|
|
416
|
+
@dt-action-color-background-base-active: hsl(253 95.9% 71.6% / 0.3);
|
|
417
|
+
@dt-action-color-background-base-primary-default: #BBA6FC;
|
|
418
|
+
@dt-action-color-background-base-primary-hover: #D3BCFF;
|
|
419
|
+
@dt-action-color-background-base-primary-active: #BBA6FC;
|
|
375
420
|
@dt-action-color-background-critical-default: transparent;
|
|
376
|
-
@dt-action-color-background-critical-hover: hsl(
|
|
377
|
-
@dt-action-color-background-critical-active: hsl(
|
|
378
|
-
@dt-action-color-background-critical-primary-default: #
|
|
379
|
-
@dt-action-color-background-critical-primary-hover:
|
|
380
|
-
@dt-action-color-background-critical-primary-active:
|
|
421
|
+
@dt-action-color-background-critical-hover: hsl(343 72.9% 33.3% / 0.2);
|
|
422
|
+
@dt-action-color-background-critical-active: hsl(343 72.9% 50% / 0.2);
|
|
423
|
+
@dt-action-color-background-critical-primary-default: #FF716F;
|
|
424
|
+
@dt-action-color-background-critical-primary-hover: #FFABA4;
|
|
425
|
+
@dt-action-color-background-critical-primary-active: #FF716F;
|
|
381
426
|
@dt-action-color-background-inverted-default: transparent;
|
|
382
|
-
@dt-action-color-background-inverted-hover: hsl(0 0%
|
|
383
|
-
@dt-action-color-background-inverted-active: hsl(0 0%
|
|
384
|
-
@dt-action-color-background-inverted-primary-default:
|
|
385
|
-
@dt-action-color-background-inverted-primary-hover: #
|
|
427
|
+
@dt-action-color-background-inverted-hover: hsl(0 0% 0% / 0.11);
|
|
428
|
+
@dt-action-color-background-inverted-active: hsl(0 0% 0% / 0.18);
|
|
429
|
+
@dt-action-color-background-inverted-primary-default: #171717;
|
|
430
|
+
@dt-action-color-background-inverted-primary-hover: #1D0155;
|
|
386
431
|
@dt-action-color-background-inverted-primary-active: #3A1D95;
|
|
387
432
|
@dt-action-color-background-muted-default: transparent;
|
|
388
|
-
@dt-action-color-background-muted-hover: hsl(0 0%
|
|
389
|
-
@dt-action-color-background-muted-active: hsl(0 0%
|
|
390
|
-
@dt-action-color-background-disabled-default:
|
|
433
|
+
@dt-action-color-background-muted-hover: hsl(0 0% 90.2% / 0.18);
|
|
434
|
+
@dt-action-color-background-muted-active: hsl(0 0% 90.2% / 0.3);
|
|
435
|
+
@dt-action-color-background-disabled-default: hsl(0 0% 90.2% / 0.3);
|
|
391
436
|
@dt-action-color-background-positive-default: transparent;
|
|
392
|
-
@dt-action-color-background-positive-hover: hsl(
|
|
393
|
-
@dt-action-color-background-positive-active: hsl(
|
|
394
|
-
@dt-action-color-background-positive-primary-default: #
|
|
395
|
-
@dt-action-color-background-positive-primary-hover:
|
|
396
|
-
@dt-action-color-background-positive-primary-active:
|
|
397
|
-
@dt-action-color-border-base-outlined-default: #
|
|
398
|
-
@dt-action-color-border-critical-outlined-default: #
|
|
437
|
+
@dt-action-color-background-positive-hover: hsl(155 100% 15.5% / 0.28);
|
|
438
|
+
@dt-action-color-background-positive-active: hsl(155 100% 36.6% / 0.28);
|
|
439
|
+
@dt-action-color-background-positive-primary-default: #AEFB3C; // Postive, accepting, or success actions.
|
|
440
|
+
@dt-action-color-background-positive-primary-hover: #D1FF76;
|
|
441
|
+
@dt-action-color-background-positive-primary-active: #AEFB3C;
|
|
442
|
+
@dt-action-color-border-base-outlined-default: #BBA6FC;
|
|
443
|
+
@dt-action-color-border-critical-outlined-default: #FF716F;
|
|
399
444
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
|
|
400
445
|
@dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
|
|
401
446
|
@dt-theme-color-base: #F285BC;
|
|
402
|
-
@dt-theme-topbar-color-foreground: hsl(330 80.7% 73.5% / 0.
|
|
403
|
-
@dt-theme-topbar-color-background: #
|
|
447
|
+
@dt-theme-topbar-color-foreground: hsl(330 80.7% 73.5% / 0.8);
|
|
448
|
+
@dt-theme-topbar-color-background: #1f1f1f;
|
|
404
449
|
@dt-theme-topbar-field-color-foreground: hsl(330 80.7% 73.5% / 0.5);
|
|
405
450
|
@dt-theme-topbar-field-color-foreground-hover: hsl(330 80.7% 73.5% / 0.75);
|
|
406
451
|
@dt-theme-topbar-field-color-background: hsl(330 80.7% 73.5% / 0.05);
|
|
407
|
-
@dt-theme-topbar-field-color-background-hover: hsl(0 0%
|
|
452
|
+
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
|
|
408
453
|
@dt-theme-topbar-field-color-border: hsl(330 80.7% 73.5% / 0);
|
|
409
454
|
@dt-theme-topbar-field-color-border-hover: hsl(330 80.7% 73.5% / 0.1);
|
|
410
455
|
@dt-theme-topbar-field-color-border-active: hsl(330 80.7% 73.5% / 0.2);
|
|
@@ -413,28 +458,28 @@
|
|
|
413
458
|
@dt-theme-topbar-button-color-background: hsl(330 80.7% 73.5% / 0);
|
|
414
459
|
@dt-theme-topbar-button-color-background-hover: hsl(330 80.7% 73.5% / 0.15);
|
|
415
460
|
@dt-theme-topbar-button-color-background-active: hsl(330 80.7% 73.5% / 0.1);
|
|
416
|
-
@dt-theme-topbar-profile-color-foreground: hsl(330 80.7% 73.5% / 0.
|
|
461
|
+
@dt-theme-topbar-profile-color-foreground: hsl(330 80.7% 73.5% / 0.8);
|
|
417
462
|
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
|
|
418
463
|
@dt-theme-topbar-profile-color-background: hsl(330 80.7% 73.5% / 0.05);
|
|
419
464
|
@dt-theme-topbar-profile-color-background-inverted: hsl(330 80.7% 73.5% / 0.75);
|
|
420
465
|
@dt-theme-topbar-profile-color-background-hover: hsl(330 80.7% 73.5% / 0.1);
|
|
421
466
|
@dt-theme-topbar-profile-color-background-active: hsl(330 80.7% 73.5% / 0.14);
|
|
422
|
-
@dt-theme-sidebar-color-foreground: #
|
|
467
|
+
@dt-theme-sidebar-color-foreground: #c7c7c7;
|
|
423
468
|
@dt-theme-sidebar-color-foreground-unread: #E6E6E6;
|
|
424
|
-
@dt-theme-sidebar-color-background: #
|
|
425
|
-
@dt-theme-sidebar-icon-color-foreground: #
|
|
426
|
-
@dt-theme-sidebar-status-color-foreground: #
|
|
469
|
+
@dt-theme-sidebar-color-background: #1f1f1f;
|
|
470
|
+
@dt-theme-sidebar-icon-color-foreground: #c7c7c7;
|
|
471
|
+
@dt-theme-sidebar-status-color-foreground: #B0B0B0;
|
|
427
472
|
@dt-theme-sidebar-row-color-background: hsl(330 80.7% 73.5% / 0);
|
|
428
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(330 80.7% 73.5% / 0.
|
|
429
|
-
@dt-theme-sidebar-row-color-background-active: hsl(330 80.7% 73.5% / 0.
|
|
473
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(330 80.7% 73.5% / 0.1);
|
|
474
|
+
@dt-theme-sidebar-row-color-background-active: hsl(330 80.7% 73.5% / 0.15);
|
|
430
475
|
@dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
|
|
431
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(330 80.7% 73.5% / 0.
|
|
432
|
-
@dt-theme-sidebar-section-color-foreground: #
|
|
433
|
-
@dt-theme-presence-color-background-available: #
|
|
434
|
-
@dt-theme-presence-color-background-busy-unavailable: #
|
|
435
|
-
@dt-theme-presence-color-background-busy: #
|
|
476
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(330 80.7% 73.5% / 0.12);
|
|
477
|
+
@dt-theme-sidebar-section-color-foreground: #B0B0B0;
|
|
478
|
+
@dt-theme-presence-color-background-available: #84EE0B;
|
|
479
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF415B;
|
|
480
|
+
@dt-theme-presence-color-background-busy: #FFBD48;
|
|
436
481
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
437
|
-
@dt-theme-mention-color-foreground: #
|
|
482
|
+
@dt-theme-mention-color-foreground: #000000;
|
|
438
483
|
@dt-theme-mention-color-foreground-strong: #000000;
|
|
439
484
|
@dt-theme-mention-color-background: #E20074;
|
|
440
485
|
@dt-theme-mention-color-background-strong: #FFCEE7;
|
|
@@ -458,27 +503,28 @@
|
|
|
458
503
|
@dt-avatar-color-background-1700: #ffd646;
|
|
459
504
|
@dt-avatar-color-background-1800: #f1dab7;
|
|
460
505
|
@dt-avatar-color-background-000: #e0e0e0;
|
|
461
|
-
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.
|
|
462
|
-
@dt-badge-color-background-info: #
|
|
463
|
-
@dt-badge-color-background-success: #
|
|
464
|
-
@dt-badge-color-background-warning: #
|
|
465
|
-
@dt-badge-color-background-critical: #
|
|
466
|
-
@dt-badge-color-background-bulletin: #
|
|
467
|
-
@dt-badge-color-background-bulletin-subtle:
|
|
468
|
-
@dt-badge-color-background-ai: linear-gradient(
|
|
469
|
-
@dt-badge-color-foreground-default: #
|
|
470
|
-
@dt-badge-color-foreground-bulletin: #
|
|
506
|
+
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.18);
|
|
507
|
+
@dt-badge-color-background-info: #003165;
|
|
508
|
+
@dt-badge-color-background-success: #004F2E;
|
|
509
|
+
@dt-badge-color-background-warning: #533204;
|
|
510
|
+
@dt-badge-color-background-critical: #640823;
|
|
511
|
+
@dt-badge-color-background-bulletin: #BBA6FC;
|
|
512
|
+
@dt-badge-color-background-bulletin-subtle: #3A1D95;
|
|
513
|
+
@dt-badge-color-background-ai: linear-gradient(132deg, #FE8819 0%, #ff1356 30%, #FF1BA4 75%, #AE3ADF 100%);
|
|
514
|
+
@dt-badge-color-foreground-default: #ffffff;
|
|
515
|
+
@dt-badge-color-foreground-bulletin: #000000;
|
|
471
516
|
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
|
|
517
|
+
@dt-badge-color-foreground-ai: #ffffff;
|
|
472
518
|
@dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
|
|
473
|
-
@dt-badge-color-border-bulletin-subtle: hsl(
|
|
519
|
+
@dt-badge-color-border-bulletin-subtle: hsl(253 95.9% 71.6% / 0.6);
|
|
474
520
|
@dt-button-font-size-xs: 12px; // Extra small Button text size
|
|
475
521
|
@dt-button-font-size-sm: 12px; // Small Button text size
|
|
476
522
|
@dt-button-font-size-md: 15px; // Medium Button text size
|
|
477
523
|
@dt-button-font-size-lg: 19px; // Large Button text size
|
|
478
524
|
@dt-button-font-size-xl: 27px; // Extra large Button text size
|
|
479
|
-
@dt-button-font-weight-xs:
|
|
480
|
-
@dt-button-font-weight-sm:
|
|
481
|
-
@dt-button-font-weight-md:
|
|
525
|
+
@dt-button-font-weight-xs: 600; // Font weight for XS button
|
|
526
|
+
@dt-button-font-weight-sm: 600; // Font weight for SM button
|
|
527
|
+
@dt-button-font-weight-md: 600; // Font weight for MD button
|
|
482
528
|
@dt-button-font-weight-lg: 500; // Font weight for LG button
|
|
483
529
|
@dt-button-font-weight-xl: 400; // Font weight for XL button
|
|
484
530
|
@dt-button-line-height-xs: 1.2; // Line-height for XS button
|
|
@@ -495,8 +541,11 @@
|
|
|
495
541
|
@dt-checkbox-size-height: 1.6rem;
|
|
496
542
|
@dt-checkbox-size-radius: 0.4rem;
|
|
497
543
|
@dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
498
|
-
@dt-checkbox-color-border-
|
|
499
|
-
@dt-checkbox-color-
|
|
544
|
+
@dt-checkbox-color-border-unchecked-hover: hsl(0 0% 100% / 0.5);
|
|
545
|
+
@dt-checkbox-color-border-checked: #BBA6FC;
|
|
546
|
+
@dt-checkbox-color-background-checked: #BBA6FC;
|
|
547
|
+
@dt-checkbox-color-foreground-default: transparent;
|
|
548
|
+
@dt-checkbox-color-foreground-checked: #000000;
|
|
500
549
|
@dt-icon-size-100: 12px;
|
|
501
550
|
@dt-icon-size-200: 14px;
|
|
502
551
|
@dt-icon-size-300: 18px;
|
|
@@ -517,5 +566,8 @@
|
|
|
517
566
|
@dt-radio-size-height: 1.6rem;
|
|
518
567
|
@dt-radio-size-radius: 50%;
|
|
519
568
|
@dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
520
|
-
@dt-radio-color-border-
|
|
521
|
-
@dt-radio-color-
|
|
569
|
+
@dt-radio-color-border-unchecked-hover: hsl(0 0% 100% / 0.5);
|
|
570
|
+
@dt-radio-color-border-checked: #BBA6FC;
|
|
571
|
+
@dt-radio-color-background-checked: #BBA6FC;
|
|
572
|
+
@dt-radio-color-foreground-default: transparent;
|
|
573
|
+
@dt-radio-color-foreground-checked: #000000;
|