UNPKG

9.73 kB text/less View Raw
1
2// Darker background for primary actions or highlights
3@color-background-primary-darker: #003e82;
4// Lighter background for primary actions or highlights
5@color-background-primary-lighter: #dceaf4;
6// Darker background for destructive actions or highlights
7@color-background-destructive-darker: #921200;
8// Lighter background for destructive actions or highlights
9@color-background-destructive-lighter: #f5dddd;
10// Warning background color
11@color-background-warning: #e46216;
12// Lightest error background color
13@color-background-error-lightest: #fff6f6;
14// Background for destructive actions or highlights
15@color-background-destructive: #cb0000;
16// Background for primary actions or highlights
17@color-background-primary: #0075c3;
18// Success background color
19@color-background-success: #00994a;
20// Background color for alternative striped rows
21@color-background-row-striped: #f8f8f9;
22// Lightest success background color
23@color-background-success-lightest: #e0ffef;
24// Lightest background for destructive actions or highlights
25@color-background-destructive-lightest: #fff6f6;
26// Lightest background for primary actions or highlights
27@color-background-primary-lightest: #f6fcff;
28// Primary brand background, accessible with inverse text
29@color-background-brand: #233659;
30// Error background color
31@color-background-error: #cb0000;
32// Dark background for destructive actions or highlights
33@color-background-destructive-dark: #b20600;
34// Light background for destructive actions or highlights
35@color-background-destructive-light: #ecb6b6;
36// Dark background for primary actions or highlights
37@color-background-primary-dark: #005ea6;
38// Light background for primary actions or highlights
39@color-background-primary-light: #b3d3e9;
40// Lightest warning background color
41@color-background-warning-lightest: #fff5eb;
42// Background color of the main page body
43@color-background-body: #ffffff;
44// Default background color for any container
45@color-background: #f8f8f9;
46// Highlight brand background, accessible with black text
47@color-background-brand-highlight: #f22f46;
48// Inverse background color for any container
49@color-background-inverse: #4f5355;
50// Destructive focus border color
51@color-border-destructive-lighter: #f5dddd;
52// Lighter primary border color
53@color-border-primary-lighter: #dceaf4;
54// Input hover border color
55@color-border-input-hover: #0075c3;
56// Darker primary border color
57@color-border-primary-darker: #003e82;
58// Warning border color
59@color-border-warning: #e46216;
60// Destructive hover border color
61@color-border-destructive-darker: #921200;
62// Destructive border color
63@color-border-destructive: #cb0000;
64// Primary border color
65@color-border-primary: #0075c3;
66// Success border color
67@color-border-success: #00994a;
68// Lightest error border color
69@color-border-error-lightest: #fff6f6;
70// Dark border color
71@color-border-dark: #888c8e;
72// Lightest success border color
73@color-border-success-lightest: #e0ffef;
74// Error border color
75@color-border-error: #cb0000;
76// Input border color
77@color-border-input: #888c8e;
78// Destructive focus border color
79@color-border-destructive-light: #ecb6b6;
80// Light primary border color
81@color-border-primary-light: #b3d3e9;
82// Default border color
83@color-border: #c8cccf;
84// Lightest warning border color
85@color-border-warning-lightest: #fff5eb;
86// Dark primary border color
87@color-border-primary-dark: #005ea6;
88// Destructive focus border color
89@color-border-destructive-dark: #b20600;
90// Input focus border color
91@color-border-input-focus: #0075c3;
92// Light border color
93@color-border-light: #e4e7e9;
94// Border radius reset
95@border-radius-0: 0;
96// Small border radius
97@border-radius-10: 3px;
98// Large border radius
99@border-radius-20: 4px;
100// Larger border radius
101@border-radius-30: 8px;
102// Circular border radius
103@border-radius-circle: 50%;
104// Border width reset
105@border-width-0: 0;
106// Small border width
107@border-width-10: 1px;
108// Large border width
109@border-width-20: 2px;
110// Shadow for cards.
111@shadow-card: 0 2px 4px 0 rgba(40, 42, 43, 0.3);
112// Shadow for focus ring on interactive elements
113@shadow-focus: 0 0 0 4px rgba(0,117,195,0.5);
114@font-family-text: 'Whitney SSm A', 'Whitney SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif;
115@font-family-code: 'Fira Mono', 'Courier New', Courier, monospace;
116// Constant typography token for font size 110
117@font-size-110: 3rem;
118// Constant typography token for font size 100
119@font-size-100: 2.5rem;
120// Constant typography token for font size 90
121@font-size-90: 2rem;
122// Constant typography token for font size 80
123@font-size-80: 1.75rem;
124// Constant typography token for font size 70
125@font-size-70: 1.5rem;
126// Constant typography token for font size 60
127@font-size-60: 1.25rem;
128// Constant typography token for font size 50
129@font-size-50: 1.125rem;
130// Constant typography token for font size 40
131@font-size-40: 1rem;
132// Constant typography token for font size 30
133@font-size-30: 0.875rem;
134// Constant typography token for font size 20
135@font-size-20: 0.75rem;
136// Constant typography token for font size 10
137@font-size-10: 0.625rem;
138// Font weight for light weight
139@font-weight-light: 300;
140// Font weight for normal weight
141@font-weight-normal: 400;
142// Font weight for medium weight
143@font-weight-medium: 500;
144// Font weight for semibold weight
145@font-weight-semibold: 600;
146// Font weight for bold weight
147@font-weight-bold: 700;
148// Constant line-height token for font size 110
149@line-height-110: 3.75rem;
150// Constant line-height token for font size 90
151@line-height-90: 2.5rem;
152// Constant line-height token for font size 100
153@line-height-100: 3.25rem;
154// Constant line-height token for font size 80
155@line-height-80: 2.25rem;
156// Constant line-height token for font size 70
157@line-height-70: 2rem;
158// Constant line-height token for font size 60
159@line-height-60: 1.75rem;
160// Constant line-height token for font size 50
161@line-height-50: 1.75rem;
162// Constant line-height token for font size 40
163@line-height-40: 1.75rem;
164// Constant line-height token for font size 30
165@line-height-30: 1.5rem;
166// Constant line-height token for font size 20
167@line-height-20: 1.25rem;
168// Constant line-height token for font size 10
169@line-height-10: 1rem;
170// Twilio brand red
171@color-brand-highlight: #f22f46;
172// Gray Color 0
173@color-gray-0: #ffffff;
174// Gray Color 10
175@color-gray-100: #282a2b;
176// Gray Color 9
177@color-gray-90: #424547;
178// Gray Color 8
179@color-gray-80: #4f5355;
180// Gray Color 7
181@color-gray-70: #666a6d;
182// Gray Color 6
183@color-gray-60: #888c8e;
184// Gray Color 5
185@color-gray-50: #c8cccf;
186// Gray Color 4
187@color-gray-40: #e4e7e9;
188// Default branding color
189@color-brand: #233659;
190// Gray Color 3
191@color-gray-30: #f2f3f4;
192// Gray Color 2
193@color-gray-20: #f8f8f9;
194// Gray Color 1
195@color-gray-10: #fafafa;
196// Generic sizing token scale for UI components.
197@size-90: 57.5rem;
198// Generic sizing token scale for UI components.
199@size-120: 77rem;
200// Generic sizing token scale for UI components.
201@size-80: 51rem;
202// Generic sizing token scale for UI components.
203@size-0: 0;
204// Generic sizing token scale for UI components.
205@size-110: 70.5rem;
206// Generic sizing token scale for UI components.
207@size-70: 44.5rem;
208// Generic sizing token scale for UI components.
209@size-100: 64rem;
210// Icon sizing token
211@size-icon-30: 2rem;
212// Generic sizing token scale for UI components.
213@size-60: 38rem;
214// Icon sizing token
215@size-icon-20: 1.5rem;
216// Icon sizing token
217@size-icon-10: 1rem;
218// Generic sizing token scale for UI components.
219@size-50: 31.5rem;
220// Generic sizing token scale for UI components.
221@size-40: 25rem;
222// Generic sizing token scale for UI components.
223@size-30: 18.5rem;
224// Generic sizing token scale for UI components.
225@size-20: 12rem;
226// Generic sizing token scale for UI components.
227@size-10: 5.5rem;
228@space-70: 1.5rem;
229@space-60: 1.25rem;
230@space-190: 4.5rem;
231@space-50: 1rem;
232@space-180: 4.25rem;
233@space-40: 0.75rem;
234@space-170: 4rem;
235@space-30: 0.5rem;
236@space-160: 3.75rem;
237@space-20: 0.25rem;
238@space-150: 3.5rem;
239@space-10: 0.125rem;
240@space-140: 3.25rem;
241@space-130: 3rem;
242@space-120: 2.75rem;
243@space-110: 2.5rem;
244@space-0: 0;
245@space-100: 2.25rem;
246@space-200: 4.75rem;
247@space-90: 2rem;
248@space-80: 1.75rem;
249// Darker shade of link text to be used in interactions
250@color-text-link-darker: #003e82;
251// Destructive link text
252@color-text-link-destructive: #cb0000;
253// Color for warning text.
254@color-text-warning: #e46216;
255// Weak inverse text color for dark backgrounds
256@color-text-inverse-weak: #888c8e;
257// Darker shade of destructive link text to be used in interactions
258@color-text-link-destructive-darker: #921200;
259// Text color for success text.
260@color-text-success: #00994a;
261// Weak body text for visual hierarchy.
262@color-text-weak: #666a6d;
263// Light shade of destructive link text to be used in interactions
264@color-text-link-destructive-light: #ecb6b6;
265// Default icon color.
266@color-text-icon: #282a2b;
267// Link text
268@color-text-link: #0075c3;
269// Error text for inputs and error misc
270@color-text-error: #cb0000;
271// Dark shade of link text to be used in interactions
272@color-text-link-dark: #005ea6;
273// Text color used on any brand color
274@color-text-brand-inverse: #ffffff;
275// Body text color
276@color-text: #282a2b;
277// Twilio brand red, accessible on large text only.
278@color-text-brand-highlight: #f22f46;
279// Light shade of link text to be used in interactions
280@color-text-link-light: #b3d3e9;
281// Inverse text color for dark backgrounds
282@color-text-inverse: #ffffff;
283// Input placeholder text.
284@color-text-placeholder: #666a6d;
285// Dark shade of destructive link text to be used in interactions
286@color-text-link-destructive-dark: #b20600;
287// Text color for field labels.
288@color-text-label: #282a2b;
289@z-index-0: 0;
290@z-index-90: 90;
291@z-index-80: 80;
292@z-index-70: 70;
293@z-index-60: 60;
294@z-index-50: 50;
295@z-index-40: 40;
296@z-index-30: 30;
297@z-index-20: 20;
298@z-index-10: 10;