@dialpad/dialtone 9.101.0-rebrand-2025-beta.1 → 9.101.0
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 +1376 -5085
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone-docs.json +1 -1
- package/dist/css/dialtone.css +131 -1363
- package/dist/css/dialtone.min.css +1 -1
- package/dist/css/tokens/tokens-base-dark.css +138 -453
- package/dist/css/tokens/tokens-base-deca-dark.css +15 -15
- package/dist/css/tokens/tokens-base-deca-light.css +12 -12
- package/dist/css/tokens/tokens-base-light.css +104 -419
- package/dist/css/tokens/tokens-debug-base.css +2 -317
- package/dist/css/tokens/tokens-debug-dp.css +663 -999
- package/dist/css/tokens/tokens-deca-dark.css +669 -676
- package/dist/css/tokens/tokens-deca-light.css +613 -620
- package/dist/css/tokens/tokens-dp-dark.css +910 -1246
- package/dist/css/tokens/tokens-dp-light.css +971 -1307
- package/dist/css/tokens/tokens-expressive-dark.css +911 -1247
- package/dist/css/tokens/tokens-expressive-light.css +968 -1304
- package/dist/css/tokens/tokens-expressive-sm-dark.css +911 -1247
- package/dist/css/tokens/tokens-expressive-sm-light.css +968 -1304
- package/dist/css/tokens/tokens-tmo-dark.css +896 -1232
- package/dist/css/tokens/tokens-tmo-light.css +923 -1259
- package/dist/css/tokens-docs.json +1 -1
- package/dist/tokens/css/tokens-base-dark.css +138 -453
- package/dist/tokens/css/tokens-base-deca-dark.css +15 -15
- package/dist/tokens/css/tokens-base-deca-light.css +12 -12
- package/dist/tokens/css/tokens-base-light.css +104 -419
- package/dist/tokens/css/tokens-debug-base.css +2 -317
- package/dist/tokens/css/tokens-debug-dp.css +663 -999
- package/dist/tokens/css/tokens-deca-dark.css +669 -676
- package/dist/tokens/css/tokens-deca-light.css +613 -620
- package/dist/tokens/css/tokens-dp-dark.css +910 -1246
- package/dist/tokens/css/tokens-dp-light.css +971 -1307
- package/dist/tokens/css/tokens-expressive-dark.css +911 -1247
- package/dist/tokens/css/tokens-expressive-light.css +968 -1304
- package/dist/tokens/css/tokens-expressive-sm-dark.css +911 -1247
- package/dist/tokens/css/tokens-expressive-sm-light.css +968 -1304
- package/dist/tokens/css/tokens-tmo-dark.css +896 -1232
- package/dist/tokens/css/tokens-tmo-light.css +923 -1259
- package/dist/tokens/doc.json +70310 -88972
- package/dist/tokens/less/tokens-base-dark.less +40 -85
- package/dist/tokens/less/tokens-base-deca-dark.less +6 -6
- package/dist/tokens/less/tokens-base-deca-light.less +5 -5
- package/dist/tokens/less/tokens-base-light.less +30 -75
- package/dist/tokens/less/tokens-deca-dark.less +120 -121
- package/dist/tokens/less/tokens-deca-light.less +99 -100
- package/dist/tokens/less/tokens-dp-dark.less +184 -232
- package/dist/tokens/less/tokens-dp-light.less +183 -231
- package/dist/tokens/less/tokens-expressive-dark.less +178 -226
- package/dist/tokens/less/tokens-expressive-light.less +177 -225
- package/dist/tokens/less/tokens-expressive-sm-dark.less +178 -226
- package/dist/tokens/less/tokens-expressive-sm-light.less +177 -225
- package/dist/tokens/less/tokens-tmo-dark.less +182 -230
- package/dist/tokens/less/tokens-tmo-light.less +166 -214
- 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 +1 -1
- 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 +40 -85
- package/dist/tokens/tokens-base-deca-dark.json +4 -4
- package/dist/tokens/tokens-base-deca-light.json +3 -3
- package/dist/tokens/tokens-base-light.json +30 -75
- package/dist/tokens/tokens-deca-dark.json +117 -118
- package/dist/tokens/tokens-deca-light.json +97 -98
- package/dist/tokens/tokens-dp-dark.json +171 -219
- package/dist/tokens/tokens-dp-light.json +182 -230
- package/dist/tokens/tokens-expressive-dark.json +165 -213
- package/dist/tokens/tokens-expressive-light.json +176 -224
- package/dist/tokens/tokens-expressive-sm-dark.json +165 -213
- package/dist/tokens/tokens-expressive-sm-light.json +176 -224
- package/dist/tokens/tokens-tmo-dark.json +169 -217
- package/dist/tokens/tokens-tmo-light.json +159 -207
- package/package.json +3 -3
- package/dist/tokens/themes/chunks/tokens-base-dark-BOzMety-.js +0 -4
- package/dist/tokens/themes/chunks/tokens-base-dark-DQw_GZ7j.js +0 -1
- package/dist/tokens/themes/chunks/tokens-base-light-BHyHG_ZV.js +0 -4
- package/dist/tokens/themes/chunks/tokens-base-light-DMUiSUFR.js +0 -1
|
@@ -2,52 +2,66 @@
|
|
|
2
2
|
// Do not edit directly, this file was auto-generated.
|
|
3
3
|
|
|
4
4
|
@dt-size-border-focus: 0.3rem;
|
|
5
|
-
@dt-color-foreground-primary: #
|
|
5
|
+
@dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
|
|
6
6
|
@dt-color-foreground-secondary: #c7c7c7; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
7
7
|
@dt-color-foreground-tertiary: #B0B0B0; // 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%
|
|
9
|
-
@dt-color-foreground-placeholder: #
|
|
10
|
-
@dt-color-foreground-disabled: #
|
|
8
|
+
@dt-color-foreground-muted: hsl(0 0% 100% / 0.5);
|
|
9
|
+
@dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
|
|
10
|
+
@dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
|
|
11
11
|
@dt-color-foreground-critical: #FF716F;
|
|
12
12
|
@dt-color-foreground-critical-strong: #FFABA4;
|
|
13
13
|
@dt-color-foreground-success: #AEFB3C;
|
|
14
14
|
@dt-color-foreground-success-strong: #DBFFA9;
|
|
15
15
|
@dt-color-foreground-warning: #FFBD48;
|
|
16
|
-
@dt-color-foreground-primary-inverted: #
|
|
16
|
+
@dt-color-foreground-primary-inverted: #171717; // Primary text that sits on high-contrast surfaces or backgrounds.
|
|
17
17
|
@dt-color-foreground-secondary-inverted: #3d3d3d;
|
|
18
18
|
@dt-color-foreground-tertiary-inverted: #555555;
|
|
19
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
20
|
@dt-color-foreground-placeholder-inverted: #555555; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
21
21
|
@dt-color-foreground-disabled-inverted: #555555; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
22
22
|
@dt-color-foreground-critical-inverted: #FF1356;
|
|
23
|
-
@dt-color-foreground-critical-strong-inverted: #
|
|
23
|
+
@dt-color-foreground-critical-strong-inverted: #AF0032;
|
|
24
24
|
@dt-color-foreground-success-inverted: #008E52;
|
|
25
25
|
@dt-color-foreground-success-strong-inverted: #004F2E;
|
|
26
26
|
@dt-color-foreground-warning-inverted: #815008;
|
|
27
27
|
@dt-color-link-primary: #C2A3FF;
|
|
28
|
-
@dt-color-link-primary-hover: #DAC7FF;
|
|
29
28
|
@dt-color-link-critical: #FF716F;
|
|
30
|
-
@dt-color-link-critical-hover: #FFABA4;
|
|
31
29
|
@dt-color-link-success: #AEFB3C; // positive
|
|
32
|
-
@dt-color-link-success-hover: #DBFFA9;
|
|
33
30
|
@dt-color-link-warning: #FFBD48;
|
|
34
|
-
@dt-color-link-warning-hover: #FFE89C;
|
|
35
31
|
@dt-color-link-muted: #c7c7c7;
|
|
36
|
-
@dt-color-link-
|
|
37
|
-
@dt-color-link-disabled: #B0B0B0;
|
|
38
|
-
@dt-color-link-disabled-hover: #B0B0B0;
|
|
32
|
+
@dt-color-link-disabled: #808080;
|
|
39
33
|
@dt-color-link-primary-inverted: #7C52FF;
|
|
40
|
-
@dt-color-link-primary-inverted-hover: #5023DD;
|
|
41
34
|
@dt-color-link-critical-inverted: #FF1356;
|
|
42
|
-
@dt-color-link-critical-inverted-hover: #640823;
|
|
43
35
|
@dt-color-link-success-inverted: #008E52;
|
|
44
|
-
@dt-color-link-success-inverted-hover: #004F2E;
|
|
45
36
|
@dt-color-link-warning-inverted: #815008;
|
|
46
|
-
@dt-color-link-warning-inverted-hover: #533204;
|
|
47
37
|
@dt-color-link-muted-inverted: #3d3d3d;
|
|
48
|
-
@dt-color-link-muted-inverted-hover: #171717;
|
|
49
38
|
@dt-color-link-disabled-inverted: #555555;
|
|
39
|
+
@dt-color-link-primary-hover: #DAC7FF;
|
|
40
|
+
@dt-color-link-critical-hover: #FFABA4;
|
|
41
|
+
@dt-color-link-success-hover: #DBFFA9;
|
|
42
|
+
@dt-color-link-warning-hover: #FFE89C;
|
|
43
|
+
@dt-color-link-muted-hover: #E6E6E6;
|
|
44
|
+
@dt-color-link-disabled-hover: #808080;
|
|
45
|
+
@dt-color-link-primary-inverted-hover: #5023DD;
|
|
46
|
+
@dt-color-link-critical-inverted-hover: #AF0032;
|
|
47
|
+
@dt-color-link-success-inverted-hover: #004F2E;
|
|
48
|
+
@dt-color-link-warning-inverted-hover: #533204;
|
|
49
|
+
@dt-color-link-muted-inverted-hover: #171717;
|
|
50
50
|
@dt-color-link-disabled-inverted-hover: #555555;
|
|
51
|
+
@dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
|
|
52
|
+
@dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
|
|
53
|
+
@dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
|
|
54
|
+
@dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
|
|
55
|
+
@dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
|
|
56
|
+
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
|
|
57
|
+
@dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
|
|
58
|
+
@dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
|
|
59
|
+
@dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
|
|
60
|
+
@dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
|
|
61
|
+
@dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
|
|
62
|
+
@dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
|
|
63
|
+
@dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
|
|
64
|
+
@dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
|
|
51
65
|
@dt-color-surface-primary: #171717;
|
|
52
66
|
@dt-color-surface-secondary: #1f1f1f;
|
|
53
67
|
@dt-color-surface-moderate: #3d3d3d;
|
|
@@ -55,109 +69,94 @@
|
|
|
55
69
|
@dt-color-surface-strong: #B0B0B0;
|
|
56
70
|
@dt-color-surface-contrast: #ffffff;
|
|
57
71
|
@dt-color-surface-critical: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
58
|
-
@dt-color-surface-
|
|
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.
|
|
72
|
+
@dt-color-surface-critical-subtle: #1C0108; // A softer version of the Critical surface.
|
|
67
73
|
@dt-color-surface-critical-strong: #FF716F;
|
|
74
|
+
@dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
75
|
+
@dt-color-surface-warning-subtle: #201301; // A softer version of the default warning surface.
|
|
68
76
|
@dt-color-surface-warning-strong: #FFDB80;
|
|
77
|
+
@dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
78
|
+
@dt-color-surface-success-subtle: #00150D; // A softer version of the default success surface.
|
|
69
79
|
@dt-color-surface-success-strong: #AEFB3C;
|
|
80
|
+
@dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
|
|
81
|
+
@dt-color-surface-info-subtle: #010B16; // A softer version of the default informational surface.
|
|
70
82
|
@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
83
|
@dt-color-surface-secondary-inverted: #F9F9F9;
|
|
90
84
|
@dt-color-surface-moderate-inverted: #E6E6E6;
|
|
91
85
|
@dt-color-surface-bold-inverted: #D4D4D4;
|
|
92
86
|
@dt-color-surface-strong-inverted: #555555; // Use sparingly to draw the eye to a relatively important region.
|
|
93
87
|
@dt-color-surface-contrast-inverted: #171717; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
88
|
+
@dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
94
89
|
@dt-color-surface-critical-inverted: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
90
|
+
@dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
|
|
91
|
+
@dt-color-surface-critical-strong-inverted: #D90A45;
|
|
95
92
|
@dt-color-surface-warning-inverted: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
93
|
+
@dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
|
|
94
|
+
@dt-color-surface-warning-strong-inverted: #FFBD48;
|
|
96
95
|
@dt-color-surface-success-inverted: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
96
|
+
@dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
|
|
97
|
+
@dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
97
98
|
@dt-color-surface-info-inverted: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
|
|
99
|
+
@dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
|
|
98
100
|
@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
101
|
@dt-color-surface-info-subtle-inverted: #f5f9fd; // A softer version of the default informational surface.
|
|
102
|
+
@dt-color-surface-brand-subtle: #0E002A; // A softer version of the default informational surface.
|
|
103
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
104
|
@dt-color-surface-info-strong-inverted: #1768C6;
|
|
105
|
+
@dt-color-surface-brand-strong: #AB7EFF;
|
|
108
106
|
@dt-color-surface-brand-strong-inverted: #7C52FF;
|
|
109
|
-
@dt-color-surface-primary-opaque
|
|
110
|
-
@dt-color-surface-secondary-opaque-inverted: hsl(0
|
|
111
|
-
@dt-color-surface-moderate-opaque-inverted: hsl(0
|
|
112
|
-
@dt-color-surface-bold-opaque-inverted: hsl(0
|
|
113
|
-
@dt-color-surface-strong-opaque-inverted: hsl(0
|
|
114
|
-
@dt-color-surface-contrast-opaque-inverted: hsl(0
|
|
107
|
+
@dt-color-surface-primary-opaque: hsl(0 0% 100% / 0.96);
|
|
108
|
+
@dt-color-surface-secondary-opaque-inverted: hsl(0 0% 0% / 0.04);
|
|
109
|
+
@dt-color-surface-moderate-opaque-inverted: hsl(0 0% 0% / 0.11);
|
|
110
|
+
@dt-color-surface-bold-opaque-inverted: hsl(0 0% 0% / 0.18);
|
|
111
|
+
@dt-color-surface-strong-opaque-inverted: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
|
|
112
|
+
@dt-color-surface-contrast-opaque-inverted: hsl(0 0% 0% / 0.97); // Contrast surface as opaque background color.
|
|
115
113
|
@dt-color-surface-critical-opaque-inverted: hsl(4.62 100% 82.2% / 0.5);
|
|
114
|
+
@dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
|
|
116
115
|
@dt-color-surface-warning-opaque-inverted: hsl(46.1 100% 80.6% / 0.5);
|
|
116
|
+
@dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
|
|
117
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-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
|
|
118
119
|
@dt-color-surface-info-opaque-inverted: hsl(210 61.5% 94.9% / 0.6); // Info surface as opaque background color.
|
|
120
|
+
@dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
|
|
119
121
|
@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
122
|
@dt-color-surface-info-subtle-opaque-inverted: hsl(210 66.7% 97.6% / 0.66); // Info surface as opaque background color.
|
|
123
|
+
@dt-color-surface-brand-subtle-opaque: hsl(260 100% 8.24% / 0.65);
|
|
124
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
125
|
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
127
126
|
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
128
127
|
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
129
128
|
@dt-color-border-bold: hsl(0 0% 100% / 0.5);
|
|
129
|
+
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
130
|
+
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
131
|
+
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
132
|
+
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
133
|
+
@dt-color-border-focus: #1768C6;
|
|
130
134
|
@dt-color-border-critical: #FF716F;
|
|
131
135
|
@dt-color-border-success: #D1FF76;
|
|
132
136
|
@dt-color-border-warning: #FFDB80;
|
|
133
137
|
@dt-color-border-brand: #C2A3FF;
|
|
138
|
+
@dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
139
|
+
@dt-color-border-accent: #FF1BA4;
|
|
134
140
|
@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
141
|
@dt-color-border-critical-strong: #FFABA4;
|
|
142
|
+
@dt-color-border-success-subtle: #52C926;
|
|
139
143
|
@dt-color-border-success-strong: #AEFB3C;
|
|
144
|
+
@dt-color-border-warning-subtle: #FF9E0E;
|
|
140
145
|
@dt-color-border-warning-strong: #FFE89C;
|
|
146
|
+
@dt-color-border-brand-subtle: #7C52FF;
|
|
141
147
|
@dt-color-border-brand-strong: #DAC7FF;
|
|
142
|
-
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
143
|
-
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
144
|
-
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
145
|
-
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
146
148
|
@dt-color-border-critical-inverted: #FF1356;
|
|
147
149
|
@dt-color-border-success-inverted: #31B237;
|
|
148
150
|
@dt-color-border-warning-inverted: #FF9E0E;
|
|
149
151
|
@dt-color-border-brand-inverted: #7C52FF;
|
|
150
152
|
@dt-color-border-critical-subtle-inverted: #FF716F;
|
|
151
|
-
@dt-color-border-success-subtle-inverted: #D1FF76;
|
|
152
|
-
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
153
|
-
@dt-color-border-brand-subtle-inverted: #C2A3FF;
|
|
154
153
|
@dt-color-border-critical-strong-inverted: #93173A;
|
|
154
|
+
@dt-color-border-success-subtle-inverted: #D1FF76;
|
|
155
155
|
@dt-color-border-success-strong-inverted: #004F2E;
|
|
156
|
+
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
156
157
|
@dt-color-border-warning-strong-inverted: #D57F00;
|
|
158
|
+
@dt-color-border-brand-subtle-inverted: #C2A3FF;
|
|
157
159
|
@dt-color-border-brand-strong-inverted: #5023DD;
|
|
158
|
-
@dt-color-border-focus: #1768C6;
|
|
159
|
-
@dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #ff0000 90%);
|
|
160
|
-
@dt-color-border-accent: #FF1BA4;
|
|
161
160
|
@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.
|
|
162
161
|
@dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
|
|
163
162
|
@dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
|
|
@@ -375,9 +374,9 @@
|
|
|
375
374
|
@dt-inputs-font-weight-md: 400; // Font weight for medium inputs (e.g. input and textarea)
|
|
376
375
|
@dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
|
|
377
376
|
@dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
|
|
378
|
-
@dt-inputs-color-foreground-default: #
|
|
379
|
-
@dt-inputs-color-foreground-placeholder: #
|
|
380
|
-
@dt-inputs-color-foreground-disabled: #
|
|
377
|
+
@dt-inputs-color-foreground-default: #c7c7c7;
|
|
378
|
+
@dt-inputs-color-foreground-placeholder: #808080;
|
|
379
|
+
@dt-inputs-color-foreground-disabled: #808080;
|
|
381
380
|
@dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
|
|
382
381
|
@dt-inputs-color-border-focus: #1768C6;
|
|
383
382
|
@dt-inputs-color-border-critical: #FF716F;
|
|
@@ -390,25 +389,25 @@
|
|
|
390
389
|
@dt-action-color-foreground-base-default: #C2A3FF;
|
|
391
390
|
@dt-action-color-foreground-base-hover: #DAC7FF;
|
|
392
391
|
@dt-action-color-foreground-base-active: #DAC7FF;
|
|
393
|
-
@dt-action-color-foreground-base-primary-default: #
|
|
392
|
+
@dt-action-color-foreground-base-primary-default: #000000;
|
|
394
393
|
@dt-action-color-foreground-critical-default: #FF716F;
|
|
395
394
|
@dt-action-color-foreground-critical-hover: #FFABA4;
|
|
396
395
|
@dt-action-color-foreground-critical-active: #FFABA4;
|
|
397
|
-
@dt-action-color-foreground-critical-primary-default: #
|
|
398
|
-
@dt-action-color-foreground-inverted-default: #
|
|
399
|
-
@dt-action-color-foreground-inverted-hover: #
|
|
400
|
-
@dt-action-color-foreground-inverted-active: #
|
|
396
|
+
@dt-action-color-foreground-critical-primary-default: #000000;
|
|
397
|
+
@dt-action-color-foreground-inverted-default: #171717;
|
|
398
|
+
@dt-action-color-foreground-inverted-hover: #171717;
|
|
399
|
+
@dt-action-color-foreground-inverted-active: #171717;
|
|
401
400
|
@dt-action-color-foreground-inverted-primary-default: #C2A3FF;
|
|
402
401
|
@dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
|
|
403
402
|
@dt-action-color-foreground-inverted-primary-active: #DAC7FF;
|
|
404
403
|
@dt-action-color-foreground-muted-default: #c7c7c7;
|
|
405
|
-
@dt-action-color-foreground-muted-hover: #
|
|
406
|
-
@dt-action-color-foreground-muted-active: #
|
|
407
|
-
@dt-action-color-foreground-disabled-default: #
|
|
404
|
+
@dt-action-color-foreground-muted-hover: #E6E6E6;
|
|
405
|
+
@dt-action-color-foreground-muted-active: #E6E6E6;
|
|
406
|
+
@dt-action-color-foreground-disabled-default: #808080;
|
|
408
407
|
@dt-action-color-foreground-positive-default: #AEFB3C;
|
|
409
408
|
@dt-action-color-foreground-positive-hover: #DBFFA9;
|
|
410
409
|
@dt-action-color-foreground-positive-active: #DBFFA9;
|
|
411
|
-
@dt-action-color-foreground-positive-primary-default: #
|
|
410
|
+
@dt-action-color-foreground-positive-primary-default: #000000;
|
|
412
411
|
@dt-action-color-background-base-default: transparent;
|
|
413
412
|
@dt-action-color-background-base-hover: hsl(258 100% 70.4% / 0.2);
|
|
414
413
|
@dt-action-color-background-base-active: hsl(258 100% 70.4% / 0.3);
|
|
@@ -441,44 +440,44 @@
|
|
|
441
440
|
@dt-action-color-border-critical-outlined-default: #FF716F;
|
|
442
441
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
|
|
443
442
|
@dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
|
|
444
|
-
@dt-theme-color-base: #
|
|
445
|
-
@dt-theme-topbar-color-foreground: hsl(0
|
|
443
|
+
@dt-theme-color-base: #E6E6E6;
|
|
444
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
446
445
|
@dt-theme-topbar-color-background: #1f1f1f;
|
|
447
|
-
@dt-theme-topbar-field-color-foreground: hsl(0
|
|
448
|
-
@dt-theme-topbar-field-color-foreground-hover: hsl(0
|
|
449
|
-
@dt-theme-topbar-field-color-background: hsl(0
|
|
446
|
+
@dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
|
|
447
|
+
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
|
|
448
|
+
@dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
|
|
450
449
|
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
|
|
451
|
-
@dt-theme-topbar-field-color-border: hsl(0
|
|
452
|
-
@dt-theme-topbar-field-color-border-hover: hsl(0
|
|
453
|
-
@dt-theme-topbar-field-color-border-active: hsl(0
|
|
454
|
-
@dt-theme-topbar-button-color-foreground: hsl(0
|
|
455
|
-
@dt-theme-topbar-button-color-foreground-hover: #
|
|
456
|
-
@dt-theme-topbar-button-color-background: hsl(0
|
|
457
|
-
@dt-theme-topbar-button-color-background-hover: hsl(0
|
|
458
|
-
@dt-theme-topbar-button-color-background-active: hsl(0
|
|
459
|
-
@dt-theme-topbar-profile-color-foreground: hsl(0
|
|
460
|
-
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0%
|
|
461
|
-
@dt-theme-topbar-profile-color-background: hsl(0
|
|
462
|
-
@dt-theme-topbar-profile-color-background-inverted: hsl(0
|
|
463
|
-
@dt-theme-topbar-profile-color-background-hover: hsl(0
|
|
464
|
-
@dt-theme-topbar-profile-color-background-active: hsl(0
|
|
450
|
+
@dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
|
|
451
|
+
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
|
|
452
|
+
@dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
|
|
453
|
+
@dt-theme-topbar-button-color-foreground: hsl(0 0% 90.2% / 0.65);
|
|
454
|
+
@dt-theme-topbar-button-color-foreground-hover: #E6E6E6;
|
|
455
|
+
@dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
|
|
456
|
+
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
|
|
457
|
+
@dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
|
|
458
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
459
|
+
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 9.02% / 0.75);
|
|
460
|
+
@dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
|
|
461
|
+
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
|
|
462
|
+
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
463
|
+
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
|
|
465
464
|
@dt-theme-sidebar-color-foreground: #c7c7c7;
|
|
466
|
-
@dt-theme-sidebar-color-foreground-unread: #
|
|
465
|
+
@dt-theme-sidebar-color-foreground-unread: #E6E6E6;
|
|
467
466
|
@dt-theme-sidebar-color-background: #1f1f1f;
|
|
468
467
|
@dt-theme-sidebar-icon-color-foreground: #c7c7c7;
|
|
469
468
|
@dt-theme-sidebar-status-color-foreground: #B0B0B0;
|
|
470
|
-
@dt-theme-sidebar-row-color-background: hsl(0
|
|
471
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(0
|
|
472
|
-
@dt-theme-sidebar-row-color-background-active: hsl(0
|
|
473
|
-
@dt-theme-sidebar-selected-row-color-foreground: #
|
|
474
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(0
|
|
469
|
+
@dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
|
|
470
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
471
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
|
|
472
|
+
@dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
|
|
473
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
|
|
475
474
|
@dt-theme-sidebar-section-color-foreground: #B0B0B0;
|
|
476
475
|
@dt-theme-presence-color-background-available: #84EE0B;
|
|
477
476
|
@dt-theme-presence-color-background-busy-unavailable: #FF415B;
|
|
478
477
|
@dt-theme-presence-color-background-busy: #FFBD48;
|
|
479
478
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
480
|
-
@dt-theme-mention-color-foreground: #
|
|
481
|
-
@dt-theme-mention-color-foreground-strong: #
|
|
479
|
+
@dt-theme-mention-color-foreground: #000000;
|
|
480
|
+
@dt-theme-mention-color-foreground-strong: #171717;
|
|
482
481
|
@dt-theme-mention-color-background: #AB7EFF;
|
|
483
482
|
@dt-theme-mention-color-background-strong: #F5F0FF;
|
|
484
483
|
@dt-avatar-color-foreground: #000000;
|
|
@@ -508,10 +507,10 @@
|
|
|
508
507
|
@dt-badge-color-background-critical: #640823;
|
|
509
508
|
@dt-badge-color-background-bulletin: #AB7EFF;
|
|
510
509
|
@dt-badge-color-background-bulletin-subtle: #3A1D95;
|
|
511
|
-
@dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #
|
|
510
|
+
@dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
512
511
|
@dt-badge-color-foreground-default: #ffffff;
|
|
513
|
-
@dt-badge-color-foreground-bulletin: #
|
|
514
|
-
@dt-badge-color-foreground-bulletin-subtle: hsl(0
|
|
512
|
+
@dt-badge-color-foreground-bulletin: #000000;
|
|
513
|
+
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
|
|
515
514
|
@dt-badge-color-foreground-ai: #ffffff;
|
|
516
515
|
@dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
|
|
517
516
|
@dt-badge-color-border-bulletin-subtle: hsl(258 100% 70.4% / 0.6);
|
|
@@ -520,9 +519,9 @@
|
|
|
520
519
|
@dt-button-font-size-md: 15px; // Medium Button text size
|
|
521
520
|
@dt-button-font-size-lg: 19px; // Large Button text size
|
|
522
521
|
@dt-button-font-size-xl: 27px; // Extra large Button text size
|
|
523
|
-
@dt-button-font-weight-xs: 600;
|
|
524
|
-
@dt-button-font-weight-sm: 600;
|
|
525
|
-
@dt-button-font-weight-md: 600;
|
|
522
|
+
@dt-button-font-weight-xs: 600;
|
|
523
|
+
@dt-button-font-weight-sm: 600;
|
|
524
|
+
@dt-button-font-weight-md: 600;
|
|
526
525
|
@dt-button-font-weight-lg: 500; // Font weight for LG button
|
|
527
526
|
@dt-button-font-weight-xl: 400; // Font weight for XL button
|
|
528
527
|
@dt-button-line-height-xs: 1.2; // Line-height for XS button
|
|
@@ -542,7 +541,7 @@
|
|
|
542
541
|
@dt-checkbox-color-border-checked: #C2A3FF;
|
|
543
542
|
@dt-checkbox-color-background-checked: #AB7EFF;
|
|
544
543
|
@dt-checkbox-color-foreground-default: transparent;
|
|
545
|
-
@dt-checkbox-color-foreground-checked: #
|
|
544
|
+
@dt-checkbox-color-foreground-checked: #171717;
|
|
546
545
|
@dt-icon-size-100: 12px;
|
|
547
546
|
@dt-icon-size-200: 14px;
|
|
548
547
|
@dt-icon-size-300: 18px;
|
|
@@ -566,4 +565,4 @@
|
|
|
566
565
|
@dt-radio-color-border-checked: #C2A3FF;
|
|
567
566
|
@dt-radio-color-background-checked: #AB7EFF;
|
|
568
567
|
@dt-radio-color-foreground-default: transparent;
|
|
569
|
-
@dt-radio-color-foreground-checked: #
|
|
568
|
+
@dt-radio-color-foreground-checked: #171717;
|