@dialpad/dialtone 9.97.0 → 9.98.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/tokens/tokens-base-deca-dark.css +293 -391
- package/dist/css/tokens/tokens-base-deca-light.css +284 -382
- package/dist/css/tokens/tokens-deca-dark.css +1001 -966
- package/dist/css/tokens/tokens-deca-light.css +731 -696
- package/dist/tokens/css/tokens-base-deca-dark.css +293 -391
- package/dist/tokens/css/tokens-base-deca-light.css +284 -382
- package/dist/tokens/css/tokens-deca-dark.css +1001 -966
- package/dist/tokens/css/tokens-deca-light.css +731 -696
- package/dist/tokens/doc.json +34038 -34284
- package/dist/tokens/less/tokens-base-deca-dark.less +77 -91
- package/dist/tokens/less/tokens-base-deca-light.less +75 -89
- package/dist/tokens/less/tokens-deca-dark.less +225 -220
- package/dist/tokens/less/tokens-deca-light.less +229 -224
- 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/tokens-base-deca-dark.json +77 -91
- package/dist/tokens/tokens-base-deca-light.json +75 -89
- package/dist/tokens/tokens-deca-dark.json +224 -219
- package/dist/tokens/tokens-deca-light.json +229 -224
- package/package.json +3 -3
|
@@ -2,84 +2,89 @@
|
|
|
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: #
|
|
6
|
-
@dt-color-foreground-secondary:
|
|
7
|
-
@dt-color-foreground-tertiary:
|
|
8
|
-
@dt-color-foreground-muted: hsl(0 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: #
|
|
16
|
-
@dt-color-foreground-primary-inverted: #
|
|
17
|
-
@dt-color-foreground-secondary-inverted:
|
|
18
|
-
@dt-color-foreground-tertiary-inverted:
|
|
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: #
|
|
27
|
-
@dt-color-link-primary: #
|
|
28
|
-
@dt-color-link-critical: #
|
|
29
|
-
@dt-color-link-success: #
|
|
30
|
-
@dt-color-link-warning: #
|
|
31
|
-
@dt-color-link-muted:
|
|
32
|
-
@dt-color-link-disabled: #
|
|
33
|
-
@dt-color-link-primary-inverted: #
|
|
34
|
-
@dt-color-link-critical-inverted: #
|
|
35
|
-
@dt-color-link-success-inverted: #
|
|
36
|
-
@dt-color-link-warning-inverted: #
|
|
37
|
-
@dt-color-link-muted-inverted:
|
|
38
|
-
@dt-color-link-disabled-inverted: #
|
|
39
|
-
@dt-color-link-primary-hover: #
|
|
40
|
-
@dt-color-link-critical-hover: #
|
|
41
|
-
@dt-color-link-success-hover: #
|
|
42
|
-
@dt-color-link-warning-hover: #
|
|
43
|
-
@dt-color-link-muted-hover: #
|
|
44
|
-
@dt-color-link-disabled-hover: #
|
|
45
|
-
@dt-color-link-primary-inverted-hover: #
|
|
46
|
-
@dt-color-link-critical-inverted-hover: #
|
|
47
|
-
@dt-color-link-success-inverted-hover: #
|
|
48
|
-
@dt-color-link-warning-inverted-hover: #
|
|
49
|
-
@dt-color-link-muted-inverted-hover: #
|
|
50
|
-
@dt-color-link-disabled-inverted-hover: #
|
|
51
|
-
@dt-color-surface-secondary-opaque: hsl(0 0%
|
|
52
|
-
@dt-color-surface-moderate-opaque: hsl(0 0%
|
|
53
|
-
@dt-color-surface-bold-opaque: hsl(0 0%
|
|
54
|
-
@dt-color-surface-strong-opaque: hsl(0 0%
|
|
55
|
-
@dt-color-surface-contrast-opaque: hsl(0 0%
|
|
56
|
-
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.
|
|
57
|
-
@dt-color-surface-critical-opaque: hsl(
|
|
58
|
-
@dt-color-surface-critical-subtle-opaque: hsl(
|
|
59
|
-
@dt-color-surface-warning-opaque: hsl(
|
|
60
|
-
@dt-color-surface-warning-subtle-opaque: hsl(
|
|
61
|
-
@dt-color-surface-success-opaque: hsl(
|
|
62
|
-
@dt-color-surface-success-subtle-opaque: hsl(
|
|
63
|
-
@dt-color-surface-info-opaque: hsl(
|
|
64
|
-
@dt-color-surface-info-subtle-opaque: hsl(
|
|
65
|
-
@dt-color-surface-primary: #
|
|
66
|
-
@dt-color-surface-secondary:
|
|
67
|
-
@dt-color-surface-moderate: #
|
|
68
|
-
@dt-color-surface-bold: #
|
|
69
|
-
@dt-color-surface-strong: #
|
|
70
|
-
@dt-color-surface-contrast: #
|
|
71
|
-
@dt-color-surface-critical: #
|
|
72
|
-
@dt-color-surface-critical-subtle:
|
|
73
|
-
@dt-color-surface-critical-strong: #
|
|
74
|
-
@dt-color-surface-warning: #
|
|
75
|
-
@dt-color-surface-warning-subtle:
|
|
76
|
-
@dt-color-surface-warning-strong: #
|
|
77
|
-
@dt-color-surface-success: #
|
|
78
|
-
@dt-color-surface-success-subtle:
|
|
79
|
-
@dt-color-surface-success-strong: #
|
|
80
|
-
@dt-color-surface-info: #
|
|
81
|
-
@dt-color-surface-info-subtle:
|
|
82
|
-
@dt-color-surface-info-strong: #
|
|
5
|
+
@dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
|
|
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
|
+
@dt-color-foreground-muted: hsl(0 0% 97.6% / 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
|
+
@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: #FFC047;
|
|
16
|
+
@dt-color-foreground-primary-inverted: #171717; // Primary text that sits on high-contrast surfaces or backgrounds.
|
|
17
|
+
@dt-color-foreground-secondary-inverted: #3d3d3d;
|
|
18
|
+
@dt-color-foreground-tertiary-inverted: #555555;
|
|
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: #E10040;
|
|
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: #AB7EFF;
|
|
28
|
+
@dt-color-link-critical: #FF716F;
|
|
29
|
+
@dt-color-link-success: #AEFB3C; // positive
|
|
30
|
+
@dt-color-link-warning: #FFC047;
|
|
31
|
+
@dt-color-link-muted: #c7c7c7;
|
|
32
|
+
@dt-color-link-disabled: #808080;
|
|
33
|
+
@dt-color-link-primary-inverted: #7C52FF;
|
|
34
|
+
@dt-color-link-critical-inverted: #FF1356;
|
|
35
|
+
@dt-color-link-success-inverted: #008E52;
|
|
36
|
+
@dt-color-link-warning-inverted: #815008;
|
|
37
|
+
@dt-color-link-muted-inverted: #3d3d3d;
|
|
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: #FFDB80;
|
|
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: #E10040;
|
|
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
|
+
@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(342 85.2% 21.2% / 0.58);
|
|
58
|
+
@dt-color-surface-critical-subtle-opaque: hsl(342 85.2% 21.2% / 0.35);
|
|
59
|
+
@dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.52);
|
|
60
|
+
@dt-color-surface-warning-subtle-opaque: hsl(35.8 92.9% 11% / 0.13);
|
|
61
|
+
@dt-color-surface-success-opaque: hsl(155 100% 27.8% / 0.51);
|
|
62
|
+
@dt-color-surface-success-subtle-opaque: hsl(155 100% 15.5% / 0.18);
|
|
63
|
+
@dt-color-surface-info-opaque: hsl(211 100% 19.8% / 0.62);
|
|
64
|
+
@dt-color-surface-info-subtle-opaque: hsl(210 100% 12% / 0.24);
|
|
65
|
+
@dt-color-surface-primary: #171717;
|
|
66
|
+
@dt-color-surface-secondary: #1f1f1f;
|
|
67
|
+
@dt-color-surface-moderate: #3d3d3d;
|
|
68
|
+
@dt-color-surface-bold: #555555;
|
|
69
|
+
@dt-color-surface-strong: #B0B0B0;
|
|
70
|
+
@dt-color-surface-contrast: #F9F9F9;
|
|
71
|
+
@dt-color-surface-critical: #2D010E; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
72
|
+
@dt-color-surface-critical-subtle: hsl(342 95.7% 5.41%);
|
|
73
|
+
@dt-color-surface-critical-strong: #FFABA4;
|
|
74
|
+
@dt-color-surface-warning: #362102; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
75
|
+
@dt-color-surface-warning-subtle: hsl(35.8 92.9% 6.59%);
|
|
76
|
+
@dt-color-surface-warning-strong: #FFDB80;
|
|
77
|
+
@dt-color-surface-success: #03301C; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
78
|
+
@dt-color-surface-success-subtle: hsl(153 88.2% 6%);
|
|
79
|
+
@dt-color-surface-success-strong: #D1FF76;
|
|
80
|
+
@dt-color-surface-info: #001E3D; // Background surface color containing messaging or elements communicated as generally informational.
|
|
81
|
+
@dt-color-surface-info-subtle: hsl(210 100% 7.18%);
|
|
82
|
+
@dt-color-surface-info-strong: #5FC4F9;
|
|
83
|
+
@dt-color-surface-brand: #17033F; // Background surface color containing messaging or elements communicated as generally informational.
|
|
84
|
+
@dt-color-surface-brand-subtle: hsl(260 90.9% 7.76%);
|
|
85
|
+
@dt-color-surface-brand-strong: #9568FF;
|
|
86
|
+
@dt-color-surface-brand-opaque: hsl(260 86.9% 21% / 0.5);
|
|
87
|
+
@dt-color-surface-brand-subtle-opaque: hsl(260 90.9% 12.9% / 0.5);
|
|
83
88
|
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
84
89
|
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
85
90
|
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
@@ -88,33 +93,33 @@
|
|
|
88
93
|
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
89
94
|
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
90
95
|
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
91
|
-
@dt-color-border-focus: #
|
|
92
|
-
@dt-color-border-critical: #
|
|
93
|
-
@dt-color-border-success: #
|
|
94
|
-
@dt-color-border-warning: #
|
|
95
|
-
@dt-color-border-brand: #
|
|
96
|
-
@dt-color-border-ai: linear-gradient(135deg, #
|
|
97
|
-
@dt-color-border-accent: #
|
|
98
|
-
@dt-color-border-critical-subtle: #
|
|
99
|
-
@dt-color-border-critical-strong: #
|
|
100
|
-
@dt-color-border-success-subtle: #
|
|
101
|
-
@dt-color-border-success-strong: #
|
|
102
|
-
@dt-color-border-warning-subtle: #
|
|
103
|
-
@dt-color-border-warning-strong: #
|
|
104
|
-
@dt-color-border-brand-subtle: #
|
|
105
|
-
@dt-color-border-brand-strong: #
|
|
106
|
-
@dt-color-border-critical-inverted: #
|
|
107
|
-
@dt-color-border-success-inverted: #
|
|
108
|
-
@dt-color-border-warning-inverted: #
|
|
109
|
-
@dt-color-border-brand-inverted: #
|
|
110
|
-
@dt-color-border-critical-subtle-inverted: #
|
|
111
|
-
@dt-color-border-critical-strong-inverted: #
|
|
112
|
-
@dt-color-border-success-subtle-inverted: #
|
|
113
|
-
@dt-color-border-success-strong-inverted: #
|
|
114
|
-
@dt-color-border-warning-subtle-inverted: #
|
|
115
|
-
@dt-color-border-warning-strong-inverted: #
|
|
116
|
-
@dt-color-border-brand-subtle-inverted: #
|
|
117
|
-
@dt-color-border-brand-strong-inverted: #
|
|
96
|
+
@dt-color-border-focus: #3CA8F3;
|
|
97
|
+
@dt-color-border-critical: #FF716F;
|
|
98
|
+
@dt-color-border-success: #3CD707;
|
|
99
|
+
@dt-color-border-warning: #FFC047;
|
|
100
|
+
@dt-color-border-brand: #9568FF;
|
|
101
|
+
@dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
102
|
+
@dt-color-border-accent: #FF1BA4;
|
|
103
|
+
@dt-color-border-critical-subtle: #E10040;
|
|
104
|
+
@dt-color-border-critical-strong: #FFABA4;
|
|
105
|
+
@dt-color-border-success-subtle: #008E52;
|
|
106
|
+
@dt-color-border-success-strong: #AEFB3C;
|
|
107
|
+
@dt-color-border-warning-subtle: #D57F00;
|
|
108
|
+
@dt-color-border-warning-strong: #FFE89C;
|
|
109
|
+
@dt-color-border-brand-subtle: #6538F1;
|
|
110
|
+
@dt-color-border-brand-strong: #DAC7FF;
|
|
111
|
+
@dt-color-border-critical-inverted: #FF415B;
|
|
112
|
+
@dt-color-border-success-inverted: #008E52;
|
|
113
|
+
@dt-color-border-warning-inverted: #F19000;
|
|
114
|
+
@dt-color-border-brand-inverted: #7C52FF;
|
|
115
|
+
@dt-color-border-critical-subtle-inverted: #FF716F;
|
|
116
|
+
@dt-color-border-critical-strong-inverted: #E10040;
|
|
117
|
+
@dt-color-border-success-subtle-inverted: #AEFB3C;
|
|
118
|
+
@dt-color-border-success-strong-inverted: #004F2E;
|
|
119
|
+
@dt-color-border-warning-subtle-inverted: #FFC047;
|
|
120
|
+
@dt-color-border-warning-strong-inverted: #815008;
|
|
121
|
+
@dt-color-border-brand-subtle-inverted: #AB7EFF;
|
|
122
|
+
@dt-color-border-brand-strong-inverted: #3A1D95;
|
|
118
123
|
@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
124
|
@dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
|
|
120
125
|
@dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
|
|
@@ -291,15 +296,15 @@
|
|
|
291
296
|
@dt-typography-inputs-xl-font-size: 27px; // Text style for extra large inputs (e.g. input and textarea)
|
|
292
297
|
@dt-typography-inputs-xl-line-height: 1.2; // Text style for extra large inputs (e.g. input and textarea)
|
|
293
298
|
@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:
|
|
299
|
+
@dt-typography-button-xs-font-weight: 600; // Text style for extra small button
|
|
295
300
|
@dt-typography-button-xs-font-size: 12px; // Text style for extra small button
|
|
296
301
|
@dt-typography-button-xs-line-height: 1.2; // Text style for extra small button
|
|
297
302
|
@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:
|
|
303
|
+
@dt-typography-button-sm-font-weight: 600; // Text style for small button
|
|
299
304
|
@dt-typography-button-sm-font-size: 12px; // Text style for small button
|
|
300
305
|
@dt-typography-button-sm-line-height: 1.2; // Text style for small button
|
|
301
306
|
@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:
|
|
307
|
+
@dt-typography-button-md-font-weight: 600; // Text style for medium button
|
|
303
308
|
@dt-typography-button-md-font-size: 15px; // Text style for medium button
|
|
304
309
|
@dt-typography-button-md-line-height: 1.2; // Text style for medium button
|
|
305
310
|
@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
|
|
@@ -332,112 +337,112 @@
|
|
|
332
337
|
@dt-inputs-font-weight-md: 400; // Font weight for medium inputs (e.g. input and textarea)
|
|
333
338
|
@dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
|
|
334
339
|
@dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
|
|
335
|
-
@dt-inputs-color-foreground-default:
|
|
336
|
-
@dt-inputs-color-foreground-placeholder: #
|
|
337
|
-
@dt-inputs-color-foreground-disabled: #
|
|
340
|
+
@dt-inputs-color-foreground-default: #c7c7c7;
|
|
341
|
+
@dt-inputs-color-foreground-placeholder: #808080;
|
|
342
|
+
@dt-inputs-color-foreground-disabled: #808080;
|
|
338
343
|
@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: #
|
|
342
|
-
@dt-inputs-color-border-warning: #
|
|
344
|
+
@dt-inputs-color-border-focus: #3CA8F3;
|
|
345
|
+
@dt-inputs-color-border-critical: #FF716F;
|
|
346
|
+
@dt-inputs-color-border-success: #3CD707;
|
|
347
|
+
@dt-inputs-color-border-warning: #FFC047;
|
|
343
348
|
@dt-inputs-color-border-disabled: transparent;
|
|
344
|
-
@dt-inputs-color-background-default: hsl(0 0%
|
|
345
|
-
@dt-inputs-color-background-focus:
|
|
346
|
-
@dt-inputs-color-background-disabled: hsl(0 0%
|
|
347
|
-
@dt-action-color-foreground-base-default: #
|
|
348
|
-
@dt-action-color-foreground-base-hover: #
|
|
349
|
-
@dt-action-color-foreground-base-active: #
|
|
349
|
+
@dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.03);
|
|
350
|
+
@dt-inputs-color-background-focus: #171717;
|
|
351
|
+
@dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.18);
|
|
352
|
+
@dt-action-color-foreground-base-default: #AB7EFF;
|
|
353
|
+
@dt-action-color-foreground-base-hover: #DAC7FF;
|
|
354
|
+
@dt-action-color-foreground-base-active: #DAC7FF;
|
|
350
355
|
@dt-action-color-foreground-base-primary-default: #000000;
|
|
351
|
-
@dt-action-color-foreground-critical-default: #
|
|
352
|
-
@dt-action-color-foreground-critical-hover: #
|
|
353
|
-
@dt-action-color-foreground-critical-active: #
|
|
356
|
+
@dt-action-color-foreground-critical-default: #FF716F;
|
|
357
|
+
@dt-action-color-foreground-critical-hover: #FFABA4;
|
|
358
|
+
@dt-action-color-foreground-critical-active: #FFABA4;
|
|
354
359
|
@dt-action-color-foreground-critical-primary-default: #000000;
|
|
355
|
-
@dt-action-color-foreground-inverted-default: #
|
|
356
|
-
@dt-action-color-foreground-inverted-hover: #
|
|
357
|
-
@dt-action-color-foreground-inverted-active: #
|
|
358
|
-
@dt-action-color-foreground-inverted-primary-default: #
|
|
359
|
-
@dt-action-color-foreground-inverted-primary-hover: #
|
|
360
|
-
@dt-action-color-foreground-inverted-primary-active: #
|
|
361
|
-
@dt-action-color-foreground-muted-default:
|
|
362
|
-
@dt-action-color-foreground-muted-hover: #
|
|
363
|
-
@dt-action-color-foreground-muted-active: #
|
|
364
|
-
@dt-action-color-foreground-disabled-default: #
|
|
365
|
-
@dt-action-color-foreground-positive-default: #
|
|
366
|
-
@dt-action-color-foreground-positive-hover: #
|
|
367
|
-
@dt-action-color-foreground-positive-active: #
|
|
368
|
-
@dt-action-color-foreground-positive-primary-default: #
|
|
360
|
+
@dt-action-color-foreground-inverted-default: #171717;
|
|
361
|
+
@dt-action-color-foreground-inverted-hover: #171717;
|
|
362
|
+
@dt-action-color-foreground-inverted-active: #171717;
|
|
363
|
+
@dt-action-color-foreground-inverted-primary-default: #AB7EFF;
|
|
364
|
+
@dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
|
|
365
|
+
@dt-action-color-foreground-inverted-primary-active: #DAC7FF;
|
|
366
|
+
@dt-action-color-foreground-muted-default: #c7c7c7;
|
|
367
|
+
@dt-action-color-foreground-muted-hover: #E6E6E6;
|
|
368
|
+
@dt-action-color-foreground-muted-active: #E6E6E6;
|
|
369
|
+
@dt-action-color-foreground-disabled-default: #808080;
|
|
370
|
+
@dt-action-color-foreground-positive-default: #AEFB3C;
|
|
371
|
+
@dt-action-color-foreground-positive-hover: #DBFFA9;
|
|
372
|
+
@dt-action-color-foreground-positive-active: #DBFFA9;
|
|
373
|
+
@dt-action-color-foreground-positive-primary-default: #000000;
|
|
369
374
|
@dt-action-color-background-base-default: transparent;
|
|
370
|
-
@dt-action-color-background-base-hover:
|
|
371
|
-
@dt-action-color-background-base-active: #
|
|
372
|
-
@dt-action-color-background-base-primary-default: #
|
|
373
|
-
@dt-action-color-background-base-primary-hover: #
|
|
374
|
-
@dt-action-color-background-base-primary-active: #
|
|
375
|
+
@dt-action-color-background-base-hover: hsl(260 86.9% 21% / 0.5);
|
|
376
|
+
@dt-action-color-background-base-active: #260764;
|
|
377
|
+
@dt-action-color-background-base-primary-default: #9568FF;
|
|
378
|
+
@dt-action-color-background-base-primary-hover: #AB7EFF;
|
|
379
|
+
@dt-action-color-background-base-primary-active: #9568FF;
|
|
375
380
|
@dt-action-color-background-critical-default: transparent;
|
|
376
|
-
@dt-action-color-background-critical-hover:
|
|
377
|
-
@dt-action-color-background-critical-active: #
|
|
378
|
-
@dt-action-color-background-critical-primary-default: #
|
|
379
|
-
@dt-action-color-background-critical-primary-hover: #
|
|
380
|
-
@dt-action-color-background-critical-primary-active: #
|
|
381
|
+
@dt-action-color-background-critical-hover: hsl(342 85.2% 21.2% / 0.58);
|
|
382
|
+
@dt-action-color-background-critical-active: #640823;
|
|
383
|
+
@dt-action-color-background-critical-primary-default: #FF716F;
|
|
384
|
+
@dt-action-color-background-critical-primary-hover: #FFABA4;
|
|
385
|
+
@dt-action-color-background-critical-primary-active: #FF716F;
|
|
381
386
|
@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: #
|
|
386
|
-
@dt-action-color-background-inverted-primary-active: #
|
|
387
|
+
@dt-action-color-background-inverted-hover: #B0B0B0;
|
|
388
|
+
@dt-action-color-background-inverted-active: #808080;
|
|
389
|
+
@dt-action-color-background-inverted-primary-default: #171717;
|
|
390
|
+
@dt-action-color-background-inverted-primary-hover: #17033F;
|
|
391
|
+
@dt-action-color-background-inverted-primary-active: #260764;
|
|
387
392
|
@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: hsl(0 0%
|
|
393
|
+
@dt-action-color-background-muted-hover: hsl(0 0% 90.2% / 0.18);
|
|
394
|
+
@dt-action-color-background-muted-active: hsl(0 0% 90.2% / 0.3);
|
|
395
|
+
@dt-action-color-background-disabled-default: hsl(0 0% 90.2% / 0.3);
|
|
391
396
|
@dt-action-color-background-positive-default: transparent;
|
|
392
|
-
@dt-action-color-background-positive-hover:
|
|
393
|
-
@dt-action-color-background-positive-active: #
|
|
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: #
|
|
397
|
+
@dt-action-color-background-positive-hover: hsl(155 100% 27.8% / 0.51);
|
|
398
|
+
@dt-action-color-background-positive-active: #004F2E;
|
|
399
|
+
@dt-action-color-background-positive-primary-default: #AEFB3C; // Postive, accepting, or success actions.
|
|
400
|
+
@dt-action-color-background-positive-primary-hover: #D1FF76;
|
|
401
|
+
@dt-action-color-background-positive-primary-active: #AEFB3C;
|
|
402
|
+
@dt-action-color-border-base-outlined-default: #9568FF;
|
|
403
|
+
@dt-action-color-border-critical-outlined-default: #FF716F;
|
|
399
404
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
|
|
400
405
|
@dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
|
|
401
|
-
@dt-theme-color-base: #
|
|
402
|
-
@dt-theme-topbar-color-foreground: hsl(0 0%
|
|
403
|
-
@dt-theme-topbar-color-background:
|
|
404
|
-
@dt-theme-topbar-field-color-foreground: hsl(0 0%
|
|
405
|
-
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0%
|
|
406
|
-
@dt-theme-topbar-field-color-background: hsl(0 0%
|
|
407
|
-
@dt-theme-topbar-field-color-background-hover: hsl(0 0%
|
|
408
|
-
@dt-theme-topbar-field-color-border: hsl(0 0%
|
|
409
|
-
@dt-theme-topbar-field-color-border-hover: hsl(0 0%
|
|
410
|
-
@dt-theme-topbar-field-color-border-active: hsl(0 0%
|
|
411
|
-
@dt-theme-topbar-button-color-foreground: hsl(0 0%
|
|
412
|
-
@dt-theme-topbar-button-color-foreground-hover: #
|
|
413
|
-
@dt-theme-topbar-button-color-background: hsl(0 0%
|
|
414
|
-
@dt-theme-topbar-button-color-background-hover: hsl(0 0%
|
|
415
|
-
@dt-theme-topbar-button-color-background-active: hsl(0 0%
|
|
416
|
-
@dt-theme-topbar-profile-color-foreground: hsl(0 0%
|
|
417
|
-
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0%
|
|
418
|
-
@dt-theme-topbar-profile-color-background: hsl(0 0%
|
|
419
|
-
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0%
|
|
420
|
-
@dt-theme-topbar-profile-color-background-hover: hsl(0 0%
|
|
421
|
-
@dt-theme-topbar-profile-color-background-active: hsl(0 0%
|
|
422
|
-
@dt-theme-sidebar-color-foreground:
|
|
423
|
-
@dt-theme-sidebar-color-foreground-unread: #
|
|
424
|
-
@dt-theme-sidebar-color-background:
|
|
425
|
-
@dt-theme-sidebar-icon-color-foreground:
|
|
426
|
-
@dt-theme-sidebar-status-color-foreground:
|
|
427
|
-
@dt-theme-sidebar-row-color-background: hsl(0 0%
|
|
428
|
-
@dt-theme-sidebar-row-color-background-hover: hsl(0 0%
|
|
429
|
-
@dt-theme-sidebar-row-color-background-active: hsl(0 0%
|
|
430
|
-
@dt-theme-sidebar-selected-row-color-foreground: #
|
|
431
|
-
@dt-theme-sidebar-selected-row-color-background: hsl(0 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: #
|
|
406
|
+
@dt-theme-color-base: #E6E6E6;
|
|
407
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
408
|
+
@dt-theme-topbar-color-background: #1f1f1f;
|
|
409
|
+
@dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
|
|
410
|
+
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
|
|
411
|
+
@dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
|
|
412
|
+
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
|
|
413
|
+
@dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
|
|
414
|
+
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
|
|
415
|
+
@dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
|
|
416
|
+
@dt-theme-topbar-button-color-foreground: hsl(0 0% 90.2% / 0.65);
|
|
417
|
+
@dt-theme-topbar-button-color-foreground-hover: #E6E6E6;
|
|
418
|
+
@dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
|
|
419
|
+
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
|
|
420
|
+
@dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
|
|
421
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
|
|
422
|
+
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 9.02% / 0.75);
|
|
423
|
+
@dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
|
|
424
|
+
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
|
|
425
|
+
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
426
|
+
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
|
|
427
|
+
@dt-theme-sidebar-color-foreground: #c7c7c7;
|
|
428
|
+
@dt-theme-sidebar-color-foreground-unread: #E6E6E6;
|
|
429
|
+
@dt-theme-sidebar-color-background: #1f1f1f;
|
|
430
|
+
@dt-theme-sidebar-icon-color-foreground: #c7c7c7;
|
|
431
|
+
@dt-theme-sidebar-status-color-foreground: #B0B0B0;
|
|
432
|
+
@dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
|
|
433
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
|
|
434
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
|
|
435
|
+
@dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
|
|
436
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
|
|
437
|
+
@dt-theme-sidebar-section-color-foreground: #B0B0B0;
|
|
438
|
+
@dt-theme-presence-color-background-available: #3CD707;
|
|
439
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF415B;
|
|
440
|
+
@dt-theme-presence-color-background-busy: #FFC047;
|
|
436
441
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
437
|
-
@dt-theme-mention-color-foreground: #
|
|
438
|
-
@dt-theme-mention-color-foreground-strong: #
|
|
439
|
-
@dt-theme-mention-color-background: #
|
|
440
|
-
@dt-theme-mention-color-background-strong: #
|
|
442
|
+
@dt-theme-mention-color-foreground: #000000;
|
|
443
|
+
@dt-theme-mention-color-foreground-strong: #171717;
|
|
444
|
+
@dt-theme-mention-color-background: #9568FF;
|
|
445
|
+
@dt-theme-mention-color-background-strong: #DAC7FF;
|
|
441
446
|
@dt-avatar-color-foreground: #000000;
|
|
442
447
|
@dt-avatar-color-background-100: #1aa340;
|
|
443
448
|
@dt-avatar-color-background-200: #aaff83;
|
|
@@ -458,27 +463,27 @@
|
|
|
458
463
|
@dt-avatar-color-background-1700: #ffd646;
|
|
459
464
|
@dt-avatar-color-background-1800: #f1dab7;
|
|
460
465
|
@dt-avatar-color-background-000: #e0e0e0;
|
|
461
|
-
@dt-badge-color-background-default: hsl(0 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: hsl(255
|
|
468
|
-
@dt-badge-color-background-ai: linear-gradient(135deg, #
|
|
469
|
-
@dt-badge-color-foreground-default: #
|
|
466
|
+
@dt-badge-color-background-default: hsl(0 0% 90.2% / 0.18);
|
|
467
|
+
@dt-badge-color-background-info: #003165;
|
|
468
|
+
@dt-badge-color-background-success: #004F2E;
|
|
469
|
+
@dt-badge-color-background-warning: #533204;
|
|
470
|
+
@dt-badge-color-background-critical: #640823;
|
|
471
|
+
@dt-badge-color-background-bulletin: #9568FF;
|
|
472
|
+
@dt-badge-color-background-bulletin-subtle: hsl(255 86.9% 58.2% / 0.6);
|
|
473
|
+
@dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
474
|
+
@dt-badge-color-foreground-default: #E6E6E6;
|
|
470
475
|
@dt-badge-color-foreground-bulletin: #000000;
|
|
471
|
-
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0%
|
|
476
|
+
@dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
|
|
472
477
|
@dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
|
|
473
|
-
@dt-badge-color-border-bulletin-subtle: hsl(255
|
|
478
|
+
@dt-badge-color-border-bulletin-subtle: hsl(255 86.9% 58.2% / 0.6);
|
|
474
479
|
@dt-button-font-size-xs: 12px; // Extra small Button text size
|
|
475
480
|
@dt-button-font-size-sm: 12px; // Small Button text size
|
|
476
481
|
@dt-button-font-size-md: 15px; // Medium Button text size
|
|
477
482
|
@dt-button-font-size-lg: 19px; // Large Button text size
|
|
478
483
|
@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:
|
|
484
|
+
@dt-button-font-weight-xs: 600;
|
|
485
|
+
@dt-button-font-weight-sm: 600;
|
|
486
|
+
@dt-button-font-weight-md: 600;
|
|
482
487
|
@dt-button-font-weight-lg: 500; // Font weight for LG button
|
|
483
488
|
@dt-button-font-weight-xl: 400; // Font weight for XL button
|
|
484
489
|
@dt-button-line-height-xs: 1.2; // Line-height for XS button
|
|
@@ -495,8 +500,8 @@
|
|
|
495
500
|
@dt-checkbox-size-height: 1.6rem;
|
|
496
501
|
@dt-checkbox-size-radius: 0.4rem;
|
|
497
502
|
@dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
498
|
-
@dt-checkbox-color-border-checked: #
|
|
499
|
-
@dt-checkbox-color-background-checked: #
|
|
503
|
+
@dt-checkbox-color-border-checked: #9568FF;
|
|
504
|
+
@dt-checkbox-color-background-checked: #9568FF;
|
|
500
505
|
@dt-icon-size-100: 12px;
|
|
501
506
|
@dt-icon-size-200: 14px;
|
|
502
507
|
@dt-icon-size-300: 18px;
|
|
@@ -517,5 +522,5 @@
|
|
|
517
522
|
@dt-radio-size-height: 1.6rem;
|
|
518
523
|
@dt-radio-size-radius: 50%;
|
|
519
524
|
@dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
|
|
520
|
-
@dt-radio-color-border-checked: #
|
|
521
|
-
@dt-radio-color-background-checked: #
|
|
525
|
+
@dt-radio-color-border-checked: #9568FF;
|
|
526
|
+
@dt-radio-color-background-checked: #9568FF;
|