@dialpad/dialtone-tokens 1.23.7 → 1.24.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.
@@ -1,793 +0,0 @@
1
-
2
- // Do not edit directly
3
- // Generated on Tue, 13 Feb 2024 19:58:36 GMT
4
-
5
- @dt-font-size-100: 1.2rem; // small
6
- @dt-font-size-200: 1.5rem; // medium / base
7
- @dt-font-size-300: 1.9rem; // large
8
- @dt-font-size-400: 2.7rem; // extra large / xl
9
- @dt-font-size-500: 3.8rem; // extra large / xxl
10
- @dt-font-size-root: 1rem;
11
- @dt-font-family-body: -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";
12
- @dt-font-family-expressive: Archivo,-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";
13
- @dt-font-family-mono: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
14
- @dt-font-line-height-100: 1;
15
- @dt-font-line-height-200: 1.2;
16
- @dt-font-line-height-300: 1.4;
17
- @dt-font-line-height-400: 1.6;
18
- @dt-font-line-height-500: 1.8;
19
- @dt-font-line-height-600: 2;
20
- @dt-font-weight-normal: 400;
21
- @dt-font-weight-medium: 500;
22
- @dt-font-weight-semi-bold: 600;
23
- @dt-font-weight-bold: 700;
24
- @dt-font-text-case-uppercase: uppercase;
25
- @dt-font-text-case-lowercase: lowercase;
26
- @dt-font-text-case-capitalize: capitalize;
27
- @dt-font-text-case-none: none;
28
- @dt-size-0: 0rem;
29
- @dt-size-50: 0.05rem;
30
- @dt-size-100: 0.1rem;
31
- @dt-size-200: 0.2rem;
32
- @dt-size-300: 0.4rem;
33
- @dt-size-350: 0.6rem;
34
- @dt-size-400: 0.8rem;
35
- @dt-size-450: 1.2rem;
36
- @dt-size-500: 1.6rem;
37
- @dt-size-525: 2rem;
38
- @dt-size-550: 2.4rem;
39
- @dt-size-600: 3.2rem;
40
- @dt-size-625: 4.2rem;
41
- @dt-size-650: 4.8rem;
42
- @dt-size-700: 6.4rem;
43
- @dt-size-720: 7.2rem;
44
- @dt-size-730: 8.4rem;
45
- @dt-size-750: 9.6rem;
46
- @dt-size-760: 10.2rem;
47
- @dt-size-775: 11.4rem;
48
- @dt-size-800: 12.8rem;
49
- @dt-size-825: 16.4rem;
50
- @dt-size-850: 19.2rem;
51
- @dt-size-875: 21.6rem;
52
- @dt-size-900: 25.6rem;
53
- @dt-size-905: 26.4rem;
54
- @dt-size-925: 33.2rem;
55
- @dt-size-950: 38.4rem;
56
- @dt-size-975: 46.4rem;
57
- @dt-size-1000: 51.2rem;
58
- @dt-size-1020: 62.8rem;
59
- @dt-size-1040: 76.4rem;
60
- @dt-size-1050: 76.8rem;
61
- @dt-size-1060: 82.8rem;
62
- @dt-size-1080: 91.2rem;
63
- @dt-size-1100: 102.4rem;
64
- @dt-size-1115: 114rem;
65
- @dt-size-1120: 126.8rem;
66
- @dt-size-1125: 128rem;
67
- @dt-size-1130: 134rem;
68
- @dt-size-1150: 153.6rem;
69
- @dt-size-1200: 204.8rem;
70
- @dt-size-base: 0.8rem;
71
- @dt-size-50-negative: -0.05rem;
72
- @dt-size-100-negative: -0.1rem;
73
- @dt-size-200-negative: -0.2rem;
74
- @dt-size-300-negative: -0.4rem;
75
- @dt-size-350-negative: -0.6rem;
76
- @dt-size-400-negative: -0.8rem;
77
- @dt-size-450-negative: -1.2rem;
78
- @dt-size-500-negative: -1.6rem;
79
- @dt-size-525-negative: -2rem;
80
- @dt-size-550-negative: -2.4rem;
81
- @dt-size-600-negative: -3.2rem;
82
- @dt-size-625-negative: -4.2rem;
83
- @dt-size-650-negative: -4.8rem;
84
- @dt-size-700-negative: -6.4rem;
85
- @dt-size-720-negative: -7.2rem;
86
- @dt-size-730-negative: -8.4rem;
87
- @dt-size-750-negative: -9.6rem;
88
- @dt-size-760-negative: -10.2rem;
89
- @dt-size-775-negative: -11.4rem;
90
- @dt-size-800-negative: -12.8rem;
91
- @dt-size-825-negative: -16.4rem;
92
- @dt-size-850-negative: -19.2rem;
93
- @dt-size-875-negative: -21.6rem;
94
- @dt-size-900-negative: -25.6rem;
95
- @dt-size-905-negative: -26.4rem;
96
- @dt-size-925-negative: -33.2rem;
97
- @dt-size-950-negative: -38.4rem;
98
- @dt-size-975-negative: -46.4rem;
99
- @dt-size-1000-negative: -51.2rem;
100
- @dt-size-1020-negative: -62.8rem;
101
- @dt-size-1040-negative: -76.4rem;
102
- @dt-size-1050-negative: -76.8rem;
103
- @dt-size-1060-negative: -82.8rem;
104
- @dt-size-1080-negative: -91.2rem;
105
- @dt-size-1100-negative: -102.4rem;
106
- @dt-size-1115-negative: -114rem;
107
- @dt-size-1120-negative: -126.8rem;
108
- @dt-size-1125-negative: -128rem;
109
- @dt-size-1130-negative: -134rem;
110
- @dt-size-1150-negative: -153.6rem;
111
- @dt-size-1200-negative: -204.8rem;
112
- @dt-size-0-percent: 0%;
113
- @dt-size-5-percent: 5%;
114
- @dt-size-10-percent: 10%;
115
- @dt-size-20-percent: 20%;
116
- @dt-size-25-percent: 25%;
117
- @dt-size-30-percent: 30%;
118
- @dt-size-33-percent: 33.333%;
119
- @dt-size-40-percent: 40%;
120
- @dt-size-50-percent: 50%;
121
- @dt-size-60-percent: 60%;
122
- @dt-size-66-percent: 66.7%;
123
- @dt-size-70-percent: 70%;
124
- @dt-size-75-percent: 75%;
125
- @dt-size-80-percent: 80%;
126
- @dt-size-90-percent: 90%;
127
- @dt-size-95-percent: 95%;
128
- @dt-size-100-percent: 100%;
129
- @dt-size-border-0: 0rem;
130
- @dt-size-border-50: 0.05rem;
131
- @dt-size-border-100: 0.1rem;
132
- @dt-size-border-150: 0.15rem;
133
- @dt-size-border-200: 0.2rem;
134
- @dt-size-border-300: 0.4rem;
135
- @dt-size-border-400: 0.8rem;
136
- @dt-size-border-focus: 0.3rem;
137
- @dt-size-radius-0: 0rem;
138
- @dt-size-radius-100: 0.1rem;
139
- @dt-size-radius-200: 0.2rem;
140
- @dt-size-radius-300: 0.4rem;
141
- @dt-size-radius-400: 0.8rem;
142
- @dt-size-radius-500: 1.6rem;
143
- @dt-size-radius-600: 3.2rem;
144
- @dt-size-radius-pill: 10rem;
145
- @dt-size-radius-circle: 50%;
146
- @dt-space-0: 0rem;
147
- @dt-space-50: 0.05rem;
148
- @dt-space-100: 0.1rem;
149
- @dt-space-200: 0.2rem;
150
- @dt-space-300: 0.4rem;
151
- @dt-space-350: 0.6rem;
152
- @dt-space-400: 0.8rem;
153
- @dt-space-450: 1.2rem;
154
- @dt-space-500: 1.6rem;
155
- @dt-space-525: 2rem;
156
- @dt-space-550: 2.4rem;
157
- @dt-space-600: 3.2rem;
158
- @dt-space-625: 4.2rem;
159
- @dt-space-650: 4.8rem;
160
- @dt-space-700: 6.4rem;
161
- @dt-space-720: 7.2rem;
162
- @dt-space-730: 8.4rem;
163
- @dt-space-750: 9.6rem;
164
- @dt-space-760: 10.2rem;
165
- @dt-space-775: 11.4rem;
166
- @dt-space-800: 12.8rem;
167
- @dt-space-825: 16.4rem;
168
- @dt-space-850: 19.2rem;
169
- @dt-space-875: 21.6rem;
170
- @dt-space-900: 25.6rem;
171
- @dt-space-905: 26.4rem;
172
- @dt-space-925: 33.2rem;
173
- @dt-space-950: 38.4rem;
174
- @dt-space-975: 46.4rem;
175
- @dt-space-1000: 51.2rem;
176
- @dt-space-1020: 62.8rem;
177
- @dt-space-1040: 76.4rem;
178
- @dt-space-1050: 76.8rem;
179
- @dt-space-1060: 82.8rem;
180
- @dt-space-1080: 91.2rem;
181
- @dt-space-1100: 102.4rem;
182
- @dt-space-1115: 114rem;
183
- @dt-space-1120: 126.8rem;
184
- @dt-space-1125: 128rem;
185
- @dt-space-1130: 134rem;
186
- @dt-space-1150: 153.6rem;
187
- @dt-space-1200: 204.8rem;
188
- @dt-space-base: 0.8rem;
189
- @dt-space-50-negative: -0.05rem;
190
- @dt-space-100-negative: -0.1rem;
191
- @dt-space-200-negative: -0.2rem;
192
- @dt-space-300-negative: -0.4rem;
193
- @dt-space-350-negative: -0.6rem;
194
- @dt-space-400-negative: -0.8rem;
195
- @dt-space-450-negative: -1.2rem;
196
- @dt-space-500-negative: -1.6rem;
197
- @dt-space-525-negative: -2rem;
198
- @dt-space-550-negative: -2.4rem;
199
- @dt-space-600-negative: -3.2rem;
200
- @dt-space-625-negative: -4.2rem;
201
- @dt-space-650-negative: -4.8rem;
202
- @dt-space-700-negative: -6.4rem;
203
- @dt-space-720-negative: -7.2rem;
204
- @dt-space-730-negative: -8.4rem;
205
- @dt-space-750-negative: -9.6rem;
206
- @dt-space-760-negative: -10.2rem;
207
- @dt-space-775-negative: -11.4rem;
208
- @dt-space-800-negative: -12.8rem;
209
- @dt-space-825-negative: -16.4rem;
210
- @dt-space-850-negative: -19.2rem;
211
- @dt-space-875-negative: -21.6rem;
212
- @dt-space-900-negative: -25.6rem;
213
- @dt-space-905-negative: -26.4rem;
214
- @dt-space-925-negative: -33.2rem;
215
- @dt-space-950-negative: -38.4rem;
216
- @dt-space-975-negative: -46.4rem;
217
- @dt-space-1000-negative: -51.2rem;
218
- @dt-space-1020-negative: -62.8rem;
219
- @dt-space-1040-negative: -76.4rem;
220
- @dt-space-1050-negative: -76.8rem;
221
- @dt-space-1060-negative: -82.8rem;
222
- @dt-space-1080-negative: -91.2rem;
223
- @dt-space-1100-negative: -102.4rem;
224
- @dt-space-1115-negative: -114rem;
225
- @dt-space-1120-negative: -126.8rem;
226
- @dt-space-1125-negative: -128rem;
227
- @dt-space-1130-negative: -134rem;
228
- @dt-space-1150-negative: -153.6rem;
229
- @dt-space-1200-negative: -204.8rem;
230
- @dt-space-0-percent: 0%;
231
- @dt-space-5-percent: 5%;
232
- @dt-space-10-percent: 10%;
233
- @dt-space-20-percent: 20%;
234
- @dt-space-25-percent: 25%;
235
- @dt-space-30-percent: 30%;
236
- @dt-space-33-percent: 33.333%;
237
- @dt-space-40-percent: 40%;
238
- @dt-space-50-percent: 50%;
239
- @dt-space-60-percent: 60%;
240
- @dt-space-66-percent: 66.7%;
241
- @dt-space-70-percent: 70%;
242
- @dt-space-75-percent: 75%;
243
- @dt-space-80-percent: 80%;
244
- @dt-space-90-percent: 90%;
245
- @dt-space-95-percent: 95%;
246
- @dt-space-100-percent: 100%;
247
- @dt-color-neutral-white: #ffffff; // White color independent of any theme.
248
- @dt-color-neutral-black: #000000; // Black color independent of any theme.
249
- @dt-color-neutral-transparent: transparent; // Transparent color independent of any theme.
250
- @dt-color-black-100: #F9F9F9;
251
- @dt-color-black-200: #E9E9E9;
252
- @dt-color-black-300: #D2D2D2;
253
- @dt-color-black-400: #AAAAAA;
254
- @dt-color-black-500: #808080;
255
- @dt-color-black-600: #555555;
256
- @dt-color-black-700: #3A3A3A;
257
- @dt-color-black-800: #222222;
258
- @dt-color-black-900: #000000;
259
- @dt-color-purple-100: #F5F0FF;
260
- @dt-color-purple-200: #DAC7FF;
261
- @dt-color-purple-300: #AB7EFF;
262
- @dt-color-purple-400: #7C52FF;
263
- @dt-color-purple-500: #3A1D95;
264
- @dt-color-purple-600: #10022C;
265
- @dt-color-blue-100: #EAF2FA;
266
- @dt-color-blue-200: #99C8FF;
267
- @dt-color-blue-300: #51A0FE;
268
- @dt-color-blue-400: #1768C6;
269
- @dt-color-blue-500: #01326D;
270
- @dt-color-magenta-100: #FFE0F2;
271
- @dt-color-magenta-200: #F985C7;
272
- @dt-color-magenta-300: #F9008E;
273
- @dt-color-magenta-400: #8C0E56;
274
- @dt-color-magenta-500: #541A3B;
275
- @dt-color-gold-100: #FFF4CC;
276
- @dt-color-gold-200: #FFDB80;
277
- @dt-color-gold-300: #F6AB3C;
278
- @dt-color-gold-400: #D28F2B;
279
- @dt-color-gold-500: #815008;
280
- @dt-color-green-100: #EDF9EB;
281
- @dt-color-green-200: #B0FFA3;
282
- @dt-color-green-300: #45F777;
283
- @dt-color-green-400: #1AA340;
284
- @dt-color-green-500: #124620;
285
- @dt-color-red-100: #FFE5E6;
286
- @dt-color-red-200: #FF8585;
287
- @dt-color-red-300: #EC0E0E;
288
- @dt-color-red-400: #B70B0B;
289
- @dt-color-red-500: #5B0505;
290
- @dt-color-tan-100: #F2F0EE;
291
- @dt-color-tan-200: #CEC8C4;
292
- @dt-color-tan-300: #87807B;
293
- @dt-color-tan-400: #3F3D3C;
294
- @dt-color-tan-500: #121212;
295
- @dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%); // Gradient for Ai-oriented treatments.
296
- @dt-color-brand-purple: #7C52FF; // Primary brand color.
297
- @dt-color-brand-magenta: #F9008E; // Secondary brand color, typically used as an accent color.
298
- @dt-color-foreground-primary: #000000; // Default text color throughout the UI.
299
- @dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
300
- @dt-color-foreground-tertiary: #555555; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
301
- @dt-color-foreground-muted: hsl(0 0% 13.3% / 0.5);
302
- @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
303
- @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
304
- @dt-color-foreground-critical: #EC0E0E; // Expresses an error, danger, or otherwise critical state.
305
- @dt-color-foreground-critical-strong: #B70B0B; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
306
- @dt-color-foreground-success: #1AA340; // Indicates a positive state.
307
- @dt-color-foreground-success-strong: #124620; // Indicates a strong positive state on surfaces that require a stronger contrast.
308
- @dt-color-foreground-warning: #815008; // Indicates information that requires user’s attention and further action may be necessary.
309
- @dt-color-foreground-primary-inverted: #ffffff; // Primary text that sits on high-contrast surfaces or backgrounds.
310
- @dt-color-foreground-secondary-inverted: #E9E9E9; // Secondary text color that sits on high-contrast surfaces or backgrounds.
311
- @dt-color-foreground-tertiary-inverted: #D2D2D2; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
312
- @dt-color-foreground-muted-inverted: hsl(0 0% 91.4% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
313
- @dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
314
- @dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
315
- @dt-color-foreground-critical-inverted: #FF8585; // Critical text that sits on high-contrast surfaces or backgrounds
316
- @dt-color-foreground-critical-strong-inverted: hsl(0 100% 82.1%); // Critical strong text that sits on high-contrast surfaces or backgrounds
317
- @dt-color-foreground-success-inverted: #B0FFA3; // Success text that sits on high-contrast surfaces or backgrounds
318
- @dt-color-foreground-success-strong-inverted: hsl(112 100% 90.1%); // Success strong text that sits on high-contrast surfaces or backgrounds
319
- @dt-color-foreground-warning-inverted: #FFF4CC; // Warning text that sits on high-contrast surfaces or backgrounds
320
- @dt-color-link-primary: #7C52FF;
321
- @dt-color-link-critical: #EC0E0E;
322
- @dt-color-link-success: #1AA340; // positive
323
- @dt-color-link-warning: #815008;
324
- @dt-color-link-muted: #3A3A3A;
325
- @dt-color-link-disabled: #808080;
326
- @dt-color-link-primary-inverted: #AB7EFF;
327
- @dt-color-link-critical-inverted: #FF8585;
328
- @dt-color-link-success-inverted: #B0FFA3;
329
- @dt-color-link-warning-inverted: #FFF4CC;
330
- @dt-color-link-muted-inverted: #E9E9E9;
331
- @dt-color-link-disabled-inverted: #808080;
332
- @dt-color-link-primary-hover: #3A1D95;
333
- @dt-color-link-critical-hover: #B70B0B;
334
- @dt-color-link-success-hover: #124620;
335
- @dt-color-link-warning-hover: #555555;
336
- @dt-color-link-muted-hover: #000000;
337
- @dt-color-link-disabled-hover: #808080;
338
- @dt-color-link-primary-inverted-hover: #DAC7FF;
339
- @dt-color-link-critical-inverted-hover: hsl(0 100% 82.1%);
340
- @dt-color-link-success-inverted-hover: hsl(112 100% 90.1%);
341
- @dt-color-link-warning-inverted-hover: #F9F9F9;
342
- @dt-color-link-muted-inverted-hover: #F9F9F9;
343
- @dt-color-link-disabled-inverted-hover: #808080;
344
- @dt-color-surface-secondary-opaque: hsl(0 0% 0% / 0.02); // Secondary surface as opaque background color.
345
- @dt-color-surface-moderate-opaque: hsl(0 0% 0% / 0.09); // Moderate surface as opaque background color.
346
- @dt-color-surface-bold-opaque: hsl(0 0% 0% / 0.18); // Bold surface as opaque background color.
347
- @dt-color-surface-strong-opaque: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
348
- @dt-color-surface-contrast-opaque: hsl(0 0% 0% / 0.87); // Contrast surface as opaque background color.
349
- @dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
350
- @dt-color-surface-critical-opaque: hsl(0 88.8% 49% / 0.11); // Critical surface as opaque background color.
351
- @dt-color-surface-critical-subtle-opaque: hsl(0 88.8% 49% / 0.05); // Critical subtle surface as opaque background color.
352
- @dt-color-surface-warning-opaque: hsl(43 100% 75.1% / 0.38); // Warning surface as opaque background color
353
- @dt-color-surface-warning-subtle-opaque: hsl(43 100% 75.1% / 0.18); // Warning subtle surface as opaque background color
354
- @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.08); // Success surface as opaque background color.
355
- @dt-color-surface-success-subtle-opaque: hsl(137 72.5% 37.1% / 0.03); // Success subtle surface as opaque background color.
356
- @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.09); // Info surface as opaque background color.
357
- @dt-color-surface-info-subtle-opaque: hsl(212 79.2% 43.3% / 0.04); // Info surface as opaque background color.
358
- @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
359
- @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
360
- @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
361
- @dt-color-surface-bold: #D2D2D2; // Highlight or call attention to specific areas of the interface.
362
- @dt-color-surface-strong: #555555; // Use sparingly to draw the eye to a relatively important region.
363
- @dt-color-surface-contrast: #222222; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
364
- @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
365
- @dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
366
- @dt-color-surface-critical-strong: #B70B0B; // A contrasting critical surface, most likely paired with inverted foreground colors.
367
- @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
368
- @dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
369
- @dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
370
- @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
371
- @dt-color-surface-success-subtle: hsl(111 53.8% 98%); // A softer version of the default success surface.
372
- @dt-color-surface-success-strong: #1AA340; // A contrasting positive state surface, most likely paired with inverted foreground colors.
373
- @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
374
- @dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
375
- @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
376
- @dt-color-border-subtle: hsl(0 0% 0% / 0.1);
377
- @dt-color-border-default: hsl(0 0% 0% / 0.18);
378
- @dt-color-border-moderate: hsl(0 0% 0% / 0.34);
379
- @dt-color-border-bold: hsl(0 0% 0% / 0.5);
380
- @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.14);
381
- @dt-color-border-default-inverted: hsl(0 0% 100% / 0.22);
382
- @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.38);
383
- @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
384
- @dt-color-border-focus: #51A0FE;
385
- @dt-color-border-critical: #EC0E0E;
386
- @dt-color-border-success: #1AA340;
387
- @dt-color-border-warning: #D28F2B;
388
- @dt-color-border-brand: #7C52FF;
389
- @dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
390
- @dt-color-border-accent: #F9008E;
391
- @dt-color-border-critical-subtle: #FF8585;
392
- @dt-color-border-critical-strong: #B70B0B;
393
- @dt-color-border-success-subtle: #B0FFA3;
394
- @dt-color-border-success-strong: #124620;
395
- @dt-color-border-warning-subtle: #FFDB80;
396
- @dt-color-border-warning-strong: hsl(35.7 88.3% 21.5%);
397
- @dt-color-border-brand-subtle: #DAC7FF;
398
- @dt-color-border-brand-strong: #3A1D95;
399
- @dt-color-border-critical-inverted: #FF8585;
400
- @dt-color-border-success-inverted: #B0FFA3;
401
- @dt-color-border-warning-inverted: #FFDB80;
402
- @dt-color-border-brand-inverted: #7C52FF;
403
- @dt-color-border-critical-subtle-inverted: #B70B0B;
404
- @dt-color-border-critical-strong-inverted: #FFE5E6;
405
- @dt-color-border-success-subtle-inverted: #1AA340;
406
- @dt-color-border-success-strong-inverted: #EDF9EB;
407
- @dt-color-border-warning-subtle-inverted: #D28F2B;
408
- @dt-color-border-warning-strong-inverted: #FFF4CC;
409
- @dt-color-border-brand-subtle-inverted: #3A1D95;
410
- @dt-color-border-brand-strong-inverted: #DAC7FF;
411
- @dt-opacity-0: 0;
412
- @dt-opacity-100: .05;
413
- @dt-opacity-200: .1;
414
- @dt-opacity-300: .2;
415
- @dt-opacity-400: .25;
416
- @dt-opacity-500: .3;
417
- @dt-opacity-600: .4;
418
- @dt-opacity-700: .5;
419
- @dt-opacity-800: .6;
420
- @dt-opacity-900: .7;
421
- @dt-opacity-1000: .75;
422
- @dt-opacity-1100: .8;
423
- @dt-opacity-1200: .9;
424
- @dt-opacity-1300: 1;
425
- @dt-shadow-small-1-x: 0rem;
426
- @dt-shadow-small-1-y: 0.2rem;
427
- @dt-shadow-small-1-blur: 0.4rem;
428
- @dt-shadow-small-1-spread: 0rem;
429
- @dt-shadow-small-1-color: rgba(0, 0, 0, 0.15);
430
- @dt-shadow-small-1-type: dropShadow;
431
- @dt-shadow-medium-1-x: 0rem;
432
- @dt-shadow-medium-1-y: 0.2rem;
433
- @dt-shadow-medium-1-blur: 0.8rem;
434
- @dt-shadow-medium-1-spread: 0rem;
435
- @dt-shadow-medium-1-color: rgba(0, 0, 0, 0.25);
436
- @dt-shadow-medium-1-type: dropShadow;
437
- @dt-shadow-large-1-x: 0rem;
438
- @dt-shadow-large-1-y: 0.2rem;
439
- @dt-shadow-large-1-blur: 1.6rem;
440
- @dt-shadow-large-1-spread: 0rem;
441
- @dt-shadow-large-1-color: rgba(0, 0, 0, 0.3);
442
- @dt-shadow-large-1-type: dropShadow;
443
- @dt-shadow-extra-large-1-x: 0rem;
444
- @dt-shadow-extra-large-1-y: 0.2rem;
445
- @dt-shadow-extra-large-1-blur: 3.2rem;
446
- @dt-shadow-extra-large-1-spread: 0rem;
447
- @dt-shadow-extra-large-1-color: rgba(0, 0, 0, 0.3);
448
- @dt-shadow-extra-large-1-type: dropShadow;
449
- @dt-shadow-card-1-x: 0rem;
450
- @dt-shadow-card-1-y: 0.1rem;
451
- @dt-shadow-card-1-blur: 0.2rem;
452
- @dt-shadow-card-1-spread: 0rem;
453
- @dt-shadow-card-1-color: rgba(0, 0, 0, 0.03);
454
- @dt-shadow-card-1-type: dropShadow;
455
- @dt-shadow-card-2-x: 0rem;
456
- @dt-shadow-card-2-y: 0.2rem;
457
- @dt-shadow-card-2-blur: 0.4rem;
458
- @dt-shadow-card-2-spread: 0rem;
459
- @dt-shadow-card-2-color: rgba(0, 0, 0, 0.04);
460
- @dt-shadow-card-2-type: dropShadow;
461
- @dt-shadow-card-3-x: 0rem;
462
- @dt-shadow-card-3-y: 0.2rem;
463
- @dt-shadow-card-3-blur: 1.6rem;
464
- @dt-shadow-card-3-spread: 0rem;
465
- @dt-shadow-card-3-color: rgba(0, 0, 0, 0.08);
466
- @dt-shadow-card-3-type: dropShadow;
467
- @dt-shadow-focus-1-x: 0rem;
468
- @dt-shadow-focus-1-y: 0rem;
469
- @dt-shadow-focus-1-blur: 0rem;
470
- @dt-shadow-focus-1-spread: 0.1rem;
471
- @dt-shadow-focus-1-color: #F9F9F9;
472
- @dt-shadow-focus-1-type: dropShadow;
473
- @dt-shadow-focus-2-x: 0rem;
474
- @dt-shadow-focus-2-y: 0rem;
475
- @dt-shadow-focus-2-blur: 0rem;
476
- @dt-shadow-focus-2-spread: 0.4rem;
477
- @dt-shadow-focus-2-color: #51A0FE;
478
- @dt-shadow-focus-2-type: dropShadow;
479
- @dt-shadow-focus-inset-1-x: 0rem;
480
- @dt-shadow-focus-inset-1-y: 0rem;
481
- @dt-shadow-focus-inset-1-blur: 0rem;
482
- @dt-shadow-focus-inset-1-spread: 0.3rem;
483
- @dt-shadow-focus-inset-1-color: #51A0FE;
484
- @dt-shadow-focus-inset-1-type: innerShadow;
485
- @dt-typography-body-small-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";
486
- @dt-typography-body-small-font-weight: 400;
487
- @dt-typography-body-small-line-height: 1.4;
488
- @dt-typography-body-small-font-size: 1.2rem;
489
- @dt-typography-body-small-text-case: none;
490
- @dt-typography-body-base-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";
491
- @dt-typography-body-base-font-weight: 400;
492
- @dt-typography-body-base-line-height: 1.6;
493
- @dt-typography-body-base-font-size: 1.5rem;
494
- @dt-typography-body-base-text-case: none;
495
- @dt-typography-body-compact-small-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";
496
- @dt-typography-body-compact-small-font-weight: 400;
497
- @dt-typography-body-compact-small-line-height: 1.2;
498
- @dt-typography-body-compact-small-font-size: 1.2rem;
499
- @dt-typography-body-compact-small-text-case: none;
500
- @dt-typography-body-compact-base-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";
501
- @dt-typography-body-compact-base-font-weight: 400;
502
- @dt-typography-body-compact-base-line-height: 1.4;
503
- @dt-typography-body-compact-base-font-size: 1.5rem;
504
- @dt-typography-body-compact-base-text-case: none;
505
- @dt-typography-headline-eyebrow-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";
506
- @dt-typography-headline-eyebrow-font-weight: 400;
507
- @dt-typography-headline-eyebrow-line-height: 1.4;
508
- @dt-typography-headline-eyebrow-font-size: 1.2rem;
509
- @dt-typography-headline-eyebrow-text-case: uppercase;
510
- @dt-typography-headline-small-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"; // subhead
511
- @dt-typography-headline-small-font-weight: 700; // subhead
512
- @dt-typography-headline-small-line-height: 1.4; // subhead
513
- @dt-typography-headline-small-font-size: 1.2rem; // subhead
514
- @dt-typography-headline-small-text-case: none; // subhead
515
- @dt-typography-headline-medium-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
516
- @dt-typography-headline-medium-font-weight: 700; // base
517
- @dt-typography-headline-medium-line-height: 1.6; // base
518
- @dt-typography-headline-medium-font-size: 1.5rem; // base
519
- @dt-typography-headline-medium-text-case: none; // base
520
- @dt-typography-headline-large-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"; // section
521
- @dt-typography-headline-large-font-weight: 700; // section
522
- @dt-typography-headline-large-line-height: 1.6; // section
523
- @dt-typography-headline-large-font-size: 1.9rem; // section
524
- @dt-typography-headline-large-text-case: none; // section
525
- @dt-typography-headline-extra-large-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"; // display
526
- @dt-typography-headline-extra-large-font-weight: 500; // display
527
- @dt-typography-headline-extra-large-line-height: 1.2; // display
528
- @dt-typography-headline-extra-large-font-size: 2.7rem; // display
529
- @dt-typography-headline-extra-large-text-case: none; // display
530
- @dt-typography-headline-extra-extra-large-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"; // page head
531
- @dt-typography-headline-extra-extra-large-font-weight: 500; // page head
532
- @dt-typography-headline-extra-extra-large-line-height: 1.2; // page head
533
- @dt-typography-headline-extra-extra-large-font-size: 3.8rem; // page head
534
- @dt-typography-headline-extra-extra-large-text-case: none; // page head
535
- @dt-typography-headline-soft-small-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"; // subhead
536
- @dt-typography-headline-soft-small-font-weight: 500; // subhead
537
- @dt-typography-headline-soft-small-line-height: 1.4; // subhead
538
- @dt-typography-headline-soft-small-font-size: 1.2rem; // subhead
539
- @dt-typography-headline-soft-small-text-case: none; // subhead
540
- @dt-typography-headline-compact-small-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"; // subheading
541
- @dt-typography-headline-compact-small-font-weight: 700; // subheading
542
- @dt-typography-headline-compact-small-line-height: 1.2; // subheading
543
- @dt-typography-headline-compact-small-font-size: 1.2rem; // subheading
544
- @dt-typography-headline-compact-small-text-case: none; // subheading
545
- @dt-typography-headline-compact-medium-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";
546
- @dt-typography-headline-compact-medium-font-weight: 700;
547
- @dt-typography-headline-compact-medium-line-height: 1.4;
548
- @dt-typography-headline-compact-medium-font-size: 1.5rem;
549
- @dt-typography-headline-compact-medium-text-case: none;
550
- @dt-typography-headline-compact-large-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";
551
- @dt-typography-headline-compact-large-font-weight: 700;
552
- @dt-typography-headline-compact-large-line-height: 1.2;
553
- @dt-typography-headline-compact-large-font-size: 1.9rem;
554
- @dt-typography-headline-compact-large-text-case: none;
555
- @dt-typography-headline-compact-soft-small-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"; // subhead
556
- @dt-typography-headline-compact-soft-small-font-weight: 500; // subhead
557
- @dt-typography-headline-compact-soft-small-line-height: 1.2; // subhead
558
- @dt-typography-headline-compact-soft-small-font-size: 1.2rem; // subhead
559
- @dt-typography-headline-compact-soft-small-text-case: none; // subhead
560
- @dt-typography-label-small-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";
561
- @dt-typography-label-small-font-weight: 600;
562
- @dt-typography-label-small-line-height: 1.4;
563
- @dt-typography-label-small-font-size: 1.2rem;
564
- @dt-typography-label-small-text-case: none;
565
- @dt-typography-label-base-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";
566
- @dt-typography-label-base-font-weight: 600;
567
- @dt-typography-label-base-line-height: 1.6;
568
- @dt-typography-label-base-font-size: 1.5rem;
569
- @dt-typography-label-base-text-case: none;
570
- @dt-typography-label-compact-small-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";
571
- @dt-typography-label-compact-small-font-weight: 600;
572
- @dt-typography-label-compact-small-line-height: 1.2;
573
- @dt-typography-label-compact-small-font-size: 1.2rem;
574
- @dt-typography-label-compact-small-text-case: none;
575
- @dt-typography-label-compact-base-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";
576
- @dt-typography-label-compact-base-font-weight: 600;
577
- @dt-typography-label-compact-base-line-height: 1.4;
578
- @dt-typography-label-compact-base-font-size: 1.5rem;
579
- @dt-typography-label-compact-base-text-case: none;
580
- @dt-typography-label-compact-plain-small-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";
581
- @dt-typography-label-compact-plain-small-font-weight: 400;
582
- @dt-typography-label-compact-plain-small-line-height: 1.2;
583
- @dt-typography-label-compact-plain-small-font-size: 1.2rem;
584
- @dt-typography-label-compact-plain-small-text-case: none;
585
- @dt-typography-label-compact-plain-base-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";
586
- @dt-typography-label-compact-plain-base-font-weight: 400;
587
- @dt-typography-label-compact-plain-base-line-height: 1.4;
588
- @dt-typography-label-compact-plain-base-font-size: 1.5rem;
589
- @dt-typography-label-compact-plain-base-text-case: none;
590
- @dt-typography-label-plain-small-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";
591
- @dt-typography-label-plain-small-font-weight: 400;
592
- @dt-typography-label-plain-small-line-height: 1.4;
593
- @dt-typography-label-plain-small-font-size: 1.2rem;
594
- @dt-typography-label-plain-small-text-case: none;
595
- @dt-typography-label-plain-base-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";
596
- @dt-typography-label-plain-base-font-weight: 400;
597
- @dt-typography-label-plain-base-line-height: 1.6;
598
- @dt-typography-label-plain-base-font-size: 1.5rem;
599
- @dt-typography-label-plain-base-text-case: none;
600
- @dt-typography-helper-small-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";
601
- @dt-typography-helper-small-font-weight: 400;
602
- @dt-typography-helper-small-line-height: 1.2;
603
- @dt-typography-helper-small-font-size: 1.2rem;
604
- @dt-typography-helper-small-text-case: none;
605
- @dt-typography-helper-base-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";
606
- @dt-typography-helper-base-font-weight: 400;
607
- @dt-typography-helper-base-line-height: 1.4;
608
- @dt-typography-helper-base-font-size: 1.5rem;
609
- @dt-typography-helper-base-text-case: none;
610
- @dt-typography-code-small-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; // mono
611
- @dt-typography-code-small-font-weight: 400; // mono
612
- @dt-typography-code-small-line-height: 1.2; // mono
613
- @dt-typography-code-small-font-size: 1.2rem; // mono
614
- @dt-typography-code-small-text-case: none; // mono
615
- @dt-typography-code-base-font-family: SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; // mono
616
- @dt-typography-code-base-font-weight: 400; // mono
617
- @dt-typography-code-base-line-height: 1.2; // mono
618
- @dt-typography-code-base-font-size: 1.5rem; // mono
619
- @dt-typography-code-base-text-case: none; // mono
620
- @dt-inputs-size-border-default: 0.15rem;
621
- @dt-inputs-size-border-status: 0.2rem;
622
- @dt-inputs-size-radius-xs: 0.4rem;
623
- @dt-inputs-size-radius-sm: 0.8rem;
624
- @dt-inputs-size-radius-md: 0.8rem;
625
- @dt-inputs-size-radius-lg: 1.2rem;
626
- @dt-inputs-size-radius-xl: 1.6rem;
627
- @dt-inputs-line-height-default: 1.2;
628
- @dt-inputs-font-size-xs: 1.2rem;
629
- @dt-inputs-font-size-sm: 1.2rem;
630
- @dt-inputs-font-size-md: 1.5rem;
631
- @dt-inputs-font-size-lg: 1.9rem;
632
- @dt-inputs-font-size-xl: 2.7rem;
633
- @dt-inputs-color-foreground-default: #3A3A3A;
634
- @dt-inputs-color-foreground-placeholder: #808080;
635
- @dt-inputs-color-foreground-disabled: #808080;
636
- @dt-inputs-color-border-default: hsl(0 0% 0% / 0.1);
637
- @dt-inputs-color-border-focus: #51A0FE;
638
- @dt-inputs-color-border-critical: #EC0E0E;
639
- @dt-inputs-color-border-success: #1AA340;
640
- @dt-inputs-color-border-warning: #D28F2B;
641
- @dt-inputs-color-border-disabled: transparent;
642
- @dt-inputs-color-background-default: hsl(0 0% 0% / 0.03);
643
- @dt-inputs-color-background-focus: hsl(0 0% 0% / 0.01);
644
- @dt-inputs-color-background-disabled: hsl(0 0% 0% / 0.12);
645
- @dt-action-color-foreground-base-default: #7C52FF;
646
- @dt-action-color-foreground-base-hover: hsl(255 100% 63.4%);
647
- @dt-action-color-foreground-base-active: hsl(255 100% 63.4%);
648
- @dt-action-color-foreground-base-primary-default: #ffffff;
649
- @dt-action-color-foreground-critical-default: #EC0E0E;
650
- @dt-action-color-foreground-critical-hover: hsl(0 88.8% 45.1%);
651
- @dt-action-color-foreground-critical-active: hsl(0 88.8% 45.1%);
652
- @dt-action-color-foreground-critical-primary-default: #ffffff;
653
- @dt-action-color-foreground-inverted-default: #ffffff;
654
- @dt-action-color-foreground-inverted-hover: #ffffff;
655
- @dt-action-color-foreground-inverted-active: #ffffff;
656
- @dt-action-color-foreground-inverted-primary-default: #7C52FF;
657
- @dt-action-color-foreground-inverted-primary-hover: #3A1D95;
658
- @dt-action-color-foreground-inverted-primary-active: #3A1D95;
659
- @dt-action-color-foreground-muted-default: #3A3A3A;
660
- @dt-action-color-foreground-muted-hover: #3A3A3A;
661
- @dt-action-color-foreground-muted-active: #3A3A3A;
662
- @dt-action-color-foreground-disabled-default: #808080;
663
- @dt-action-color-foreground-positive-default: #1AA340;
664
- @dt-action-color-foreground-positive-hover: hsl(137 72.5% 30.4%);
665
- @dt-action-color-foreground-positive-active: hsl(137 72.5% 30.4%);
666
- @dt-action-color-foreground-positive-primary-default: #ffffff;
667
- @dt-action-color-background-base-default: transparent;
668
- @dt-action-color-background-base-hover: hsl(255 100% 66.1% / 0.14);
669
- @dt-action-color-background-base-active: hsl(255 100% 66.1% / 0.18);
670
- @dt-action-color-background-base-primary-default: #7C52FF;
671
- @dt-action-color-background-base-primary-hover: hsl(255 100% 63.4%);
672
- @dt-action-color-background-base-primary-active: hsl(255 100% 60.8%);
673
- @dt-action-color-background-critical-default: transparent;
674
- @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.07);
675
- @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.12);
676
- @dt-action-color-background-critical-primary-default: #EC0E0E;
677
- @dt-action-color-background-critical-primary-hover: hsl(0 88.8% 45.1%);
678
- @dt-action-color-background-critical-primary-active: hsl(0 88.8% 43.1%);
679
- @dt-action-color-background-inverted-default: transparent;
680
- @dt-action-color-background-inverted-hover: hsl(0 0% 100% / 0.15);
681
- @dt-action-color-background-inverted-active: hsl(0 0% 100% / 0.3);
682
- @dt-action-color-background-inverted-primary-default: #ffffff;
683
- @dt-action-color-background-inverted-primary-hover: #F5F0FF;
684
- @dt-action-color-background-inverted-primary-active: hsl(260 100% 93.2%);
685
- @dt-action-color-background-muted-default: transparent;
686
- @dt-action-color-background-muted-hover: hsl(0 0% 13.3% / 0.1);
687
- @dt-action-color-background-muted-active: hsl(0 0% 13.3% / 0.16);
688
- @dt-action-color-background-disabled-default: #D2D2D2;
689
- @dt-action-color-background-positive-default: transparent;
690
- @dt-action-color-background-positive-hover: hsl(111 53.8% 98%);
691
- @dt-action-color-background-positive-active: hsl(137 72.5% 37.1% / 0.08);
692
- @dt-action-color-background-positive-primary-default: #1AA340;
693
- @dt-action-color-background-positive-primary-hover: hsl(137 72.5% 33.4%);
694
- @dt-action-color-background-positive-primary-active: hsl(137 72.5% 31.1%);
695
- @dt-action-color-border-base-outlined-default: #7C52FF;
696
- @dt-action-color-border-critical-outlined-default: #EC0E0E;
697
- @dt-action-color-border-inverted-outlined-default: #F9F9F9;
698
- @dt-action-color-border-muted-outlined-default: #555555;
699
- @dt-theme-color-base: #000000;
700
- @dt-theme-topbar-color-foreground: hsl(0 0% 0% / 0.75);
701
- @dt-theme-topbar-color-background: #F9F9F9;
702
- @dt-theme-topbar-field-color-foreground: hsl(0 0% 0% / 0.5);
703
- @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 0% / 0.75);
704
- @dt-theme-topbar-field-color-background: hsl(0 0% 0% / 0.05);
705
- @dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
706
- @dt-theme-topbar-field-color-border: hsl(0 0% 0% / 0);
707
- @dt-theme-topbar-field-color-border-hover: hsl(0 0% 0% / 0.1);
708
- @dt-theme-topbar-field-color-border-active: hsl(0 0% 0% / 0.2);
709
- @dt-theme-topbar-button-color-foreground: hsl(0 0% 0% / 0.65);
710
- @dt-theme-topbar-button-color-foreground-hover: #000000;
711
- @dt-theme-topbar-button-color-background: hsl(0 0% 0% / 0);
712
- @dt-theme-topbar-button-color-background-hover: hsl(0 0% 0% / 0.05);
713
- @dt-theme-topbar-button-color-background-active: hsl(0 0% 0% / 0.1);
714
- @dt-theme-topbar-profile-color-foreground: hsl(0 0% 0% / 0.75);
715
- @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 100% / 0.75);
716
- @dt-theme-topbar-profile-color-background: hsl(0 0% 0% / 0.05);
717
- @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 0% / 0.75);
718
- @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 0% / 0.1);
719
- @dt-theme-topbar-profile-color-background-active: hsl(0 0% 0% / 0.14);
720
- @dt-theme-sidebar-color-foreground: #3A3A3A;
721
- @dt-theme-sidebar-color-foreground-unread: #000000;
722
- @dt-theme-sidebar-color-background: #F9F9F9;
723
- @dt-theme-sidebar-icon-color-foreground: #3A3A3A;
724
- @dt-theme-sidebar-status-color-foreground: #555555;
725
- @dt-theme-sidebar-row-color-background: hsl(0 0% 0% / 0);
726
- @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 0% / 0.12);
727
- @dt-theme-sidebar-row-color-background-active: hsl(0 0% 0% / 0.16);
728
- @dt-theme-sidebar-selected-row-color-foreground: #000000;
729
- @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 0% / 0.1);
730
- @dt-theme-sidebar-section-color-foreground: #555555;
731
- @dt-theme-presence-color-background-available: #1AA340;
732
- @dt-theme-presence-color-background-busy-unavailable: #EC0E0E;
733
- @dt-theme-presence-color-background-busy: #F6AB3C;
734
- @dt-theme-presence-color-background-offline: #ffffff;
735
- @dt-theme-mention-color-foreground: #ffffff;
736
- @dt-theme-mention-color-background: #7C52FF;
737
- @dt-avatar-color-foreground: #000000;
738
- @dt-avatar-color-background-100: #1aa340;
739
- @dt-avatar-color-background-200: #aaff83;
740
- @dt-avatar-color-background-300: #adea88;
741
- @dt-avatar-color-background-400: #77eca6;
742
- @dt-avatar-color-background-500: #7aedbd;
743
- @dt-avatar-color-background-600: #77deec;
744
- @dt-avatar-color-background-700: #5ed8ff;
745
- @dt-avatar-color-background-800: #99e7ff;
746
- @dt-avatar-color-background-900: #51a0fe;
747
- @dt-avatar-color-background-1000: #b6cfff;
748
- @dt-avatar-color-background-1100: #f1b7e8;
749
- @dt-avatar-color-background-1200: #ec77bd;
750
- @dt-avatar-color-background-1300: #ff67be;
751
- @dt-avatar-color-background-1400: #f87e7e;
752
- @dt-avatar-color-background-1500: #eca877;
753
- @dt-avatar-color-background-1600: #ffbe41;
754
- @dt-avatar-color-background-1700: #ffd646;
755
- @dt-avatar-color-background-1800: #f1dab7;
756
- @dt-avatar-color-background-000: #e0e0e0;
757
- @dt-badge-color-background-default: hsl(0 0% 0% / 0.09);
758
- @dt-badge-color-background-info: #EAF2FA;
759
- @dt-badge-color-background-success: #EDF9EB;
760
- @dt-badge-color-background-warning: #FFF4CC;
761
- @dt-badge-color-background-critical: #FFE5E6;
762
- @dt-badge-color-background-bulletin: #7C52FF;
763
- @dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
764
- @dt-badge-color-foreground-default: #000000;
765
- @dt-badge-color-foreground-bulletin: #ffffff;
766
- @dt-checkbox-size-width: 1.6rem;
767
- @dt-checkbox-size-height: 1.6rem;
768
- @dt-checkbox-size-radius: 0.4rem;
769
- @dt-checkbox-color-border-unchecked: #AAAAAA;
770
- @dt-checkbox-color-border-checked: #7C52FF;
771
- @dt-checkbox-color-background-checked: #7C52FF;
772
- @dt-icon-size-100: 1.2rem;
773
- @dt-icon-size-200: 1.4rem;
774
- @dt-icon-size-300: 1.8rem;
775
- @dt-icon-size-400: 2rem;
776
- @dt-icon-size-500: 2.4rem;
777
- @dt-icon-size-600: 3.2rem;
778
- @dt-icon-size-700: 3.8rem;
779
- @dt-icon-size-800: 4.8rem;
780
- @dt-icon-size-border-100: 0.1rem;
781
- @dt-icon-size-border-200: 0.125rem;
782
- @dt-icon-size-border-300: 0.15rem;
783
- @dt-icon-size-border-400: 0.175rem;
784
- @dt-icon-size-border-500: 0.175rem;
785
- @dt-icon-size-border-600: 0.25rem;
786
- @dt-icon-size-border-700: 0.275rem;
787
- @dt-icon-size-border-800: 0.35rem;
788
- @dt-radio-size-width: 1.6rem;
789
- @dt-radio-size-height: 1.6rem;
790
- @dt-radio-size-radius: 50%;
791
- @dt-radio-color-border-unchecked: #AAAAAA;
792
- @dt-radio-color-border-checked: #7C52FF;
793
- @dt-radio-color-background-checked: #7C52FF;