UNPKG

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