UNPKG

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