UNPKG

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