UNPKG

29.9 kBtext/lessView Raw
1
2/* Background color used for user avatars. */
3@color-background-user: rgb(200, 175, 240);
4/* Background color used for trial accounts. */
5@color-background-trial: rgb(209, 250, 224);
6/* Background color used for subaccounts. */
7@color-background-subaccount: rgb(255, 241, 179);
8/* Stronger background color used for primary actions or highlights. */
9@color-background-primary-stronger: rgb(3, 11, 93);
10/* Stronger background color used for destructive actions or highlights. */
11@color-background-destructive-stronger: rgb(74, 11, 11);
12/* Weaker background color used for primary actions or highlights. */
13@color-background-primary-weaker: rgb(204, 228, 255);
14/* Weaker background color used for destructive actions or highlights. */
15@color-background-destructive-weaker: rgb(252, 207, 207);
16/* Background color used for warning alerts and toasts. */
17@color-background-warning: rgb(244, 124, 34);
18/* Weakest background color used for warning alerts and toasts. */
19@color-background-warning-weakest: rgb(254, 245, 238);
20/* Strong inverse background color used for containers. */
21@color-background-inverse-strong: rgb(57, 71, 98);
22/* Background color used to represent a new status. */
23@color-background-new: rgb(245, 240, 252);
24/* Strong background color used for containers. */
25@color-background-strong: rgb(225, 227, 234);
26/* Background color used for destructive actions or highlights. */
27@color-background-destructive: rgb(214, 31, 31);
28/* Background color used for primary actions or highlights. */
29@color-background-primary: rgb(2, 99, 224);
30/* Weakest background color used for primary actions or highlights. */
31@color-background-primary-weakest: rgb(235, 244, 255);
32/* Background color used to represent an entity or person as "busy". */
33@color-background-busy: rgb(244, 124, 34);
34/* Background color used for success alerts and toasts. */
35@color-background-success: rgb(20, 176, 83);
36/* Weakest background color used for destructive actions or highlights. */
37@color-background-destructive-weakest: rgb(254, 236, 236);
38/* Background color used to represent an entity or person as "offline". */
39@color-background-offline: rgb(174, 178, 193);
40/* Background color used for alternative striped rows. */
41@color-background-row-striped: rgb(244, 244, 246);
42/* Strongest background color used for primary actions or highlights. */
43@color-background-primary-strongest: rgb(6, 3, 58);
44/* Weakest background color used for success alerts and toasts. */
45@color-background-success-weakest: rgb(237, 253, 243);
46/* Strongest background color used for destructive actions or highlights. */
47@color-background-destructive-strongest: rgb(49, 12, 12);
48/* Strongest background color used for error alerts and toasts. */
49@color-background-error-strong: rgb(117, 12, 12);
50/* Strong background color used for brand. */
51@color-background-brand-strong: rgb(3, 11, 93);
52/* Background color used for brand. */
53@color-background-brand: rgb(0, 20, 137);
54/* Background color used for error alerts and toasts. */
55@color-background-error: rgb(214, 31, 31);
56/* Weakest background color used for neutral or default variants. */
57@color-background-neutral-weakest: rgb(235, 244, 255);
58/* Background color used to represent an entity or person as "available". */
59@color-background-available: rgb(20, 176, 83);
60/* Weakest background color used for error alerts and toasts. */
61@color-background-error-weakest: rgb(254, 236, 236);
62/* Background color used to represent required form fields. */
63@color-background-required: rgb(235, 86, 86);
64/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
65@color-background-decorative-40-weakest: rgb(245, 240, 252);
66/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
67@color-background-decorative-30-weakest: rgb(237, 253, 243);
68/* Background color used for the main page body. */
69@color-background-body: rgb(255, 255, 255);
70/* Strong background color used for primary actions or highlights. */
71@color-background-primary-strong: rgb(0, 20, 137);
72/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
73@color-background-decorative-20-weakest: rgb(235, 244, 255);
74/* Strong background color used for destructive actions or highlights. */
75@color-background-destructive-strong: rgb(117, 12, 12);
76/* Weak background color used for destructive actions or highlights. */
77@color-background-destructive-weak: rgb(246, 177, 177);
78/* Weakest background color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative border and/or text tokens. */
79@color-background-decorative-10-weakest: rgb(244, 244, 246);
80/* Background color used for containers. */
81@color-background: rgb(244, 244, 246);
82/* Weak background color used for primary actions or highlights. */
83@color-background-primary-weak: rgb(153, 205, 255);
84/* Stronger background color used for containers. */
85@color-background-stronger: rgb(136, 145, 170);
86/* Background color used for brand highlights. */
87@color-background-brand-highlight: rgb(242, 47, 70);
88/* Weakest background color used for brand highlights. */
89@color-background-brand-highlight-weakest: rgba(242, 47, 70, 0.1);
90/* Strongest background color used for containers. */
91@color-background-strongest: rgb(75, 86, 113);
92/* Inverse background color used for the main page body. */
93@color-background-body-inverse: rgb(18, 28, 45);
94/* Inverse background color used for containers. */
95@color-background-inverse: rgb(31, 48, 76);
96/* Background color used for overlays. */
97@color-background-overlay: rgba(6, 3, 58, 0.4);
98/* Background color used to represent an entity or person as "unavailable". */
99@color-background-unavailable: rgb(214, 31, 31);
100/* Stronger error background color */
101@color-background-error-stronger: rgb(74, 11, 11);
102/* Stronger background color used for brand. */
103@color-background-brand-stronger: rgb(6, 3, 58);
104/* Stronger error border color */
105@color-border-error-stronger: rgb(74, 11, 11);
106/* Weak warning border color */
107@color-border-warning-weak: rgb(255, 179, 122);
108/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
109@color-border-decorative-40-weaker: rgb(231, 220, 250);
110/* Weaker error border color */
111@color-border-error-weaker: rgb(252, 207, 207);
112/* Weaker neutral border color */
113@color-border-neutral-weaker: rgb(204, 228, 255);
114/* Warning border color */
115@color-border-warning: rgb(244, 124, 34);
116/* Weaker success border color */
117@color-border-success-weaker: rgb(209, 250, 224);
118/* Stronger primary border color */
119@color-border-primary-stronger: rgb(3, 11, 93);
120/* Stronger destructive hover border color */
121@color-border-destructive-stronger: rgb(74, 11, 11);
122/* Weakest warning border color */
123@color-border-warning-weakest: rgb(254, 245, 238);
124/* Weaker primary border color */
125@color-border-primary-weaker: rgb(204, 228, 255);
126/* Destructive focus border color */
127@color-border-destructive-weaker: rgb(252, 207, 207);
128/* Weaker border color for something designated as new */
129@color-border-new-weaker: rgb(231, 220, 250);
130/* Destructive border color */
131@color-border-destructive: rgb(214, 31, 31);
132/* Strong border on inverse backgrounds. Must be used on color-background-body-inverse. */
133@color-border-inverse-strong: rgb(225, 227, 234);
134/* Primary border color */
135@color-border-primary: rgb(2, 99, 224);
136/* Weakest primary border color */
137@color-border-primary-weakest: rgb(235, 244, 255);
138/* Success border color */
139@color-border-success: rgb(20, 176, 83);
140/* Destructive focus border color */
141@color-border-destructive-weakest: rgb(254, 236, 236);
142/* Strongest destructive hover border color */
143@color-border-destructive-strongest: rgb(49, 12, 12);
144/* Strongest primary border color */
145@color-border-primary-strongest: rgb(6, 3, 58);
146/* Weakest success border color */
147@color-border-success-weakest: rgb(237, 253, 243);
148/* Weaker warning border color */
149@color-border-warning-weaker: rgb(253, 220, 196);
150/* Strong border color */
151@color-border-strong: rgb(96, 107, 133);
152/* Weak border color */
153@color-border-weak: rgb(202, 205, 216);
154/* Neutral border color */
155@color-border-neutral: rgb(2, 99, 224);
156/* Error border color */
157@color-border-error: rgb(214, 31, 31);
158/* Weakest error border color */
159@color-border-error-weakest: rgb(254, 236, 236);
160/* Strong error border color */
161@color-border-error-strong: rgb(117, 12, 12);
162/* Weak error border color */
163@color-border-error-weak: rgb(245, 138, 138);
164/* Weak neutral border color */
165@color-border-neutral-weak: rgb(102, 179, 255);
166/* Default border color */
167@color-border: rgb(136, 145, 170);
168/* Stronger border on inverse backgrounds. Must be used on color-background-body-inverse. */
169@color-border-inverse-stronger: rgb(244, 244, 246);
170/* Weaker border on inverse backgrounds. Must be used on color-background-body-inverse. */
171@color-border-inverse-weaker: rgb(57, 71, 98);
172/* Weak success border color */
173@color-border-success-weak: rgb(54, 213, 118);
174/* Strong primary border color */
175@color-border-primary-strong: rgb(0, 20, 137);
176/* Border on inverse backgrounds. Must be used on color-background-body-inverse. */
177@color-border-inverse: rgb(136, 145, 170);
178/* Destructive focus border color */
179@color-border-destructive-strong: rgb(117, 12, 12);
180/* Weak primary border color */
181@color-border-primary-weak: rgb(153, 205, 255);
182/* Weakest border on inverse backgrounds. Must be used on color-background-body-inverse. */
183@color-border-inverse-weakest: rgb(31, 48, 76);
184/* Destructive focus border color */
185@color-border-destructive-weak: rgb(246, 177, 177);
186/* Strongest border on inverse backgrounds. Must be used on color-background-body-inverse. */
187@color-border-inverse-strongest: rgb(255, 255, 255);
188/* Weaker border color */
189@color-border-weaker: rgb(225, 227, 234);
190/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
191@color-border-decorative-10-weaker: rgb(225, 227, 234);
192/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
193@color-border-decorative-20-weaker: rgb(204, 228, 255);
194/* Weaker border color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or text tokens. */
195@color-border-decorative-30-weaker: rgb(209, 250, 224);
196/* Border radius reset */
197@border-radius-0: 0;
198/* Small border radius */
199@border-radius-10: 2px;
200/* Large border radius */
201@border-radius-20: 4px;
202/* Larger border radius */
203@border-radius-30: 8px;
204/* Circular border radius */
205@border-radius-circle: 50%;
206/* Pill border radius */
207@border-radius-pill: 100px;
208/* Border width reset */
209@border-width-0: 0;
210/* Constant border width token for border width 10 */
211@border-width-10: 1px;
212/* Constant border width token for border width 20 */
213@border-width-20: 2px;
214/* Constant border width token for border width 30 */
215@border-width-30: 4px;
216/* Constant border width token for border width 40 */
217@border-width-40: 8px;
218/* Weaker bottom shadow border for new status */
219@shadow-border-bottom-new-weaker: 0 1px 0 #e7dcfa;
220/* Default shadow. */
221@shadow: 0 4px 16px 0 rgba(18, 28, 45, 0.2);
222/* Strong shadow border for destructive interactions */
223@shadow-border-destructive-stronger: 0 0 0 1px #4a0b0b;
224/* Stronger shadow border for inputs active. */
225@shadow-border-primary-stronger: 0 0 0 1px #030b5d;
226/* Weaker bottom shadow border for warning status */
227@shadow-border-bottom-warning-weaker: 0 1px 0 #fddcc4;
228/* Weaker shadow border for destructive interactions. */
229@shadow-border-destructive-weaker: 0 0 0 1px #fccfcf;
230/* Weaker shadow border for primary interactions. */
231@shadow-border-primary-weaker: 0 0 0 1px #cce4ff;
232/* Low elevation default shadow. */
233@shadow-low: 0 2px 8px 0 rgba(18, 28, 45, 0.1);
234/* Strong shadow border on interactive elements on inverse backgrounds. */
235@shadow-border-inverse-strong: 0 0 0 1px #e1e3ea;
236/* Strong shadow border for inputs. */
237@shadow-border-strong: 0 0 0 1px #606b85;
238/* Shadow for focus ring on interactive elements. */
239@shadow-focus: 0 0 0 4px rgba(2, 99, 224, 0.7);
240/* Weak shadow border for disabled inputs. */
241@shadow-border-weak: 0 0 0 1px #cacdd8;
242/* Shadow for focus ring on interactive elements on inverse backgrounds. */
243@shadow-focus-inverse: 0 0 0 4px rgba(255, 255, 255, 0.4);
244/* Default shadow border for primary interactions. */
245@shadow-border-primary: 0 0 0 1px #0263e0;
246/* Shadow border for destructive interactions. */
247@shadow-border-destructive: 0 0 0 1px #d61f1f;
248/* High elevation default shadow. */
249@shadow-high: 0 16px 24px 0 rgba(18, 28, 45, 0.2);
250/* Shadow border for error inputs hover. */
251@shadow-border-error-strong: 0 0 0 1px #750c0c;
252/* Strongest shadow border for inputs active. */
253@shadow-border-primary-strongest: 0 0 0 1px #06033a;
254/* Strongest shadow border for destructive interactions */
255@shadow-border-destructive-strongest: 0 0 0 1px #310c0c;
256/* Shadow border for inverse error inputs. */
257@shadow-border-error-weak: 0 0 0 1px #eb5656;
258/* Shadow border for error inputs. */
259@shadow-border-error: 0 0 0 1px #d61f1f;
260/* Weaker bottom shadow border for decorative 10 */
261@shadow-border-bottom-decorative-10-weaker: 0 1px 0 #e1e3ea;
262/* Weaker bottom shadow border for decorative 20 */
263@shadow-border-bottom-decorative-20-weaker: 0 1px 0 #cce4ff;
264/* Stronger shadow border on interactive elements on inverse backgrounds. */
265@shadow-border-inverse-stronger: 0 0 0 1px #f4f4f6;
266/* Strong shadow border for destructive interactions */
267@shadow-border-destructive-strong: 0 0 0 1px #750c0c;
268/* Weaker shadow border on interactive elements on inverse backgrounds. */
269@shadow-border-inverse-weaker: 0 0 0 1px #394762;
270/* Weaker bottom shadow border for decorative 30 */
271@shadow-border-bottom-decorative-30-weaker: 0 1px 0 #d1fae0;
272/* Strong shadow border for inputs hover. */
273@shadow-border-primary-strong: 0 0 0 1px #001489;
274/* Weaker shadow border for primary interactions. */
275@shadow-border-primary-weak: 0 0 0 1px #99cdff;
276/* Weaker bottom shadow border for decorative 40 */
277@shadow-border-bottom-decorative-40-weaker: 0 1px 0 #e7dcfa;
278/* Weak shadow border for destructive interactions. */
279@shadow-border-destructive-weak: 0 0 0 1px #f6b1b1;
280/* Weaker bottom shadow border for error status */
281@shadow-border-bottom-error-weaker: 0 1px 0 #fccfcf;
282/* Weaker shadow border for disabled inputs. */
283@shadow-border-weaker: 0 0 0 1px #e1e3ea;
284/* Shadow border for inputs. */
285@shadow-border: 0 0 0 1px #8891aa;
286/* Weaker bottom shadow border for neutral status */
287@shadow-border-bottom-neutral-weaker: 0 1px 0 #cce4ff;
288/* Shadow for inset focus on elements, such as DataGrid cells. */
289@shadow-focus-inset: inset 0 0 0 2px rgba(2, 99, 224, 0.7);
290/* Shadow border on interactive elements on inverse backgrounds. */
291@shadow-border-inverse: 0 0 0 1px #8891aa;
292/* Weakest shadow border on interactive elements on inverse backgrounds. */
293@shadow-border-inverse-weakest: 0 0 0 1px #1f304c;
294/* Weaker bottom shadow border for success status */
295@shadow-border-bottom-success-weaker: 0 1px 0 #d1fae0;
296/* Shadow border for error inputs hover. */
297@shadow-border-error-stronger: 0 0 0 1px #4a0b0b;
298/* Shadow for cards. */
299@shadow-card: 0 2px 8px 0 rgba(18, 28, 45, 0.1);
300/* Strongest shadow border on interactive elements on inverse backgrounds. */
301@shadow-border-inverse-strongest: 0 0 0 1px #ffffff;
302@font-family-text: 'Colfax', Helvetica, Arial, sans-serif;
303@font-family-code: 'Fira Mono', Courier, monospace;
304@font-family-text-japanese: 'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
305@font-family-text-korean: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
306@font-family-text-chinese-traditional: 'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif;
307@font-family-text-chinese-simplified: 'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif;
308/* Constant typography token for font size 110 */
309@font-size-110: 3rem;
310/* Constant typography token for font size 100 */
311@font-size-100: 2.5rem;
312/* Constant typography token for font size 90 */
313@font-size-90: 2rem;
314/* Constant typography token for font size 80 */
315@font-size-80: 1.75rem;
316/* Constant typography token for font size 70 */
317@font-size-70: 1.5rem;
318/* Constant typography token for font size 60 */
319@font-size-60: 1.25rem;
320/* Constant typography token for font size 50 */
321@font-size-50: 1.125rem;
322/* Constant typography token for font size 40 */
323@font-size-40: 1rem;
324/* Constant typography token for font size 30 */
325@font-size-30: 0.875rem;
326/* Constant typography token for font size 20 */
327@font-size-20: 0.75rem;
328/* Constant typography token for font size 10 */
329@font-size-10: 0.625rem;
330/* Font weight for light weight */
331@font-weight-light: 400;
332/* Font weight for normal weight */
333@font-weight-normal: 400;
334/* Font weight for medium weight */
335@font-weight-medium: 500;
336/* Font weight for semibold weight */
337@font-weight-semibold: 600;
338/* Font weight for bold weight */
339@font-weight-bold: 700;
340/* Constant line-height token for line-height 0 */
341@line-height-0: 0;
342/* Constant line-height token for line-height 110 */
343@line-height-110: 4rem;
344/* Constant line-height token for line-height 90 */
345@line-height-90: 2.75rem;
346/* Constant line-height token for line-height 100 */
347@line-height-100: 3.25rem;
348/* Constant line-height token for line-height 80 */
349@line-height-80: 2.5rem;
350/* Constant line-height token for line-height 70 */
351@line-height-70: 2rem;
352/* Constant line-height token for line-height 60 */
353@line-height-60: 1.75rem;
354/* Constant line-height token for line-height 50 */
355@line-height-50: 1.75rem;
356/* Constant line-height token for line-height 40 */
357@line-height-40: 1.5rem;
358/* Constant line-height token for line-height 30 */
359@line-height-30: 1.25rem;
360/* Constant line-height token for line-height 20 */
361@line-height-20: 1.25rem;
362/* Constant line-height token for line-height 10 */
363@line-height-10: 1rem;
364/* Color used for data visualizations. Must be used in a sequence. */
365@color-data-visualization-10: rgb(235, 86, 86);
366/* Twilio brand red */
367@color-brand-highlight: rgb(242, 47, 70);
368/* Color used for data visualizations. Must be used in a sequence. */
369@color-data-visualization-1: rgb(0, 20, 137);
370/* Gray Color 0 */
371@color-gray-0: rgb(255, 255, 255);
372/* Color used for data visualizations. Must be used in a sequence. */
373@color-data-visualization-2: rgb(14, 124, 58);
374/* Color used for data visualizations. Must be used in a sequence. */
375@color-data-visualization-3: rgb(13, 58, 31);
376/* Gray Color 10 */
377@color-gray-100: rgb(18, 28, 45);
378/* Color used for data visualizations. Must be used in a sequence. */
379@color-data-visualization-4: rgb(0, 140, 255);
380/* Color used for data visualizations. Must be used in a sequence. */
381@color-data-visualization-5: rgb(57, 71, 98);
382/* Color used for data visualizations. Must be used in a sequence. */
383@color-data-visualization-6: rgb(166, 127, 227);
384/* Color used for data visualizations. Must be used in a sequence. */
385@color-data-visualization-7: rgb(109, 46, 209);
386/* Color used for data visualizations. Must be used in a sequence. */
387@color-data-visualization-8: rgb(136, 145, 170);
388/* Color used for data visualizations. Must be used in a sequence. */
389@color-data-visualization-9: rgb(117, 12, 12);
390/* Gray Color 9 */
391@color-gray-90: rgb(31, 48, 76);
392/* Gray Color 8 */
393@color-gray-80: rgb(57, 71, 98);
394/* Gray Color 7 */
395@color-gray-70: rgb(75, 86, 113);
396/* Gray Color 6 */
397@color-gray-60: rgb(96, 107, 133);
398/* Gray Color 5 */
399@color-gray-50: rgb(136, 145, 170);
400/* Gray Color 4 */
401@color-gray-40: rgb(174, 178, 193);
402/* Default branding color */
403@color-brand: rgb(0, 20, 137);
404/* Gray Color 3 */
405@color-gray-30: rgb(202, 205, 216);
406/* Gray Color 2 */
407@color-gray-20: rgb(225, 227, 234);
408/* Gray Color 1 */
409@color-gray-10: rgb(244, 244, 246);
410/* Generic square sizing token scale for UI components. */
411@size-square-40: 0.75rem;
412/* Maps to line-height tokens 1:1 */
413@size-icon-80: 2.5rem;
414/* Generic square sizing token scale for UI components. */
415@size-square-30: 0.5rem;
416/* Maps to line-height tokens 1:1 */
417@size-icon-70: 2rem;
418/* Generic square sizing token scale for UI components. */
419@size-square-20: 0.25rem;
420/* Maps to line-height tokens 1:1 */
421@size-icon-60: 1.75rem;
422/* Generic sizing token scale for UI components. */
423@size-90: 57.5rem;
424/* Generic square sizing token scale for UI components. */
425@size-square-10: 0.125rem;
426/* Generic sizing token scale for UI components. */
427@size-120: 77rem;
428/* Maps to line-height tokens 1:1 */
429@size-icon-50: 1.75rem;
430/* Generic sizing token scale for UI components. */
431@size-80: 51rem;
432/* Generic sizing token scale for UI components. */
433@size-0: 0;
434/* Generic sizing token scale for UI components. */
435@size-110: 70.5rem;
436/* Maps to line-height tokens 1:1 */
437@size-icon-40: 1.5rem;
438/* Generic square sizing token scale for UI components. */
439@size-square-190: 4.5rem;
440/* Generic sizing token scale for UI components. */
441@size-70: 44.5rem;
442/* Generic sizing token scale for UI components. */
443@size-100: 64rem;
444/* Maps to line-height tokens 1:1 */
445@size-icon-30: 1.25rem;
446/* Generic square sizing token scale for UI components. */
447@size-square-180: 4.25rem;
448/* Generic sizing token scale for UI components. */
449@size-60: 38rem;
450/* Maps to line-height tokens 1:1 */
451@size-icon-20: 1.25rem;
452/* Generic square sizing token scale for UI components. */
453@size-square-170: 4rem;
454/* Maps to line-height tokens 1:1 */
455@size-icon-10: 1rem;
456/* Generic square sizing token scale for UI components. */
457@size-square-25: 0.375rem;
458/* Generic square sizing token scale for UI components. */
459@size-square-160: 3.75rem;
460/* Generic sizing token scale for UI components. */
461@size-50: 31.5rem;
462/* Maps to line-height tokens 1:1 */
463@size-icon-110: 4rem;
464/* Generic square sizing token scale for UI components. */
465@size-square-150: 3.5rem;
466/* Generic sizing token scale for UI components. */
467@size-40: 25rem;
468/* Maps to line-height tokens 1:1 */
469@size-icon-100: 3.25rem;
470/* Generic square sizing token scale for UI components. */
471@size-square-140: 3.25rem;
472/* Generic sizing token scale for UI components. */
473@size-30: 18.5rem;
474/* Generic square sizing token scale for UI components. */
475@size-square-130: 3rem;
476/* Generic sizing token scale for UI components. */
477@size-20: 12rem;
478/* Generic square sizing token scale for UI components. */
479@size-square-120: 2.75rem;
480/* Generic sizing token scale for UI components. */
481@size-10: 5.5rem;
482/* Generic square sizing token scale for UI components. */
483@size-square-110: 2.5rem;
484/* Generic square sizing token scale for UI components. */
485@size-square-0: 0;
486/* Generic square sizing token scale for UI components. */
487@size-square-100: 2.25rem;
488/* Generic square sizing token scale for UI components. */
489@size-square-200: 4.75rem;
490/* Sizing token for sidebar width. */
491@size-sidebar: 13.75rem;
492/* Generic square sizing token scale for UI components. */
493@size-square-90: 2rem;
494/* Generic square sizing token scale for UI components. */
495@size-square-80: 1.75rem;
496/* Generic square sizing token scale for UI components. */
497@size-square-70: 1.5rem;
498/* Generic square sizing token scale for UI components. */
499@size-square-60: 1.25rem;
500/* Generic square sizing token scale for UI components. */
501@size-square-50: 1rem;
502/* Maps to line-height tokens 1:1 */
503@size-icon-90: 2.75rem;
504@space-70: 1.5rem;
505@space-negative-100: -2.25rem;
506@space-60: 1.25rem;
507@space-negative-200: -4.75rem;
508@space-190: 4.5rem;
509@space-50: 1rem;
510@space-180: 4.25rem;
511@space-40: 0.75rem;
512@space-170: 4rem;
513@space-30: 0.5rem;
514@space-160: 3.75rem;
515@space-20: 0.25rem;
516@space-150: 3.5rem;
517@space-10: 0.125rem;
518@space-140: 3.25rem;
519@space-130: 3rem;
520@space-120: 2.75rem;
521@space-negative-90: -2rem;
522@space-110: 2.5rem;
523@space-0: 0;
524@space-negative-80: -1.75rem;
525@space-100: 2.25rem;
526@space-negative-70: -1.5rem;
527@space-200: 4.75rem;
528@space-negative-60: -1.25rem;
529@space-negative-50: -1rem;
530@space-negative-40: -0.75rem;
531@space-negative-30: -0.5rem;
532@space-negative-20: -0.25rem;
533@space-negative-10: -0.125rem;
534@space-negative-190: -4.5rem;
535@space-negative-180: -4.25rem;
536@space-negative-170: -4rem;
537@space-negative-160: -3.75rem;
538@space-negative-150: -3.5rem;
539@space-negative-140: -3.25rem;
540@space-negative-130: -3rem;
541@space-90: 2rem;
542@space-negative-120: -2.75rem;
543@space-80: 1.75rem;
544@space-negative-110: -2.5rem;
545/* Weak shade of destructive link text to be used in interactions */
546@color-text-link-destructive-weak: rgb(246, 177, 177);
547/* Stronger shade of link text to be used in interactions */
548@color-text-link-stronger: rgb(3, 11, 93);
549/* Icon color for indicating a offline status */
550@color-text-icon-offline: rgb(96, 107, 133);
551/* Destructive link text */
552@color-text-link-destructive: rgb(214, 31, 31);
553/* Icon color for indicating success. */
554@color-text-icon-success: rgb(14, 124, 58);
555/* Color for warning text. */
556@color-text-warning: rgb(141, 49, 24);
557/* Strongest shade of destructive link text to be used in interactions */
558@color-text-link-destructive-strongest: rgb(49, 12, 12);
559/* Icon color for being neutral. */
560@color-text-icon-neutral: rgb(0, 20, 137);
561/* Color for text indicating a new status. */
562@color-text-new: rgb(109, 46, 209);
563/* Icon color for indicating an error. */
564@color-text-icon-error: rgb(214, 31, 31);
565/* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
566@color-text-inverse-weak: rgb(174, 178, 193);
567/* Icon color for indicating a available status */
568@color-text-icon-available: rgb(14, 124, 58);
569/* Stronger shade of destructive link text to be used in interactions */
570@color-text-link-destructive-stronger: rgb(74, 11, 11);
571/* Twilio brand icon color used for the Twilio logo on inverse backgrounds. */
572@color-text-icon-brand-inverse: rgb(255, 255, 255);
573/* Text color for success text. */
574@color-text-success: rgb(14, 124, 58);
575/* Weak body text for visual hierarchy. */
576@color-text-weak: rgb(96, 107, 133);
577/* Default icon color. */
578@color-text-icon: rgb(96, 107, 133);
579/* Link text */
580@color-text-link: rgb(2, 99, 224);
581/* Twilio brand red icon color used for the Twilio logo. */
582@color-text-icon-brand-highlight: rgb(242, 47, 70);
583/* Color for text indicating a neutral status. */
584@color-text-neutral: rgb(0, 20, 137);
585/* Strongest shade of link text to be used in interactions */
586@color-text-link-strongest: rgb(6, 3, 58);
587/* Error text for inputs and error misc */
588@color-text-error: rgb(214, 31, 31);
589/* Default icon color for inverse backgrounds. */
590@color-text-icon-inverse: rgb(136, 145, 170);
591/* Strong error text for inputs and error misc */
592@color-text-error-strong: rgb(173, 17, 17);
593/* Icon color for indicating a unavailable status */
594@color-text-icon-unavailable: rgb(214, 31, 31);
595/* Weak error text for inputs and error misc */
596@color-text-error-weak: rgb(235, 86, 86);
597/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
598@color-text-decorative-40: rgb(109, 46, 209);
599/* Strong shade of link text to be used in interactions */
600@color-text-link-strong: rgb(0, 20, 137);
601/* Text color used on any brand color */
602@color-text-brand-inverse: rgb(255, 255, 255);
603/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
604@color-text-decorative-30: rgb(14, 124, 58);
605/* Weak shade of link text to be used in interactions */
606@color-text-link-weak: rgb(153, 205, 255);
607/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
608@color-text-decorative-20: rgb(0, 20, 137);
609/* Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens. */
610@color-text-decorative-10: rgb(96, 107, 133);
611/* Body text color */
612@color-text: rgb(18, 28, 45);
613/* Icon color for indicating a busy status */
614@color-text-icon-busy: rgb(227, 106, 25);
615/* Weakest body text for visual hierarchy. Inaccessible unless used on disabled controls. */
616@color-text-weakest: rgb(255, 255, 255);
617/* Twilio brand red, accessible on large text only. */
618@color-text-brand-highlight: rgb(242, 47, 70);
619/* Weaker inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
620@color-text-inverse-weaker: rgb(96, 107, 133);
621/* Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-body-inverse. */
622@color-text-inverse: rgb(255, 255, 255);
623/* Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls. */
624@color-text-weaker: rgb(174, 178, 193);
625/* Color for dark warning text. */
626@color-text-warning-strong: rgb(141, 49, 24);
627/* Icon color for indicating a warning. */
628@color-text-icon-warning: rgb(227, 106, 25);
629/* Strong shade of destructive link text to be used in interactions */
630@color-text-link-destructive-strong: rgb(173, 17, 17);
631@z-index-0: 0;
632@z-index-90: 90;
633@z-index-80: 80;
634@z-index-70: 70;
635@z-index-60: 60;
636@z-index-50: 50;
637@z-index-40: 40;
638@z-index-30: 30;
639@z-index-20: 20;
640@z-index-10: 10;