UNPKG

17 kBSCSSView Raw
1
2/* Darker background for primary actions or highlights */
3$color-background-primary-darker: rgb(3, 44, 94) !default;
4/* Lighter background for primary actions or highlights */
5$color-background-primary-lighter: rgb(220, 234, 244) !default;
6/* Darker background for destructive actions or highlights */
7$color-background-destructive-darker: rgb(96, 1, 1) !default;
8/* Lighter background for destructive actions or highlights */
9$color-background-destructive-lighter: rgb(245, 221, 221) !default;
10/* Warning background color */
11$color-background-warning: rgb(228, 98, 22) !default;
12/* Lightest error background color */
13$color-background-error-lightest: rgb(255, 233, 231) !default;
14/* Lightest neutral background color */
15$color-background-neutral-lightest: rgb(245, 248, 255) !default;
16/* Dark default background color */
17$color-background-dark: rgb(228, 231, 233) !default;
18/* Background for destructive actions or highlights */
19$color-background-destructive: rgb(226, 37, 37) !default;
20/* Background for primary actions or highlights */
21$color-background-primary: rgb(2, 122, 197) !default;
22/* Success background color */
23$color-background-success: rgb(0, 153, 74) !default;
24/* Background color for alternative striped rows */
25$color-background-row-striped: rgb(248, 248, 249) !default;
26/* Lightest success background color */
27$color-background-success-lightest: rgb(224, 255, 239) !default;
28/* Lightest background for destructive actions or highlights */
29$color-background-destructive-lightest: rgb(255, 233, 231) !default;
30/* Dark error background color */
31$color-background-error-dark: rgb(146, 18, 0) !default;
32/* Lightest background for primary actions or highlights */
33$color-background-primary-lightest: rgb(245, 248, 255) !default;
34/* Primary brand background, accessible with inverse text */
35$color-background-brand: rgb(35, 54, 89) !default;
36/* Error background color */
37$color-background-error: rgb(226, 37, 37) !default;
38/* Required background color */
39$color-background-required: rgb(222, 88, 88) !default;
40/* Dark background for destructive actions or highlights */
41$color-background-destructive-dark: rgb(146, 18, 0) !default;
42/* Light background for destructive actions or highlights */
43$color-background-destructive-light: rgb(236, 182, 182) !default;
44/* Dark background for primary actions or highlights */
45$color-background-primary-dark: rgb(0, 62, 130) !default;
46/* Light background for primary actions or highlights */
47$color-background-primary-light: rgb(179, 211, 233) !default;
48/* Lightest warning background color */
49$color-background-warning-lightest: rgb(255, 236, 216) !default;
50/* Background color of the main page body */
51$color-background-body: rgb(255, 255, 255) !default;
52/* Darker default background color */
53$color-background-darker: rgb(200, 204, 207) !default;
54/* Default background color for any container */
55$color-background: rgb(248, 248, 249) !default;
56/* Highlight brand background, accessible with black text */
57$color-background-brand-highlight: rgb(242, 47, 70) !default;
58/* Inverse background color for any container, the darkest gray in the system */
59$color-background-inverse: rgb(40, 42, 43) !default;
60/* Default background for overlays */
61$color-background-overlay: rgba(40, 42, 43, 0.5) !default;
62/* Darkest default background color */
63$color-background-darkest: rgb(112, 117, 120) !default;
64/* Destructive focus border color */
65$color-border-destructive-lighter: rgb(245, 221, 221) !default;
66/* Lighter primary border color */
67$color-border-primary-lighter: rgb(220, 234, 244) !default;
68/* Darker primary border color */
69$color-border-primary-darker: rgb(3, 44, 94) !default;
70/* Warning border color */
71$color-border-warning: rgb(228, 98, 22) !default;
72/* Darker destructive hover border color */
73$color-border-destructive-darker: rgb(96, 1, 1) !default;
74/* Destructive border color */
75$color-border-destructive: rgb(226, 37, 37) !default;
76/* Primary border color */
77$color-border-primary: rgb(2, 122, 197) !default;
78/* Success border color */
79$color-border-success: rgb(0, 153, 74) !default;
80/* Lightest error border color */
81$color-border-error-lightest: rgb(255, 233, 231) !default;
82/* Dark border color */
83$color-border-dark: rgb(136, 140, 142) !default;
84/* Light warning border color */
85$color-border-warning-light: rgb(242, 133, 16) !default;
86/* Lightest success border color */
87$color-border-success-lightest: rgb(224, 255, 239) !default;
88/* Error border color */
89$color-border-error: rgb(226, 37, 37) !default;
90/* Dark error border color */
91$color-border-error-dark: rgb(146, 18, 0) !default;
92/* Destructive focus border color */
93$color-border-destructive-light: rgb(236, 182, 182) !default;
94/* Light primary border color */
95$color-border-primary-light: rgb(179, 211, 233) !default;
96/* Default border color */
97$color-border: rgb(136, 140, 142) !default;
98/* Lightest warning border color */
99$color-border-warning-lightest: rgb(255, 236, 216) !default;
100/* Dark primary border color */
101$color-border-primary-dark: rgb(0, 62, 130) !default;
102/* Destructive focus border color */
103$color-border-destructive-dark: rgb(146, 18, 0) !default;
104/* Light neutral border color */
105$color-border-neutral-light: rgb(200, 204, 207) !default;
106/* Border on inverse backgrounds */
107$color-border-inverse: rgb(255, 255, 255) !default;
108/* Light error border color */
109$color-border-error-light: rgb(222, 88, 88) !default;
110/* Light border color */
111$color-border-light: rgb(228, 231, 233) !default;
112/* Border radius reset */
113$border-radius-0: 0 !default;
114/* Small border radius */
115$border-radius-10: 3px !default;
116/* Large border radius */
117$border-radius-20: 4px !default;
118/* Larger border radius */
119$border-radius-30: 8px !default;
120/* Circular border radius */
121$border-radius-circle: 50% !default;
122/* Border width reset */
123$border-width-0: 0 !default;
124/* Small border width */
125$border-width-10: 1px !default;
126/* Large border width */
127$border-width-20: 2px !default;
128/* Small border width */
129$border-width-30: 4px !default;
130/* Large border width */
131$border-width-40: 8px !default;
132/* Shadow for cards. */
133$shadow-card: 0 2px 4px 0 rgba(40, 42, 43, 0.3) !default;
134/* Shadow for focus ring on interactive elements */
135$shadow-focus: 0 0 0 4px rgba(2, 122, 197, 0.8) !default;
136/* Shadow border for disabled inputs. */
137$shadow-border-light: 0 0 0 1px #e4e7e9 !default;
138/* Shadow border for inputs. */
139$shadow-border: 0 0 0 1px #888c8e !default;
140/* Shadow border for inputs hover. */
141$shadow-border-primary-dark: 0 0 0 1px #003e82 !default;
142/* Shadow border for inputs active. */
143$shadow-border-primary-darker: 0 0 0 1px #032c5e !default;
144/* Shadow border for error inputs. */
145$shadow-border-error: 0 0 0 1px #e22525 !default;
146/* Shadow border for error inputs hover. */
147$shadow-border-error-dark: 0 0 0 1px #921200 !default;
148$font-family-text: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
149$font-family-code: 'Fira Mono', 'Courier New', Courier, monospace !default;
150/* Constant typography token for font size 110 */
151$font-size-110: 3rem !default;
152/* Constant typography token for font size 100 */
153$font-size-100: 2.5rem !default;
154/* Constant typography token for font size 90 */
155$font-size-90: 2rem !default;
156/* Constant typography token for font size 80 */
157$font-size-80: 1.75rem !default;
158/* Constant typography token for font size 70 */
159$font-size-70: 1.5rem !default;
160/* Constant typography token for font size 60 */
161$font-size-60: 1.25rem !default;
162/* Constant typography token for font size 50 */
163$font-size-50: 1.125rem !default;
164/* Constant typography token for font size 40 */
165$font-size-40: 1rem !default;
166/* Constant typography token for font size 30 */
167$font-size-30: 0.875rem !default;
168/* Constant typography token for font size 20 */
169$font-size-20: 0.75rem !default;
170/* Constant typography token for font size 10 */
171$font-size-10: 0.625rem !default;
172/* Font weight for light weight */
173$font-weight-light: 300 !default;
174/* Font weight for normal weight */
175$font-weight-normal: 400 !default;
176/* Font weight for medium weight */
177$font-weight-medium: 500 !default;
178/* Font weight for semibold weight */
179$font-weight-semibold: 500 !default;
180/* Font weight for bold weight */
181$font-weight-bold: 700 !default;
182/* Constant line-height token for line-height 110 */
183$line-height-110: 3.75rem !default;
184/* Constant line-height token for line-height 90 */
185$line-height-90: 2.5rem !default;
186/* Constant line-height token for line-height 100 */
187$line-height-100: 3.25rem !default;
188/* Constant line-height token for line-height 80 */
189$line-height-80: 2.25rem !default;
190/* Constant line-height token for line-height 70 */
191$line-height-70: 2rem !default;
192/* Constant line-height token for line-height 60 */
193$line-height-60: 1.75rem !default;
194/* Constant line-height token for line-height 50 */
195$line-height-50: 1.75rem !default;
196/* Constant line-height token for line-height 40 */
197$line-height-40: 1.75rem !default;
198/* Constant line-height token for line-height 30 */
199$line-height-30: 1.5rem !default;
200/* Constant line-height token for line-height 20 */
201$line-height-20: 1.25rem !default;
202/* Constant line-height token for line-height 10 */
203$line-height-10: 1rem !default;
204/* Twilio brand red */
205$color-brand-highlight: rgb(242, 47, 70) !default;
206/* Gray Color 0 */
207$color-gray-0: rgb(255, 255, 255) !default;
208/* Gray Color 10 */
209$color-gray-100: rgb(40, 42, 43) !default;
210/* Gray Color 9 */
211$color-gray-90: rgb(66, 69, 71) !default;
212/* Gray Color 8 */
213$color-gray-80: rgb(79, 83, 85) !default;
214/* Gray Color 7 */
215$color-gray-70: rgb(112, 117, 120) !default;
216/* Gray Color 6 */
217$color-gray-60: rgb(136, 140, 142) !default;
218/* Gray Color 5 */
219$color-gray-50: rgb(200, 204, 207) !default;
220/* Gray Color 4 */
221$color-gray-40: rgb(228, 231, 233) !default;
222/* Default branding color */
223$color-brand: rgb(35, 54, 89) !default;
224/* Gray Color 3 */
225$color-gray-30: rgb(242, 243, 244) !default;
226/* Gray Color 2 */
227$color-gray-20: rgb(248, 248, 249) !default;
228/* Gray Color 1 */
229$color-gray-10: rgb(249, 250, 251) !default;
230/* Generic square sizing token scale for UI components. */
231$size-square-40: 0.75rem !default;
232/* Maps to line-height tokens 1:1 */
233$size-icon-80: 2.25rem !default;
234/* Generic square sizing token scale for UI components. */
235$size-square-30: 0.5rem !default;
236/* Maps to line-height tokens 1:1 */
237$size-icon-70: 2rem !default;
238/* Generic square sizing token scale for UI components. */
239$size-square-20: 0.25rem !default;
240/* Maps to line-height tokens 1:1 */
241$size-icon-60: 1.75rem !default;
242/* Generic sizing token scale for UI components. */
243$size-90: 57.5rem !default;
244/* Generic square sizing token scale for UI components. */
245$size-square-10: 0.125rem !default;
246/* Generic sizing token scale for UI components. */
247$size-120: 77rem !default;
248/* Maps to line-height tokens 1:1 */
249$size-icon-50: 1.75rem !default;
250/* Generic sizing token scale for UI components. */
251$size-80: 51rem !default;
252/* Generic sizing token scale for UI components. */
253$size-0: 0 !default;
254/* Generic sizing token scale for UI components. */
255$size-110: 70.5rem !default;
256/* Maps to line-height tokens 1:1 */
257$size-icon-40: 1.75rem !default;
258/* Generic square sizing token scale for UI components. */
259$size-square-190: 4.5rem !default;
260/* Generic sizing token scale for UI components. */
261$size-70: 44.5rem !default;
262/* Generic sizing token scale for UI components. */
263$size-100: 64rem !default;
264/* Maps to line-height tokens 1:1 */
265$size-icon-30: 1.5rem !default;
266/* Generic square sizing token scale for UI components. */
267$size-square-180: 4.25rem !default;
268/* Generic sizing token scale for UI components. */
269$size-60: 38rem !default;
270/* Maps to line-height tokens 1:1 */
271$size-icon-20: 1.25rem !default;
272/* Generic square sizing token scale for UI components. */
273$size-square-170: 4rem !default;
274/* Maps to line-height tokens 1:1 */
275$size-icon-10: 1rem !default;
276/* Generic square sizing token scale for UI components. */
277$size-square-25: 0.375rem !default;
278/* Generic square sizing token scale for UI components. */
279$size-square-160: 3.75rem !default;
280/* Generic sizing token scale for UI components. */
281$size-50: 31.5rem !default;
282/* Maps to line-height tokens 1:1 */
283$size-icon-110: 3.75rem !default;
284/* Generic square sizing token scale for UI components. */
285$size-square-150: 3.5rem !default;
286/* Generic sizing token scale for UI components. */
287$size-40: 25rem !default;
288/* Maps to line-height tokens 1:1 */
289$size-icon-100: 3.25rem !default;
290/* Generic square sizing token scale for UI components. */
291$size-square-140: 3.25rem !default;
292/* Generic sizing token scale for UI components. */
293$size-30: 18.5rem !default;
294/* Generic square sizing token scale for UI components. */
295$size-square-130: 3rem !default;
296/* Generic sizing token scale for UI components. */
297$size-20: 12rem !default;
298/* Generic square sizing token scale for UI components. */
299$size-square-120: 2.75rem !default;
300/* Generic sizing token scale for UI components. */
301$size-10: 5.5rem !default;
302/* Generic square sizing token scale for UI components. */
303$size-square-110: 2.5rem !default;
304/* Generic square sizing token scale for UI components. */
305$size-square-0: 0 !default;
306/* Generic square sizing token scale for UI components. */
307$size-square-100: 2.25rem !default;
308/* Generic square sizing token scale for UI components. */
309$size-square-200: 4.75rem !default;
310/* Generic square sizing token scale for UI components. */
311$size-square-90: 2rem !default;
312/* Generic square sizing token scale for UI components. */
313$size-square-80: 1.75rem !default;
314/* Generic square sizing token scale for UI components. */
315$size-square-70: 1.5rem !default;
316/* Generic square sizing token scale for UI components. */
317$size-square-60: 1.25rem !default;
318/* Generic square sizing token scale for UI components. */
319$size-square-50: 1rem !default;
320/* Maps to line-height tokens 1:1 */
321$size-icon-90: 2.5rem !default;
322$space-70: 1.5rem !default;
323$space-60: 1.25rem !default;
324$space-190: 4.5rem !default;
325$space-50: 1rem !default;
326$space-180: 4.25rem !default;
327$space-40: 0.75rem !default;
328$space-170: 4rem !default;
329$space-30: 0.5rem !default;
330$space-160: 3.75rem !default;
331$space-20: 0.25rem !default;
332$space-150: 3.5rem !default;
333$space-10: 0.125rem !default;
334$space-140: 3.25rem !default;
335$space-130: 3rem !default;
336$space-120: 2.75rem !default;
337$space-110: 2.5rem !default;
338$space-0: 0 !default;
339$space-100: 2.25rem !default;
340$space-200: 4.75rem !default;
341$space-90: 2rem !default;
342$space-80: 1.75rem !default;
343/* Darker shade of link text to be used in interactions */
344$color-text-link-darker: rgb(3, 44, 94) !default;
345/* Destructive link text */
346$color-text-link-destructive: rgb(226, 37, 37) !default;
347/* Color for warning text. */
348$color-text-warning: rgb(228, 98, 22) !default;
349/* Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse. */
350$color-text-inverse-weak: rgb(200, 204, 207) !default;
351/* Darker shade of destructive link text to be used in interactions */
352$color-text-link-destructive-darker: rgb(146, 18, 0) !default;
353/* Text color for success text. */
354$color-text-success: rgb(0, 153, 74) !default;
355/* Weak body text for visual hierarchy. */
356$color-text-weak: rgb(112, 117, 120) !default;
357/* Light shade of destructive link text to be used in interactions */
358$color-text-link-destructive-light: rgb(236, 182, 182) !default;
359/* Default icon color. */
360$color-text-icon: rgb(112, 117, 120) !default;
361/* Link text */
362$color-text-link: rgb(0, 94, 166) !default;
363/* Dark error text for inputs and error misc */
364$color-text-error-dark: rgb(146, 18, 0) !default;
365/* Error text for inputs and error misc */
366$color-text-error: rgb(226, 37, 37) !default;
367/* Dark shade of link text to be used in interactions */
368$color-text-link-dark: rgb(0, 62, 130) !default;
369/* Text color used on any brand color */
370$color-text-brand-inverse: rgb(255, 255, 255) !default;
371/* Body text color */
372$color-text: rgb(40, 42, 43) !default;
373/* Twilio brand red, accessible on large text only. */
374$color-text-brand-highlight: rgb(242, 47, 70) !default;
375/* Light shade of link text to be used in interactions */
376$color-text-link-light: rgb(179, 211, 233) !default;
377/* Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse. */
378$color-text-inverse: rgb(255, 255, 255) !default;
379/* Weaker body text for visual hierarchy. Inaccessible unless used on disabled controls. */
380$color-text-weaker: rgb(200, 204, 207) !default;
381/* Input placeholder text. */
382$color-text-placeholder: rgb(112, 117, 120) !default;
383/* Color for dark warning text. */
384$color-text-warning-dark: rgb(168, 62, 0) !default;
385/* Dark shade of destructive link text to be used in interactions */
386$color-text-link-destructive-dark: rgb(178, 6, 0) !default;
387/* Text color for field labels. */
388$color-text-label: rgb(40, 42, 43) !default;
389$z-index-0: 0 !default;
390$z-index-90: 90 !default;
391$z-index-80: 80 !default;
392$z-index-70: 70 !default;
393$z-index-60: 60 !default;
394$z-index-50: 50 !default;
395$z-index-40: 40 !default;
396$z-index-30: 30 !default;
397$z-index-20: 20 !default;
398$z-index-10: 10 !default;