UNPKG

13.3 kB SCSS View Raw
1
2// Darker background for primary actions or highlights
3$color-background-primary-darker: #030b5d !default;
4// Lighter background for primary actions or highlights
5$color-background-primary-lighter: #cce4ff !default;
6// Darker background for destructive actions or highlights
7$color-background-destructive-darker: #4a0b0b !default;
8// Lighter background for destructive actions or highlights
9$color-background-destructive-lighter: #fccfcf !default;
10// Warning background color
11$color-background-warning: #f47c22 !default;
12// Lightest error background color
13$color-background-error-lightest: #feecec !default;
14// Lightest neutral background color
15$color-background-neutral-lightest: #ebf4ff !default;
16// Background for destructive actions or highlights
17$color-background-destructive: #d61f1f !default;
18// Background for primary actions or highlights
19$color-background-primary: #0263e0 !default;
20// Success background color
21$color-background-success: #14b053 !default;
22// Background color for alternative striped rows
23$color-background-row-striped: #f4f4f6 !default;
24// Lightest success background color
25$color-background-success-lightest: #edfdf3 !default;
26// Lightest background for destructive actions or highlights
27$color-background-destructive-lightest: #feecec !default;
28// Lightest background for primary actions or highlights
29$color-background-primary-lightest: #ebf4ff !default;
30// Primary brand background, accessible with inverse text
31$color-background-brand: #233659 !default;
32// Error background color
33$color-background-error: #d61f1f !default;
34// Required background color
35$color-background-required: #eb5656 !default;
36// Dark background for destructive actions or highlights
37$color-background-destructive-dark: #750c0c !default;
38// Light background for destructive actions or highlights
39$color-background-destructive-light: #f58a8a !default;
40// Dark background for primary actions or highlights
41$color-background-primary-dark: #001489 !default;
42// Light background for primary actions or highlights
43$color-background-primary-light: #66b3ff !default;
44// Lightest warning background color
45$color-background-warning-lightest: #fef5ee !default;
46// Background color of the main page body
47$color-background-body: #ffffff !default;
48// Default background color for any container
49$color-background: #f4f4f6 !default;
50// Highlight brand background, accessible with black text
51$color-background-brand-highlight: #f22f46 !default;
52// Inverse background color for any container
53$color-background-inverse: #1f304c !default;
54// Destructive focus border color
55$color-border-destructive-lighter: #fccfcf !default;
56// Lighter primary border color
57$color-border-primary-lighter: #cce4ff !default;
58// Input hover border color
59$color-border-input-hover: #0263e0 !default;
60// Darker primary border color
61$color-border-primary-darker: #030b5d !default;
62// Warning border color
63$color-border-warning: #f47c22 !default;
64// Darker destructive hover border color
65$color-border-destructive-darker: #4a0b0b !default;
66// Destructive border color
67$color-border-destructive: #d61f1f !default;
68// Primary border color
69$color-border-primary: #0263e0 !default;
70// Success border color
71$color-border-success: #14b053 !default;
72// Lightest error border color
73$color-border-error-lightest: #feecec !default;
74// Dark border color
75$color-border-dark: #606b85 !default;
76// Light warning border color
77$color-border-warning-light: #ffb37a !default;
78// Lightest success border color
79$color-border-success-lightest: #edfdf3 !default;
80// Error border color
81$color-border-error: #d61f1f !default;
82// Input border color
83$color-border-input: #606b85 !default;
84// Destructive focus border color
85$color-border-destructive-light: #f58a8a !default;
86// Light primary border color
87$color-border-primary-light: #66b3ff !default;
88// Default border color
89$color-border: #aeb2c1 !default;
90// Lightest warning border color
91$color-border-warning-lightest: #fef5ee !default;
92// Dark primary border color
93$color-border-primary-dark: #001489 !default;
94// Destructive focus border color
95$color-border-destructive-dark: #750c0c !default;
96// Light neutral border color
97$color-border-neutral-light: #8891aa !default;
98// Light error border color
99$color-border-error-light: #f58a8a !default;
100// Input focus border color
101$color-border-input-focus: #0263e0 !default;
102// Light border color
103$color-border-light: #e1e3ea !default;
104// Border radius reset
105$border-radius-0: 0 !default;
106// Small border radius
107$border-radius-10: 3px !default;
108// Large border radius
109$border-radius-20: 4px !default;
110// Larger border radius
111$border-radius-30: 8px !default;
112// Circular border radius
113$border-radius-circle: 50% !default;
114// Border width reset
115$border-width-0: 0 !default;
116// Small border width
117$border-width-10: 1px !default;
118// Large border width
119$border-width-20: 2px !default;
120// Shadow for cards.
121$shadow-card: 0 2px 4px 0 rgba(18, 28, 45, 0.3) !default;
122// Shadow for focus ring on interactive elements
123$shadow-focus: 0 0 0 4px rgba(2, 99, 224, 0.8) !default;
124// Shadow border for inputs.
125$shadow-border-input: 0 0 0 1px #606b85 !default;
126// Shadow border for inputs hover.
127$shadow-border-input-hover: 0 0 0 1px #030b5d !default;
128// Shadow border for error inputs.
129$shadow-border-input-error: 0 0 0 1px #d61f1f !default;
130// Shadow border for error inputs hover.
131$shadow-border-input-error-hover: 0 0 0 1px #750c0c !default;
132// Shadow border for disabled inputs.
133$shadow-border-input-disabled: 0 0 0 1px #e1e3ea !default;
134$font-family-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !default;
135$font-family-code: 'Fira Mono', 'Courier New', Courier, monospace !default;
136// Constant typography token for font size 110
137$font-size-110: 3rem !default;
138// Constant typography token for font size 100
139$font-size-100: 2.5rem !default;
140// Constant typography token for font size 90
141$font-size-90: 2rem !default;
142// Constant typography token for font size 80
143$font-size-80: 1.75rem !default;
144// Constant typography token for font size 70
145$font-size-70: 1.5rem !default;
146// Constant typography token for font size 60
147$font-size-60: 1.25rem !default;
148// Constant typography token for font size 50
149$font-size-50: 1.125rem !default;
150// Constant typography token for font size 40
151$font-size-40: 1rem !default;
152// Constant typography token for font size 30
153$font-size-30: 0.875rem !default;
154// Constant typography token for font size 20
155$font-size-20: 0.75rem !default;
156// Constant typography token for font size 10
157$font-size-10: 0.625rem !default;
158// Font weight for light weight
159$font-weight-light: 300 !default;
160// Font weight for normal weight
161$font-weight-normal: 400 !default;
162// Font weight for medium weight
163$font-weight-medium: 500 !default;
164// Font weight for semibold weight
165$font-weight-semibold: 600 !default;
166// Font weight for bold weight
167$font-weight-bold: 700 !default;
168// fontSize110's lineHeight mapping. fontSize110 * 1.25 = 60px / 16 = 3.75rem
169$line-height-110: 3.75rem !default;
170// fontSize90's lineHeight mapping. fontSize90 * 1.25 = 40px / 16 = 2.5rem
171$line-height-90: 2.5rem !default;
172// fontSize100's lineHeight mapping. fontSize100 * 1.25 = 52px / 16 = 3.25rem
173$line-height-100: 3.25rem !default;
174// fontSize80's lineHeight mapping. fontSize80 * 1.25 = 36px / 16 = 2.25rem
175$line-height-80: 2.25rem !default;
176// fontSize70's lineHeight mapping. fontSize70 * 1.25 = 32px / 16 = 2rem
177$line-height-70: 2rem !default;
178// fontSize60's lineHeight mapping. fontSize60 * 1.25 = 28px / 16 = 1.75rem
179$line-height-60: 1.75rem !default;
180// fontSize50's lineHeight mapping. fontSize50 * 1.55 = 28px / 16 = 1.75rem
181$line-height-50: 1.75rem !default;
182// fontSize40's lineHeight mapping. fontSize40 * 1.55 = 28px / 16 = 1.75rem
183$line-height-40: 1.75rem !default;
184// fontSize30's lineHeight mapping. fontSize30 * 1.55 = 24px / 16 = 1.5rem
185$line-height-30: 1.5rem !default;
186// fontSize20's lineHeight mapping. fontSize20 * 1.55 = 20px / 16 = 1.25rem
187$line-height-20: 1.25rem !default;
188// fontSize10's lineHeight mapping. fontSize10 * 1.55 = 16px / 16 = 1rem
189$line-height-10: 1rem !default;
190// Twilio brand red
191$color-brand-highlight: #f22f46 !default;
192// Gray Color 0
193$color-gray-0: #ffffff !default;
194// Gray Color 10
195$color-gray-100: #121c2d !default;
196// Gray Color 9
197$color-gray-90: #1f304c !default;
198// Gray Color 8
199$color-gray-80: #394762 !default;
200// Gray Color 7
201$color-gray-70: #4b5671 !default;
202// Gray Color 6
203$color-gray-60: #606b85 !default;
204// Gray Color 5
205$color-gray-50: #8891aa !default;
206// Gray Color 4
207$color-gray-40: #aeb2c1 !default;
208// Default branding color
209$color-brand: #233659 !default;
210// Gray Color 3
211$color-gray-30: #cacdd8 !default;
212// Gray Color 2
213$color-gray-20: #e1e3ea !default;
214// Gray Color 1
215$color-gray-10: #f4f4f6 !default;
216// Maps to line-height tokens 1:1
217$size-icon-80: 2.25rem !default;
218// Maps to line-height tokens 1:1
219$size-icon-70: 2rem !default;
220// Maps to line-height tokens 1:1
221$size-icon-60: 1.75rem !default;
222// Generic sizing token scale for UI components.
223$size-90: 57.5rem !default;
224// Generic sizing token scale for UI components.
225$size-120: 77rem !default;
226// Maps to line-height tokens 1:1
227$size-icon-50: 1.75rem !default;
228// Generic sizing token scale for UI components.
229$size-80: 51rem !default;
230// Generic sizing token scale for UI components.
231$size-0: 0 !default;
232// Generic sizing token scale for UI components.
233$size-110: 70.5rem !default;
234// Maps to line-height tokens 1:1
235$size-icon-40: 1.75rem !default;
236// Generic sizing token scale for UI components.
237$size-70: 44.5rem !default;
238// Generic sizing token scale for UI components.
239$size-100: 64rem !default;
240// Maps to line-height tokens 1:1
241$size-icon-30: 1.5rem !default;
242// Generic sizing token scale for UI components.
243$size-60: 38rem !default;
244// Maps to line-height tokens 1:1
245$size-icon-20: 1.25rem !default;
246// Maps to line-height tokens 1:1
247$size-icon-10: 1rem !default;
248// Generic sizing token scale for UI components.
249$size-50: 31.5rem !default;
250// Maps to line-height tokens 1:1
251$size-icon-110: 3.75rem !default;
252// Generic sizing token scale for UI components.
253$size-40: 25rem !default;
254// Maps to line-height tokens 1:1
255$size-icon-100: 3.25rem !default;
256// Generic sizing token scale for UI components.
257$size-30: 18.5rem !default;
258// Generic sizing token scale for UI components.
259$size-20: 12rem !default;
260// Generic sizing token scale for UI components.
261$size-10: 5.5rem !default;
262// Maps to line-height tokens 1:1
263$size-icon-90: 2.5rem !default;
264$space-70: 1.5rem !default;
265$space-60: 1.25rem !default;
266$space-190: 4.5rem !default;
267$space-50: 1rem !default;
268$space-180: 4.25rem !default;
269$space-40: 0.75rem !default;
270$space-170: 4rem !default;
271$space-30: 0.5rem !default;
272$space-160: 3.75rem !default;
273$space-20: 0.25rem !default;
274$space-150: 3.5rem !default;
275$space-10: 0.125rem !default;
276$space-140: 3.25rem !default;
277$space-130: 3rem !default;
278$space-120: 2.75rem !default;
279$space-110: 2.5rem !default;
280$space-0: 0 !default;
281$space-100: 2.25rem !default;
282$space-200: 4.75rem !default;
283$space-90: 2rem !default;
284$space-80: 1.75rem !default;
285// Darker shade of link text to be used in interactions
286$color-text-link-darker: #030b5d !default;
287// Destructive link text
288$color-text-link-destructive: #d61f1f !default;
289// Color for warning text.
290$color-text-warning: #f47c22 !default;
291// Weak inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.
292$color-text-inverse-weak: #8891aa !default;
293// Darker shade of destructive link text to be used in interactions
294$color-text-link-destructive-darker: #750c0c !default;
295// Text color for success text.
296$color-text-success: #14b053 !default;
297// Weak body text for visual hierarchy.
298$color-text-weak: #4b5671 !default;
299// Light shade of destructive link text to be used in interactions
300$color-text-link-destructive-light: #f58a8a !default;
301// Default icon color.
302$color-text-icon: #4b5671 !default;
303// Link text
304$color-text-link: #043cb5 !default;
305// Dark error text for inputs and error misc
306$color-text-error-dark: #ad1111 !default;
307// Error text for inputs and error misc
308$color-text-error: #d61f1f !default;
309// Dark shade of link text to be used in interactions
310$color-text-link-dark: #001489 !default;
311// Text color used on any brand color
312$color-text-brand-inverse: #ffffff !default;
313// Body text color
314$color-text: #121c2d !default;
315// Twilio brand red, accessible on large text only.
316$color-text-brand-highlight: #f22f46 !default;
317// Light shade of link text to be used in interactions
318$color-text-link-light: #66b3ff !default;
319// Inverse text color for dark backgrounds. Must pass AA color contrast with color-background-inverse.
320$color-text-inverse: #ffffff !default;
321// Input placeholder text.
322$color-text-placeholder: #4b5671 !default;
323// Color for dark warning text.
324$color-text-warning-dark: #c35323 !default;
325// Dark shade of destructive link text to be used in interactions
326$color-text-link-destructive-dark: #ad1111 !default;
327// Text color for field labels.
328$color-text-label: #121c2d !default;
329$z-index-0: 0 !default;
330$z-index-90: 90 !default;
331$z-index-80: 80 !default;
332$z-index-70: 70 !default;
333$z-index-60: 60 !default;
334$z-index-50: 50 !default;
335$z-index-40: 40 !default;
336$z-index-30: 30 !default;
337$z-index-20: 20 !default;
338$z-index-10: 10 !default;