@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,119 +2,124 @@
|
|
|
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(
|
|
5
|
+
@dt-color-foreground-primary: #1C1C1C; // Default text color throughout the UI.
|
|
6
|
+
@dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
7
|
+
@dt-color-foreground-tertiary: #535353; // 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% 0% / 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: #E10040; // Expresses an error, danger, or otherwise critical state.
|
|
12
|
+
@dt-color-foreground-critical-strong: #AF0032; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
|
|
13
|
+
@dt-color-foreground-success: #008E52; // Indicates a positive state.
|
|
14
|
+
@dt-color-foreground-success-strong: #004F2E; // Indicates a strong positive state on surfaces that require a stronger contrast.
|
|
15
|
+
@dt-color-foreground-warning: #815008; // Indicates information that requires user’s attention and further action may be necessary.
|
|
16
|
+
@dt-color-foreground-primary-inverted: #F9F9F9; // Primary text that sits on high-contrast surfaces or backgrounds.
|
|
17
|
+
@dt-color-foreground-secondary-inverted: #E9E9E9; // Secondary text color that sits on high-contrast surfaces or backgrounds.
|
|
18
|
+
@dt-color-foreground-tertiary-inverted: #D2D2D2; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
|
|
19
|
+
@dt-color-foreground-muted-inverted: hsl(0 0% 97.6% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
|
|
20
|
+
@dt-color-foreground-placeholder-inverted: #AAAAAA; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
21
|
+
@dt-color-foreground-disabled-inverted: #AAAAAA; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
22
|
+
@dt-color-foreground-critical-inverted: #FF716F; // Critical text that sits on high-contrast surfaces or backgrounds
|
|
23
|
+
@dt-color-foreground-critical-strong-inverted: #FFABA4; // Critical strong text that sits on high-contrast surfaces or backgrounds
|
|
24
|
+
@dt-color-foreground-success-inverted: #AEFB3C; // Success text that sits on high-contrast surfaces or backgrounds
|
|
25
|
+
@dt-color-foreground-success-strong-inverted: #D1FF76; // Success strong text that sits on high-contrast surfaces or backgrounds
|
|
26
|
+
@dt-color-foreground-warning-inverted: #FFC047; // Warning text that sits on high-contrast surfaces or backgrounds
|
|
27
|
+
@dt-color-link-primary: #7C52FF;
|
|
28
|
+
@dt-color-link-critical: #E10040;
|
|
29
|
+
@dt-color-link-success: #008E52; // positive
|
|
30
|
+
@dt-color-link-warning: #815008;
|
|
31
|
+
@dt-color-link-muted: #3A3A3A;
|
|
32
|
+
@dt-color-link-disabled: #808080;
|
|
33
|
+
@dt-color-link-primary-inverted: #AB7EFF;
|
|
34
|
+
@dt-color-link-critical-inverted: #FF716F;
|
|
35
|
+
@dt-color-link-success-inverted: #AEFB3C;
|
|
36
|
+
@dt-color-link-warning-inverted: #FFC047;
|
|
37
|
+
@dt-color-link-muted-inverted: #E9E9E9;
|
|
38
|
+
@dt-color-link-disabled-inverted: #AAAAAA;
|
|
39
|
+
@dt-color-link-primary-hover: #5023DD;
|
|
40
|
+
@dt-color-link-critical-hover: #AF0032;
|
|
41
|
+
@dt-color-link-success-hover: #004F2E;
|
|
42
|
+
@dt-color-link-warning-hover: #533204;
|
|
43
|
+
@dt-color-link-muted-hover: #1C1C1C;
|
|
44
|
+
@dt-color-link-disabled-hover: #808080;
|
|
45
|
+
@dt-color-link-primary-inverted-hover: #DAC7FF;
|
|
46
|
+
@dt-color-link-critical-inverted-hover: #FFABA4;
|
|
47
|
+
@dt-color-link-success-inverted-hover: #D1FF76;
|
|
48
|
+
@dt-color-link-warning-inverted-hover: #FFE89C;
|
|
49
|
+
@dt-color-link-muted-inverted-hover: #F9F9F9;
|
|
50
|
+
@dt-color-link-disabled-inverted-hover: #AAAAAA;
|
|
51
|
+
@dt-color-surface-secondary-opaque: hsl(0 0% 11% / 0.02); // Secondary surface as opaque background color.
|
|
52
|
+
@dt-color-surface-moderate-opaque: hsl(0 0% 11% / 0.1); // Moderate surface as opaque background color.
|
|
53
|
+
@dt-color-surface-bold-opaque: hsl(0 0% 11% / 0.19); // Bold surface as opaque background color.
|
|
54
|
+
@dt-color-surface-strong-opaque: hsl(0 0% 11% / 0.76); // Strong surface as opaque background color.
|
|
55
|
+
@dt-color-surface-contrast-opaque: hsl(0 0% 11% / 0.94); // Contrast surface as opaque background color.
|
|
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(4.62 100% 82.2% / 0.31); // Critical surface as opaque background color.
|
|
58
|
+
@dt-color-surface-critical-subtle-opaque: hsl(4.62 100% 82.2% / 0.15); // Critical subtle surface as opaque background color.
|
|
59
|
+
@dt-color-surface-warning-opaque: hsl(46.1 100% 80.6% / 0.5); // Warning surface as opaque background color
|
|
60
|
+
@dt-color-surface-warning-subtle-opaque: hsl(47.1 100% 90% / 0.5); // Warning subtle surface as opaque background color
|
|
61
|
+
@dt-color-surface-success-opaque: hsl(85.1 100% 83.1% / 0.25); // Success surface as opaque background color.
|
|
62
|
+
@dt-color-surface-success-subtle-opaque: hsl(111 53.8% 94.9% / 0.5); // Success subtle surface as opaque background color.
|
|
63
|
+
@dt-color-surface-info-opaque: hsl(201 100% 87.1% / 0.35); // Info surface as opaque background color.
|
|
64
|
+
@dt-color-surface-info-subtle-opaque: hsl(210 61.5% 94.9% / 0.5); // Info surface as opaque background color.
|
|
65
65
|
@dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
|
|
66
|
-
@dt-color-surface-secondary: #
|
|
67
|
-
@dt-color-surface-moderate: #
|
|
68
|
-
@dt-color-surface-bold: #
|
|
66
|
+
@dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
|
|
67
|
+
@dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
|
|
68
|
+
@dt-color-surface-bold: #D2D2D2; // Highlight or call attention to specific areas of the interface.
|
|
69
69
|
@dt-color-surface-strong: #535353; // Use sparingly to draw the eye to a relatively important region.
|
|
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: #
|
|
83
|
-
@dt-color-
|
|
84
|
-
@dt-color-
|
|
85
|
-
@dt-color-
|
|
86
|
-
@dt-color-
|
|
70
|
+
@dt-color-surface-contrast: #252525; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
71
|
+
@dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
72
|
+
@dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
|
|
73
|
+
@dt-color-surface-critical-strong: #AF0032; // A contrasting critical surface, most likely paired with inverted foreground colors.
|
|
74
|
+
@dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
75
|
+
@dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
|
|
76
|
+
@dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
|
|
77
|
+
@dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
78
|
+
@dt-color-surface-success-subtle: hsl(111 53.8% 97.5%); // A softer version of the default success surface.
|
|
79
|
+
@dt-color-surface-success-strong: #008E52; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
80
|
+
@dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
|
|
81
|
+
@dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
|
|
82
|
+
@dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
|
|
83
|
+
@dt-color-surface-brand: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
|
|
84
|
+
@dt-color-surface-brand-subtle: hsl(260 100% 98.2%); // A softer version of the default informational surface.
|
|
85
|
+
@dt-color-surface-brand-strong: #7C52FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
|
|
86
|
+
@dt-color-surface-brand-opaque: hsl(260 100% 89% / 0.27); // Info surface as opaque background color.
|
|
87
|
+
@dt-color-surface-brand-subtle-opaque: hsl(260 100% 89% / 0.2); // Info surface as opaque background color.
|
|
88
|
+
@dt-color-border-subtle: hsl(0 0% 11% / 0.1);
|
|
89
|
+
@dt-color-border-default: hsl(0 0% 11% / 0.15);
|
|
90
|
+
@dt-color-border-moderate: hsl(0 0% 11% / 0.25);
|
|
91
|
+
@dt-color-border-bold: hsl(0 0% 11% / 0.5);
|
|
87
92
|
@dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.12);
|
|
88
93
|
@dt-color-border-default-inverted: hsl(0 0% 100% / 0.2);
|
|
89
94
|
@dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.35);
|
|
90
95
|
@dt-color-border-bold-inverted: hsl(0 0% 100% / 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: #FF1356;
|
|
98
|
+
@dt-color-border-success: #008E52;
|
|
99
|
+
@dt-color-border-warning: #F19000;
|
|
100
|
+
@dt-color-border-brand: #7C52FF;
|
|
101
|
+
@dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
102
|
+
@dt-color-border-accent: #FF1BA4;
|
|
103
|
+
@dt-color-border-critical-subtle: #FF716F;
|
|
104
|
+
@dt-color-border-critical-strong: #AF0032;
|
|
105
|
+
@dt-color-border-success-subtle: #AEFB3C;
|
|
106
|
+
@dt-color-border-success-strong: #004F2E;
|
|
107
|
+
@dt-color-border-warning-subtle: #FFC047;
|
|
108
|
+
@dt-color-border-warning-strong: #815008;
|
|
109
|
+
@dt-color-border-brand-subtle: #AB7EFF;
|
|
110
|
+
@dt-color-border-brand-strong: #3A1D95;
|
|
111
|
+
@dt-color-border-critical-inverted: #FF716F;
|
|
112
|
+
@dt-color-border-success-inverted: #3CD707;
|
|
113
|
+
@dt-color-border-warning-inverted: #FFC047;
|
|
114
|
+
@dt-color-border-brand-inverted: #7C52FF;
|
|
115
|
+
@dt-color-border-critical-subtle-inverted: #AF0032;
|
|
116
|
+
@dt-color-border-critical-strong-inverted: #FFABA4;
|
|
117
|
+
@dt-color-border-success-subtle-inverted: #008E52;
|
|
118
|
+
@dt-color-border-success-strong-inverted: #D1FF76;
|
|
119
|
+
@dt-color-border-warning-subtle-inverted: #D57F00;
|
|
120
|
+
@dt-color-border-warning-strong-inverted: #FFE89C;
|
|
121
|
+
@dt-color-border-brand-subtle-inverted: #5023DD;
|
|
122
|
+
@dt-color-border-brand-strong-inverted: #AB7EFF;
|
|
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: #
|
|
338
|
-
@dt-inputs-color-border-default: hsl(0 0%
|
|
339
|
-
@dt-inputs-color-border-focus: #
|
|
340
|
-
@dt-inputs-color-border-critical: #
|
|
341
|
-
@dt-inputs-color-border-success: #
|
|
342
|
-
@dt-inputs-color-border-warning: #
|
|
340
|
+
@dt-inputs-color-foreground-default: #3A3A3A;
|
|
341
|
+
@dt-inputs-color-foreground-placeholder: #808080;
|
|
342
|
+
@dt-inputs-color-foreground-disabled: #808080;
|
|
343
|
+
@dt-inputs-color-border-default: hsl(0 0% 11% / 0.15);
|
|
344
|
+
@dt-inputs-color-border-focus: #3CA8F3;
|
|
345
|
+
@dt-inputs-color-border-critical: #FF1356;
|
|
346
|
+
@dt-inputs-color-border-success: #008E52;
|
|
347
|
+
@dt-inputs-color-border-warning: #F19000;
|
|
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% 11% / 0.02);
|
|
350
|
+
@dt-inputs-color-background-focus: #F9F9F9;
|
|
351
|
+
@dt-inputs-color-background-disabled: hsl(0 0% 11% / 0.1);
|
|
352
|
+
@dt-action-color-foreground-base-default: #7C52FF;
|
|
353
|
+
@dt-action-color-foreground-base-hover: #5023DD;
|
|
354
|
+
@dt-action-color-foreground-base-active: #5023DD;
|
|
350
355
|
@dt-action-color-foreground-base-primary-default: #ffffff;
|
|
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: #E10040;
|
|
357
|
+
@dt-action-color-foreground-critical-hover: #AF0032;
|
|
358
|
+
@dt-action-color-foreground-critical-active: #AF0032;
|
|
354
359
|
@dt-action-color-foreground-critical-primary-default: #ffffff;
|
|
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: #
|
|
360
|
+
@dt-action-color-foreground-inverted-default: #F9F9F9;
|
|
361
|
+
@dt-action-color-foreground-inverted-hover: #F9F9F9;
|
|
362
|
+
@dt-action-color-foreground-inverted-active: #F9F9F9;
|
|
363
|
+
@dt-action-color-foreground-inverted-primary-default: #7C52FF;
|
|
364
|
+
@dt-action-color-foreground-inverted-primary-hover: #5023DD;
|
|
365
|
+
@dt-action-color-foreground-inverted-primary-active: #5023DD;
|
|
366
|
+
@dt-action-color-foreground-muted-default: #3A3A3A;
|
|
367
|
+
@dt-action-color-foreground-muted-hover: #1C1C1C;
|
|
368
|
+
@dt-action-color-foreground-muted-active: #1C1C1C;
|
|
369
|
+
@dt-action-color-foreground-disabled-default: #808080;
|
|
370
|
+
@dt-action-color-foreground-positive-default: #008E52;
|
|
371
|
+
@dt-action-color-foreground-positive-hover: #004F2E;
|
|
372
|
+
@dt-action-color-foreground-positive-active: #004F2E;
|
|
368
373
|
@dt-action-color-foreground-positive-primary-default: #ffffff;
|
|
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 100% 89% / 0.27);
|
|
376
|
+
@dt-action-color-background-base-active: #DAC7FF;
|
|
377
|
+
@dt-action-color-background-base-primary-default: #7C52FF;
|
|
378
|
+
@dt-action-color-background-base-primary-hover: #6538F1;
|
|
379
|
+
@dt-action-color-background-base-primary-active: #5023DD;
|
|
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(4.62 100% 82.2% / 0.31);
|
|
382
|
+
@dt-action-color-background-critical-active: #FFABA4;
|
|
383
|
+
@dt-action-color-background-critical-primary-default: #FF1356;
|
|
384
|
+
@dt-action-color-background-critical-primary-hover: #E10040;
|
|
385
|
+
@dt-action-color-background-critical-primary-active: #AF0032;
|
|
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: #535353;
|
|
388
|
+
@dt-action-color-background-inverted-active: #808080;
|
|
389
|
+
@dt-action-color-background-inverted-primary-default: #F9F9F9;
|
|
390
|
+
@dt-action-color-background-inverted-primary-hover: #F5F0FF;
|
|
391
|
+
@dt-action-color-background-inverted-primary-active: #DAC7FF;
|
|
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% 11% / 0.1);
|
|
394
|
+
@dt-action-color-background-muted-active: hsl(0 0% 11% / 0.19);
|
|
395
|
+
@dt-action-color-background-disabled-default: hsl(0 0% 11% / 0.19);
|
|
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(85.1 100% 83.1% / 0.25);
|
|
398
|
+
@dt-action-color-background-positive-active: #DBFFA9;
|
|
399
|
+
@dt-action-color-background-positive-primary-default: #04BF08; // Postive, accepting, or success actions.
|
|
400
|
+
@dt-action-color-background-positive-primary-hover: #008E52;
|
|
401
|
+
@dt-action-color-background-positive-primary-active: #004F2E;
|
|
402
|
+
@dt-action-color-border-base-outlined-default: #7C52FF;
|
|
403
|
+
@dt-action-color-border-critical-outlined-default: #FF1356;
|
|
399
404
|
@dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.2);
|
|
400
|
-
@dt-action-color-border-muted-outlined-default: hsl(0 0%
|
|
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%
|
|
405
|
+
@dt-action-color-border-muted-outlined-default: hsl(0 0% 11% / 0.15);
|
|
406
|
+
@dt-theme-color-base: #1C1C1C;
|
|
407
|
+
@dt-theme-topbar-color-foreground: hsl(0 0% 11% / 0.8);
|
|
408
|
+
@dt-theme-topbar-color-background: #F9F9F9;
|
|
409
|
+
@dt-theme-topbar-field-color-foreground: hsl(0 0% 11% / 0.5);
|
|
410
|
+
@dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 11% / 0.75);
|
|
411
|
+
@dt-theme-topbar-field-color-background: hsl(0 0% 11% / 0.05);
|
|
407
412
|
@dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
|
|
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: #
|
|
413
|
+
@dt-theme-topbar-field-color-border: hsl(0 0% 11% / 0);
|
|
414
|
+
@dt-theme-topbar-field-color-border-hover: hsl(0 0% 11% / 0.1);
|
|
415
|
+
@dt-theme-topbar-field-color-border-active: hsl(0 0% 11% / 0.2);
|
|
416
|
+
@dt-theme-topbar-button-color-foreground: hsl(0 0% 11% / 0.65);
|
|
417
|
+
@dt-theme-topbar-button-color-foreground-hover: #1C1C1C;
|
|
418
|
+
@dt-theme-topbar-button-color-background: hsl(0 0% 11% / 0);
|
|
419
|
+
@dt-theme-topbar-button-color-background-hover: hsl(0 0% 11% / 0.05);
|
|
420
|
+
@dt-theme-topbar-button-color-background-active: hsl(0 0% 11% / 0.1);
|
|
421
|
+
@dt-theme-topbar-profile-color-foreground: hsl(0 0% 11% / 0.8);
|
|
422
|
+
@dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 97.6% / 0.75);
|
|
423
|
+
@dt-theme-topbar-profile-color-background: hsl(0 0% 11% / 0.05);
|
|
424
|
+
@dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 11% / 0.75);
|
|
425
|
+
@dt-theme-topbar-profile-color-background-hover: hsl(0 0% 11% / 0.1);
|
|
426
|
+
@dt-theme-topbar-profile-color-background-active: hsl(0 0% 11% / 0.14);
|
|
427
|
+
@dt-theme-sidebar-color-foreground: #3A3A3A;
|
|
428
|
+
@dt-theme-sidebar-color-foreground-unread: #1C1C1C;
|
|
429
|
+
@dt-theme-sidebar-color-background: #F9F9F9;
|
|
430
|
+
@dt-theme-sidebar-icon-color-foreground: #3A3A3A;
|
|
431
|
+
@dt-theme-sidebar-status-color-foreground: #535353;
|
|
432
|
+
@dt-theme-sidebar-row-color-background: hsl(0 0% 11% / 0);
|
|
433
|
+
@dt-theme-sidebar-row-color-background-hover: hsl(0 0% 11% / 0.12);
|
|
434
|
+
@dt-theme-sidebar-row-color-background-active: hsl(0 0% 11% / 0.16);
|
|
435
|
+
@dt-theme-sidebar-selected-row-color-foreground: #1C1C1C;
|
|
436
|
+
@dt-theme-sidebar-selected-row-color-background: hsl(0 0% 11% / 0.1);
|
|
437
|
+
@dt-theme-sidebar-section-color-foreground: #535353;
|
|
438
|
+
@dt-theme-presence-color-background-available: #008E52;
|
|
439
|
+
@dt-theme-presence-color-background-busy-unavailable: #FF1356;
|
|
440
|
+
@dt-theme-presence-color-background-busy: #FF9E0E;
|
|
436
441
|
@dt-theme-presence-color-background-offline: #ffffff;
|
|
437
442
|
@dt-theme-mention-color-foreground: #ffffff;
|
|
438
|
-
@dt-theme-mention-color-foreground-strong: #
|
|
439
|
-
@dt-theme-mention-color-background: #
|
|
440
|
-
@dt-theme-mention-color-background-strong: #
|
|
443
|
+
@dt-theme-mention-color-foreground-strong: #F9F9F9;
|
|
444
|
+
@dt-theme-mention-color-background: #7C52FF;
|
|
445
|
+
@dt-theme-mention-color-background-strong: #3A1D95;
|
|
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: #
|
|
468
|
-
@dt-badge-color-background-ai: linear-gradient(135deg, #
|
|
469
|
-
@dt-badge-color-foreground-default: #
|
|
466
|
+
@dt-badge-color-background-default: hsl(0 0% 11% / 0.1);
|
|
467
|
+
@dt-badge-color-background-info: #BDE8FF;
|
|
468
|
+
@dt-badge-color-background-success: #DBFFA9;
|
|
469
|
+
@dt-badge-color-background-warning: #FFE89C;
|
|
470
|
+
@dt-badge-color-background-critical: #FFABA4;
|
|
471
|
+
@dt-badge-color-background-bulletin: #7C52FF;
|
|
472
|
+
@dt-badge-color-background-bulletin-subtle: #DAC7FF;
|
|
473
|
+
@dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
|
|
474
|
+
@dt-badge-color-foreground-default: #1C1C1C;
|
|
470
475
|
@dt-badge-color-foreground-bulletin: #ffffff;
|
|
471
|
-
@dt-badge-color-foreground-bulletin-subtle:
|
|
472
|
-
@dt-badge-color-border-default: hsl(0 0%
|
|
473
|
-
@dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.
|
|
476
|
+
@dt-badge-color-foreground-bulletin-subtle: #3A1D95;
|
|
477
|
+
@dt-badge-color-border-default: hsl(0 0% 11% / 0.1);
|
|
478
|
+
@dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
|
|
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
|
|
@@ -494,9 +499,9 @@
|
|
|
494
499
|
@dt-checkbox-size-width: 1.6rem;
|
|
495
500
|
@dt-checkbox-size-height: 1.6rem;
|
|
496
501
|
@dt-checkbox-size-radius: 0.4rem;
|
|
497
|
-
@dt-checkbox-color-border-unchecked: hsl(0 0%
|
|
498
|
-
@dt-checkbox-color-border-checked: #
|
|
499
|
-
@dt-checkbox-color-background-checked: #
|
|
502
|
+
@dt-checkbox-color-border-unchecked: hsl(0 0% 11% / 0.25);
|
|
503
|
+
@dt-checkbox-color-border-checked: #7C52FF;
|
|
504
|
+
@dt-checkbox-color-background-checked: #7C52FF;
|
|
500
505
|
@dt-icon-size-100: 12px;
|
|
501
506
|
@dt-icon-size-200: 14px;
|
|
502
507
|
@dt-icon-size-300: 18px;
|
|
@@ -516,6 +521,6 @@
|
|
|
516
521
|
@dt-radio-size-width: 1.6rem;
|
|
517
522
|
@dt-radio-size-height: 1.6rem;
|
|
518
523
|
@dt-radio-size-radius: 50%;
|
|
519
|
-
@dt-radio-color-border-unchecked: hsl(0 0%
|
|
520
|
-
@dt-radio-color-border-checked: #
|
|
521
|
-
@dt-radio-color-background-checked: #
|
|
524
|
+
@dt-radio-color-border-unchecked: hsl(0 0% 11% / 0.25);
|
|
525
|
+
@dt-radio-color-border-checked: #7C52FF;
|
|
526
|
+
@dt-radio-color-background-checked: #7C52FF;
|