1 | declare const Tokens: {
|
2 | "tokens":{"background-colors": [
|
3 | {
|
4 | type: "color";
|
5 | category: "background-color";
|
6 | value: "rgb(244, 244, 246)";
|
7 | comment: "Background color used for containers.";
|
8 | originalValue: "{!palette-gray-10}";
|
9 | name: "color-background";
|
10 | },
|
11 | {
|
12 | type: "color";
|
13 | category: "background-color";
|
14 | value: "rgb(20, 176, 83)";
|
15 | comment: "Background color used to represent an entity or person as \"available\".";
|
16 | originalValue: "{!palette-green-60}";
|
17 | name: "color-background-available";
|
18 | },
|
19 | {
|
20 | type: "color";
|
21 | category: "background-color";
|
22 | value: "rgb(255, 255, 255)";
|
23 | comment: "Background color used for the main page body.";
|
24 | originalValue: "{!palette-gray-0}";
|
25 | name: "color-background-body";
|
26 | },
|
27 | {
|
28 | type: "color";
|
29 | category: "background-color";
|
30 | value: "rgb(18, 28, 45)";
|
31 | comment: "Inverse background color used for the main page body.";
|
32 | originalValue: "{!palette-gray-100}";
|
33 | name: "color-background-body-inverse";
|
34 | },
|
35 | {
|
36 | type: "color";
|
37 | category: "background-color";
|
38 | value: "rgb(0, 20, 137)";
|
39 | comment: "Background color used for brand.";
|
40 | originalValue: "{!palette-blue-80}";
|
41 | name: "color-background-brand";
|
42 | },
|
43 | {
|
44 | type: "color";
|
45 | category: "background-color";
|
46 | value: "rgb(242, 47, 70)";
|
47 | comment: "Background color used for brand highlights.";
|
48 | originalValue: "{!amaranth}";
|
49 | name: "color-background-brand-highlight";
|
50 | },
|
51 | {
|
52 | type: "color";
|
53 | category: "background-color";
|
54 | value: "rgba(242, 47, 70, 0.1)";
|
55 | comment: "Weakest background color used for brand highlights.";
|
56 | originalValue: "{!amaranth-transparent-10}";
|
57 | name: "color-background-brand-highlight-weakest";
|
58 | },
|
59 | {
|
60 | type: "color";
|
61 | category: "background-color";
|
62 | value: "rgb(3, 11, 93)";
|
63 | comment: "Strong background color used for brand.";
|
64 | originalValue: "{!palette-blue-90}";
|
65 | name: "color-background-brand-strong";
|
66 | },
|
67 | {
|
68 | type: "color";
|
69 | category: "background-color";
|
70 | value: "rgb(6, 3, 58)";
|
71 | comment: "Stronger background color used for brand.";
|
72 | originalValue: "{!palette-blue-100}";
|
73 | name: "color-background-brand-stronger";
|
74 | },
|
75 | {
|
76 | type: "color";
|
77 | category: "background-color";
|
78 | value: "rgb(244, 124, 34)";
|
79 | comment: "Background color used to represent an entity or person as \"busy\".";
|
80 | originalValue: "{!palette-orange-60}";
|
81 | name: "color-background-busy";
|
82 | },
|
83 | {
|
84 | type: "color";
|
85 | category: "background-color";
|
86 | value: "rgb(244, 244, 246)";
|
87 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
88 | originalValue: "{!palette-gray-10}";
|
89 | name: "color-background-decorative-10-weakest";
|
90 | },
|
91 | {
|
92 | type: "color";
|
93 | category: "background-color";
|
94 | value: "rgb(235, 244, 255)";
|
95 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
96 | originalValue: "{!palette-blue-10}";
|
97 | name: "color-background-decorative-20-weakest";
|
98 | },
|
99 | {
|
100 | type: "color";
|
101 | category: "background-color";
|
102 | value: "rgb(237, 253, 243)";
|
103 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
104 | originalValue: "{!palette-green-10}";
|
105 | name: "color-background-decorative-30-weakest";
|
106 | },
|
107 | {
|
108 | type: "color";
|
109 | category: "background-color";
|
110 | value: "rgb(245, 240, 252)";
|
111 | comment: "Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens.";
|
112 | originalValue: "{!palette-purple-10}";
|
113 | name: "color-background-decorative-40-weakest";
|
114 | },
|
115 | {
|
116 | type: "color";
|
117 | category: "background-color";
|
118 | value: "rgb(214, 31, 31)";
|
119 | comment: "Background color used for destructive actions or highlights.";
|
120 | originalValue: "{!palette-red-60}";
|
121 | name: "color-background-destructive";
|
122 | },
|
123 | {
|
124 | type: "color";
|
125 | category: "background-color";
|
126 | value: "rgb(117, 12, 12)";
|
127 | comment: "Strong background color used for destructive actions or highlights.";
|
128 | originalValue: "{!palette-red-80}";
|
129 | name: "color-background-destructive-strong";
|
130 | },
|
131 | {
|
132 | type: "color";
|
133 | category: "background-color";
|
134 | value: "rgb(74, 11, 11)";
|
135 | comment: "Stronger background color used for destructive actions or highlights.";
|
136 | originalValue: "{!palette-red-90}";
|
137 | name: "color-background-destructive-stronger";
|
138 | },
|
139 | {
|
140 | type: "color";
|
141 | category: "background-color";
|
142 | value: "rgb(49, 12, 12)";
|
143 | comment: "Strongest background color used for destructive actions or highlights.";
|
144 | originalValue: "{!palette-red-100}";
|
145 | name: "color-background-destructive-strongest";
|
146 | },
|
147 | {
|
148 | type: "color";
|
149 | category: "background-color";
|
150 | value: "rgb(246, 177, 177)";
|
151 | comment: "Weak background color used for destructive actions or highlights.";
|
152 | originalValue: "{!palette-red-30}";
|
153 | name: "color-background-destructive-weak";
|
154 | },
|
155 | {
|
156 | type: "color";
|
157 | category: "background-color";
|
158 | value: "rgb(252, 207, 207)";
|
159 | comment: "Weaker background color used for destructive actions or highlights.";
|
160 | originalValue: "{!palette-red-20}";
|
161 | name: "color-background-destructive-weaker";
|
162 | },
|
163 | {
|
164 | type: "color";
|
165 | category: "background-color";
|
166 | value: "rgb(254, 236, 236)";
|
167 | comment: "Weakest background color used for destructive actions or highlights.";
|
168 | originalValue: "{!palette-red-10}";
|
169 | name: "color-background-destructive-weakest";
|
170 | },
|
171 | {
|
172 | type: "color";
|
173 | category: "background-color";
|
174 | value: "rgb(214, 31, 31)";
|
175 | comment: "Background color used for error alerts and toasts.";
|
176 | originalValue: "{!palette-red-60}";
|
177 | name: "color-background-error";
|
178 | },
|
179 | {
|
180 | type: "color";
|
181 | category: "background-color";
|
182 | value: "rgb(117, 12, 12)";
|
183 | comment: "Strongest background color used for error alerts and toasts.";
|
184 | originalValue: "{!palette-red-80}";
|
185 | name: "color-background-error-strong";
|
186 | },
|
187 | {
|
188 | type: "color";
|
189 | category: "background-color";
|
190 | value: "rgb(74, 11, 11)";
|
191 | comment: "Stronger error background color";
|
192 | originalValue: "{!palette-red-90}";
|
193 | name: "color-background-error-stronger";
|
194 | },
|
195 | {
|
196 | type: "color";
|
197 | category: "background-color";
|
198 | value: "rgb(254, 236, 236)";
|
199 | comment: "Weakest background color used for error alerts and toasts.";
|
200 | originalValue: "{!palette-red-10}";
|
201 | name: "color-background-error-weakest";
|
202 | },
|
203 | {
|
204 | type: "color";
|
205 | category: "background-color";
|
206 | value: "rgb(31, 48, 76)";
|
207 | comment: "Inverse background color used for containers.";
|
208 | originalValue: "{!palette-gray-90}";
|
209 | name: "color-background-inverse";
|
210 | },
|
211 | {
|
212 | type: "color";
|
213 | category: "background-color";
|
214 | value: "rgb(57, 71, 98)";
|
215 | comment: "Strong inverse background color used for containers.";
|
216 | originalValue: "{!palette-gray-80}";
|
217 | name: "color-background-inverse-strong";
|
218 | },
|
219 | {
|
220 | type: "color";
|
221 | category: "background-color";
|
222 | value: "rgb(235, 244, 255)";
|
223 | comment: "Weakest background color used for neutral or default variants.";
|
224 | originalValue: "{!palette-blue-10}";
|
225 | name: "color-background-neutral-weakest";
|
226 | },
|
227 | {
|
228 | type: "color";
|
229 | category: "background-color";
|
230 | value: "rgb(245, 240, 252)";
|
231 | comment: "Background color used to represent a new status.";
|
232 | originalValue: "{!palette-purple-10}";
|
233 | name: "color-background-new";
|
234 | },
|
235 | {
|
236 | type: "color";
|
237 | category: "background-color";
|
238 | value: "rgb(174, 178, 193)";
|
239 | comment: "Background color used to represent an entity or person as \"offline\".";
|
240 | originalValue: "{!palette-gray-40}";
|
241 | name: "color-background-offline";
|
242 | },
|
243 | {
|
244 | type: "color";
|
245 | category: "background-color";
|
246 | value: "rgba(6, 3, 58, 0.4)";
|
247 | comment: "Background color used for overlays.";
|
248 | originalValue: "{!palette-blue-100-transparent-40}";
|
249 | name: "color-background-overlay";
|
250 | },
|
251 | {
|
252 | type: "color";
|
253 | category: "background-color";
|
254 | value: "rgb(2, 99, 224)";
|
255 | comment: "Background color used for primary actions or highlights.";
|
256 | originalValue: "{!palette-blue-60}";
|
257 | name: "color-background-primary";
|
258 | },
|
259 | {
|
260 | type: "color";
|
261 | category: "background-color";
|
262 | value: "rgb(0, 20, 137)";
|
263 | comment: "Strong background color used for primary actions or highlights.";
|
264 | originalValue: "{!palette-blue-80}";
|
265 | name: "color-background-primary-strong";
|
266 | },
|
267 | {
|
268 | type: "color";
|
269 | category: "background-color";
|
270 | value: "rgb(3, 11, 93)";
|
271 | comment: "Stronger background color used for primary actions or highlights.";
|
272 | originalValue: "{!palette-blue-90}";
|
273 | name: "color-background-primary-stronger";
|
274 | },
|
275 | {
|
276 | type: "color";
|
277 | category: "background-color";
|
278 | value: "rgb(6, 3, 58)";
|
279 | comment: "Strongest background color used for primary actions or highlights.";
|
280 | originalValue: "{!palette-blue-100}";
|
281 | name: "color-background-primary-strongest";
|
282 | },
|
283 | {
|
284 | type: "color";
|
285 | category: "background-color";
|
286 | value: "rgb(153, 205, 255)";
|
287 | comment: "Weak background color used for primary actions or highlights.";
|
288 | originalValue: "{!palette-blue-30}";
|
289 | name: "color-background-primary-weak";
|
290 | },
|
291 | {
|
292 | type: "color";
|
293 | category: "background-color";
|
294 | value: "rgb(204, 228, 255)";
|
295 | comment: "Weaker background color used for primary actions or highlights.";
|
296 | originalValue: "{!palette-blue-20}";
|
297 | name: "color-background-primary-weaker";
|
298 | },
|
299 | {
|
300 | type: "color";
|
301 | category: "background-color";
|
302 | value: "rgb(235, 244, 255)";
|
303 | comment: "Weakest background color used for primary actions or highlights.";
|
304 | originalValue: "{!palette-blue-10}";
|
305 | name: "color-background-primary-weakest";
|
306 | },
|
307 | {
|
308 | type: "color";
|
309 | category: "background-color";
|
310 | value: "rgb(235, 86, 86)";
|
311 | comment: "Background color used to represent required form fields.";
|
312 | originalValue: "{!palette-red-50}";
|
313 | name: "color-background-required";
|
314 | },
|
315 | {
|
316 | type: "color";
|
317 | category: "background-color";
|
318 | value: "rgb(244, 244, 246)";
|
319 | comment: "Background color used for alternative striped rows.";
|
320 | originalValue: "{!palette-gray-10}";
|
321 | name: "color-background-row-striped";
|
322 | },
|
323 | {
|
324 | type: "color";
|
325 | category: "background-color";
|
326 | value: "rgb(225, 227, 234)";
|
327 | comment: "Strong background color used for containers.";
|
328 | originalValue: "{!palette-gray-20}";
|
329 | name: "color-background-strong";
|
330 | },
|
331 | {
|
332 | type: "color";
|
333 | category: "background-color";
|
334 | value: "rgb(136, 145, 170)";
|
335 | comment: "Stronger background color used for containers.";
|
336 | originalValue: "{!palette-gray-50}";
|
337 | name: "color-background-stronger";
|
338 | },
|
339 | {
|
340 | type: "color";
|
341 | category: "background-color";
|
342 | value: "rgb(75, 86, 113)";
|
343 | comment: "Strongest background color used for containers.";
|
344 | originalValue: "{!palette-gray-70}";
|
345 | name: "color-background-strongest";
|
346 | },
|
347 | {
|
348 | type: "color";
|
349 | category: "background-color";
|
350 | value: "rgb(255, 241, 179)";
|
351 | comment: "Background color used for subaccounts.";
|
352 | originalValue: "{!palette-yellow-20}";
|
353 | name: "color-background-subaccount";
|
354 | },
|
355 | {
|
356 | type: "color";
|
357 | category: "background-color";
|
358 | value: "rgb(20, 176, 83)";
|
359 | comment: "Background color used for success alerts and toasts.";
|
360 | originalValue: "{!palette-green-60}";
|
361 | name: "color-background-success";
|
362 | },
|
363 | {
|
364 | type: "color";
|
365 | category: "background-color";
|
366 | value: "rgb(237, 253, 243)";
|
367 | comment: "Weakest background color used for success alerts and toasts.";
|
368 | originalValue: "{!palette-green-10}";
|
369 | name: "color-background-success-weakest";
|
370 | },
|
371 | {
|
372 | type: "color";
|
373 | category: "background-color";
|
374 | value: "rgb(209, 250, 224)";
|
375 | comment: "Background color used for trial accounts.";
|
376 | originalValue: "{!palette-green-20}";
|
377 | name: "color-background-trial";
|
378 | },
|
379 | {
|
380 | type: "color";
|
381 | category: "background-color";
|
382 | value: "rgb(214, 31, 31)";
|
383 | comment: "Background color used to represent an entity or person as \"unavailable\".";
|
384 | originalValue: "{!palette-red-60}";
|
385 | name: "color-background-unavailable";
|
386 | },
|
387 | {
|
388 | type: "color";
|
389 | category: "background-color";
|
390 | value: "rgb(200, 175, 240)";
|
391 | comment: "Background color used for user avatars.";
|
392 | originalValue: "{!palette-purple-30}";
|
393 | name: "color-background-user";
|
394 | },
|
395 | {
|
396 | type: "color";
|
397 | category: "background-color";
|
398 | value: "rgb(244, 124, 34)";
|
399 | comment: "Background color used for warning alerts and toasts.";
|
400 | originalValue: "{!palette-orange-60}";
|
401 | name: "color-background-warning";
|
402 | },
|
403 | {
|
404 | type: "color";
|
405 | category: "background-color";
|
406 | value: "rgb(254, 245, 238)";
|
407 | comment: "Weakest background color used for warning alerts and toasts.";
|
408 | originalValue: "{!palette-orange-10}";
|
409 | name: "color-background-warning-weakest";
|
410 | }
|
411 | ],
|
412 | "border-colors": [
|
413 | {
|
414 | type: "color";
|
415 | category: "border-color";
|
416 | value: "rgb(136, 145, 170)";
|
417 | comment: "Default border color";
|
418 | uicontrol_contrast_pairing: ["color-background-body"];
|
419 | originalValue: "{!palette-gray-50}";
|
420 | name: "color-border";
|
421 | },
|
422 | {
|
423 | type: "color";
|
424 | category: "border-color";
|
425 | value: "rgb(225, 227, 234)";
|
426 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
427 | originalValue: "{!palette-gray-20}";
|
428 | name: "color-border-decorative-10-weaker";
|
429 | },
|
430 | {
|
431 | type: "color";
|
432 | category: "border-color";
|
433 | value: "rgb(204, 228, 255)";
|
434 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
435 | originalValue: "{!palette-blue-20}";
|
436 | name: "color-border-decorative-20-weaker";
|
437 | },
|
438 | {
|
439 | type: "color";
|
440 | category: "border-color";
|
441 | value: "rgb(209, 250, 224)";
|
442 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
443 | originalValue: "{!palette-green-20}";
|
444 | name: "color-border-decorative-30-weaker";
|
445 | },
|
446 | {
|
447 | type: "color";
|
448 | category: "border-color";
|
449 | value: "rgb(231, 220, 250)";
|
450 | comment: "Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens.";
|
451 | originalValue: "{!palette-purple-20}";
|
452 | name: "color-border-decorative-40-weaker";
|
453 | },
|
454 | {
|
455 | type: "color";
|
456 | category: "border-color";
|
457 | value: "rgb(214, 31, 31)";
|
458 | comment: "Destructive border color";
|
459 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
460 | originalValue: "{!palette-red-60}";
|
461 | name: "color-border-destructive";
|
462 | },
|
463 | {
|
464 | type: "color";
|
465 | category: "border-color";
|
466 | value: "rgb(117, 12, 12)";
|
467 | comment: "Destructive focus border color";
|
468 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"];
|
469 | originalValue: "{!palette-red-80}";
|
470 | name: "color-border-destructive-strong";
|
471 | },
|
472 | {
|
473 | type: "color";
|
474 | category: "border-color";
|
475 | value: "rgb(74, 11, 11)";
|
476 | comment: "Stronger destructive hover border color";
|
477 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"];
|
478 | originalValue: "{!palette-red-90}";
|
479 | name: "color-border-destructive-stronger";
|
480 | },
|
481 | {
|
482 | type: "color";
|
483 | category: "border-color";
|
484 | value: "rgb(49, 12, 12)";
|
485 | comment: "Strongest destructive hover border color";
|
486 | originalValue: "{!palette-red-100}";
|
487 | name: "color-border-destructive-strongest";
|
488 | },
|
489 | {
|
490 | type: "color";
|
491 | category: "border-color";
|
492 | value: "rgb(246, 177, 177)";
|
493 | comment: "Destructive focus border color";
|
494 | originalValue: "{!palette-red-30}";
|
495 | name: "color-border-destructive-weak";
|
496 | },
|
497 | {
|
498 | type: "color";
|
499 | category: "border-color";
|
500 | value: "rgb(252, 207, 207)";
|
501 | comment: "Destructive focus border color";
|
502 | originalValue: "{!palette-red-20}";
|
503 | name: "color-border-destructive-weaker";
|
504 | },
|
505 | {
|
506 | type: "color";
|
507 | category: "border-color";
|
508 | value: "rgb(254, 236, 236)";
|
509 | comment: "Destructive focus border color";
|
510 | originalValue: "{!palette-red-10}";
|
511 | name: "color-border-destructive-weakest";
|
512 | },
|
513 | {
|
514 | type: "color";
|
515 | category: "border-color";
|
516 | value: "rgb(214, 31, 31)";
|
517 | comment: "Error border color";
|
518 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
519 | originalValue: "{!palette-red-60}";
|
520 | name: "color-border-error";
|
521 | },
|
522 | {
|
523 | type: "color";
|
524 | category: "border-color";
|
525 | value: "rgb(117, 12, 12)";
|
526 | comment: "Strong error border color";
|
527 | originalValue: "{!palette-red-80}";
|
528 | name: "color-border-error-strong";
|
529 | },
|
530 | {
|
531 | type: "color";
|
532 | category: "border-color";
|
533 | value: "rgb(74, 11, 11)";
|
534 | comment: "Stronger error border color";
|
535 | originalValue: "{!palette-red-90}";
|
536 | name: "color-border-error-stronger";
|
537 | },
|
538 | {
|
539 | type: "color";
|
540 | category: "border-color";
|
541 | value: "rgb(245, 138, 138)";
|
542 | comment: "Weak error border color";
|
543 | originalValue: "{!palette-red-40}";
|
544 | name: "color-border-error-weak";
|
545 | },
|
546 | {
|
547 | type: "color";
|
548 | category: "border-color";
|
549 | value: "rgb(252, 207, 207)";
|
550 | comment: "Weaker error border color";
|
551 | originalValue: "{!palette-red-20}";
|
552 | name: "color-border-error-weaker";
|
553 | },
|
554 | {
|
555 | type: "color";
|
556 | category: "border-color";
|
557 | value: "rgb(254, 236, 236)";
|
558 | comment: "Weakest error border color";
|
559 | originalValue: "{!palette-red-10}";
|
560 | name: "color-border-error-weakest";
|
561 | },
|
562 | {
|
563 | type: "color";
|
564 | category: "border-color";
|
565 | value: "rgb(136, 145, 170)";
|
566 | comment: "Border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
567 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
568 | originalValue: "{!palette-gray-50}";
|
569 | name: "color-border-inverse";
|
570 | },
|
571 | {
|
572 | type: "color";
|
573 | category: "border-color";
|
574 | value: "rgb(225, 227, 234)";
|
575 | comment: "Strong border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
576 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
577 | originalValue: "{!palette-gray-20}";
|
578 | name: "color-border-inverse-strong";
|
579 | },
|
580 | {
|
581 | type: "color";
|
582 | category: "border-color";
|
583 | value: "rgb(244, 244, 246)";
|
584 | comment: "Stronger border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
585 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
586 | originalValue: "{!palette-gray-10}";
|
587 | name: "color-border-inverse-stronger";
|
588 | },
|
589 | {
|
590 | type: "color";
|
591 | category: "border-color";
|
592 | value: "rgb(255, 255, 255)";
|
593 | comment: "Strongest border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
594 | uicontrol_contrast_pairing: ["color-background-body-inverse"];
|
595 | originalValue: "{!palette-gray-0}";
|
596 | name: "color-border-inverse-strongest";
|
597 | },
|
598 | {
|
599 | type: "color";
|
600 | category: "border-color";
|
601 | value: "rgb(57, 71, 98)";
|
602 | comment: "Weaker border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
603 | originalValue: "{!palette-gray-80}";
|
604 | name: "color-border-inverse-weaker";
|
605 | },
|
606 | {
|
607 | type: "color";
|
608 | category: "border-color";
|
609 | value: "rgb(31, 48, 76)";
|
610 | comment: "Weakest border on inverse backgrounds. Must be used on color-background-body-inverse.";
|
611 | originalValue: "{!palette-gray-90}";
|
612 | name: "color-border-inverse-weakest";
|
613 | },
|
614 | {
|
615 | type: "color";
|
616 | category: "border-color";
|
617 | value: "rgb(2, 99, 224)";
|
618 | comment: "Neutral border color";
|
619 | originalValue: "{!palette-blue-60}";
|
620 | name: "color-border-neutral";
|
621 | },
|
622 | {
|
623 | type: "color";
|
624 | category: "border-color";
|
625 | value: "rgb(102, 179, 255)";
|
626 | comment: "Weak neutral border color";
|
627 | originalValue: "{!palette-blue-40}";
|
628 | name: "color-border-neutral-weak";
|
629 | },
|
630 | {
|
631 | type: "color";
|
632 | category: "border-color";
|
633 | value: "rgb(204, 228, 255)";
|
634 | comment: "Weaker neutral border color";
|
635 | originalValue: "{!palette-blue-20}";
|
636 | name: "color-border-neutral-weaker";
|
637 | },
|
638 | {
|
639 | type: "color";
|
640 | category: "border-color";
|
641 | value: "rgb(231, 220, 250)";
|
642 | comment: "Weaker border color for something designated as new";
|
643 | originalValue: "{!palette-purple-20}";
|
644 | name: "color-border-new-weaker";
|
645 | },
|
646 | {
|
647 | type: "color";
|
648 | category: "border-color";
|
649 | value: "rgb(2, 99, 224)";
|
650 | comment: "Primary border color";
|
651 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
652 | originalValue: "{!palette-blue-60}";
|
653 | name: "color-border-primary";
|
654 | },
|
655 | {
|
656 | type: "color";
|
657 | category: "border-color";
|
658 | value: "rgb(0, 20, 137)";
|
659 | comment: "Strong primary border color";
|
660 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"];
|
661 | originalValue: "{!palette-blue-80}";
|
662 | name: "color-border-primary-strong";
|
663 | },
|
664 | {
|
665 | type: "color";
|
666 | category: "border-color";
|
667 | value: "rgb(3, 11, 93)";
|
668 | comment: "Stronger primary border color";
|
669 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"];
|
670 | originalValue: "{!palette-blue-90}";
|
671 | name: "color-border-primary-stronger";
|
672 | },
|
673 | {
|
674 | type: "color";
|
675 | category: "border-color";
|
676 | value: "rgb(6, 3, 58)";
|
677 | comment: "Strongest primary border color";
|
678 | originalValue: "{!palette-blue-100}";
|
679 | name: "color-border-primary-strongest";
|
680 | },
|
681 | {
|
682 | type: "color";
|
683 | category: "border-color";
|
684 | value: "rgb(153, 205, 255)";
|
685 | comment: "Weak primary border color";
|
686 | originalValue: "{!palette-blue-30}";
|
687 | name: "color-border-primary-weak";
|
688 | },
|
689 | {
|
690 | type: "color";
|
691 | category: "border-color";
|
692 | value: "rgb(204, 228, 255)";
|
693 | comment: "Weaker primary border color";
|
694 | originalValue: "{!palette-blue-20}";
|
695 | name: "color-border-primary-weaker";
|
696 | },
|
697 | {
|
698 | type: "color";
|
699 | category: "border-color";
|
700 | value: "rgb(235, 244, 255)";
|
701 | comment: "Weakest primary border color";
|
702 | originalValue: "{!palette-blue-10}";
|
703 | name: "color-border-primary-weakest";
|
704 | },
|
705 | {
|
706 | type: "color";
|
707 | category: "border-color";
|
708 | value: "rgb(96, 107, 133)";
|
709 | comment: "Strong border color";
|
710 | uicontrol_contrast_pairing: ["color-background","color-background-strong","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weaker","color-background-destructive-weakest"];
|
711 | originalValue: "{!palette-gray-60}";
|
712 | name: "color-border-strong";
|
713 | },
|
714 | {
|
715 | type: "color";
|
716 | category: "border-color";
|
717 | value: "rgb(20, 176, 83)";
|
718 | comment: "Success border color";
|
719 | originalValue: "{!palette-green-60}";
|
720 | name: "color-border-success";
|
721 | },
|
722 | {
|
723 | type: "color";
|
724 | category: "border-color";
|
725 | value: "rgb(54, 213, 118)";
|
726 | comment: "Weak success border color";
|
727 | originalValue: "{!palette-green-50}";
|
728 | name: "color-border-success-weak";
|
729 | },
|
730 | {
|
731 | type: "color";
|
732 | category: "border-color";
|
733 | value: "rgb(209, 250, 224)";
|
734 | comment: "Weaker success border color";
|
735 | originalValue: "{!palette-green-20}";
|
736 | name: "color-border-success-weaker";
|
737 | },
|
738 | {
|
739 | type: "color";
|
740 | category: "border-color";
|
741 | value: "rgb(237, 253, 243)";
|
742 | comment: "Weakest success border color";
|
743 | originalValue: "{!palette-green-10}";
|
744 | name: "color-border-success-weakest";
|
745 | },
|
746 | {
|
747 | type: "color";
|
748 | category: "border-color";
|
749 | value: "rgb(244, 124, 34)";
|
750 | comment: "Warning border color";
|
751 | originalValue: "{!palette-orange-60}";
|
752 | name: "color-border-warning";
|
753 | },
|
754 | {
|
755 | type: "color";
|
756 | category: "border-color";
|
757 | value: "rgb(255, 179, 122)";
|
758 | comment: "Weak warning border color";
|
759 | originalValue: "{!palette-orange-40}";
|
760 | name: "color-border-warning-weak";
|
761 | },
|
762 | {
|
763 | type: "color";
|
764 | category: "border-color";
|
765 | value: "rgb(253, 220, 196)";
|
766 | comment: "Weaker warning border color";
|
767 | originalValue: "{!palette-orange-20}";
|
768 | name: "color-border-warning-weaker";
|
769 | },
|
770 | {
|
771 | type: "color";
|
772 | category: "border-color";
|
773 | value: "rgb(254, 245, 238)";
|
774 | comment: "Weakest warning border color";
|
775 | originalValue: "{!palette-orange-10}";
|
776 | name: "color-border-warning-weakest";
|
777 | },
|
778 | {
|
779 | type: "color";
|
780 | category: "border-color";
|
781 | value: "rgb(202, 205, 216)";
|
782 | comment: "Weak border color";
|
783 | originalValue: "{!palette-gray-30}";
|
784 | name: "color-border-weak";
|
785 | },
|
786 | {
|
787 | type: "color";
|
788 | category: "border-color";
|
789 | value: "rgb(225, 227, 234)";
|
790 | comment: "Weaker border color";
|
791 | originalValue: "{!palette-gray-20}";
|
792 | name: "color-border-weaker";
|
793 | }
|
794 | ],
|
795 | "border-widths": [
|
796 | {
|
797 | type: "size";
|
798 | category: "border-width";
|
799 | value: 0;
|
800 | comment: "Border width reset";
|
801 | originalValue: "{!border-width-0}";
|
802 | name: "border-width-0";
|
803 | },
|
804 | {
|
805 | type: "size";
|
806 | category: "border-width";
|
807 | value: "1px";
|
808 | comment: "Constant border width token for border width 10";
|
809 | originalValue: "{!border-width-10}";
|
810 | name: "border-width-10";
|
811 | },
|
812 | {
|
813 | type: "size";
|
814 | category: "border-width";
|
815 | value: "2px";
|
816 | comment: "Constant border width token for border width 20";
|
817 | originalValue: "{!border-width-20}";
|
818 | name: "border-width-20";
|
819 | },
|
820 | {
|
821 | type: "size";
|
822 | category: "border-width";
|
823 | value: "4px";
|
824 | comment: "Constant border width token for border width 30";
|
825 | originalValue: "{!border-width-30}";
|
826 | name: "border-width-30";
|
827 | },
|
828 | {
|
829 | type: "size";
|
830 | category: "border-width";
|
831 | value: "8px";
|
832 | comment: "Constant border width token for border width 40";
|
833 | originalValue: "{!border-width-40}";
|
834 | name: "border-width-40";
|
835 | }
|
836 | ],
|
837 | "box-shadows": [
|
838 | {
|
839 | type: "shadow";
|
840 | category: "box-shadow";
|
841 | value: "0 4px 16px 0 rgba(18, 28, 45, 0.2)";
|
842 | comment: "Default shadow.";
|
843 | originalValue: "{!shadow-elevation-20}";
|
844 | name: "shadow";
|
845 | },
|
846 | {
|
847 | type: "shadow";
|
848 | category: "box-shadow";
|
849 | value: "0 0 0 1px #8891aa";
|
850 | comment: "Shadow border for inputs.";
|
851 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}";
|
852 | name: "shadow-border";
|
853 | },
|
854 | {
|
855 | type: "shadow";
|
856 | category: "box-shadow";
|
857 | value: "0 1px 0 #e1e3ea";
|
858 | comment: "Weaker bottom shadow border for decorative 10";
|
859 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-gray-20}";
|
860 | name: "shadow-border-bottom-decorative-10-weaker";
|
861 | },
|
862 | {
|
863 | type: "shadow";
|
864 | category: "box-shadow";
|
865 | value: "0 1px 0 #cce4ff";
|
866 | comment: "Weaker bottom shadow border for decorative 20";
|
867 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-blue-20}";
|
868 | name: "shadow-border-bottom-decorative-20-weaker";
|
869 | },
|
870 | {
|
871 | type: "shadow";
|
872 | category: "box-shadow";
|
873 | value: "0 1px 0 #d1fae0";
|
874 | comment: "Weaker bottom shadow border for decorative 30";
|
875 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-green-20}";
|
876 | name: "shadow-border-bottom-decorative-30-weaker";
|
877 | },
|
878 | {
|
879 | type: "shadow";
|
880 | category: "box-shadow";
|
881 | value: "0 1px 0 #e7dcfa";
|
882 | comment: "Weaker bottom shadow border for decorative 40";
|
883 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-purple-20}";
|
884 | name: "shadow-border-bottom-decorative-40-weaker";
|
885 | },
|
886 | {
|
887 | type: "shadow";
|
888 | category: "box-shadow";
|
889 | value: "0 1px 0 #fccfcf";
|
890 | comment: "Weaker bottom shadow border for error status";
|
891 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-red-20}";
|
892 | name: "shadow-border-bottom-error-weaker";
|
893 | },
|
894 | {
|
895 | type: "shadow";
|
896 | category: "box-shadow";
|
897 | value: "0 1px 0 #cce4ff";
|
898 | comment: "Weaker bottom shadow border for neutral status";
|
899 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-blue-20}";
|
900 | name: "shadow-border-bottom-neutral-weaker";
|
901 | },
|
902 | {
|
903 | type: "shadow";
|
904 | category: "box-shadow";
|
905 | value: "0 1px 0 #e7dcfa";
|
906 | comment: "Weaker bottom shadow border for new status";
|
907 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-purple-20}";
|
908 | name: "shadow-border-bottom-new-weaker";
|
909 | },
|
910 | {
|
911 | type: "shadow";
|
912 | category: "box-shadow";
|
913 | value: "0 1px 0 #d1fae0";
|
914 | comment: "Weaker bottom shadow border for success status";
|
915 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-green-20}";
|
916 | name: "shadow-border-bottom-success-weaker";
|
917 | },
|
918 | {
|
919 | type: "shadow";
|
920 | category: "box-shadow";
|
921 | value: "0 1px 0 #fddcc4";
|
922 | comment: "Weaker bottom shadow border for warning status";
|
923 | originalValue: "{!offset-0} 1px {!offset-0} {!palette-orange-20}";
|
924 | name: "shadow-border-bottom-warning-weaker";
|
925 | },
|
926 | {
|
927 | type: "shadow";
|
928 | category: "box-shadow";
|
929 | value: "0 0 0 1px #d61f1f";
|
930 | comment: "Shadow border for destructive interactions.";
|
931 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}";
|
932 | name: "shadow-border-destructive";
|
933 | },
|
934 | {
|
935 | type: "shadow";
|
936 | category: "box-shadow";
|
937 | value: "0 0 0 1px #750c0c";
|
938 | comment: "Strong shadow border for destructive interactions";
|
939 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}";
|
940 | name: "shadow-border-destructive-strong";
|
941 | },
|
942 | {
|
943 | type: "shadow";
|
944 | category: "box-shadow";
|
945 | value: "0 0 0 1px #4a0b0b";
|
946 | comment: "Strong shadow border for destructive interactions";
|
947 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}";
|
948 | name: "shadow-border-destructive-stronger";
|
949 | },
|
950 | {
|
951 | type: "shadow";
|
952 | category: "box-shadow";
|
953 | value: "0 0 0 1px #310c0c";
|
954 | comment: "Strongest shadow border for destructive interactions";
|
955 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-100}";
|
956 | name: "shadow-border-destructive-strongest";
|
957 | },
|
958 | {
|
959 | type: "shadow";
|
960 | category: "box-shadow";
|
961 | value: "0 0 0 1px #f6b1b1";
|
962 | comment: "Weak shadow border for destructive interactions.";
|
963 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-30}";
|
964 | name: "shadow-border-destructive-weak";
|
965 | },
|
966 | {
|
967 | type: "shadow";
|
968 | category: "box-shadow";
|
969 | value: "0 0 0 1px #fccfcf";
|
970 | comment: "Weaker shadow border for destructive interactions.";
|
971 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-20}";
|
972 | name: "shadow-border-destructive-weaker";
|
973 | },
|
974 | {
|
975 | type: "shadow";
|
976 | category: "box-shadow";
|
977 | value: "0 0 0 1px #d61f1f";
|
978 | comment: "Shadow border for error inputs.";
|
979 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-60}";
|
980 | name: "shadow-border-error";
|
981 | },
|
982 | {
|
983 | type: "shadow";
|
984 | category: "box-shadow";
|
985 | value: "0 0 0 1px #750c0c";
|
986 | comment: "Shadow border for error inputs hover.";
|
987 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-80}";
|
988 | name: "shadow-border-error-strong";
|
989 | },
|
990 | {
|
991 | type: "shadow";
|
992 | category: "box-shadow";
|
993 | value: "0 0 0 1px #4a0b0b";
|
994 | comment: "Shadow border for error inputs hover.";
|
995 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-90}";
|
996 | name: "shadow-border-error-stronger";
|
997 | },
|
998 | {
|
999 | type: "shadow";
|
1000 | category: "box-shadow";
|
1001 | value: "0 0 0 1px #eb5656";
|
1002 | comment: "Shadow border for inverse error inputs.";
|
1003 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-red-50}";
|
1004 | name: "shadow-border-error-weak";
|
1005 | },
|
1006 | {
|
1007 | type: "shadow";
|
1008 | category: "box-shadow";
|
1009 | value: "0 0 0 1px #8891aa";
|
1010 | comment: "Shadow border on interactive elements on inverse backgrounds.";
|
1011 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-50}";
|
1012 | name: "shadow-border-inverse";
|
1013 | },
|
1014 | {
|
1015 | type: "shadow";
|
1016 | category: "box-shadow";
|
1017 | value: "0 0 0 1px #e1e3ea";
|
1018 | comment: "Strong shadow border on interactive elements on inverse backgrounds.";
|
1019 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}";
|
1020 | name: "shadow-border-inverse-strong";
|
1021 | },
|
1022 | {
|
1023 | type: "shadow";
|
1024 | category: "box-shadow";
|
1025 | value: "0 0 0 1px #f4f4f6";
|
1026 | comment: "Stronger shadow border on interactive elements on inverse backgrounds.";
|
1027 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-10}";
|
1028 | name: "shadow-border-inverse-stronger";
|
1029 | },
|
1030 | {
|
1031 | type: "shadow";
|
1032 | category: "box-shadow";
|
1033 | value: "0 0 0 1px #ffffff";
|
1034 | comment: "Strongest shadow border on interactive elements on inverse backgrounds.";
|
1035 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-0}";
|
1036 | name: "shadow-border-inverse-strongest";
|
1037 | },
|
1038 | {
|
1039 | type: "shadow";
|
1040 | category: "box-shadow";
|
1041 | value: "0 0 0 1px #394762";
|
1042 | comment: "Weaker shadow border on interactive elements on inverse backgrounds.";
|
1043 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-80}";
|
1044 | name: "shadow-border-inverse-weaker";
|
1045 | },
|
1046 | {
|
1047 | type: "shadow";
|
1048 | category: "box-shadow";
|
1049 | value: "0 0 0 1px #1f304c";
|
1050 | comment: "Weakest shadow border on interactive elements on inverse backgrounds.";
|
1051 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-90}";
|
1052 | name: "shadow-border-inverse-weakest";
|
1053 | },
|
1054 | {
|
1055 | type: "shadow";
|
1056 | category: "box-shadow";
|
1057 | value: "0 0 0 1px #0263e0";
|
1058 | comment: "Default shadow border for primary interactions.";
|
1059 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-60}";
|
1060 | name: "shadow-border-primary";
|
1061 | },
|
1062 | {
|
1063 | type: "shadow";
|
1064 | category: "box-shadow";
|
1065 | value: "0 0 0 1px #001489";
|
1066 | comment: "Strong shadow border for inputs hover.";
|
1067 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-80}";
|
1068 | name: "shadow-border-primary-strong";
|
1069 | },
|
1070 | {
|
1071 | type: "shadow";
|
1072 | category: "box-shadow";
|
1073 | value: "0 0 0 1px #030b5d";
|
1074 | comment: "Stronger shadow border for inputs active.";
|
1075 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-90}";
|
1076 | name: "shadow-border-primary-stronger";
|
1077 | },
|
1078 | {
|
1079 | type: "shadow";
|
1080 | category: "box-shadow";
|
1081 | value: "0 0 0 1px #06033a";
|
1082 | comment: "Strongest shadow border for inputs active.";
|
1083 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-100}";
|
1084 | name: "shadow-border-primary-strongest";
|
1085 | },
|
1086 | {
|
1087 | type: "shadow";
|
1088 | category: "box-shadow";
|
1089 | value: "0 0 0 1px #99cdff";
|
1090 | comment: "Weaker shadow border for primary interactions.";
|
1091 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-30}";
|
1092 | name: "shadow-border-primary-weak";
|
1093 | },
|
1094 | {
|
1095 | type: "shadow";
|
1096 | category: "box-shadow";
|
1097 | value: "0 0 0 1px #cce4ff";
|
1098 | comment: "Weaker shadow border for primary interactions.";
|
1099 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-blue-20}";
|
1100 | name: "shadow-border-primary-weaker";
|
1101 | },
|
1102 | {
|
1103 | type: "shadow";
|
1104 | category: "box-shadow";
|
1105 | value: "0 0 0 1px #606b85";
|
1106 | comment: "Strong shadow border for inputs.";
|
1107 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-60}";
|
1108 | name: "shadow-border-strong";
|
1109 | },
|
1110 | {
|
1111 | type: "shadow";
|
1112 | category: "box-shadow";
|
1113 | value: "0 0 0 1px #cacdd8";
|
1114 | comment: "Weak shadow border for disabled inputs.";
|
1115 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-30}";
|
1116 | name: "shadow-border-weak";
|
1117 | },
|
1118 | {
|
1119 | type: "shadow";
|
1120 | category: "box-shadow";
|
1121 | value: "0 0 0 1px #e1e3ea";
|
1122 | comment: "Weaker shadow border for disabled inputs.";
|
1123 | originalValue: "{!offset-0} {!offset-0} {!offset-0} 1px {!palette-gray-20}";
|
1124 | name: "shadow-border-weaker";
|
1125 | },
|
1126 | {
|
1127 | type: "shadow";
|
1128 | category: "box-shadow";
|
1129 | value: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
|
1130 | comment: "Shadow for cards.";
|
1131 | originalValue: "{!shadow-elevation-10}";
|
1132 | name: "shadow-card";
|
1133 | },
|
1134 | {
|
1135 | type: "shadow";
|
1136 | category: "box-shadow";
|
1137 | value: "0 0 0 4px rgba(2, 99, 224, 0.7)";
|
1138 | comment: "Shadow for focus ring on interactive elements.";
|
1139 | originalValue: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-blue-60-transparent-70}";
|
1140 | name: "shadow-focus";
|
1141 | },
|
1142 | {
|
1143 | type: "shadow";
|
1144 | category: "box-shadow";
|
1145 | value: "inset 0 0 0 2px rgba(2, 99, 224, 0.7)";
|
1146 | comment: "Shadow for inset focus on elements, such as DataGrid cells.";
|
1147 | originalValue: "inset {!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-blue-60-transparent-70}";
|
1148 | name: "shadow-focus-inset";
|
1149 | },
|
1150 | {
|
1151 | type: "shadow";
|
1152 | category: "box-shadow";
|
1153 | value: "0 0 0 4px rgba(255, 255, 255, 0.4)";
|
1154 | comment: "Shadow for focus ring on interactive elements on inverse backgrounds.";
|
1155 | originalValue: "{!offset-0} {!offset-0} {!offset-0} {!offset-20} {!palette-gray-0-transparent-40}";
|
1156 | name: "shadow-focus-inverse";
|
1157 | },
|
1158 | {
|
1159 | type: "shadow";
|
1160 | category: "box-shadow";
|
1161 | value: "0 16px 24px 0 rgba(18, 28, 45, 0.2)";
|
1162 | comment: "High elevation default shadow.";
|
1163 | originalValue: "{!shadow-elevation-30}";
|
1164 | name: "shadow-high";
|
1165 | },
|
1166 | {
|
1167 | type: "shadow";
|
1168 | category: "box-shadow";
|
1169 | value: "0 2px 8px 0 rgba(18, 28, 45, 0.1)";
|
1170 | comment: "Low elevation default shadow.";
|
1171 | originalValue: "{!shadow-elevation-10}";
|
1172 | name: "shadow-low";
|
1173 | }
|
1174 | ],
|
1175 | "colors": [
|
1176 | {
|
1177 | type: "color";
|
1178 | category: "color";
|
1179 | value: "rgb(0, 20, 137)";
|
1180 | comment: "Default branding color";
|
1181 | originalValue: "{!palette-blue-80}";
|
1182 | name: "color-brand";
|
1183 | },
|
1184 | {
|
1185 | type: "color";
|
1186 | category: "color";
|
1187 | value: "rgb(242, 47, 70)";
|
1188 | comment: "Twilio brand red";
|
1189 | originalValue: "{!amaranth}";
|
1190 | name: "color-brand-highlight";
|
1191 | },
|
1192 | {
|
1193 | type: "color";
|
1194 | category: "color";
|
1195 | value: "rgb(0, 20, 137)";
|
1196 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1197 | uicontrol_contrast_pairing: ["color-background-body"];
|
1198 | data_visualization_contrast_pairing: ["color-data-visualization-10","color-data-visualization-2"];
|
1199 | originalValue: "{!palette-blue-80}";
|
1200 | name: "color-data-visualization-1";
|
1201 | },
|
1202 | {
|
1203 | type: "color";
|
1204 | category: "color";
|
1205 | value: "rgb(235, 86, 86)";
|
1206 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1207 | uicontrol_contrast_pairing: ["color-background-body"];
|
1208 | data_visualization_contrast_pairing: ["color-data-visualization-9","color-data-visualization-1"];
|
1209 | originalValue: "{!palette-red-50}";
|
1210 | name: "color-data-visualization-10";
|
1211 | },
|
1212 | {
|
1213 | type: "color";
|
1214 | category: "color";
|
1215 | value: "rgb(14, 124, 58)";
|
1216 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1217 | uicontrol_contrast_pairing: ["color-background-body"];
|
1218 | data_visualization_contrast_pairing: ["color-data-visualization-1","color-data-visualization-3"];
|
1219 | originalValue: "{!palette-green-70}";
|
1220 | name: "color-data-visualization-2";
|
1221 | },
|
1222 | {
|
1223 | type: "color";
|
1224 | category: "color";
|
1225 | value: "rgb(13, 58, 31)";
|
1226 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1227 | uicontrol_contrast_pairing: ["color-background-body"];
|
1228 | data_visualization_contrast_pairing: ["color-data-visualization-2","color-data-visualization-4"];
|
1229 | originalValue: "{!palette-green-90}";
|
1230 | name: "color-data-visualization-3";
|
1231 | },
|
1232 | {
|
1233 | type: "color";
|
1234 | category: "color";
|
1235 | value: "rgb(0, 140, 255)";
|
1236 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1237 | uicontrol_contrast_pairing: ["color-background-body"];
|
1238 | data_visualization_contrast_pairing: ["color-data-visualization-3","color-data-visualization-5"];
|
1239 | originalValue: "{!palette-blue-50}";
|
1240 | name: "color-data-visualization-4";
|
1241 | },
|
1242 | {
|
1243 | type: "color";
|
1244 | category: "color";
|
1245 | value: "rgb(57, 71, 98)";
|
1246 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1247 | uicontrol_contrast_pairing: ["color-background-body"];
|
1248 | data_visualization_contrast_pairing: ["color-data-visualization-4","color-data-visualization-6"];
|
1249 | originalValue: "{!palette-gray-80}";
|
1250 | name: "color-data-visualization-5";
|
1251 | },
|
1252 | {
|
1253 | type: "color";
|
1254 | category: "color";
|
1255 | value: "rgb(166, 127, 227)";
|
1256 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1257 | uicontrol_contrast_pairing: ["color-background-body"];
|
1258 | data_visualization_contrast_pairing: ["color-data-visualization-5","color-data-visualization-7"];
|
1259 | originalValue: "{!palette-purple-40}";
|
1260 | name: "color-data-visualization-6";
|
1261 | },
|
1262 | {
|
1263 | type: "color";
|
1264 | category: "color";
|
1265 | value: "rgb(109, 46, 209)";
|
1266 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1267 | uicontrol_contrast_pairing: ["color-background-body"];
|
1268 | data_visualization_contrast_pairing: ["color-data-visualization-6","color-data-visualization-8"];
|
1269 | originalValue: "{!palette-purple-60}";
|
1270 | name: "color-data-visualization-7";
|
1271 | },
|
1272 | {
|
1273 | type: "color";
|
1274 | category: "color";
|
1275 | value: "rgb(136, 145, 170)";
|
1276 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1277 | uicontrol_contrast_pairing: ["color-background-body"];
|
1278 | data_visualization_contrast_pairing: ["color-data-visualization-7","color-data-visualization-9"];
|
1279 | originalValue: "{!palette-gray-50}";
|
1280 | name: "color-data-visualization-8";
|
1281 | },
|
1282 | {
|
1283 | type: "color";
|
1284 | category: "color";
|
1285 | value: "rgb(117, 12, 12)";
|
1286 | comment: "Color used for data visualizations. Must be used in a sequence.";
|
1287 | uicontrol_contrast_pairing: ["color-background-body"];
|
1288 | data_visualization_contrast_pairing: ["color-data-visualization-8","color-data-visualization-10"];
|
1289 | originalValue: "{!palette-red-80}";
|
1290 | name: "color-data-visualization-9";
|
1291 | },
|
1292 | {
|
1293 | type: "color";
|
1294 | category: "color";
|
1295 | value: "rgb(255, 255, 255)";
|
1296 | comment: "Gray Color 0";
|
1297 | originalValue: "{!palette-gray-0}";
|
1298 | name: "color-gray-0";
|
1299 | },
|
1300 | {
|
1301 | type: "color";
|
1302 | category: "color";
|
1303 | value: "rgb(244, 244, 246)";
|
1304 | comment: "Gray Color 1";
|
1305 | originalValue: "{!palette-gray-10}";
|
1306 | name: "color-gray-10";
|
1307 | },
|
1308 | {
|
1309 | type: "color";
|
1310 | category: "color";
|
1311 | value: "rgb(18, 28, 45)";
|
1312 | comment: "Gray Color 10";
|
1313 | originalValue: "{!palette-gray-100}";
|
1314 | name: "color-gray-100";
|
1315 | },
|
1316 | {
|
1317 | type: "color";
|
1318 | category: "color";
|
1319 | value: "rgb(225, 227, 234)";
|
1320 | comment: "Gray Color 2";
|
1321 | originalValue: "{!palette-gray-20}";
|
1322 | name: "color-gray-20";
|
1323 | },
|
1324 | {
|
1325 | type: "color";
|
1326 | category: "color";
|
1327 | value: "rgb(202, 205, 216)";
|
1328 | comment: "Gray Color 3";
|
1329 | originalValue: "{!palette-gray-30}";
|
1330 | name: "color-gray-30";
|
1331 | },
|
1332 | {
|
1333 | type: "color";
|
1334 | category: "color";
|
1335 | value: "rgb(174, 178, 193)";
|
1336 | comment: "Gray Color 4";
|
1337 | originalValue: "{!palette-gray-40}";
|
1338 | name: "color-gray-40";
|
1339 | },
|
1340 | {
|
1341 | type: "color";
|
1342 | category: "color";
|
1343 | value: "rgb(136, 145, 170)";
|
1344 | comment: "Gray Color 5";
|
1345 | originalValue: "{!palette-gray-50}";
|
1346 | name: "color-gray-50";
|
1347 | },
|
1348 | {
|
1349 | type: "color";
|
1350 | category: "color";
|
1351 | value: "rgb(96, 107, 133)";
|
1352 | comment: "Gray Color 6";
|
1353 | originalValue: "{!palette-gray-60}";
|
1354 | name: "color-gray-60";
|
1355 | },
|
1356 | {
|
1357 | type: "color";
|
1358 | category: "color";
|
1359 | value: "rgb(75, 86, 113)";
|
1360 | comment: "Gray Color 7";
|
1361 | originalValue: "{!palette-gray-70}";
|
1362 | name: "color-gray-70";
|
1363 | },
|
1364 | {
|
1365 | type: "color";
|
1366 | category: "color";
|
1367 | value: "rgb(57, 71, 98)";
|
1368 | comment: "Gray Color 8";
|
1369 | originalValue: "{!palette-gray-80}";
|
1370 | name: "color-gray-80";
|
1371 | },
|
1372 | {
|
1373 | type: "color";
|
1374 | category: "color";
|
1375 | value: "rgb(31, 48, 76)";
|
1376 | comment: "Gray Color 9";
|
1377 | originalValue: "{!palette-gray-90}";
|
1378 | name: "color-gray-90";
|
1379 | }
|
1380 | ],
|
1381 | "fonts": [
|
1382 | {
|
1383 | category: "font";
|
1384 | type: "font";
|
1385 | value: "'Fira Mono', Courier, monospace";
|
1386 | originalValue: "{!font-family-20}";
|
1387 | name: "font-family-code";
|
1388 | },
|
1389 | {
|
1390 | category: "font";
|
1391 | type: "font";
|
1392 | value: "'Colfax', Helvetica, Arial, sans-serif";
|
1393 | originalValue: "{!font-family-10}";
|
1394 | name: "font-family-text";
|
1395 | },
|
1396 | {
|
1397 | category: "font";
|
1398 | type: "font";
|
1399 | value: "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif";
|
1400 | originalValue: "{!font-family-60}";
|
1401 | name: "font-family-text-chinese-simplified";
|
1402 | },
|
1403 | {
|
1404 | category: "font";
|
1405 | type: "font";
|
1406 | value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
|
1407 | originalValue: "{!font-family-50}";
|
1408 | name: "font-family-text-chinese-traditional";
|
1409 | },
|
1410 | {
|
1411 | category: "font";
|
1412 | type: "font";
|
1413 | value: "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif";
|
1414 | originalValue: "{!font-family-30}";
|
1415 | name: "font-family-text-japanese";
|
1416 | },
|
1417 | {
|
1418 | category: "font";
|
1419 | type: "font";
|
1420 | value: "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif";
|
1421 | originalValue: "{!font-family-40}";
|
1422 | name: "font-family-text-korean";
|
1423 | }
|
1424 | ],
|
1425 | "font-sizes": [
|
1426 | {
|
1427 | category: "font-size";
|
1428 | type: "font-size";
|
1429 | value: "0.625rem";
|
1430 | comment: "Constant typography token for font size 10";
|
1431 | originalValue: "{!font-size-10}";
|
1432 | name: "font-size-10";
|
1433 | },
|
1434 | {
|
1435 | category: "font-size";
|
1436 | type: "font-size";
|
1437 | value: "2.5rem";
|
1438 | comment: "Constant typography token for font size 100";
|
1439 | originalValue: "{!font-size-100}";
|
1440 | name: "font-size-100";
|
1441 | },
|
1442 | {
|
1443 | category: "font-size";
|
1444 | type: "font-size";
|
1445 | value: "3rem";
|
1446 | comment: "Constant typography token for font size 110";
|
1447 | originalValue: "{!font-size-110}";
|
1448 | name: "font-size-110";
|
1449 | },
|
1450 | {
|
1451 | category: "font-size";
|
1452 | type: "font-size";
|
1453 | value: "0.75rem";
|
1454 | comment: "Constant typography token for font size 20";
|
1455 | originalValue: "{!font-size-20}";
|
1456 | name: "font-size-20";
|
1457 | },
|
1458 | {
|
1459 | category: "font-size";
|
1460 | type: "font-size";
|
1461 | value: "0.875rem";
|
1462 | comment: "Constant typography token for font size 30";
|
1463 | originalValue: "{!font-size-30}";
|
1464 | name: "font-size-30";
|
1465 | },
|
1466 | {
|
1467 | category: "font-size";
|
1468 | type: "font-size";
|
1469 | value: "1rem";
|
1470 | comment: "Constant typography token for font size 40";
|
1471 | originalValue: "{!font-size-40}";
|
1472 | name: "font-size-40";
|
1473 | },
|
1474 | {
|
1475 | category: "font-size";
|
1476 | type: "font-size";
|
1477 | value: "1.125rem";
|
1478 | comment: "Constant typography token for font size 50";
|
1479 | originalValue: "{!font-size-50}";
|
1480 | name: "font-size-50";
|
1481 | },
|
1482 | {
|
1483 | category: "font-size";
|
1484 | type: "font-size";
|
1485 | value: "1.25rem";
|
1486 | comment: "Constant typography token for font size 60";
|
1487 | originalValue: "{!font-size-60}";
|
1488 | name: "font-size-60";
|
1489 | },
|
1490 | {
|
1491 | category: "font-size";
|
1492 | type: "font-size";
|
1493 | value: "1.5rem";
|
1494 | comment: "Constant typography token for font size 70";
|
1495 | originalValue: "{!font-size-70}";
|
1496 | name: "font-size-70";
|
1497 | },
|
1498 | {
|
1499 | category: "font-size";
|
1500 | type: "font-size";
|
1501 | value: "1.75rem";
|
1502 | comment: "Constant typography token for font size 80";
|
1503 | originalValue: "{!font-size-80}";
|
1504 | name: "font-size-80";
|
1505 | },
|
1506 | {
|
1507 | category: "font-size";
|
1508 | type: "font-size";
|
1509 | value: "2rem";
|
1510 | comment: "Constant typography token for font size 90";
|
1511 | originalValue: "{!font-size-90}";
|
1512 | name: "font-size-90";
|
1513 | }
|
1514 | ],
|
1515 | "font-weights": [
|
1516 | {
|
1517 | category: "font-weight";
|
1518 | type: "font-weight";
|
1519 | value: 700;
|
1520 | comment: "Font weight for bold weight";
|
1521 | originalValue: "{!font-weight-bold}";
|
1522 | name: "font-weight-bold";
|
1523 | },
|
1524 | {
|
1525 | category: "font-weight";
|
1526 | type: "font-weight";
|
1527 | value: 400;
|
1528 | comment: "Font weight for light weight";
|
1529 | originalValue: "{!font-weight-normal}";
|
1530 | name: "font-weight-light";
|
1531 | },
|
1532 | {
|
1533 | category: "font-weight";
|
1534 | type: "font-weight";
|
1535 | value: 500;
|
1536 | comment: "Font weight for medium weight";
|
1537 | originalValue: "{!font-weight-medium}";
|
1538 | name: "font-weight-medium";
|
1539 | },
|
1540 | {
|
1541 | category: "font-weight";
|
1542 | type: "font-weight";
|
1543 | value: 400;
|
1544 | comment: "Font weight for normal weight";
|
1545 | originalValue: "{!font-weight-normal}";
|
1546 | name: "font-weight-normal";
|
1547 | },
|
1548 | {
|
1549 | category: "font-weight";
|
1550 | type: "font-weight";
|
1551 | value: 600;
|
1552 | comment: "Font weight for semibold weight";
|
1553 | originalValue: "{!font-weight-semibold}";
|
1554 | name: "font-weight-semibold";
|
1555 | }
|
1556 | ],
|
1557 | "line-heights": [
|
1558 | {
|
1559 | category: "line-height";
|
1560 | type: "number";
|
1561 | value: 0;
|
1562 | comment: "Constant line-height token for line-height 0";
|
1563 | originalValue: "{!line-height-0}";
|
1564 | name: "line-height-0";
|
1565 | },
|
1566 | {
|
1567 | category: "line-height";
|
1568 | type: "number";
|
1569 | value: "1rem";
|
1570 | comment: "Constant line-height token for line-height 10";
|
1571 | originalValue: "{!line-height-10}";
|
1572 | name: "line-height-10";
|
1573 | },
|
1574 | {
|
1575 | category: "line-height";
|
1576 | type: "number";
|
1577 | value: "3.25rem";
|
1578 | comment: "Constant line-height token for line-height 100";
|
1579 | originalValue: "{!line-height-100}";
|
1580 | name: "line-height-100";
|
1581 | },
|
1582 | {
|
1583 | category: "line-height";
|
1584 | type: "number";
|
1585 | value: "4rem";
|
1586 | comment: "Constant line-height token for line-height 110";
|
1587 | originalValue: "{!line-height-110}";
|
1588 | name: "line-height-110";
|
1589 | },
|
1590 | {
|
1591 | category: "line-height";
|
1592 | type: "number";
|
1593 | value: "1.25rem";
|
1594 | comment: "Constant line-height token for line-height 20";
|
1595 | originalValue: "{!line-height-20}";
|
1596 | name: "line-height-20";
|
1597 | },
|
1598 | {
|
1599 | category: "line-height";
|
1600 | type: "number";
|
1601 | value: "1.25rem";
|
1602 | comment: "Constant line-height token for line-height 30";
|
1603 | originalValue: "{!line-height-30}";
|
1604 | name: "line-height-30";
|
1605 | },
|
1606 | {
|
1607 | category: "line-height";
|
1608 | type: "number";
|
1609 | value: "1.5rem";
|
1610 | comment: "Constant line-height token for line-height 40";
|
1611 | originalValue: "{!line-height-40}";
|
1612 | name: "line-height-40";
|
1613 | },
|
1614 | {
|
1615 | category: "line-height";
|
1616 | type: "number";
|
1617 | value: "1.75rem";
|
1618 | comment: "Constant line-height token for line-height 50";
|
1619 | originalValue: "{!line-height-50}";
|
1620 | name: "line-height-50";
|
1621 | },
|
1622 | {
|
1623 | category: "line-height";
|
1624 | type: "number";
|
1625 | value: "1.75rem";
|
1626 | comment: "Constant line-height token for line-height 60";
|
1627 | originalValue: "{!line-height-60}";
|
1628 | name: "line-height-60";
|
1629 | },
|
1630 | {
|
1631 | category: "line-height";
|
1632 | type: "number";
|
1633 | value: "2rem";
|
1634 | comment: "Constant line-height token for line-height 70";
|
1635 | originalValue: "{!line-height-70}";
|
1636 | name: "line-height-70";
|
1637 | },
|
1638 | {
|
1639 | category: "line-height";
|
1640 | type: "number";
|
1641 | value: "2.5rem";
|
1642 | comment: "Constant line-height token for line-height 80";
|
1643 | originalValue: "{!line-height-80}";
|
1644 | name: "line-height-80";
|
1645 | },
|
1646 | {
|
1647 | category: "line-height";
|
1648 | type: "number";
|
1649 | value: "2.75rem";
|
1650 | comment: "Constant line-height token for line-height 90";
|
1651 | originalValue: "{!line-height-90}";
|
1652 | name: "line-height-90";
|
1653 | }
|
1654 | ],
|
1655 | "radii": [
|
1656 | {
|
1657 | type: "size";
|
1658 | category: "radius";
|
1659 | value: 0;
|
1660 | comment: "Border radius reset";
|
1661 | originalValue: "{!border-radius-0}";
|
1662 | name: "border-radius-0";
|
1663 | },
|
1664 | {
|
1665 | type: "size";
|
1666 | category: "radius";
|
1667 | value: "2px";
|
1668 | comment: "Small border radius";
|
1669 | originalValue: "{!border-radius-10}";
|
1670 | name: "border-radius-10";
|
1671 | },
|
1672 | {
|
1673 | type: "size";
|
1674 | category: "radius";
|
1675 | value: "4px";
|
1676 | comment: "Large border radius";
|
1677 | originalValue: "{!border-radius-20}";
|
1678 | name: "border-radius-20";
|
1679 | },
|
1680 | {
|
1681 | type: "size";
|
1682 | category: "radius";
|
1683 | value: "8px";
|
1684 | comment: "Larger border radius";
|
1685 | originalValue: "{!border-radius-30}";
|
1686 | name: "border-radius-30";
|
1687 | },
|
1688 | {
|
1689 | type: "size";
|
1690 | category: "radius";
|
1691 | value: "50%";
|
1692 | comment: "Circular border radius";
|
1693 | originalValue: "{!border-radius-circle}";
|
1694 | name: "border-radius-circle";
|
1695 | },
|
1696 | {
|
1697 | type: "size";
|
1698 | category: "radius";
|
1699 | value: "100px";
|
1700 | comment: "Pill border radius";
|
1701 | originalValue: "{!border-radius-pill}";
|
1702 | name: "border-radius-pill";
|
1703 | }
|
1704 | ],
|
1705 | "sizings": [
|
1706 | {
|
1707 | type: "size";
|
1708 | category: "sizing";
|
1709 | value: 0;
|
1710 | comment: "Generic sizing token scale for UI components.";
|
1711 | originalValue: "{!size-0}";
|
1712 | name: "size-0";
|
1713 | },
|
1714 | {
|
1715 | type: "size";
|
1716 | category: "sizing";
|
1717 | value: "5.5rem";
|
1718 | comment: "Generic sizing token scale for UI components.";
|
1719 | originalValue: "{!size-10}";
|
1720 | name: "size-10";
|
1721 | },
|
1722 | {
|
1723 | type: "size";
|
1724 | category: "sizing";
|
1725 | value: "64rem";
|
1726 | comment: "Generic sizing token scale for UI components.";
|
1727 | originalValue: "{!size-100}";
|
1728 | name: "size-100";
|
1729 | },
|
1730 | {
|
1731 | type: "size";
|
1732 | category: "sizing";
|
1733 | value: "70.5rem";
|
1734 | comment: "Generic sizing token scale for UI components.";
|
1735 | originalValue: "{!size-110}";
|
1736 | name: "size-110";
|
1737 | },
|
1738 | {
|
1739 | type: "size";
|
1740 | category: "sizing";
|
1741 | value: "77rem";
|
1742 | comment: "Generic sizing token scale for UI components.";
|
1743 | originalValue: "{!size-120}";
|
1744 | name: "size-120";
|
1745 | },
|
1746 | {
|
1747 | type: "size";
|
1748 | category: "sizing";
|
1749 | value: "12rem";
|
1750 | comment: "Generic sizing token scale for UI components.";
|
1751 | originalValue: "{!size-20}";
|
1752 | name: "size-20";
|
1753 | },
|
1754 | {
|
1755 | type: "size";
|
1756 | category: "sizing";
|
1757 | value: "18.5rem";
|
1758 | comment: "Generic sizing token scale for UI components.";
|
1759 | originalValue: "{!size-30}";
|
1760 | name: "size-30";
|
1761 | },
|
1762 | {
|
1763 | type: "size";
|
1764 | category: "sizing";
|
1765 | value: "25rem";
|
1766 | comment: "Generic sizing token scale for UI components.";
|
1767 | originalValue: "{!size-40}";
|
1768 | name: "size-40";
|
1769 | },
|
1770 | {
|
1771 | type: "size";
|
1772 | category: "sizing";
|
1773 | value: "31.5rem";
|
1774 | comment: "Generic sizing token scale for UI components.";
|
1775 | originalValue: "{!size-50}";
|
1776 | name: "size-50";
|
1777 | },
|
1778 | {
|
1779 | type: "size";
|
1780 | category: "sizing";
|
1781 | value: "38rem";
|
1782 | comment: "Generic sizing token scale for UI components.";
|
1783 | originalValue: "{!size-60}";
|
1784 | name: "size-60";
|
1785 | },
|
1786 | {
|
1787 | type: "size";
|
1788 | category: "sizing";
|
1789 | value: "44.5rem";
|
1790 | comment: "Generic sizing token scale for UI components.";
|
1791 | originalValue: "{!size-70}";
|
1792 | name: "size-70";
|
1793 | },
|
1794 | {
|
1795 | type: "size";
|
1796 | category: "sizing";
|
1797 | value: "51rem";
|
1798 | comment: "Generic sizing token scale for UI components.";
|
1799 | originalValue: "{!size-80}";
|
1800 | name: "size-80";
|
1801 | },
|
1802 | {
|
1803 | type: "size";
|
1804 | category: "sizing";
|
1805 | value: "57.5rem";
|
1806 | comment: "Generic sizing token scale for UI components.";
|
1807 | originalValue: "{!size-90}";
|
1808 | name: "size-90";
|
1809 | },
|
1810 | {
|
1811 | type: "size";
|
1812 | category: "sizing";
|
1813 | value: "1rem";
|
1814 | comment: "Maps to line-height tokens 1:1";
|
1815 | originalValue: "{!line-height-10}";
|
1816 | name: "size-icon-10";
|
1817 | },
|
1818 | {
|
1819 | type: "size";
|
1820 | category: "sizing";
|
1821 | value: "3.25rem";
|
1822 | comment: "Maps to line-height tokens 1:1";
|
1823 | originalValue: "{!line-height-100}";
|
1824 | name: "size-icon-100";
|
1825 | },
|
1826 | {
|
1827 | type: "size";
|
1828 | category: "sizing";
|
1829 | value: "4rem";
|
1830 | comment: "Maps to line-height tokens 1:1";
|
1831 | originalValue: "{!line-height-110}";
|
1832 | name: "size-icon-110";
|
1833 | },
|
1834 | {
|
1835 | type: "size";
|
1836 | category: "sizing";
|
1837 | value: "1.25rem";
|
1838 | comment: "Maps to line-height tokens 1:1";
|
1839 | originalValue: "{!line-height-20}";
|
1840 | name: "size-icon-20";
|
1841 | },
|
1842 | {
|
1843 | type: "size";
|
1844 | category: "sizing";
|
1845 | value: "1.25rem";
|
1846 | comment: "Maps to line-height tokens 1:1";
|
1847 | originalValue: "{!line-height-30}";
|
1848 | name: "size-icon-30";
|
1849 | },
|
1850 | {
|
1851 | type: "size";
|
1852 | category: "sizing";
|
1853 | value: "1.5rem";
|
1854 | comment: "Maps to line-height tokens 1:1";
|
1855 | originalValue: "{!line-height-40}";
|
1856 | name: "size-icon-40";
|
1857 | },
|
1858 | {
|
1859 | type: "size";
|
1860 | category: "sizing";
|
1861 | value: "1.75rem";
|
1862 | comment: "Maps to line-height tokens 1:1";
|
1863 | originalValue: "{!line-height-50}";
|
1864 | name: "size-icon-50";
|
1865 | },
|
1866 | {
|
1867 | type: "size";
|
1868 | category: "sizing";
|
1869 | value: "1.75rem";
|
1870 | comment: "Maps to line-height tokens 1:1";
|
1871 | originalValue: "{!line-height-60}";
|
1872 | name: "size-icon-60";
|
1873 | },
|
1874 | {
|
1875 | type: "size";
|
1876 | category: "sizing";
|
1877 | value: "2rem";
|
1878 | comment: "Maps to line-height tokens 1:1";
|
1879 | originalValue: "{!line-height-70}";
|
1880 | name: "size-icon-70";
|
1881 | },
|
1882 | {
|
1883 | type: "size";
|
1884 | category: "sizing";
|
1885 | value: "2.5rem";
|
1886 | comment: "Maps to line-height tokens 1:1";
|
1887 | originalValue: "{!line-height-80}";
|
1888 | name: "size-icon-80";
|
1889 | },
|
1890 | {
|
1891 | type: "size";
|
1892 | category: "sizing";
|
1893 | value: "2.75rem";
|
1894 | comment: "Maps to line-height tokens 1:1";
|
1895 | originalValue: "{!line-height-90}";
|
1896 | name: "size-icon-90";
|
1897 | },
|
1898 | {
|
1899 | type: "size";
|
1900 | category: "sizing";
|
1901 | value: "13.75rem";
|
1902 | comment: "Sizing token for sidebar width.";
|
1903 | originalValue: "{!size-sidebar}";
|
1904 | name: "size-sidebar";
|
1905 | },
|
1906 | {
|
1907 | type: "size";
|
1908 | category: "sizing";
|
1909 | value: 0;
|
1910 | comment: "Generic square sizing token scale for UI components.";
|
1911 | originalValue: "{!size-square-0}";
|
1912 | name: "size-square-0";
|
1913 | },
|
1914 | {
|
1915 | type: "size";
|
1916 | category: "sizing";
|
1917 | value: "0.125rem";
|
1918 | comment: "Generic square sizing token scale for UI components.";
|
1919 | originalValue: "{!size-square-10}";
|
1920 | name: "size-square-10";
|
1921 | },
|
1922 | {
|
1923 | type: "size";
|
1924 | category: "sizing";
|
1925 | value: "2.25rem";
|
1926 | comment: "Generic square sizing token scale for UI components.";
|
1927 | originalValue: "{!size-square-100}";
|
1928 | name: "size-square-100";
|
1929 | },
|
1930 | {
|
1931 | type: "size";
|
1932 | category: "sizing";
|
1933 | value: "2.5rem";
|
1934 | comment: "Generic square sizing token scale for UI components.";
|
1935 | originalValue: "{!size-square-110}";
|
1936 | name: "size-square-110";
|
1937 | },
|
1938 | {
|
1939 | type: "size";
|
1940 | category: "sizing";
|
1941 | value: "2.75rem";
|
1942 | comment: "Generic square sizing token scale for UI components.";
|
1943 | originalValue: "{!size-square-120}";
|
1944 | name: "size-square-120";
|
1945 | },
|
1946 | {
|
1947 | type: "size";
|
1948 | category: "sizing";
|
1949 | value: "3rem";
|
1950 | comment: "Generic square sizing token scale for UI components.";
|
1951 | originalValue: "{!size-square-130}";
|
1952 | name: "size-square-130";
|
1953 | },
|
1954 | {
|
1955 | type: "size";
|
1956 | category: "sizing";
|
1957 | value: "3.25rem";
|
1958 | comment: "Generic square sizing token scale for UI components.";
|
1959 | originalValue: "{!size-square-140}";
|
1960 | name: "size-square-140";
|
1961 | },
|
1962 | {
|
1963 | type: "size";
|
1964 | category: "sizing";
|
1965 | value: "3.5rem";
|
1966 | comment: "Generic square sizing token scale for UI components.";
|
1967 | originalValue: "{!size-square-150}";
|
1968 | name: "size-square-150";
|
1969 | },
|
1970 | {
|
1971 | type: "size";
|
1972 | category: "sizing";
|
1973 | value: "3.75rem";
|
1974 | comment: "Generic square sizing token scale for UI components.";
|
1975 | originalValue: "{!size-square-160}";
|
1976 | name: "size-square-160";
|
1977 | },
|
1978 | {
|
1979 | type: "size";
|
1980 | category: "sizing";
|
1981 | value: "4rem";
|
1982 | comment: "Generic square sizing token scale for UI components.";
|
1983 | originalValue: "{!size-square-170}";
|
1984 | name: "size-square-170";
|
1985 | },
|
1986 | {
|
1987 | type: "size";
|
1988 | category: "sizing";
|
1989 | value: "4.25rem";
|
1990 | comment: "Generic square sizing token scale for UI components.";
|
1991 | originalValue: "{!size-square-180}";
|
1992 | name: "size-square-180";
|
1993 | },
|
1994 | {
|
1995 | type: "size";
|
1996 | category: "sizing";
|
1997 | value: "4.5rem";
|
1998 | comment: "Generic square sizing token scale for UI components.";
|
1999 | originalValue: "{!size-square-190}";
|
2000 | name: "size-square-190";
|
2001 | },
|
2002 | {
|
2003 | type: "size";
|
2004 | category: "sizing";
|
2005 | value: "0.25rem";
|
2006 | comment: "Generic square sizing token scale for UI components.";
|
2007 | originalValue: "{!size-square-20}";
|
2008 | name: "size-square-20";
|
2009 | },
|
2010 | {
|
2011 | type: "size";
|
2012 | category: "sizing";
|
2013 | value: "4.75rem";
|
2014 | comment: "Generic square sizing token scale for UI components.";
|
2015 | originalValue: "{!size-square-200}";
|
2016 | name: "size-square-200";
|
2017 | },
|
2018 | {
|
2019 | type: "size";
|
2020 | category: "sizing";
|
2021 | value: "0.375rem";
|
2022 | comment: "Generic square sizing token scale for UI components.";
|
2023 | originalValue: "{!size-square-25}";
|
2024 | name: "size-square-25";
|
2025 | },
|
2026 | {
|
2027 | type: "size";
|
2028 | category: "sizing";
|
2029 | value: "0.5rem";
|
2030 | comment: "Generic square sizing token scale for UI components.";
|
2031 | originalValue: "{!size-square-30}";
|
2032 | name: "size-square-30";
|
2033 | },
|
2034 | {
|
2035 | type: "size";
|
2036 | category: "sizing";
|
2037 | value: "0.75rem";
|
2038 | comment: "Generic square sizing token scale for UI components.";
|
2039 | originalValue: "{!size-square-40}";
|
2040 | name: "size-square-40";
|
2041 | },
|
2042 | {
|
2043 | type: "size";
|
2044 | category: "sizing";
|
2045 | value: "1rem";
|
2046 | comment: "Generic square sizing token scale for UI components.";
|
2047 | originalValue: "{!size-square-50}";
|
2048 | name: "size-square-50";
|
2049 | },
|
2050 | {
|
2051 | type: "size";
|
2052 | category: "sizing";
|
2053 | value: "1.25rem";
|
2054 | comment: "Generic square sizing token scale for UI components.";
|
2055 | originalValue: "{!size-square-60}";
|
2056 | name: "size-square-60";
|
2057 | },
|
2058 | {
|
2059 | type: "size";
|
2060 | category: "sizing";
|
2061 | value: "1.5rem";
|
2062 | comment: "Generic square sizing token scale for UI components.";
|
2063 | originalValue: "{!size-square-70}";
|
2064 | name: "size-square-70";
|
2065 | },
|
2066 | {
|
2067 | type: "size";
|
2068 | category: "sizing";
|
2069 | value: "1.75rem";
|
2070 | comment: "Generic square sizing token scale for UI components.";
|
2071 | originalValue: "{!size-square-80}";
|
2072 | name: "size-square-80";
|
2073 | },
|
2074 | {
|
2075 | type: "size";
|
2076 | category: "sizing";
|
2077 | value: "2rem";
|
2078 | comment: "Generic square sizing token scale for UI components.";
|
2079 | originalValue: "{!size-square-90}";
|
2080 | name: "size-square-90";
|
2081 | }
|
2082 | ],
|
2083 | "spacings": [
|
2084 | {
|
2085 | category: "spacing";
|
2086 | type: "size";
|
2087 | value: 0;
|
2088 | originalValue: "{!space-0}";
|
2089 | name: "space-0";
|
2090 | },
|
2091 | {
|
2092 | category: "spacing";
|
2093 | type: "size";
|
2094 | value: "0.125rem";
|
2095 | originalValue: "{!space-10}";
|
2096 | name: "space-10";
|
2097 | },
|
2098 | {
|
2099 | category: "spacing";
|
2100 | type: "size";
|
2101 | value: "2.25rem";
|
2102 | originalValue: "{!space-100}";
|
2103 | name: "space-100";
|
2104 | },
|
2105 | {
|
2106 | category: "spacing";
|
2107 | type: "size";
|
2108 | value: "2.5rem";
|
2109 | originalValue: "{!space-110}";
|
2110 | name: "space-110";
|
2111 | },
|
2112 | {
|
2113 | category: "spacing";
|
2114 | type: "size";
|
2115 | value: "2.75rem";
|
2116 | originalValue: "{!space-120}";
|
2117 | name: "space-120";
|
2118 | },
|
2119 | {
|
2120 | category: "spacing";
|
2121 | type: "size";
|
2122 | value: "3rem";
|
2123 | originalValue: "{!space-130}";
|
2124 | name: "space-130";
|
2125 | },
|
2126 | {
|
2127 | category: "spacing";
|
2128 | type: "size";
|
2129 | value: "3.25rem";
|
2130 | originalValue: "{!space-140}";
|
2131 | name: "space-140";
|
2132 | },
|
2133 | {
|
2134 | category: "spacing";
|
2135 | type: "size";
|
2136 | value: "3.5rem";
|
2137 | originalValue: "{!space-150}";
|
2138 | name: "space-150";
|
2139 | },
|
2140 | {
|
2141 | category: "spacing";
|
2142 | type: "size";
|
2143 | value: "3.75rem";
|
2144 | originalValue: "{!space-160}";
|
2145 | name: "space-160";
|
2146 | },
|
2147 | {
|
2148 | category: "spacing";
|
2149 | type: "size";
|
2150 | value: "4rem";
|
2151 | originalValue: "{!space-170}";
|
2152 | name: "space-170";
|
2153 | },
|
2154 | {
|
2155 | category: "spacing";
|
2156 | type: "size";
|
2157 | value: "4.25rem";
|
2158 | originalValue: "{!space-180}";
|
2159 | name: "space-180";
|
2160 | },
|
2161 | {
|
2162 | category: "spacing";
|
2163 | type: "size";
|
2164 | value: "4.5rem";
|
2165 | originalValue: "{!space-190}";
|
2166 | name: "space-190";
|
2167 | },
|
2168 | {
|
2169 | category: "spacing";
|
2170 | type: "size";
|
2171 | value: "0.25rem";
|
2172 | originalValue: "{!space-20}";
|
2173 | name: "space-20";
|
2174 | },
|
2175 | {
|
2176 | category: "spacing";
|
2177 | type: "size";
|
2178 | value: "4.75rem";
|
2179 | originalValue: "{!space-200}";
|
2180 | name: "space-200";
|
2181 | },
|
2182 | {
|
2183 | category: "spacing";
|
2184 | type: "size";
|
2185 | value: "0.5rem";
|
2186 | originalValue: "{!space-30}";
|
2187 | name: "space-30";
|
2188 | },
|
2189 | {
|
2190 | category: "spacing";
|
2191 | type: "size";
|
2192 | value: "0.75rem";
|
2193 | originalValue: "{!space-40}";
|
2194 | name: "space-40";
|
2195 | },
|
2196 | {
|
2197 | category: "spacing";
|
2198 | type: "size";
|
2199 | value: "1rem";
|
2200 | originalValue: "{!space-50}";
|
2201 | name: "space-50";
|
2202 | },
|
2203 | {
|
2204 | category: "spacing";
|
2205 | type: "size";
|
2206 | value: "1.25rem";
|
2207 | originalValue: "{!space-60}";
|
2208 | name: "space-60";
|
2209 | },
|
2210 | {
|
2211 | category: "spacing";
|
2212 | type: "size";
|
2213 | value: "1.5rem";
|
2214 | originalValue: "{!space-70}";
|
2215 | name: "space-70";
|
2216 | },
|
2217 | {
|
2218 | category: "spacing";
|
2219 | type: "size";
|
2220 | value: "1.75rem";
|
2221 | originalValue: "{!space-80}";
|
2222 | name: "space-80";
|
2223 | },
|
2224 | {
|
2225 | category: "spacing";
|
2226 | type: "size";
|
2227 | value: "2rem";
|
2228 | originalValue: "{!space-90}";
|
2229 | name: "space-90";
|
2230 | },
|
2231 | {
|
2232 | category: "spacing";
|
2233 | type: "size";
|
2234 | value: "-0.125rem";
|
2235 | originalValue: "-{!space-10}";
|
2236 | name: "space-negative-10";
|
2237 | },
|
2238 | {
|
2239 | category: "spacing";
|
2240 | type: "size";
|
2241 | value: "-2.25rem";
|
2242 | originalValue: "-{!space-100}";
|
2243 | name: "space-negative-100";
|
2244 | },
|
2245 | {
|
2246 | category: "spacing";
|
2247 | type: "size";
|
2248 | value: "-2.5rem";
|
2249 | originalValue: "-{!space-110}";
|
2250 | name: "space-negative-110";
|
2251 | },
|
2252 | {
|
2253 | category: "spacing";
|
2254 | type: "size";
|
2255 | value: "-2.75rem";
|
2256 | originalValue: "-{!space-120}";
|
2257 | name: "space-negative-120";
|
2258 | },
|
2259 | {
|
2260 | category: "spacing";
|
2261 | type: "size";
|
2262 | value: "-3rem";
|
2263 | originalValue: "-{!space-130}";
|
2264 | name: "space-negative-130";
|
2265 | },
|
2266 | {
|
2267 | category: "spacing";
|
2268 | type: "size";
|
2269 | value: "-3.25rem";
|
2270 | originalValue: "-{!space-140}";
|
2271 | name: "space-negative-140";
|
2272 | },
|
2273 | {
|
2274 | category: "spacing";
|
2275 | type: "size";
|
2276 | value: "-3.5rem";
|
2277 | originalValue: "-{!space-150}";
|
2278 | name: "space-negative-150";
|
2279 | },
|
2280 | {
|
2281 | category: "spacing";
|
2282 | type: "size";
|
2283 | value: "-3.75rem";
|
2284 | originalValue: "-{!space-160}";
|
2285 | name: "space-negative-160";
|
2286 | },
|
2287 | {
|
2288 | category: "spacing";
|
2289 | type: "size";
|
2290 | value: "-4rem";
|
2291 | originalValue: "-{!space-170}";
|
2292 | name: "space-negative-170";
|
2293 | },
|
2294 | {
|
2295 | category: "spacing";
|
2296 | type: "size";
|
2297 | value: "-4.25rem";
|
2298 | originalValue: "-{!space-180}";
|
2299 | name: "space-negative-180";
|
2300 | },
|
2301 | {
|
2302 | category: "spacing";
|
2303 | type: "size";
|
2304 | value: "-4.5rem";
|
2305 | originalValue: "-{!space-190}";
|
2306 | name: "space-negative-190";
|
2307 | },
|
2308 | {
|
2309 | category: "spacing";
|
2310 | type: "size";
|
2311 | value: "-0.25rem";
|
2312 | originalValue: "-{!space-20}";
|
2313 | name: "space-negative-20";
|
2314 | },
|
2315 | {
|
2316 | category: "spacing";
|
2317 | type: "size";
|
2318 | value: "-4.75rem";
|
2319 | originalValue: "-{!space-200}";
|
2320 | name: "space-negative-200";
|
2321 | },
|
2322 | {
|
2323 | category: "spacing";
|
2324 | type: "size";
|
2325 | value: "-0.5rem";
|
2326 | originalValue: "-{!space-30}";
|
2327 | name: "space-negative-30";
|
2328 | },
|
2329 | {
|
2330 | category: "spacing";
|
2331 | type: "size";
|
2332 | value: "-0.75rem";
|
2333 | originalValue: "-{!space-40}";
|
2334 | name: "space-negative-40";
|
2335 | },
|
2336 | {
|
2337 | category: "spacing";
|
2338 | type: "size";
|
2339 | value: "-1rem";
|
2340 | originalValue: "-{!space-50}";
|
2341 | name: "space-negative-50";
|
2342 | },
|
2343 | {
|
2344 | category: "spacing";
|
2345 | type: "size";
|
2346 | value: "-1.25rem";
|
2347 | originalValue: "-{!space-60}";
|
2348 | name: "space-negative-60";
|
2349 | },
|
2350 | {
|
2351 | category: "spacing";
|
2352 | type: "size";
|
2353 | value: "-1.5rem";
|
2354 | originalValue: "-{!space-70}";
|
2355 | name: "space-negative-70";
|
2356 | },
|
2357 | {
|
2358 | category: "spacing";
|
2359 | type: "size";
|
2360 | value: "-1.75rem";
|
2361 | originalValue: "-{!space-80}";
|
2362 | name: "space-negative-80";
|
2363 | },
|
2364 | {
|
2365 | category: "spacing";
|
2366 | type: "size";
|
2367 | value: "-2rem";
|
2368 | originalValue: "-{!space-90}";
|
2369 | name: "space-negative-90";
|
2370 | }
|
2371 | ],
|
2372 | "text-colors": [
|
2373 | {
|
2374 | type: "color";
|
2375 | category: "text-color";
|
2376 | value: "rgb(18, 28, 45)";
|
2377 | comment: "Body text color";
|
2378 | text_contrast_pairing: ["color-background","color-background-strong","color-background-stronger","color-background-body","color-background-user","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weak","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weak","color-background-destructive-weaker","color-background-destructive-weakest"];
|
2379 | originalValue: "{!palette-gray-100}";
|
2380 | name: "color-text";
|
2381 | },
|
2382 | {
|
2383 | type: "color";
|
2384 | category: "text-color";
|
2385 | value: "rgb(242, 47, 70)";
|
2386 | comment: "Twilio brand red, accessible on large text only.";
|
2387 | uicontrol_contrast_pairing: ["color-background-body"];
|
2388 | originalValue: "{!amaranth}";
|
2389 | name: "color-text-brand-highlight";
|
2390 | },
|
2391 | {
|
2392 | type: "color";
|
2393 | category: "text-color";
|
2394 | value: "rgb(255, 255, 255)";
|
2395 | comment: "Text color used on any brand color";
|
2396 | text_contrast_pairing: ["color-background-body-inverse","color-background-brand"];
|
2397 | originalValue: "{!white}";
|
2398 | name: "color-text-brand-inverse";
|
2399 | },
|
2400 | {
|
2401 | type: "color";
|
2402 | category: "text-color";
|
2403 | value: "rgb(96, 107, 133)";
|
2404 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2405 | text_contrast_pairing: ["color-background","color-background-body","color-background-decorative-10"];
|
2406 | originalValue: "{!palette-gray-60}";
|
2407 | name: "color-text-decorative-10";
|
2408 | },
|
2409 | {
|
2410 | type: "color";
|
2411 | category: "text-color";
|
2412 | value: "rgb(0, 20, 137)";
|
2413 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2414 | text_contrast_pairing: ["color-background","color-background-body","color-background-decorative-20"];
|
2415 | originalValue: "{!palette-blue-80}";
|
2416 | name: "color-text-decorative-20";
|
2417 | },
|
2418 | {
|
2419 | type: "color";
|
2420 | category: "text-color";
|
2421 | value: "rgb(14, 124, 58)";
|
2422 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2423 | text_contrast_pairing: ["color-background","color-background-body","color-background-decorative-30"];
|
2424 | originalValue: "{!palette-green-70}";
|
2425 | name: "color-text-decorative-30";
|
2426 | },
|
2427 | {
|
2428 | type: "color";
|
2429 | category: "text-color";
|
2430 | value: "rgb(109, 46, 209)";
|
2431 | comment: "Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.";
|
2432 | text_contrast_pairing: ["color-background","color-background-body","color-background-decorative-40"];
|
2433 | originalValue: "{!palette-purple-60}";
|
2434 | name: "color-text-decorative-40";
|
2435 | },
|
2436 | {
|
2437 | type: "color";
|
2438 | category: "text-color";
|
2439 | value: "rgb(214, 31, 31)";
|
2440 | comment: "Error text for inputs and error misc";
|
2441 | text_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2442 | originalValue: "{!palette-red-60}";
|
2443 | name: "color-text-error";
|
2444 | },
|
2445 | {
|
2446 | type: "color";
|
2447 | category: "text-color";
|
2448 | value: "rgb(173, 17, 17)";
|
2449 | comment: "Strong error text for inputs and error misc";
|
2450 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2451 | originalValue: "{!palette-red-70}";
|
2452 | name: "color-text-error-strong";
|
2453 | },
|
2454 | {
|
2455 | type: "color";
|
2456 | category: "text-color";
|
2457 | value: "rgb(235, 86, 86)";
|
2458 | comment: "Weak error text for inputs and error misc";
|
2459 | originalValue: "{!palette-red-50}";
|
2460 | name: "color-text-error-weak";
|
2461 | },
|
2462 | {
|
2463 | type: "color";
|
2464 | category: "text-color";
|
2465 | value: "rgb(96, 107, 133)";
|
2466 | comment: "Default icon color.";
|
2467 | text_contrast_pairing: ["color-background","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2468 | uicontrol_contrast_pairing: ["color-background","color-background-strong","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weaker","color-background-destructive-weakest"];
|
2469 | originalValue: "{!palette-gray-60}";
|
2470 | name: "color-text-icon";
|
2471 | },
|
2472 | {
|
2473 | type: "color";
|
2474 | category: "text-color";
|
2475 | value: "rgb(14, 124, 58)";
|
2476 | comment: "Icon color for indicating a available status";
|
2477 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2478 | originalValue: "{!palette-green-70}";
|
2479 | name: "color-text-icon-available";
|
2480 | },
|
2481 | {
|
2482 | type: "color";
|
2483 | category: "text-color";
|
2484 | value: "rgb(242, 47, 70)";
|
2485 | comment: "Twilio brand red icon color used for the Twilio logo.";
|
2486 | uicontrol_contrast_pairing: ["color-background","color-background-body"];
|
2487 | originalValue: "{!amaranth}";
|
2488 | name: "color-text-icon-brand-highlight";
|
2489 | },
|
2490 | {
|
2491 | type: "color";
|
2492 | category: "text-color";
|
2493 | value: "rgb(255, 255, 255)";
|
2494 | comment: "Twilio brand icon color used for the Twilio logo on inverse backgrounds.";
|
2495 | text_contrast_pairing: ["color-background-body-inverse"];
|
2496 | originalValue: "{!palette-gray-0}";
|
2497 | name: "color-text-icon-brand-inverse";
|
2498 | },
|
2499 | {
|
2500 | type: "color";
|
2501 | category: "text-color";
|
2502 | value: "rgb(227, 106, 25)";
|
2503 | comment: "Icon color for indicating a busy status";
|
2504 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2505 | originalValue: "{!palette-orange-65}";
|
2506 | name: "color-text-icon-busy";
|
2507 | },
|
2508 | {
|
2509 | type: "color";
|
2510 | category: "text-color";
|
2511 | value: "rgb(214, 31, 31)";
|
2512 | comment: "Icon color for indicating an error.";
|
2513 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-error-weakest","color-background-row-striped"];
|
2514 | originalValue: "{!palette-red-60}";
|
2515 | name: "color-text-icon-error";
|
2516 | },
|
2517 | {
|
2518 | type: "color";
|
2519 | category: "text-color";
|
2520 | value: "rgb(136, 145, 170)";
|
2521 | comment: "Default icon color for inverse backgrounds.";
|
2522 | text_contrast_pairing: ["color-background-body-inverse"];
|
2523 | originalValue: "{!palette-gray-50}";
|
2524 | name: "color-text-icon-inverse";
|
2525 | },
|
2526 | {
|
2527 | type: "color";
|
2528 | category: "text-color";
|
2529 | value: "rgb(0, 20, 137)";
|
2530 | comment: "Icon color for being neutral.";
|
2531 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-row-striped"];
|
2532 | originalValue: "{!palette-blue-80}";
|
2533 | name: "color-text-icon-neutral";
|
2534 | },
|
2535 | {
|
2536 | type: "color";
|
2537 | category: "text-color";
|
2538 | value: "rgb(96, 107, 133)";
|
2539 | comment: "Icon color for indicating a offline status";
|
2540 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2541 | originalValue: "{!palette-gray-60}";
|
2542 | name: "color-text-icon-offline";
|
2543 | },
|
2544 | {
|
2545 | type: "color";
|
2546 | category: "text-color";
|
2547 | value: "rgb(14, 124, 58)";
|
2548 | comment: "Icon color for indicating success.";
|
2549 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"];
|
2550 | originalValue: "{!palette-green-70}";
|
2551 | name: "color-text-icon-success";
|
2552 | },
|
2553 | {
|
2554 | type: "color";
|
2555 | category: "text-color";
|
2556 | value: "rgb(214, 31, 31)";
|
2557 | comment: "Icon color for indicating a unavailable status";
|
2558 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2559 | originalValue: "{!palette-red-60}";
|
2560 | name: "color-text-icon-unavailable";
|
2561 | },
|
2562 | {
|
2563 | type: "color";
|
2564 | category: "text-color";
|
2565 | value: "rgb(227, 106, 25)";
|
2566 | comment: "Icon color for indicating a warning.";
|
2567 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2568 | originalValue: "{!palette-orange-65}";
|
2569 | name: "color-text-icon-warning";
|
2570 | },
|
2571 | {
|
2572 | type: "color";
|
2573 | category: "text-color";
|
2574 | value: "rgb(255, 255, 255)";
|
2575 | comment: "Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
2576 | text_contrast_pairing: ["color-background-body-inverse","color-background-brand","color-background-error","color-background-primary","color-background-destructive"];
|
2577 | originalValue: "{!palette-gray-0}";
|
2578 | name: "color-text-inverse";
|
2579 | },
|
2580 | {
|
2581 | type: "color";
|
2582 | category: "text-color";
|
2583 | value: "rgb(174, 178, 193)";
|
2584 | comment: "Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
2585 | text_contrast_pairing: ["color-background-body-inverse","color-background-brand"];
|
2586 | originalValue: "{!palette-gray-40}";
|
2587 | name: "color-text-inverse-weak";
|
2588 | },
|
2589 | {
|
2590 | type: "color";
|
2591 | category: "text-color";
|
2592 | value: "rgb(96, 107, 133)";
|
2593 | comment: "Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse.";
|
2594 | originalValue: "{!palette-gray-60}";
|
2595 | name: "color-text-inverse-weaker";
|
2596 | },
|
2597 | {
|
2598 | type: "color";
|
2599 | category: "text-color";
|
2600 | value: "rgb(2, 99, 224)";
|
2601 | comment: "Link text";
|
2602 | text_contrast_pairing: ["color-background","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2603 | uicontrol_contrast_pairing: ["color-background","color-background-strong","color-background-body","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-new","color-background-row-striped","color-background-primary-weaker","color-background-primary-weakest","color-background-destructive-weaker","color-background-destructive-weakest"];
|
2604 | originalValue: "{!palette-blue-60}";
|
2605 | name: "color-text-link";
|
2606 | },
|
2607 | {
|
2608 | type: "color";
|
2609 | category: "text-color";
|
2610 | value: "rgb(214, 31, 31)";
|
2611 | comment: "Destructive link text";
|
2612 | text_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2613 | originalValue: "{!palette-red-60}";
|
2614 | name: "color-text-link-destructive";
|
2615 | },
|
2616 | {
|
2617 | type: "color";
|
2618 | category: "text-color";
|
2619 | value: "rgb(173, 17, 17)";
|
2620 | comment: "Strong shade of destructive link text to be used in interactions";
|
2621 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2622 | originalValue: "{!palette-red-70}";
|
2623 | name: "color-text-link-destructive-strong";
|
2624 | },
|
2625 | {
|
2626 | type: "color";
|
2627 | category: "text-color";
|
2628 | value: "rgb(74, 11, 11)";
|
2629 | comment: "Stronger shade of destructive link text to be used in interactions";
|
2630 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2631 | originalValue: "{!palette-red-90}";
|
2632 | name: "color-text-link-destructive-stronger";
|
2633 | },
|
2634 | {
|
2635 | type: "color";
|
2636 | category: "text-color";
|
2637 | value: "rgb(49, 12, 12)";
|
2638 | comment: "Strongest shade of destructive link text to be used in interactions";
|
2639 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2640 | originalValue: "{!palette-red-100}";
|
2641 | name: "color-text-link-destructive-strongest";
|
2642 | },
|
2643 | {
|
2644 | type: "color";
|
2645 | category: "text-color";
|
2646 | value: "rgb(246, 177, 177)";
|
2647 | comment: "Weak shade of destructive link text to be used in interactions";
|
2648 | originalValue: "{!palette-red-30}";
|
2649 | name: "color-text-link-destructive-weak";
|
2650 | },
|
2651 | {
|
2652 | type: "color";
|
2653 | category: "text-color";
|
2654 | value: "rgb(0, 20, 137)";
|
2655 | comment: "Strong shade of link text to be used in interactions";
|
2656 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2657 | originalValue: "{!palette-blue-80}";
|
2658 | name: "color-text-link-strong";
|
2659 | },
|
2660 | {
|
2661 | type: "color";
|
2662 | category: "text-color";
|
2663 | value: "rgb(3, 11, 93)";
|
2664 | comment: "Stronger shade of link text to be used in interactions";
|
2665 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2666 | originalValue: "{!palette-blue-90}";
|
2667 | name: "color-text-link-stronger";
|
2668 | },
|
2669 | {
|
2670 | type: "color";
|
2671 | category: "text-color";
|
2672 | value: "rgb(6, 3, 58)";
|
2673 | comment: "Strongest shade of link text to be used in interactions";
|
2674 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2675 | originalValue: "{!palette-blue-100}";
|
2676 | name: "color-text-link-strongest";
|
2677 | },
|
2678 | {
|
2679 | type: "color";
|
2680 | category: "text-color";
|
2681 | value: "rgb(153, 205, 255)";
|
2682 | comment: "Weak shade of link text to be used in interactions";
|
2683 | originalValue: "{!palette-blue-30}";
|
2684 | name: "color-text-link-weak";
|
2685 | },
|
2686 | {
|
2687 | type: "color";
|
2688 | category: "text-color";
|
2689 | value: "rgb(0, 20, 137)";
|
2690 | comment: "Color for text indicating a neutral status.";
|
2691 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2692 | originalValue: "{!palette-blue-80}";
|
2693 | name: "color-text-neutral";
|
2694 | },
|
2695 | {
|
2696 | type: "color";
|
2697 | category: "text-color";
|
2698 | value: "rgb(109, 46, 209)";
|
2699 | comment: "Color for text indicating a new status.";
|
2700 | text_contrast_pairing: ["color-background","color-background-body","color-background-subaccount","color-background-trial","color-background-neutral-weakest","color-background-success-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2701 | originalValue: "{!palette-purple-60}";
|
2702 | name: "color-text-new";
|
2703 | },
|
2704 | {
|
2705 | type: "color";
|
2706 | category: "text-color";
|
2707 | value: "rgb(14, 124, 58)";
|
2708 | comment: "Text color for success text.";
|
2709 | text_contrast_pairing: ["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"];
|
2710 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-success-weakest","color-background-row-striped"];
|
2711 | originalValue: "{!palette-green-70}";
|
2712 | name: "color-text-success";
|
2713 | },
|
2714 | {
|
2715 | type: "color";
|
2716 | category: "text-color";
|
2717 | value: "rgb(141, 49, 24)";
|
2718 | comment: "Color for warning text.";
|
2719 | text_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2720 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-warning-weakest","color-background-row-striped"];
|
2721 | originalValue: "{!palette-orange-80}";
|
2722 | name: "color-text-warning";
|
2723 | },
|
2724 | {
|
2725 | type: "color";
|
2726 | category: "text-color";
|
2727 | value: "rgb(141, 49, 24)";
|
2728 | comment: "Color for dark warning text.";
|
2729 | text_contrast_pairing: ["color-background","color-background-body","color-background-row-striped","color-background-warning-weakest"];
|
2730 | uicontrol_contrast_pairing: ["color-background","color-background-body","color-background-row-striped","color-background-warning-weakest"];
|
2731 | originalValue: "{!palette-orange-80}";
|
2732 | name: "color-text-warning-strong";
|
2733 | },
|
2734 | {
|
2735 | type: "color";
|
2736 | category: "text-color";
|
2737 | value: "rgb(96, 107, 133)";
|
2738 | comment: "Weak body text for visual hierarchy.";
|
2739 | text_contrast_pairing: ["color-background","color-background-body","color-background-neutral-weakest","color-background-warning-weakest","color-background-error-weakest","color-background-row-striped","color-background-primary-weakest","color-background-destructive-weakest"];
|
2740 | originalValue: "{!palette-gray-60}";
|
2741 | name: "color-text-weak";
|
2742 | },
|
2743 | {
|
2744 | type: "color";
|
2745 | category: "text-color";
|
2746 | value: "rgb(174, 178, 193)";
|
2747 | comment: "Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls.";
|
2748 | originalValue: "{!palette-gray-40}";
|
2749 | name: "color-text-weaker";
|
2750 | },
|
2751 | {
|
2752 | type: "color";
|
2753 | category: "text-color";
|
2754 | value: "rgb(255, 255, 255)";
|
2755 | comment: "Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls.";
|
2756 | text_contrast_pairing: ["color-background-primary-strong","color-background-primary-stronger","color-background-primary-strongest","color-background-destructive-strong","color-background-destructive-stronger","color-background-destructive-strongest"];
|
2757 | originalValue: "{!palette-gray-0}";
|
2758 | name: "color-text-weakest";
|
2759 | }
|
2760 | ],
|
2761 | "z-indices": [
|
2762 | {
|
2763 | type: "z-index";
|
2764 | category: "z-index";
|
2765 | value: 0;
|
2766 | originalValue: "{!z-index-0}";
|
2767 | name: "z-index-0";
|
2768 | },
|
2769 | {
|
2770 | type: "z-index";
|
2771 | category: "z-index";
|
2772 | value: 10;
|
2773 | originalValue: "{!z-index-10}";
|
2774 | name: "z-index-10";
|
2775 | },
|
2776 | {
|
2777 | type: "z-index";
|
2778 | category: "z-index";
|
2779 | value: 20;
|
2780 | originalValue: "{!z-index-20}";
|
2781 | name: "z-index-20";
|
2782 | },
|
2783 | {
|
2784 | type: "z-index";
|
2785 | category: "z-index";
|
2786 | value: 30;
|
2787 | originalValue: "{!z-index-30}";
|
2788 | name: "z-index-30";
|
2789 | },
|
2790 | {
|
2791 | type: "z-index";
|
2792 | category: "z-index";
|
2793 | value: 40;
|
2794 | originalValue: "{!z-index-40}";
|
2795 | name: "z-index-40";
|
2796 | },
|
2797 | {
|
2798 | type: "z-index";
|
2799 | category: "z-index";
|
2800 | value: 50;
|
2801 | originalValue: "{!z-index-50}";
|
2802 | name: "z-index-50";
|
2803 | },
|
2804 | {
|
2805 | type: "z-index";
|
2806 | category: "z-index";
|
2807 | value: 60;
|
2808 | originalValue: "{!z-index-60}";
|
2809 | name: "z-index-60";
|
2810 | },
|
2811 | {
|
2812 | type: "z-index";
|
2813 | category: "z-index";
|
2814 | value: 70;
|
2815 | originalValue: "{!z-index-70}";
|
2816 | name: "z-index-70";
|
2817 | },
|
2818 | {
|
2819 | type: "z-index";
|
2820 | category: "z-index";
|
2821 | value: 80;
|
2822 | originalValue: "{!z-index-80}";
|
2823 | name: "z-index-80";
|
2824 | },
|
2825 | {
|
2826 | type: "z-index";
|
2827 | category: "z-index";
|
2828 | value: 90;
|
2829 | originalValue: "{!z-index-90}";
|
2830 | name: "z-index-90";
|
2831 | }
|
2832 | ]}
|
2833 | }
|
2834 | export default Tokens; |
\ | No newline at end of file |