@dialpad/dialtone 9.105.0-rebrand-2025-beta.2 → 9.105.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 +1 -0
- package/dist/css/dialtone-default-theme.css +1529 -6289
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone-docs.json +1 -1
- package/dist/css/dialtone.css +194 -1851
- package/dist/css/dialtone.min.css +1 -1
- 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/css/tokens/tokens-base-dark.css +161 -526
- package/dist/css/tokens/tokens-base-deca-dark.css +48 -98
- package/dist/css/tokens/tokens-base-deca-light.css +44 -94
- package/dist/css/tokens/tokens-base-light.css +128 -493
- package/dist/css/tokens/tokens-debug-base.css +3 -368
- package/dist/css/tokens/tokens-debug-dp.css +653 -1011
- package/dist/css/tokens/tokens-deca-dark.css +748 -777
- package/dist/css/tokens/tokens-deca-light.css +708 -737
- package/dist/css/tokens/tokens-dp-dark.css +917 -1275
- package/dist/css/tokens/tokens-dp-light.css +973 -1331
- package/dist/css/tokens/tokens-expressive-dark.css +917 -1275
- package/dist/css/tokens/tokens-expressive-light.css +970 -1328
- package/dist/css/tokens/tokens-expressive-sm-dark.css +917 -1275
- package/dist/css/tokens/tokens-expressive-sm-light.css +970 -1328
- package/dist/css/tokens/tokens-tmo-dark.css +903 -1261
- package/dist/css/tokens/tokens-tmo-light.css +925 -1283
- package/dist/css/tokens-docs.json +1 -1
- package/dist/tokens/css/tokens-base-dark.css +161 -526
- package/dist/tokens/css/tokens-base-deca-dark.css +48 -98
- package/dist/tokens/css/tokens-base-deca-light.css +44 -94
- package/dist/tokens/css/tokens-base-light.css +128 -493
- package/dist/tokens/css/tokens-debug-base.css +3 -368
- package/dist/tokens/css/tokens-debug-dp.css +653 -1011
- package/dist/tokens/css/tokens-deca-dark.css +748 -777
- package/dist/tokens/css/tokens-deca-light.css +708 -737
- package/dist/tokens/css/tokens-dp-dark.css +917 -1275
- package/dist/tokens/css/tokens-dp-light.css +973 -1331
- package/dist/tokens/css/tokens-expressive-dark.css +917 -1275
- package/dist/tokens/css/tokens-expressive-light.css +970 -1328
- package/dist/tokens/css/tokens-expressive-sm-dark.css +917 -1275
- package/dist/tokens/css/tokens-expressive-sm-light.css +970 -1328
- package/dist/tokens/css/tokens-tmo-dark.css +903 -1261
- package/dist/tokens/css/tokens-tmo-light.css +925 -1283
- package/dist/tokens/doc.json +87562 -107823
- package/dist/tokens/less/tokens-base-dark.less +46 -99
- package/dist/tokens/less/tokens-base-deca-dark.less +15 -23
- package/dist/tokens/less/tokens-base-deca-light.less +14 -22
- package/dist/tokens/less/tokens-base-light.less +37 -90
- package/dist/tokens/less/tokens-deca-dark.less +182 -187
- package/dist/tokens/less/tokens-deca-light.less +173 -178
- package/dist/tokens/less/tokens-dp-dark.less +187 -239
- package/dist/tokens/less/tokens-dp-light.less +185 -237
- package/dist/tokens/less/tokens-expressive-dark.less +210 -262
- package/dist/tokens/less/tokens-expressive-light.less +208 -260
- package/dist/tokens/less/tokens-expressive-sm-dark.less +210 -262
- package/dist/tokens/less/tokens-expressive-sm-light.less +208 -260
- package/dist/tokens/less/tokens-tmo-dark.less +185 -237
- package/dist/tokens/less/tokens-tmo-light.less +168 -220
- package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +1 -0
- package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-light-DWLxg2cD.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 +46 -99
- package/dist/tokens/tokens-base-deca-dark.json +12 -20
- package/dist/tokens/tokens-base-deca-light.json +11 -19
- package/dist/tokens/tokens-base-light.json +37 -90
- package/dist/tokens/tokens-deca-dark.json +179 -184
- package/dist/tokens/tokens-deca-light.json +171 -176
- package/dist/tokens/tokens-dp-dark.json +171 -223
- package/dist/tokens/tokens-dp-light.json +182 -234
- package/dist/tokens/tokens-expressive-dark.json +194 -246
- package/dist/tokens/tokens-expressive-light.json +205 -257
- package/dist/tokens/tokens-expressive-sm-dark.json +194 -246
- package/dist/tokens/tokens-expressive-sm-light.json +205 -257
- package/dist/tokens/tokens-tmo-dark.json +169 -221
- package/dist/tokens/tokens-tmo-light.json +159 -211
- package/dist/vue2/component-documentation.json +1 -1
- 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/recipes/leftbar/group_row/group_row.vue.cjs +8 -1
- package/dist/vue2/recipes/leftbar/group_row/group_row.vue.cjs.map +1 -1
- package/dist/vue2/recipes/leftbar/group_row/group_row.vue.js +8 -1
- package/dist/vue2/recipes/leftbar/group_row/group_row.vue.js.map +1 -1
- package/dist/vue2/types/common/dates/index.d.ts.map +1 -1
- package/dist/vue2/types/components/select_menu/select_menu.vue.d.ts +1 -1
- package/dist/vue2/types/components/tab/tab_panel.vue.d.ts.map +1 -1
- package/dist/vue2/types/recipes/leftbar/group_row/group_row.vue.d.ts +9 -0
- package/dist/vue2/types/recipes/leftbar/group_row/group_row.vue.d.ts.map +1 -1
- package/dist/vue3/component-documentation.json +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 -5
- package/dist/vue3/components/tab/tab_panel.vue.cjs.map +1 -1
- package/dist/vue3/components/tab/tab_panel.vue.js +2 -6
- package/dist/vue3/components/tab/tab_panel.vue.js.map +1 -1
- package/dist/vue3/recipes/leftbar/group_row/group_row.vue.cjs +9 -1
- package/dist/vue3/recipes/leftbar/group_row/group_row.vue.cjs.map +1 -1
- package/dist/vue3/recipes/leftbar/group_row/group_row.vue.js +9 -1
- package/dist/vue3/recipes/leftbar/group_row/group_row.vue.js.map +1 -1
- package/dist/vue3/types/common/dates/index.d.ts.map +1 -1
- package/dist/vue3/types/components/select_menu/select_menu.vue.d.ts +1 -1
- package/dist/vue3/types/components/tab/tab_panel.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/group_row/group_row.vue.d.ts +9 -0
- package/dist/vue3/types/recipes/leftbar/group_row/group_row.vue.d.ts.map +1 -1
- package/package.json +9 -9
- 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/tokens/themes/chunks/tokens-base-dark-BjqCt8ke.js +0 -1
- package/dist/tokens/themes/chunks/tokens-base-dark-DtZ_Inhl.js +0 -4
- package/dist/tokens/themes/chunks/tokens-base-light-CIQSO1H9.js +0 -4
- package/dist/tokens/themes/chunks/tokens-base-light-Cll0VrKT.js +0 -1
|
@@ -3,162 +3,118 @@
|
|
|
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: #
|
|
8
|
-
@dt-color-foreground-muted: hsl(0 0% 83.1% / 0.
|
|
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: #
|
|
6
|
+
@dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
7
|
+
@dt-color-foreground-tertiary: #AAAAAA; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
|
|
8
|
+
@dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
|
|
9
|
+
@dt-color-foreground-placeholder: #AAAAAA;
|
|
10
|
+
@dt-color-foreground-disabled: #AAAAAA;
|
|
11
|
+
@dt-color-foreground-critical: #FF8585;
|
|
12
|
+
@dt-color-foreground-critical-strong: hsl(0 100% 82.1%);
|
|
13
|
+
@dt-color-foreground-success: #B0FFA3; // Indicates a positive state.
|
|
14
|
+
@dt-color-foreground-success-strong: hsl(112 100% 88.3%);
|
|
15
|
+
@dt-color-foreground-warning: #FFDB80;
|
|
16
16
|
@dt-color-foreground-primary-inverted: #000000;
|
|
17
|
-
@dt-color-foreground-secondary-inverted: #
|
|
17
|
+
@dt-color-foreground-secondary-inverted: #3A3A3A;
|
|
18
18
|
@dt-color-foreground-tertiary-inverted: #555555;
|
|
19
|
-
@dt-color-foreground-muted-inverted: hsl(0 0% 9
|
|
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-
|
|
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;
|
|
19
|
+
@dt-color-foreground-muted-inverted: hsl(0 0% 14.9% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
|
|
20
|
+
@dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
21
|
+
@dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
22
|
+
@dt-color-foreground-critical-inverted: #EC0E0E;
|
|
23
|
+
@dt-color-foreground-critical-strong-inverted: #B70B0B;
|
|
24
|
+
@dt-color-foreground-success-inverted: #1AA340; // Success text that sits on high-contrast surfaces or backgrounds
|
|
25
|
+
@dt-color-foreground-success-strong-inverted: #124620;
|
|
26
|
+
@dt-color-foreground-warning-inverted: #815008; // Warning text that sits on high-contrast surfaces or backgrounds
|
|
27
|
+
@dt-color-link-primary: hsl(261 100% 78.2%);
|
|
28
|
+
@dt-color-link-critical: #FF8585;
|
|
29
|
+
@dt-color-link-success: #B0FFA3; // positive
|
|
30
|
+
@dt-color-link-warning: #FFDB80;
|
|
31
|
+
@dt-color-link-muted: #C2C2C2;
|
|
32
|
+
@dt-color-link-disabled: #AAAAAA;
|
|
39
33
|
@dt-color-link-primary-inverted: #7C52FF;
|
|
40
|
-
@dt-color-link-
|
|
41
|
-
@dt-color-link-
|
|
42
|
-
@dt-color-link-critical-inverted-hover: #640823;
|
|
43
|
-
@dt-color-link-success-inverted: #008E52;
|
|
44
|
-
@dt-color-link-success-inverted-hover: #004F2E;
|
|
34
|
+
@dt-color-link-critical-inverted: #EC0E0E;
|
|
35
|
+
@dt-color-link-success-inverted: #1AA340;
|
|
45
36
|
@dt-color-link-warning-inverted: #815008;
|
|
46
|
-
@dt-color-link-
|
|
47
|
-
@dt-color-link-
|
|
48
|
-
@dt-color-link-
|
|
49
|
-
@dt-color-link-
|
|
50
|
-
@dt-color-link-
|
|
51
|
-
@dt-color-
|
|
52
|
-
@dt-color-
|
|
53
|
-
@dt-color-
|
|
37
|
+
@dt-color-link-muted-inverted: #3A3A3A;
|
|
38
|
+
@dt-color-link-disabled-inverted: #808080;
|
|
39
|
+
@dt-color-link-primary-hover: #DAC7FF;
|
|
40
|
+
@dt-color-link-critical-hover: #FFE5E6;
|
|
41
|
+
@dt-color-link-success-hover: #EDF9EB;
|
|
42
|
+
@dt-color-link-warning-hover: #FFF4CC;
|
|
43
|
+
@dt-color-link-muted-hover: #E6E6E6;
|
|
44
|
+
@dt-color-link-disabled-hover: #AAAAAA;
|
|
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;
|
|
54
68
|
@dt-color-surface-bold: #555555;
|
|
55
|
-
@dt-color-surface-strong: #
|
|
56
|
-
@dt-color-surface-contrast: #
|
|
57
|
-
@dt-color-surface-critical: #
|
|
58
|
-
@dt-color-surface-
|
|
59
|
-
@dt-color-surface-
|
|
60
|
-
@dt-color-surface-
|
|
61
|
-
@dt-color-surface-
|
|
62
|
-
@dt-color-surface-
|
|
63
|
-
@dt-color-surface-
|
|
64
|
-
@dt-color-surface-success-subtle: hsl(
|
|
65
|
-
@dt-color-surface-
|
|
66
|
-
@dt-color-surface-
|
|
67
|
-
@dt-color-surface-
|
|
68
|
-
@dt-color-surface-
|
|
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%);
|
|
69
|
+
@dt-color-surface-strong: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
|
|
70
|
+
@dt-color-surface-contrast: #E6E6E6;
|
|
71
|
+
@dt-color-surface-critical: #5B0505; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
72
|
+
@dt-color-surface-critical-subtle: hsl(0 89.6% 9.41%);
|
|
73
|
+
@dt-color-surface-critical-strong: #FF8585; // A contrasting critical surface, most likely paired with inverted foreground colors.
|
|
74
|
+
@dt-color-surface-warning: #815008; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
75
|
+
@dt-color-surface-warning-subtle: hsl(35.7 88.3% 13.4%);
|
|
76
|
+
@dt-color-surface-warning-strong: #D28F2B; // A contrasting warning surface, most likely paired with inverted foreground colors.
|
|
77
|
+
@dt-color-surface-success: #124620; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
78
|
+
@dt-color-surface-success-subtle: hsl(136 59.1% 8.63%);
|
|
79
|
+
@dt-color-surface-success-strong: #B0FFA3; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
80
|
+
@dt-color-surface-info: #01326D; // Background surface color containing messaging or elements communicated as generally informational.
|
|
81
|
+
@dt-color-surface-info-subtle: hsl(213 98.2% 12.9%);
|
|
82
|
+
@dt-color-surface-info-strong: #99C8FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
|
|
127
83
|
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
128
84
|
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
129
85
|
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
130
86
|
@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;
|
|
143
87
|
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
144
88
|
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
145
89
|
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
146
90
|
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
147
|
-
@dt-color-border-
|
|
148
|
-
@dt-color-border-
|
|
149
|
-
@dt-color-border-
|
|
91
|
+
@dt-color-border-focus: #51A0FE;
|
|
92
|
+
@dt-color-border-critical: #FF8585;
|
|
93
|
+
@dt-color-border-success: #B0FFA3;
|
|
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;
|
|
150
109
|
@dt-color-border-brand-inverted: #7C52FF;
|
|
151
|
-
@dt-color-border-critical-subtle-inverted: #
|
|
152
|
-
@dt-color-border-
|
|
110
|
+
@dt-color-border-critical-subtle-inverted: #FF8585;
|
|
111
|
+
@dt-color-border-critical-strong-inverted: #B70B0B;
|
|
112
|
+
@dt-color-border-success-subtle-inverted: #B0FFA3;
|
|
113
|
+
@dt-color-border-success-strong-inverted: #124620;
|
|
153
114
|
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
154
|
-
@dt-color-border-
|
|
155
|
-
@dt-color-border-
|
|
156
|
-
@dt-color-border-
|
|
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;
|
|
115
|
+
@dt-color-border-warning-strong-inverted: #815008;
|
|
116
|
+
@dt-color-border-brand-subtle-inverted: #DAC7FF;
|
|
117
|
+
@dt-color-border-brand-strong-inverted: #3A1D95;
|
|
162
118
|
@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.
|
|
163
119
|
@dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
|
|
164
120
|
@dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
|
|
@@ -335,15 +291,15 @@
|
|
|
335
291
|
@dt-typography-inputs-xl-font-size: 27px; // Text style for extra large inputs (e.g. input and textarea)
|
|
336
292
|
@dt-typography-inputs-xl-line-height: 1.2; // Text style for extra large inputs (e.g. input and textarea)
|
|
337
293
|
@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
|
|
338
|
-
@dt-typography-button-xs-font-weight:
|
|
294
|
+
@dt-typography-button-xs-font-weight: 500; // Text style for extra small button
|
|
339
295
|
@dt-typography-button-xs-font-size: 12px; // Text style for extra small button
|
|
340
296
|
@dt-typography-button-xs-line-height: 1.2; // Text style for extra small button
|
|
341
297
|
@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
|
|
342
|
-
@dt-typography-button-sm-font-weight:
|
|
298
|
+
@dt-typography-button-sm-font-weight: 500; // Text style for small button
|
|
343
299
|
@dt-typography-button-sm-font-size: 12px; // Text style for small button
|
|
344
300
|
@dt-typography-button-sm-line-height: 1.2; // Text style for small button
|
|
345
301
|
@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
|
|
346
|
-
@dt-typography-button-md-font-weight:
|
|
302
|
+
@dt-typography-button-md-font-weight: 500; // Text style for medium button
|
|
347
303
|
@dt-typography-button-md-font-size: 15px; // Text style for medium button
|
|
348
304
|
@dt-typography-button-md-line-height: 1.2; // Text style for medium button
|
|
349
305
|
@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
|
|
@@ -377,79 +333,78 @@
|
|
|
377
333
|
@dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
|
|
378
334
|
@dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
|
|
379
335
|
@dt-inputs-color-foreground-default: #E6E6E6;
|
|
380
|
-
@dt-inputs-color-foreground-placeholder: #
|
|
381
|
-
@dt-inputs-color-foreground-disabled: #
|
|
336
|
+
@dt-inputs-color-foreground-placeholder: #AAAAAA;
|
|
337
|
+
@dt-inputs-color-foreground-disabled: #AAAAAA;
|
|
382
338
|
@dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
|
|
383
|
-
@dt-inputs-color-border-
|
|
384
|
-
@dt-inputs-color-border-
|
|
385
|
-
@dt-inputs-color-border-
|
|
386
|
-
@dt-inputs-color-border-success: #D1FF76;
|
|
339
|
+
@dt-inputs-color-border-focus: #51A0FE;
|
|
340
|
+
@dt-inputs-color-border-critical: #FF8585;
|
|
341
|
+
@dt-inputs-color-border-success: #B0FFA3;
|
|
387
342
|
@dt-inputs-color-border-warning: #FFDB80;
|
|
388
343
|
@dt-inputs-color-border-disabled: transparent;
|
|
389
|
-
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.
|
|
390
|
-
@dt-inputs-color-background-focus:
|
|
391
|
-
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.
|
|
392
|
-
@dt-action-color-foreground-base-default: #
|
|
393
|
-
@dt-action-color-foreground-base-hover:
|
|
394
|
-
@dt-action-color-foreground-base-active:
|
|
395
|
-
@dt-action-color-foreground-base-primary-default: #
|
|
396
|
-
@dt-action-color-foreground-critical-default: #
|
|
397
|
-
@dt-action-color-foreground-critical-hover:
|
|
398
|
-
@dt-action-color-foreground-critical-active:
|
|
399
|
-
@dt-action-color-foreground-critical-primary-default: #
|
|
344
|
+
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.06);
|
|
345
|
+
@dt-inputs-color-background-focus: hsl(0 0% 90.2% / 0.03);
|
|
346
|
+
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.15);
|
|
347
|
+
@dt-action-color-foreground-base-default: #AB7EFF;
|
|
348
|
+
@dt-action-color-foreground-base-hover: lch(69.4 56.1 303);
|
|
349
|
+
@dt-action-color-foreground-base-active: lch(69.4 56.1 303);
|
|
350
|
+
@dt-action-color-foreground-base-primary-default: #ffffff;
|
|
351
|
+
@dt-action-color-foreground-critical-default: #FF8585;
|
|
352
|
+
@dt-action-color-foreground-critical-hover: lch(77.4 39.2 25.4);
|
|
353
|
+
@dt-action-color-foreground-critical-active: lch(77.4 39.2 25.4);
|
|
354
|
+
@dt-action-color-foreground-critical-primary-default: #ffffff;
|
|
400
355
|
@dt-action-color-foreground-inverted-default: #000000;
|
|
401
356
|
@dt-action-color-foreground-inverted-hover: #000000;
|
|
402
357
|
@dt-action-color-foreground-inverted-active: #000000;
|
|
403
|
-
@dt-action-color-foreground-inverted-primary-default: #
|
|
404
|
-
@dt-action-color-foreground-inverted-primary-hover: #
|
|
405
|
-
@dt-action-color-foreground-inverted-primary-active: #
|
|
406
|
-
@dt-action-color-foreground-muted-default: #
|
|
407
|
-
@dt-action-color-foreground-muted-hover: #
|
|
408
|
-
@dt-action-color-foreground-muted-active: #
|
|
409
|
-
@dt-action-color-foreground-disabled-default: #
|
|
410
|
-
@dt-action-color-foreground-positive-default: #
|
|
411
|
-
@dt-action-color-foreground-positive-hover:
|
|
412
|
-
@dt-action-color-foreground-positive-active:
|
|
413
|
-
@dt-action-color-foreground-positive-primary-default: #
|
|
358
|
+
@dt-action-color-foreground-inverted-primary-default: #AB7EFF;
|
|
359
|
+
@dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
|
|
360
|
+
@dt-action-color-foreground-inverted-primary-active: #DAC7FF;
|
|
361
|
+
@dt-action-color-foreground-muted-default: #C2C2C2;
|
|
362
|
+
@dt-action-color-foreground-muted-hover: #C2C2C2;
|
|
363
|
+
@dt-action-color-foreground-muted-active: #C2C2C2;
|
|
364
|
+
@dt-action-color-foreground-disabled-default: #AAAAAA;
|
|
365
|
+
@dt-action-color-foreground-positive-default: #B0FFA3;
|
|
366
|
+
@dt-action-color-foreground-positive-hover: hsl(112 100% 67.2%);
|
|
367
|
+
@dt-action-color-foreground-positive-active: hsl(112 100% 67.2%);
|
|
368
|
+
@dt-action-color-foreground-positive-primary-default: #ffffff;
|
|
414
369
|
@dt-action-color-background-base-default: transparent;
|
|
415
|
-
@dt-action-color-background-base-hover: hsl(
|
|
416
|
-
@dt-action-color-background-base-active: hsl(
|
|
417
|
-
@dt-action-color-background-base-primary-default: #
|
|
418
|
-
@dt-action-color-background-base-primary-hover:
|
|
419
|
-
@dt-action-color-background-base-primary-active:
|
|
370
|
+
@dt-action-color-background-base-hover: hsl(261 100% 74.7% / 0.1);
|
|
371
|
+
@dt-action-color-background-base-active: hsl(261 100% 74.7% / 0.2);
|
|
372
|
+
@dt-action-color-background-base-primary-default: #7C52FF;
|
|
373
|
+
@dt-action-color-background-base-primary-hover: hsl(255 100% 63.4%);
|
|
374
|
+
@dt-action-color-background-base-primary-active: hsl(255 100% 60.8%);
|
|
420
375
|
@dt-action-color-background-critical-default: transparent;
|
|
421
|
-
@dt-action-color-background-critical-hover: hsl(
|
|
422
|
-
@dt-action-color-background-critical-active: hsl(
|
|
423
|
-
@dt-action-color-background-critical-primary-default: #
|
|
424
|
-
@dt-action-color-background-critical-primary-hover:
|
|
425
|
-
@dt-action-color-background-critical-primary-active:
|
|
376
|
+
@dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.2);
|
|
377
|
+
@dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.3);
|
|
378
|
+
@dt-action-color-background-critical-primary-default: #EC0E0E;
|
|
379
|
+
@dt-action-color-background-critical-primary-hover: hsl(0 88.8% 45.1%);
|
|
380
|
+
@dt-action-color-background-critical-primary-active: hsl(0 88.8% 43.1%);
|
|
426
381
|
@dt-action-color-background-inverted-default: transparent;
|
|
427
|
-
@dt-action-color-background-inverted-hover: hsl(0 0%
|
|
428
|
-
@dt-action-color-background-inverted-active: hsl(0 0%
|
|
429
|
-
@dt-action-color-background-inverted-primary-default:
|
|
430
|
-
@dt-action-color-background-inverted-primary-hover: #
|
|
382
|
+
@dt-action-color-background-inverted-hover: hsl(0 0% 12% / 0.15);
|
|
383
|
+
@dt-action-color-background-inverted-active: hsl(0 0% 12% / 0.3);
|
|
384
|
+
@dt-action-color-background-inverted-primary-default: hsl(0 0% 12%);
|
|
385
|
+
@dt-action-color-background-inverted-primary-hover: #10022C;
|
|
431
386
|
@dt-action-color-background-inverted-primary-active: #3A1D95;
|
|
432
387
|
@dt-action-color-background-muted-default: transparent;
|
|
433
|
-
@dt-action-color-background-muted-hover: hsl(0 0%
|
|
434
|
-
@dt-action-color-background-muted-active: hsl(0 0%
|
|
435
|
-
@dt-action-color-background-disabled-default:
|
|
388
|
+
@dt-action-color-background-muted-hover: hsl(0 0% 83.1% / 0.1);
|
|
389
|
+
@dt-action-color-background-muted-active: hsl(0 0% 83.1% / 0.16);
|
|
390
|
+
@dt-action-color-background-disabled-default: #3A3A3A;
|
|
436
391
|
@dt-action-color-background-positive-default: transparent;
|
|
437
|
-
@dt-action-color-background-positive-hover: hsl(
|
|
438
|
-
@dt-action-color-background-positive-active: hsl(
|
|
439
|
-
@dt-action-color-background-positive-primary-default: #
|
|
440
|
-
@dt-action-color-background-positive-primary-hover:
|
|
441
|
-
@dt-action-color-background-positive-primary-active:
|
|
442
|
-
@dt-action-color-border-base-outlined-default: #
|
|
443
|
-
@dt-action-color-border-critical-outlined-default: #
|
|
392
|
+
@dt-action-color-background-positive-hover: hsl(136 59.1% 66.9%);
|
|
393
|
+
@dt-action-color-background-positive-active: hsl(112 100% 82% / 0.08);
|
|
394
|
+
@dt-action-color-background-positive-primary-default: #B0FFA3;
|
|
395
|
+
@dt-action-color-background-positive-primary-hover: hsl(112 100% 73.8%);
|
|
396
|
+
@dt-action-color-background-positive-primary-active: hsl(112 100% 68.8%);
|
|
397
|
+
@dt-action-color-border-base-outlined-default: #AB7EFF;
|
|
398
|
+
@dt-action-color-border-critical-outlined-default: #FF8585;
|
|
444
399
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
|
|
445
400
|
@dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
|
|
446
401
|
@dt-theme-color-base: #E6E6E6;
|
|
447
|
-
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.
|
|
448
|
-
@dt-theme-topbar-color-background: #
|
|
402
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.75);
|
|
403
|
+
@dt-theme-topbar-color-background: #262626;
|
|
449
404
|
@dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
|
|
450
405
|
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
|
|
451
406
|
@dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
|
|
452
|
-
@dt-theme-topbar-field-color-background-hover: hsl(0 0%
|
|
407
|
+
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 10.1%);
|
|
453
408
|
@dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
|
|
454
409
|
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
|
|
455
410
|
@dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
|
|
@@ -458,31 +413,31 @@
|
|
|
458
413
|
@dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
|
|
459
414
|
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
|
|
460
415
|
@dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
|
|
461
|
-
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.
|
|
416
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.75);
|
|
462
417
|
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
|
|
463
418
|
@dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
|
|
464
419
|
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
|
|
465
420
|
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
466
421
|
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
|
|
467
|
-
@dt-theme-sidebar-color-foreground: #
|
|
422
|
+
@dt-theme-sidebar-color-foreground: #C2C2C2;
|
|
468
423
|
@dt-theme-sidebar-color-foreground-unread: #E6E6E6;
|
|
469
|
-
@dt-theme-sidebar-color-background: #
|
|
470
|
-
@dt-theme-sidebar-icon-color-foreground: #
|
|
471
|
-
@dt-theme-sidebar-status-color-foreground: #
|
|
424
|
+
@dt-theme-sidebar-color-background: #262626;
|
|
425
|
+
@dt-theme-sidebar-icon-color-foreground: #C2C2C2;
|
|
426
|
+
@dt-theme-sidebar-status-color-foreground: #AAAAAA;
|
|
472
427
|
@dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
|
|
473
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.
|
|
474
|
-
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.
|
|
428
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.18);
|
|
429
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.24);
|
|
475
430
|
@dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
|
|
476
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.
|
|
477
|
-
@dt-theme-sidebar-section-color-foreground: #
|
|
478
|
-
@dt-theme-presence-color-background-available: #
|
|
479
|
-
@dt-theme-presence-color-background-busy-unavailable: #
|
|
480
|
-
@dt-theme-presence-color-background-busy: #
|
|
431
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.2);
|
|
432
|
+
@dt-theme-sidebar-section-color-foreground: #AAAAAA;
|
|
433
|
+
@dt-theme-presence-color-background-available: #B0FFA3;
|
|
434
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF8585;
|
|
435
|
+
@dt-theme-presence-color-background-busy: #F6AB3C;
|
|
481
436
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
482
|
-
@dt-theme-mention-color-foreground: #
|
|
437
|
+
@dt-theme-mention-color-foreground: #ffffff;
|
|
483
438
|
@dt-theme-mention-color-foreground-strong: #000000;
|
|
484
|
-
@dt-theme-mention-color-background: #
|
|
485
|
-
@dt-theme-mention-color-background-strong: #
|
|
439
|
+
@dt-theme-mention-color-background: #7C52FF;
|
|
440
|
+
@dt-theme-mention-color-background-strong: #DAC7FF;
|
|
486
441
|
@dt-avatar-color-foreground: #000000;
|
|
487
442
|
@dt-avatar-color-background-100: #1aa340;
|
|
488
443
|
@dt-avatar-color-background-200: #aaff83;
|
|
@@ -503,28 +458,27 @@
|
|
|
503
458
|
@dt-avatar-color-background-1700: #ffd646;
|
|
504
459
|
@dt-avatar-color-background-1800: #f1dab7;
|
|
505
460
|
@dt-avatar-color-background-000: #e0e0e0;
|
|
506
|
-
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.
|
|
507
|
-
@dt-badge-color-background-info: #
|
|
508
|
-
@dt-badge-color-background-success: #
|
|
509
|
-
@dt-badge-color-background-warning: #
|
|
510
|
-
@dt-badge-color-background-critical: #
|
|
511
|
-
@dt-badge-color-background-bulletin: #
|
|
512
|
-
@dt-badge-color-background-bulletin-subtle:
|
|
513
|
-
@dt-badge-color-background-ai: linear-gradient(
|
|
514
|
-
@dt-badge-color-foreground-default: #
|
|
515
|
-
@dt-badge-color-foreground-bulletin: #
|
|
461
|
+
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.15);
|
|
462
|
+
@dt-badge-color-background-info: #01326D;
|
|
463
|
+
@dt-badge-color-background-success: #124620;
|
|
464
|
+
@dt-badge-color-background-warning: #815008;
|
|
465
|
+
@dt-badge-color-background-critical: #5B0505;
|
|
466
|
+
@dt-badge-color-background-bulletin: #7C52FF;
|
|
467
|
+
@dt-badge-color-background-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
|
|
468
|
+
@dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
469
|
+
@dt-badge-color-foreground-default: #E6E6E6;
|
|
470
|
+
@dt-badge-color-foreground-bulletin: #ffffff;
|
|
516
471
|
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
|
|
517
|
-
@dt-badge-color-foreground-ai: #ffffff;
|
|
518
472
|
@dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
|
|
519
|
-
@dt-badge-color-border-bulletin-subtle: hsl(
|
|
473
|
+
@dt-badge-color-border-bulletin-subtle: hsl(261 100% 74.7% / 0.6);
|
|
520
474
|
@dt-button-font-size-xs: 12px; // Extra small Button text size
|
|
521
475
|
@dt-button-font-size-sm: 12px; // Small Button text size
|
|
522
476
|
@dt-button-font-size-md: 15px; // Medium Button text size
|
|
523
477
|
@dt-button-font-size-lg: 19px; // Large Button text size
|
|
524
478
|
@dt-button-font-size-xl: 27px; // Extra large Button text size
|
|
525
|
-
@dt-button-font-weight-xs:
|
|
526
|
-
@dt-button-font-weight-sm:
|
|
527
|
-
@dt-button-font-weight-md:
|
|
479
|
+
@dt-button-font-weight-xs: 500; // Font weight for XS button
|
|
480
|
+
@dt-button-font-weight-sm: 500; // Font weight for SM button
|
|
481
|
+
@dt-button-font-weight-md: 500; // Font weight for MD button
|
|
528
482
|
@dt-button-font-weight-lg: 500; // Font weight for LG button
|
|
529
483
|
@dt-button-font-weight-xl: 400; // Font weight for XL button
|
|
530
484
|
@dt-button-line-height-xs: 1.2; // Line-height for XS button
|
|
@@ -541,11 +495,8 @@
|
|
|
541
495
|
@dt-checkbox-size-height: 1.6rem;
|
|
542
496
|
@dt-checkbox-size-radius: 0.4rem;
|
|
543
497
|
@dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
544
|
-
@dt-checkbox-color-border-
|
|
545
|
-
@dt-checkbox-color-
|
|
546
|
-
@dt-checkbox-color-background-checked: #BBA6FC;
|
|
547
|
-
@dt-checkbox-color-foreground-default: transparent;
|
|
548
|
-
@dt-checkbox-color-foreground-checked: #000000;
|
|
498
|
+
@dt-checkbox-color-border-checked: #7C52FF;
|
|
499
|
+
@dt-checkbox-color-background-checked: #7C52FF;
|
|
549
500
|
@dt-icon-size-100: 12px;
|
|
550
501
|
@dt-icon-size-200: 14px;
|
|
551
502
|
@dt-icon-size-300: 18px;
|
|
@@ -566,8 +517,5 @@
|
|
|
566
517
|
@dt-radio-size-height: 1.6rem;
|
|
567
518
|
@dt-radio-size-radius: 50%;
|
|
568
519
|
@dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
569
|
-
@dt-radio-color-border-
|
|
570
|
-
@dt-radio-color-
|
|
571
|
-
@dt-radio-color-background-checked: #BBA6FC;
|
|
572
|
-
@dt-radio-color-foreground-default: transparent;
|
|
573
|
-
@dt-radio-color-foreground-checked: #000000;
|
|
520
|
+
@dt-radio-color-border-checked: #7C52FF;
|
|
521
|
+
@dt-radio-color-background-checked: #7C52FF;
|