@dialpad/dialtone 9.99.1-beta.1 → 9.101.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/dist/css/dialtone-default-theme.css +5083 -1374
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone-docs.json +1 -1
- package/dist/css/dialtone.css +1365 -133
- package/dist/css/dialtone.min.css +1 -1
- package/dist/css/tokens/tokens-base-dark.css +453 -138
- package/dist/css/tokens/tokens-base-deca-dark.css +397 -292
- package/dist/css/tokens/tokens-base-deca-light.css +356 -251
- package/dist/css/tokens/tokens-base-light.css +419 -104
- package/dist/css/tokens/tokens-debug-base.css +317 -2
- package/dist/css/tokens/tokens-debug-dp.css +1000 -664
- package/dist/css/tokens/tokens-deca-dark.css +1227 -926
- package/dist/css/tokens/tokens-deca-light.css +1195 -894
- package/dist/css/tokens/tokens-dp-dark.css +1246 -910
- package/dist/css/tokens/tokens-dp-light.css +1307 -971
- package/dist/css/tokens/tokens-expressive-dark.css +1247 -911
- package/dist/css/tokens/tokens-expressive-light.css +1304 -968
- package/dist/css/tokens/tokens-expressive-sm-dark.css +1247 -911
- package/dist/css/tokens/tokens-expressive-sm-light.css +1304 -968
- package/dist/css/tokens/tokens-tmo-dark.css +1232 -896
- package/dist/css/tokens/tokens-tmo-light.css +1259 -923
- package/dist/css/tokens-docs.json +1 -1
- package/dist/tokens/css/tokens-base-dark.css +453 -138
- package/dist/tokens/css/tokens-base-deca-dark.css +397 -292
- package/dist/tokens/css/tokens-base-deca-light.css +356 -251
- package/dist/tokens/css/tokens-base-light.css +419 -104
- package/dist/tokens/css/tokens-debug-base.css +317 -2
- package/dist/tokens/css/tokens-debug-dp.css +1000 -664
- package/dist/tokens/css/tokens-deca-dark.css +1227 -926
- package/dist/tokens/css/tokens-deca-light.css +1195 -894
- package/dist/tokens/css/tokens-dp-dark.css +1246 -910
- package/dist/tokens/css/tokens-dp-light.css +1307 -971
- package/dist/tokens/css/tokens-expressive-dark.css +1247 -911
- package/dist/tokens/css/tokens-expressive-light.css +1304 -968
- package/dist/tokens/css/tokens-expressive-sm-dark.css +1247 -911
- package/dist/tokens/css/tokens-expressive-sm-light.css +1304 -968
- package/dist/tokens/css/tokens-tmo-dark.css +1232 -896
- package/dist/tokens/css/tokens-tmo-light.css +1259 -923
- package/dist/tokens/doc.json +85872 -62897
- package/dist/tokens/less/tokens-base-dark.less +85 -40
- package/dist/tokens/less/tokens-base-deca-dark.less +82 -67
- package/dist/tokens/less/tokens-base-deca-light.less +70 -55
- package/dist/tokens/less/tokens-base-light.less +75 -30
- package/dist/tokens/less/tokens-deca-dark.less +194 -151
- package/dist/tokens/less/tokens-deca-light.less +161 -118
- package/dist/tokens/less/tokens-dp-dark.less +232 -184
- package/dist/tokens/less/tokens-dp-light.less +231 -183
- package/dist/tokens/less/tokens-expressive-dark.less +226 -178
- package/dist/tokens/less/tokens-expressive-light.less +225 -177
- package/dist/tokens/less/tokens-expressive-sm-dark.less +226 -178
- package/dist/tokens/less/tokens-expressive-sm-light.less +225 -177
- package/dist/tokens/less/tokens-tmo-dark.less +230 -182
- package/dist/tokens/less/tokens-tmo-light.less +214 -166
- package/dist/tokens/themes/chunks/tokens-base-dark-BOzMety-.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-dark-DQw_GZ7j.js +1 -0
- package/dist/tokens/themes/chunks/tokens-base-light-BHyHG_ZV.js +4 -0
- package/dist/tokens/themes/chunks/tokens-base-light-DMUiSUFR.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 +85 -40
- package/dist/tokens/tokens-base-deca-dark.json +80 -65
- package/dist/tokens/tokens-base-deca-light.json +68 -53
- package/dist/tokens/tokens-base-light.json +75 -30
- package/dist/tokens/tokens-deca-dark.json +190 -147
- package/dist/tokens/tokens-deca-light.json +151 -108
- package/dist/tokens/tokens-dp-dark.json +219 -171
- package/dist/tokens/tokens-dp-light.json +230 -182
- package/dist/tokens/tokens-expressive-dark.json +213 -165
- package/dist/tokens/tokens-expressive-light.json +224 -176
- package/dist/tokens/tokens-expressive-sm-dark.json +213 -165
- package/dist/tokens/tokens-expressive-sm-light.json +224 -176
- package/dist/tokens/tokens-tmo-dark.json +217 -169
- package/dist/tokens/tokens-tmo-light.json +207 -159
- package/dist/vue2/component-documentation.json +1 -1
- package/dist/vue2/dialtone-vue.cjs +1 -0
- package/dist/vue2/dialtone-vue.cjs.map +1 -1
- package/dist/vue2/dialtone-vue.js +2 -1
- package/dist/vue2/lib/ivr-node.cjs +1 -0
- package/dist/vue2/lib/ivr-node.cjs.map +1 -1
- package/dist/vue2/lib/ivr-node.js +2 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.cjs +3 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.cjs.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.js +5 -3
- package/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.js.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.cjs +6 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.cjs.map +1 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.js +6 -1
- package/dist/vue2/recipes/cards/ivr_node/ivr_node_constants.js.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs +0 -7
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js +0 -7
- package/dist/vue2/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue2/types/recipes/cards/ivr_node/index.d.ts +1 -1
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/dist/vue2/types/recipes/conversation_view/editor/editor.vue.d.ts +0 -9
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/components/item_layout/item_layout.vue.cjs +102 -44
- package/dist/vue3/components/item_layout/item_layout.vue.cjs.map +1 -1
- package/dist/vue3/components/item_layout/item_layout.vue.js +103 -45
- package/dist/vue3/components/item_layout/item_layout.vue.js.map +1 -1
- package/dist/vue3/components/list_item/list_item.vue.cjs +24 -17
- package/dist/vue3/components/list_item/list_item.vue.cjs.map +1 -1
- package/dist/vue3/components/list_item/list_item.vue.js +24 -17
- package/dist/vue3/components/list_item/list_item.vue.js.map +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -0
- package/dist/vue3/dialtone-vue.cjs.map +1 -1
- package/dist/vue3/dialtone-vue.js +2 -1
- package/dist/vue3/lib/ivr-node.cjs +1 -0
- package/dist/vue3/lib/ivr-node.cjs.map +1 -1
- package/dist/vue3/lib/ivr-node.js +2 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs +3 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js +5 -3
- package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs +6 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs.map +1 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js +6 -1
- package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs +1 -0
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js +1 -0
- package/dist/vue3/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs +5 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs.map +1 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js +5 -1
- package/dist/vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs +0 -7
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js +0 -7
- package/dist/vue3/recipes/conversation_view/editor/editor.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs +51 -21
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js +52 -22
- package/dist/vue3/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.js.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs +2 -4
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map +1 -1
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.js +2 -4
- package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map +1 -1
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.cjs +16 -4
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.cjs.map +1 -1
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.js +16 -4
- package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.js.map +1 -1
- package/dist/vue3/types/components/item_layout/item_layout.vue.d.ts +64 -0
- package/dist/vue3/types/components/item_layout/item_layout.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts +1 -24
- package/dist/vue3/types/components/list_item/list_item.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/cards/ivr_node/index.d.ts +1 -1
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/dist/vue3/types/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/editor/editor.vue.d.ts +0 -9
- package/dist/vue3/types/recipes/conversation_view/feed_item_pill/feed_item_pill.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/item_layout/contact_info/contact_info.vue.d.ts.map +1 -1
- package/package.json +2 -2
- 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,161 @@
|
|
|
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-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;
|
|
33
|
-
@dt-color-link-primary-inverted: #7C52FF;
|
|
34
|
-
@dt-color-link-critical-inverted: #EC0E0E;
|
|
35
|
-
@dt-color-link-success-inverted: #1AA340;
|
|
36
|
-
@dt-color-link-warning-inverted: #815008;
|
|
37
|
-
@dt-color-link-muted-inverted: #3A3A3A;
|
|
38
|
-
@dt-color-link-disabled-inverted: #808080;
|
|
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: #C2A3FF;
|
|
39
28
|
@dt-color-link-primary-hover: #DAC7FF;
|
|
40
|
-
@dt-color-link-critical
|
|
41
|
-
@dt-color-link-
|
|
42
|
-
@dt-color-link-
|
|
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;
|
|
43
36
|
@dt-color-link-muted-hover: #E6E6E6;
|
|
44
|
-
@dt-color-link-disabled
|
|
45
|
-
@dt-color-link-
|
|
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-
|
|
54
|
-
@dt-color-
|
|
55
|
-
@dt-color-
|
|
56
|
-
@dt-color-
|
|
57
|
-
@dt-color-
|
|
58
|
-
@dt-color-surface-
|
|
59
|
-
@dt-color-surface-
|
|
60
|
-
@dt-color-surface-
|
|
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;
|
|
37
|
+
@dt-color-link-disabled: #B0B0B0;
|
|
38
|
+
@dt-color-link-disabled-hover: #B0B0B0;
|
|
39
|
+
@dt-color-link-primary-inverted: #7C52FF;
|
|
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;
|
|
45
|
+
@dt-color-link-warning-inverted: #815008;
|
|
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: #0E002A; // 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: #AB7EFF;
|
|
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 100% 8.24% / 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.
|
|
83
126
|
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
84
127
|
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
85
128
|
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
86
129
|
@dt-color-border-bold: hsl(0 0% 100% / 0.5);
|
|
130
|
+
@dt-color-border-critical: #FF716F;
|
|
131
|
+
@dt-color-border-success: #D1FF76;
|
|
132
|
+
@dt-color-border-warning: #FFDB80;
|
|
133
|
+
@dt-color-border-brand: #C2A3FF;
|
|
134
|
+
@dt-color-border-critical-subtle: #93173A;
|
|
135
|
+
@dt-color-border-success-subtle: #52C926;
|
|
136
|
+
@dt-color-border-warning-subtle: #FF9E0E;
|
|
137
|
+
@dt-color-border-brand-subtle: #7C52FF;
|
|
138
|
+
@dt-color-border-critical-strong: #FFABA4;
|
|
139
|
+
@dt-color-border-success-strong: #AEFB3C;
|
|
140
|
+
@dt-color-border-warning-strong: #FFE89C;
|
|
141
|
+
@dt-color-border-brand-strong: #DAC7FF;
|
|
87
142
|
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
88
143
|
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
89
144
|
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
90
145
|
@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;
|
|
146
|
+
@dt-color-border-critical-inverted: #FF1356;
|
|
147
|
+
@dt-color-border-success-inverted: #31B237;
|
|
148
|
+
@dt-color-border-warning-inverted: #FF9E0E;
|
|
109
149
|
@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;
|
|
150
|
+
@dt-color-border-critical-subtle-inverted: #FF716F;
|
|
151
|
+
@dt-color-border-success-subtle-inverted: #D1FF76;
|
|
114
152
|
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
115
|
-
@dt-color-border-
|
|
116
|
-
@dt-color-border-
|
|
117
|
-
@dt-color-border-
|
|
153
|
+
@dt-color-border-brand-subtle-inverted: #C2A3FF;
|
|
154
|
+
@dt-color-border-critical-strong-inverted: #93173A;
|
|
155
|
+
@dt-color-border-success-strong-inverted: #004F2E;
|
|
156
|
+
@dt-color-border-warning-strong-inverted: #D57F00;
|
|
157
|
+
@dt-color-border-brand-strong-inverted: #5023DD;
|
|
158
|
+
@dt-color-border-focus: #1768C6;
|
|
159
|
+
@dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
160
|
+
@dt-color-border-accent: #FF1BA4;
|
|
118
161
|
@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
162
|
@dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
|
|
120
163
|
@dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
|
|
@@ -291,15 +334,15 @@
|
|
|
291
334
|
@dt-typography-inputs-xl-font-size: 27px; // Text style for extra large inputs (e.g. input and textarea)
|
|
292
335
|
@dt-typography-inputs-xl-line-height: 1.2; // Text style for extra large inputs (e.g. input and textarea)
|
|
293
336
|
@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:
|
|
337
|
+
@dt-typography-button-xs-font-weight: 600; // Text style for extra small button
|
|
295
338
|
@dt-typography-button-xs-font-size: 12px; // Text style for extra small button
|
|
296
339
|
@dt-typography-button-xs-line-height: 1.2; // Text style for extra small button
|
|
297
340
|
@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:
|
|
341
|
+
@dt-typography-button-sm-font-weight: 600; // Text style for small button
|
|
299
342
|
@dt-typography-button-sm-font-size: 12px; // Text style for small button
|
|
300
343
|
@dt-typography-button-sm-line-height: 1.2; // Text style for small button
|
|
301
344
|
@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:
|
|
345
|
+
@dt-typography-button-md-font-weight: 600; // Text style for medium button
|
|
303
346
|
@dt-typography-button-md-font-size: 15px; // Text style for medium button
|
|
304
347
|
@dt-typography-button-md-line-height: 1.2; // Text style for medium button
|
|
305
348
|
@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 +376,78 @@
|
|
|
333
376
|
@dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
|
|
334
377
|
@dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
|
|
335
378
|
@dt-inputs-color-foreground-default: #E6E6E6;
|
|
336
|
-
@dt-inputs-color-foreground-placeholder: #
|
|
337
|
-
@dt-inputs-color-foreground-disabled: #
|
|
379
|
+
@dt-inputs-color-foreground-placeholder: #B0B0B0;
|
|
380
|
+
@dt-inputs-color-foreground-disabled: #B0B0B0;
|
|
338
381
|
@dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
|
|
339
|
-
@dt-inputs-color-border-focus: #
|
|
340
|
-
@dt-inputs-color-border-critical: #
|
|
341
|
-
@dt-inputs-color-border-success: #
|
|
382
|
+
@dt-inputs-color-border-focus: #1768C6;
|
|
383
|
+
@dt-inputs-color-border-critical: #FF716F;
|
|
384
|
+
@dt-inputs-color-border-success: #D1FF76;
|
|
342
385
|
@dt-inputs-color-border-warning: #FFDB80;
|
|
343
386
|
@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: #
|
|
387
|
+
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.03);
|
|
388
|
+
@dt-inputs-color-background-focus: #171717;
|
|
389
|
+
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.18);
|
|
390
|
+
@dt-action-color-foreground-base-default: #C2A3FF;
|
|
391
|
+
@dt-action-color-foreground-base-hover: #DAC7FF;
|
|
392
|
+
@dt-action-color-foreground-base-active: #DAC7FF;
|
|
393
|
+
@dt-action-color-foreground-base-primary-default: #000000;
|
|
394
|
+
@dt-action-color-foreground-critical-default: #FF716F;
|
|
395
|
+
@dt-action-color-foreground-critical-hover: #FFABA4;
|
|
396
|
+
@dt-action-color-foreground-critical-active: #FFABA4;
|
|
397
|
+
@dt-action-color-foreground-critical-primary-default: #000000;
|
|
355
398
|
@dt-action-color-foreground-inverted-default: #000000;
|
|
356
399
|
@dt-action-color-foreground-inverted-hover: #000000;
|
|
357
400
|
@dt-action-color-foreground-inverted-active: #000000;
|
|
358
|
-
@dt-action-color-foreground-inverted-primary-default: #
|
|
401
|
+
@dt-action-color-foreground-inverted-primary-default: #C2A3FF;
|
|
359
402
|
@dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
|
|
360
403
|
@dt-action-color-foreground-inverted-primary-active: #DAC7FF;
|
|
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: #
|
|
404
|
+
@dt-action-color-foreground-muted-default: #c7c7c7;
|
|
405
|
+
@dt-action-color-foreground-muted-hover: #E6E6E6;
|
|
406
|
+
@dt-action-color-foreground-muted-active: #E6E6E6;
|
|
407
|
+
@dt-action-color-foreground-disabled-default: #B0B0B0;
|
|
408
|
+
@dt-action-color-foreground-positive-default: #AEFB3C;
|
|
409
|
+
@dt-action-color-foreground-positive-hover: #DBFFA9;
|
|
410
|
+
@dt-action-color-foreground-positive-active: #DBFFA9;
|
|
411
|
+
@dt-action-color-foreground-positive-primary-default: #000000;
|
|
369
412
|
@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:
|
|
413
|
+
@dt-action-color-background-base-hover: hsl(258 100% 70.4% / 0.2);
|
|
414
|
+
@dt-action-color-background-base-active: hsl(258 100% 70.4% / 0.3);
|
|
415
|
+
@dt-action-color-background-base-primary-default: #AB7EFF;
|
|
416
|
+
@dt-action-color-background-base-primary-hover: #C2A3FF;
|
|
417
|
+
@dt-action-color-background-base-primary-active: #AB7EFF;
|
|
375
418
|
@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:
|
|
419
|
+
@dt-action-color-background-critical-hover: hsl(343 72.9% 33.3% / 0.2);
|
|
420
|
+
@dt-action-color-background-critical-active: hsl(343 72.9% 50% / 0.2);
|
|
421
|
+
@dt-action-color-background-critical-primary-default: #FF716F;
|
|
422
|
+
@dt-action-color-background-critical-primary-hover: #FFABA4;
|
|
423
|
+
@dt-action-color-background-critical-primary-active: #FF716F;
|
|
381
424
|
@dt-action-color-background-inverted-default: transparent;
|
|
382
|
-
@dt-action-color-background-inverted-hover:
|
|
383
|
-
@dt-action-color-background-inverted-active:
|
|
384
|
-
@dt-action-color-background-inverted-primary-default:
|
|
385
|
-
@dt-action-color-background-inverted-primary-hover: #
|
|
425
|
+
@dt-action-color-background-inverted-hover: #D4D4D4;
|
|
426
|
+
@dt-action-color-background-inverted-active: #c7c7c7;
|
|
427
|
+
@dt-action-color-background-inverted-primary-default: #171717;
|
|
428
|
+
@dt-action-color-background-inverted-primary-hover: #1D0155;
|
|
386
429
|
@dt-action-color-background-inverted-primary-active: #3A1D95;
|
|
387
430
|
@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:
|
|
431
|
+
@dt-action-color-background-muted-hover: hsl(0 0% 90.2% / 0.18);
|
|
432
|
+
@dt-action-color-background-muted-active: hsl(0 0% 90.2% / 0.3);
|
|
433
|
+
@dt-action-color-background-disabled-default: hsl(0 0% 90.2% / 0.3);
|
|
391
434
|
@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: #
|
|
435
|
+
@dt-action-color-background-positive-hover: hsl(155 100% 15.5% / 0.28);
|
|
436
|
+
@dt-action-color-background-positive-active: hsl(155 100% 36.6% / 0.28);
|
|
437
|
+
@dt-action-color-background-positive-primary-default: #AEFB3C; // Postive, accepting, or success actions.
|
|
438
|
+
@dt-action-color-background-positive-primary-hover: #D1FF76;
|
|
439
|
+
@dt-action-color-background-positive-primary-active: #AEFB3C;
|
|
440
|
+
@dt-action-color-border-base-outlined-default: #C2A3FF;
|
|
441
|
+
@dt-action-color-border-critical-outlined-default: #FF716F;
|
|
399
442
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
|
|
400
443
|
@dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
|
|
401
444
|
@dt-theme-color-base: #E6E6E6;
|
|
402
|
-
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.
|
|
403
|
-
@dt-theme-topbar-color-background: #
|
|
445
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
446
|
+
@dt-theme-topbar-color-background: #1f1f1f;
|
|
404
447
|
@dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
|
|
405
448
|
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
|
|
406
449
|
@dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
|
|
407
|
-
@dt-theme-topbar-field-color-background-hover: hsl(0 0%
|
|
450
|
+
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
|
|
408
451
|
@dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
|
|
409
452
|
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
|
|
410
453
|
@dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
|
|
@@ -413,31 +456,31 @@
|
|
|
413
456
|
@dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
|
|
414
457
|
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
|
|
415
458
|
@dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
|
|
416
|
-
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.
|
|
459
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
417
460
|
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
|
|
418
461
|
@dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
|
|
419
462
|
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
|
|
420
463
|
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
421
464
|
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
|
|
422
|
-
@dt-theme-sidebar-color-foreground: #
|
|
465
|
+
@dt-theme-sidebar-color-foreground: #c7c7c7;
|
|
423
466
|
@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: #
|
|
467
|
+
@dt-theme-sidebar-color-background: #1f1f1f;
|
|
468
|
+
@dt-theme-sidebar-icon-color-foreground: #c7c7c7;
|
|
469
|
+
@dt-theme-sidebar-status-color-foreground: #B0B0B0;
|
|
427
470
|
@dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
|
|
428
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.
|
|
429
|
-
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.
|
|
471
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
472
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
|
|
430
473
|
@dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
|
|
431
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 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: #
|
|
474
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
|
|
475
|
+
@dt-theme-sidebar-section-color-foreground: #B0B0B0;
|
|
476
|
+
@dt-theme-presence-color-background-available: #84EE0B;
|
|
477
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF415B;
|
|
478
|
+
@dt-theme-presence-color-background-busy: #FFBD48;
|
|
436
479
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
437
|
-
@dt-theme-mention-color-foreground: #
|
|
480
|
+
@dt-theme-mention-color-foreground: #000000;
|
|
438
481
|
@dt-theme-mention-color-foreground-strong: #000000;
|
|
439
|
-
@dt-theme-mention-color-background: #
|
|
440
|
-
@dt-theme-mention-color-background-strong: #
|
|
482
|
+
@dt-theme-mention-color-background: #AB7EFF;
|
|
483
|
+
@dt-theme-mention-color-background-strong: #F5F0FF;
|
|
441
484
|
@dt-avatar-color-foreground: #000000;
|
|
442
485
|
@dt-avatar-color-background-100: #1aa340;
|
|
443
486
|
@dt-avatar-color-background-200: #aaff83;
|
|
@@ -458,27 +501,28 @@
|
|
|
458
501
|
@dt-avatar-color-background-1700: #ffd646;
|
|
459
502
|
@dt-avatar-color-background-1800: #f1dab7;
|
|
460
503
|
@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(135deg, #
|
|
469
|
-
@dt-badge-color-foreground-default: #
|
|
470
|
-
@dt-badge-color-foreground-bulletin: #
|
|
504
|
+
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.18);
|
|
505
|
+
@dt-badge-color-background-info: #003165;
|
|
506
|
+
@dt-badge-color-background-success: #004F2E;
|
|
507
|
+
@dt-badge-color-background-warning: #533204;
|
|
508
|
+
@dt-badge-color-background-critical: #640823;
|
|
509
|
+
@dt-badge-color-background-bulletin: #AB7EFF;
|
|
510
|
+
@dt-badge-color-background-bulletin-subtle: #3A1D95;
|
|
511
|
+
@dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
512
|
+
@dt-badge-color-foreground-default: #ffffff;
|
|
513
|
+
@dt-badge-color-foreground-bulletin: #000000;
|
|
471
514
|
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
|
|
515
|
+
@dt-badge-color-foreground-ai: #ffffff;
|
|
472
516
|
@dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
|
|
473
|
-
@dt-badge-color-border-bulletin-subtle: hsl(
|
|
517
|
+
@dt-badge-color-border-bulletin-subtle: hsl(258 100% 70.4% / 0.6);
|
|
474
518
|
@dt-button-font-size-xs: 12px; // Extra small Button text size
|
|
475
519
|
@dt-button-font-size-sm: 12px; // Small Button text size
|
|
476
520
|
@dt-button-font-size-md: 15px; // Medium Button text size
|
|
477
521
|
@dt-button-font-size-lg: 19px; // Large Button text size
|
|
478
522
|
@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:
|
|
523
|
+
@dt-button-font-weight-xs: 600; // Font weight for XS button
|
|
524
|
+
@dt-button-font-weight-sm: 600; // Font weight for SM button
|
|
525
|
+
@dt-button-font-weight-md: 600; // Font weight for MD button
|
|
482
526
|
@dt-button-font-weight-lg: 500; // Font weight for LG button
|
|
483
527
|
@dt-button-font-weight-xl: 400; // Font weight for XL button
|
|
484
528
|
@dt-button-line-height-xs: 1.2; // Line-height for XS button
|
|
@@ -495,8 +539,10 @@
|
|
|
495
539
|
@dt-checkbox-size-height: 1.6rem;
|
|
496
540
|
@dt-checkbox-size-radius: 0.4rem;
|
|
497
541
|
@dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
498
|
-
@dt-checkbox-color-border-checked: #
|
|
499
|
-
@dt-checkbox-color-background-checked: #
|
|
542
|
+
@dt-checkbox-color-border-checked: #C2A3FF;
|
|
543
|
+
@dt-checkbox-color-background-checked: #AB7EFF;
|
|
544
|
+
@dt-checkbox-color-foreground-default: transparent;
|
|
545
|
+
@dt-checkbox-color-foreground-checked: #000000;
|
|
500
546
|
@dt-icon-size-100: 12px;
|
|
501
547
|
@dt-icon-size-200: 14px;
|
|
502
548
|
@dt-icon-size-300: 18px;
|
|
@@ -517,5 +563,7 @@
|
|
|
517
563
|
@dt-radio-size-height: 1.6rem;
|
|
518
564
|
@dt-radio-size-radius: 50%;
|
|
519
565
|
@dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
520
|
-
@dt-radio-color-border-checked: #
|
|
521
|
-
@dt-radio-color-background-checked: #
|
|
566
|
+
@dt-radio-color-border-checked: #C2A3FF;
|
|
567
|
+
@dt-radio-color-background-checked: #AB7EFF;
|
|
568
|
+
@dt-radio-color-foreground-default: transparent;
|
|
569
|
+
@dt-radio-color-foreground-checked: #000000;
|