UNPKG

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