UNPKG

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