@abgov/design-tokens 1.2.0 → 1.4.0-dev.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-design-tokens/accordion-design-tokens.json +54 -0
- package/data/component-design-tokens/button-design-tokens.json +26 -0
- package/data/component-design-tokens/callout-design-tokens.json +122 -0
- package/data/component-design-tokens/container-design-tokens.json +18 -0
- package/data/component-design-tokens/side-menu-design-tokens.json +46 -0
- package/data/component-design-tokens/table-design-tokens.json +10 -0
- package/data/{global-ddi.json → goa-global-design-tokens.json} +430 -240
- package/dist/tokens.css +194 -90
- package/dist/tokens.scss +194 -90
- package/lib/design-tokens.js +22 -0
- package/package.json +1 -1
|
@@ -1,166 +1,176 @@
|
|
|
1
1
|
{
|
|
2
2
|
"color": {
|
|
3
|
-
"brand": {
|
|
4
|
-
"default": {
|
|
5
|
-
"value": "#0081A2",
|
|
6
|
-
"type": "color",
|
|
7
|
-
"description": "Teal GOA color"
|
|
8
|
-
},
|
|
9
|
-
"dark": {
|
|
10
|
-
"value": "#005072",
|
|
11
|
-
"type": "color",
|
|
12
|
-
"description": "Dark GOA brand color"
|
|
13
|
-
},
|
|
14
|
-
"light": {
|
|
15
|
-
"value": "#C8EEFA",
|
|
16
|
-
"type": "color",
|
|
17
|
-
"description": "Light GOA brand color"
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
3
|
"interactive": {
|
|
21
4
|
"default": {
|
|
22
|
-
"value": "#
|
|
23
|
-
"type": "color"
|
|
24
|
-
"description": "Default color for interactive elements."
|
|
5
|
+
"value": "#0070c4",
|
|
6
|
+
"type": "color"
|
|
25
7
|
},
|
|
26
8
|
"hover": {
|
|
27
|
-
"value": "#
|
|
28
|
-
"type": "color"
|
|
29
|
-
|
|
9
|
+
"value": "#004f84",
|
|
10
|
+
"type": "color"
|
|
11
|
+
},
|
|
12
|
+
"disabled": {
|
|
13
|
+
"value": "#80b7e1",
|
|
14
|
+
"type": "color"
|
|
30
15
|
},
|
|
31
16
|
"error": {
|
|
32
|
-
"value": "#
|
|
33
|
-
"type": "color"
|
|
34
|
-
|
|
17
|
+
"value": "#ec040b",
|
|
18
|
+
"type": "color"
|
|
19
|
+
},
|
|
20
|
+
"error-hover": {
|
|
21
|
+
"value": "#ba0000",
|
|
22
|
+
"type": "color"
|
|
23
|
+
},
|
|
24
|
+
"error-disabled": {
|
|
25
|
+
"value": "#f58185",
|
|
26
|
+
"type": "color"
|
|
35
27
|
},
|
|
36
28
|
"focus": {
|
|
37
|
-
"value": "#
|
|
38
|
-
"type": "color"
|
|
39
|
-
"description": "Focus state color for interactive elements."
|
|
29
|
+
"value": "#feba35",
|
|
30
|
+
"type": "color"
|
|
40
31
|
},
|
|
41
|
-
"
|
|
42
|
-
"value": "#
|
|
43
|
-
"type": "color"
|
|
44
|
-
|
|
32
|
+
"focus-black": {
|
|
33
|
+
"value": "#000000",
|
|
34
|
+
"type": "color"
|
|
35
|
+
},
|
|
36
|
+
"visited": {
|
|
37
|
+
"value": "#756693",
|
|
38
|
+
"type": "color"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"brand": {
|
|
42
|
+
"default": {
|
|
43
|
+
"value": "#0081a2",
|
|
44
|
+
"type": "color"
|
|
45
|
+
},
|
|
46
|
+
"dark": {
|
|
47
|
+
"value": "#005072",
|
|
48
|
+
"type": "color"
|
|
49
|
+
},
|
|
50
|
+
"light": {
|
|
51
|
+
"value": "#c8eefa",
|
|
52
|
+
"type": "color"
|
|
45
53
|
}
|
|
46
54
|
},
|
|
47
55
|
"text": {
|
|
48
56
|
"default": {
|
|
49
57
|
"value": "{color.greyscale.black}",
|
|
50
|
-
"type": "color"
|
|
51
|
-
"description": "Default color for most text (such as body, headings, subheadings)."
|
|
58
|
+
"type": "color"
|
|
52
59
|
},
|
|
53
60
|
"secondary": {
|
|
54
61
|
"value": "{color.greyscale.700}",
|
|
55
|
-
"type": "color"
|
|
56
|
-
"description": "Default colour for secondary text labels such as “optional” or “required”."
|
|
62
|
+
"type": "color"
|
|
57
63
|
},
|
|
58
64
|
"light": {
|
|
59
65
|
"value": "{color.greyscale.white}",
|
|
60
|
-
"type": "color"
|
|
61
|
-
"description": "Use as the text color on dark backgrounds."
|
|
66
|
+
"type": "color"
|
|
62
67
|
},
|
|
63
68
|
"disabled": {
|
|
64
69
|
"value": "{color.greyscale.700}",
|
|
65
|
-
"type": "color"
|
|
66
|
-
"description": "Default color for text on a grey background within the disabled text input, text area, combobox, and dropdown."
|
|
70
|
+
"type": "color"
|
|
67
71
|
}
|
|
68
72
|
},
|
|
69
|
-
"
|
|
73
|
+
"information": {
|
|
70
74
|
"default": {
|
|
71
|
-
"value": "#
|
|
72
|
-
"type": "color"
|
|
73
|
-
"description": "Use this color to indicate information to the user."
|
|
75
|
+
"value": "#004a8f",
|
|
76
|
+
"type": "color"
|
|
74
77
|
},
|
|
75
78
|
"light": {
|
|
76
|
-
"value": "#
|
|
79
|
+
"value": "#aac9e7",
|
|
77
80
|
"type": "color"
|
|
78
81
|
},
|
|
79
82
|
"dark": {
|
|
80
|
-
"value": "#
|
|
83
|
+
"value": "#003b70",
|
|
81
84
|
"type": "color"
|
|
82
85
|
},
|
|
83
86
|
"background": {
|
|
84
|
-
"value": "#
|
|
85
|
-
"type": "color"
|
|
86
|
-
"description": "Use this color as a background when indicating information to the user such as within a container or small callout."
|
|
87
|
+
"value": "#eff8ff",
|
|
88
|
+
"type": "color"
|
|
87
89
|
}
|
|
88
90
|
},
|
|
89
91
|
"warning": {
|
|
90
92
|
"default": {
|
|
91
|
-
"value": "#
|
|
92
|
-
"type": "color"
|
|
93
|
-
"description": "Use this color to indicate a warning to the user."
|
|
93
|
+
"value": "#f9ce2d",
|
|
94
|
+
"type": "color"
|
|
94
95
|
},
|
|
95
96
|
"light": {
|
|
96
|
-
"value": "#
|
|
97
|
+
"value": "#ffeab6",
|
|
97
98
|
"type": "color"
|
|
98
99
|
},
|
|
99
100
|
"dark": {
|
|
100
|
-
"value": "#
|
|
101
|
+
"value": "#bf8d23",
|
|
101
102
|
"type": "color"
|
|
102
103
|
},
|
|
103
104
|
"background": {
|
|
104
|
-
"value": "#
|
|
105
|
-
"type": "color"
|
|
106
|
-
"description": "Use this color as a background when indicating caution to the user such as within a container or small callout."
|
|
105
|
+
"value": "#fff6e5",
|
|
106
|
+
"type": "color"
|
|
107
107
|
}
|
|
108
108
|
},
|
|
109
109
|
"emergency": {
|
|
110
110
|
"default": {
|
|
111
|
-
"value": "#
|
|
112
|
-
"type": "color"
|
|
113
|
-
"description": "Use this color to indicate an emergency to the user."
|
|
111
|
+
"value": "#da291c",
|
|
112
|
+
"type": "color"
|
|
114
113
|
},
|
|
115
114
|
"light": {
|
|
116
|
-
"value": "#
|
|
115
|
+
"value": "#fbd1ce",
|
|
117
116
|
"type": "color"
|
|
118
117
|
},
|
|
119
118
|
"dark": {
|
|
120
|
-
"value": "#
|
|
119
|
+
"value": "#a91a10",
|
|
121
120
|
"type": "color"
|
|
122
121
|
},
|
|
123
122
|
"background": {
|
|
124
|
-
"value": "#
|
|
125
|
-
"type": "color"
|
|
126
|
-
"description": "Use this color as a background when indicating emergency to the user such as within a container or small callout."
|
|
123
|
+
"value": "#fff1f2",
|
|
124
|
+
"type": "color"
|
|
127
125
|
}
|
|
128
126
|
},
|
|
129
127
|
"success": {
|
|
130
128
|
"default": {
|
|
131
|
-
"value": "#
|
|
132
|
-
"type": "color"
|
|
133
|
-
"description": "Use this color to indicate success to the user."
|
|
129
|
+
"value": "#006f4c",
|
|
130
|
+
"type": "color"
|
|
134
131
|
},
|
|
135
132
|
"light": {
|
|
136
|
-
"value": "#
|
|
133
|
+
"value": "#cce4dc",
|
|
137
134
|
"type": "color"
|
|
138
135
|
},
|
|
139
136
|
"dark": {
|
|
140
|
-
"value": "#
|
|
137
|
+
"value": "#00563a",
|
|
141
138
|
"type": "color"
|
|
142
139
|
},
|
|
143
140
|
"background": {
|
|
144
|
-
"value": "#
|
|
145
|
-
"type": "color"
|
|
146
|
-
|
|
141
|
+
"value": "#eef9f3",
|
|
142
|
+
"type": "color"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"critical": {
|
|
146
|
+
"default": {
|
|
147
|
+
"value": "#171d23",
|
|
148
|
+
"type": "color"
|
|
147
149
|
}
|
|
148
150
|
},
|
|
149
151
|
"greyscale": {
|
|
150
152
|
"50": {
|
|
151
|
-
"value": "#
|
|
153
|
+
"value": "#f8f8f8",
|
|
152
154
|
"type": "color"
|
|
153
155
|
},
|
|
154
156
|
"100": {
|
|
155
|
-
"value": "#
|
|
157
|
+
"value": "#f1f1f1",
|
|
158
|
+
"type": "color"
|
|
159
|
+
},
|
|
160
|
+
"150": {
|
|
161
|
+
"value": "#e7e7e7",
|
|
156
162
|
"type": "color"
|
|
157
163
|
},
|
|
158
164
|
"200": {
|
|
159
|
-
"value": "#
|
|
165
|
+
"value": "#dcdcdc",
|
|
166
|
+
"type": "color"
|
|
167
|
+
},
|
|
168
|
+
"300": {
|
|
169
|
+
"value": "#c2c2c2",
|
|
160
170
|
"type": "color"
|
|
161
171
|
},
|
|
162
172
|
"400": {
|
|
163
|
-
"value": "#
|
|
173
|
+
"value": "#adadad",
|
|
164
174
|
"type": "color"
|
|
165
175
|
},
|
|
166
176
|
"500": {
|
|
@@ -175,87 +185,159 @@
|
|
|
175
185
|
"value": "#666666",
|
|
176
186
|
"type": "color"
|
|
177
187
|
},
|
|
188
|
+
"800": {
|
|
189
|
+
"value": "#5c5c5c",
|
|
190
|
+
"type": "color"
|
|
191
|
+
},
|
|
192
|
+
"900": {
|
|
193
|
+
"value": "#474747",
|
|
194
|
+
"type": "color"
|
|
195
|
+
},
|
|
178
196
|
"black": {
|
|
179
197
|
"value": "#333333",
|
|
180
198
|
"type": "color"
|
|
181
199
|
},
|
|
182
200
|
"white": {
|
|
183
|
-
"value": "#
|
|
201
|
+
"value": "#ffffff",
|
|
202
|
+
"type": "color"
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
"extended": {
|
|
206
|
+
"light": {
|
|
207
|
+
"aqua": {
|
|
208
|
+
"value": "#dcfbf8",
|
|
209
|
+
"type": "color"
|
|
210
|
+
},
|
|
211
|
+
"blue": {
|
|
212
|
+
"value": "#ddefff",
|
|
213
|
+
"type": "color"
|
|
214
|
+
},
|
|
215
|
+
"green": {
|
|
216
|
+
"value": "#cce2d9",
|
|
217
|
+
"type": "color"
|
|
218
|
+
},
|
|
219
|
+
"orange": {
|
|
220
|
+
"value": "#fcd6c3",
|
|
221
|
+
"type": "color"
|
|
222
|
+
},
|
|
223
|
+
"pink": {
|
|
224
|
+
"value": "#f9e1eb",
|
|
225
|
+
"type": "color"
|
|
226
|
+
},
|
|
227
|
+
"red": {
|
|
228
|
+
"value": "#f4cdc6",
|
|
229
|
+
"type": "color"
|
|
230
|
+
},
|
|
231
|
+
"violet": {
|
|
232
|
+
"value": "#efe2fb",
|
|
233
|
+
"type": "color"
|
|
234
|
+
},
|
|
235
|
+
"yellow": {
|
|
236
|
+
"value": "#fff7bf",
|
|
237
|
+
"type": "color"
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
"aqua": {
|
|
241
|
+
"value": "#7febe6",
|
|
242
|
+
"type": "color"
|
|
243
|
+
},
|
|
244
|
+
"blue": {
|
|
245
|
+
"value": "#aac9e7",
|
|
246
|
+
"type": "color"
|
|
247
|
+
},
|
|
248
|
+
"green": {
|
|
249
|
+
"value": "#bbfcb4",
|
|
250
|
+
"type": "color"
|
|
251
|
+
},
|
|
252
|
+
"orange": {
|
|
253
|
+
"value": "#ffc76d",
|
|
254
|
+
"type": "color"
|
|
255
|
+
},
|
|
256
|
+
"pink": {
|
|
257
|
+
"value": "#ff8fc5",
|
|
258
|
+
"type": "color"
|
|
259
|
+
},
|
|
260
|
+
"red": {
|
|
261
|
+
"value": "#ed948d",
|
|
262
|
+
"type": "color"
|
|
263
|
+
},
|
|
264
|
+
"violet": {
|
|
265
|
+
"value": "#d4c2ff",
|
|
266
|
+
"type": "color"
|
|
267
|
+
},
|
|
268
|
+
"yellow": {
|
|
269
|
+
"value": "#fce796",
|
|
184
270
|
"type": "color"
|
|
185
271
|
}
|
|
186
272
|
}
|
|
187
273
|
},
|
|
188
|
-
"
|
|
189
|
-
"
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
"
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
274
|
+
"opacity": {
|
|
275
|
+
"background": {
|
|
276
|
+
"modal": {
|
|
277
|
+
"value": "50%",
|
|
278
|
+
"type": "opacity",
|
|
279
|
+
"description": "50% opacity for black scrim behind modal to disable the rest of the screen"
|
|
280
|
+
},
|
|
281
|
+
"loading": {
|
|
282
|
+
"value": "90%",
|
|
283
|
+
"type": "opacity",
|
|
284
|
+
"description": "90% opacity for white scrum behind loading indicator"
|
|
285
|
+
}
|
|
200
286
|
}
|
|
201
287
|
},
|
|
202
|
-
"
|
|
203
|
-
"
|
|
204
|
-
"value": "0
|
|
205
|
-
"type": "
|
|
206
|
-
"description": "12px"
|
|
288
|
+
"borderRadius": {
|
|
289
|
+
"none": {
|
|
290
|
+
"value": "0",
|
|
291
|
+
"type": "borderRadius"
|
|
207
292
|
},
|
|
208
|
-
"
|
|
209
|
-
"value": "0.
|
|
210
|
-
"type": "
|
|
211
|
-
"description": "14px"
|
|
293
|
+
"m": {
|
|
294
|
+
"value": "0.25rem",
|
|
295
|
+
"type": "borderRadius"
|
|
212
296
|
},
|
|
213
|
-
"
|
|
214
|
-
"value": "
|
|
215
|
-
"type": "
|
|
216
|
-
"description": "16px"
|
|
297
|
+
"l": {
|
|
298
|
+
"value": "0.375rem",
|
|
299
|
+
"type": "borderRadius"
|
|
217
300
|
},
|
|
218
|
-
"
|
|
219
|
-
"value": "
|
|
220
|
-
"type": "
|
|
221
|
-
"description": "18px"
|
|
301
|
+
"xl": {
|
|
302
|
+
"value": "0.5rem",
|
|
303
|
+
"type": "borderRadius"
|
|
222
304
|
},
|
|
223
|
-
"
|
|
224
|
-
"value": "
|
|
225
|
-
"type": "
|
|
226
|
-
"description": "20px"
|
|
305
|
+
"2xl": {
|
|
306
|
+
"value": "0.625rem",
|
|
307
|
+
"type": "borderRadius"
|
|
227
308
|
},
|
|
228
|
-
"
|
|
229
|
-
"value": "
|
|
230
|
-
"type": "
|
|
231
|
-
|
|
309
|
+
"3xl": {
|
|
310
|
+
"value": "0.75rem",
|
|
311
|
+
"type": "borderRadius"
|
|
312
|
+
}
|
|
313
|
+
},
|
|
314
|
+
"borderWidth": {
|
|
315
|
+
"2xs": {
|
|
316
|
+
"value": "0.5px",
|
|
317
|
+
"type": "borderWidth"
|
|
232
318
|
},
|
|
233
|
-
"
|
|
234
|
-
"value": "
|
|
235
|
-
"type": "
|
|
236
|
-
"description": "24px"
|
|
319
|
+
"xs": {
|
|
320
|
+
"value": "0.7px",
|
|
321
|
+
"type": "borderWidth"
|
|
237
322
|
},
|
|
238
|
-
"
|
|
239
|
-
"value": "
|
|
240
|
-
"type": "
|
|
241
|
-
"description": "32px"
|
|
323
|
+
"s": {
|
|
324
|
+
"value": "1px",
|
|
325
|
+
"type": "borderWidth"
|
|
242
326
|
},
|
|
243
|
-
"
|
|
244
|
-
"value": "
|
|
245
|
-
"type": "
|
|
246
|
-
"description": "2.25rem"
|
|
327
|
+
"m": {
|
|
328
|
+
"value": "2px",
|
|
329
|
+
"type": "borderWidth"
|
|
247
330
|
},
|
|
248
|
-
"
|
|
249
|
-
"value": "
|
|
250
|
-
"type": "
|
|
251
|
-
"description": "48px"
|
|
331
|
+
"l": {
|
|
332
|
+
"value": "3px",
|
|
333
|
+
"type": "borderWidth"
|
|
252
334
|
}
|
|
253
335
|
},
|
|
254
336
|
"space": {
|
|
255
337
|
"none": {
|
|
256
338
|
"value": "0rem",
|
|
257
339
|
"type": "spacing",
|
|
258
|
-
"description": "0px
|
|
340
|
+
"description": "0px"
|
|
259
341
|
},
|
|
260
342
|
"3xs": {
|
|
261
343
|
"value": "0.125rem",
|
|
@@ -308,30 +390,112 @@
|
|
|
308
390
|
"description": "128px"
|
|
309
391
|
}
|
|
310
392
|
},
|
|
311
|
-
"
|
|
312
|
-
"
|
|
313
|
-
"value": "
|
|
314
|
-
"type": "
|
|
315
|
-
"description": "
|
|
393
|
+
"iconSize": {
|
|
394
|
+
"s": {
|
|
395
|
+
"value": "1rem",
|
|
396
|
+
"type": "sizing",
|
|
397
|
+
"description": "16px"
|
|
316
398
|
},
|
|
317
399
|
"m": {
|
|
318
|
-
"value": "
|
|
319
|
-
"type": "
|
|
320
|
-
"description": "
|
|
400
|
+
"value": "1.25rem",
|
|
401
|
+
"type": "sizing",
|
|
402
|
+
"description": "20px"
|
|
403
|
+
},
|
|
404
|
+
"l": {
|
|
405
|
+
"value": "1.5rem",
|
|
406
|
+
"type": "sizing",
|
|
407
|
+
"description": "24px"
|
|
321
408
|
}
|
|
322
409
|
},
|
|
323
|
-
"
|
|
324
|
-
"
|
|
325
|
-
"
|
|
326
|
-
"
|
|
327
|
-
"
|
|
328
|
-
"
|
|
410
|
+
"Shadow": {
|
|
411
|
+
"100": {
|
|
412
|
+
"value": {
|
|
413
|
+
"x": "0",
|
|
414
|
+
"y": "1",
|
|
415
|
+
"blur": "0",
|
|
416
|
+
"spread": "0",
|
|
417
|
+
"color": "1A1A1A12",
|
|
418
|
+
"type": "dropShadow"
|
|
329
419
|
},
|
|
330
|
-
"
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
420
|
+
"type": "boxShadow"
|
|
421
|
+
},
|
|
422
|
+
"150": {
|
|
423
|
+
"value": {
|
|
424
|
+
"x": "0",
|
|
425
|
+
"y": "1",
|
|
426
|
+
"blur": "0",
|
|
427
|
+
"spread": "0",
|
|
428
|
+
"color": "1a1a1a40",
|
|
429
|
+
"type": "dropShadow"
|
|
430
|
+
},
|
|
431
|
+
"type": "boxShadow"
|
|
432
|
+
},
|
|
433
|
+
"200": {
|
|
434
|
+
"value": {
|
|
435
|
+
"x": "0",
|
|
436
|
+
"y": "3",
|
|
437
|
+
"blur": "1",
|
|
438
|
+
"spread": "-1",
|
|
439
|
+
"color": "1a1a1a12",
|
|
440
|
+
"type": "dropShadow"
|
|
441
|
+
},
|
|
442
|
+
"type": "boxShadow"
|
|
443
|
+
},
|
|
444
|
+
"300": {
|
|
445
|
+
"value": {
|
|
446
|
+
"x": "0",
|
|
447
|
+
"y": "4",
|
|
448
|
+
"blur": "6",
|
|
449
|
+
"spread": "-2",
|
|
450
|
+
"color": "#1a1a1a33",
|
|
451
|
+
"type": "dropShadow"
|
|
452
|
+
},
|
|
453
|
+
"type": "boxShadow"
|
|
454
|
+
},
|
|
455
|
+
"400": {
|
|
456
|
+
"value": {
|
|
457
|
+
"x": "0",
|
|
458
|
+
"y": "8",
|
|
459
|
+
"blur": "16",
|
|
460
|
+
"spread": "-4",
|
|
461
|
+
"color": "#1a1a1a38",
|
|
462
|
+
"type": "dropShadow"
|
|
463
|
+
},
|
|
464
|
+
"type": "boxShadow"
|
|
465
|
+
},
|
|
466
|
+
"500": {
|
|
467
|
+
"value": {
|
|
468
|
+
"x": "0",
|
|
469
|
+
"y": "12",
|
|
470
|
+
"blur": "20",
|
|
471
|
+
"spread": "-8",
|
|
472
|
+
"color": "1a1a1a3D",
|
|
473
|
+
"type": "dropShadow"
|
|
474
|
+
},
|
|
475
|
+
"type": "boxShadow"
|
|
476
|
+
},
|
|
477
|
+
"600": {
|
|
478
|
+
"value": {
|
|
479
|
+
"x": "0",
|
|
480
|
+
"y": "20",
|
|
481
|
+
"blur": "20",
|
|
482
|
+
"spread": "-8",
|
|
483
|
+
"color": "1a1a1a47",
|
|
484
|
+
"type": "dropShadow"
|
|
485
|
+
},
|
|
486
|
+
"type": "boxShadow"
|
|
487
|
+
},
|
|
488
|
+
"modal": {
|
|
489
|
+
"value": {
|
|
490
|
+
"x": "6",
|
|
491
|
+
"y": "6",
|
|
492
|
+
"blur": "6",
|
|
493
|
+
"spread": "0",
|
|
494
|
+
"color": "rgba(0,0,0,0.16)",
|
|
495
|
+
"type": "dropShadow"
|
|
496
|
+
},
|
|
497
|
+
"type": "boxShadow",
|
|
498
|
+
"description": "Drop shadow for modals"
|
|
335
499
|
}
|
|
336
500
|
},
|
|
337
501
|
"lineHeight": {
|
|
@@ -380,7 +544,7 @@
|
|
|
380
544
|
"sans": {
|
|
381
545
|
"value": "acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif",
|
|
382
546
|
"type": "fontFamilies",
|
|
383
|
-
"description": "Deafult font family and fallback fonts when unavailable"
|
|
547
|
+
"description": "Deafult sans font family and fallback fonts when unavailable"
|
|
384
548
|
},
|
|
385
549
|
"number": {
|
|
386
550
|
"value": "roboto-mono, monospace",
|
|
@@ -388,57 +552,118 @@
|
|
|
388
552
|
"description": "monospace typeface for numbers and fallback fonts when unavailable"
|
|
389
553
|
}
|
|
390
554
|
},
|
|
555
|
+
"fontSize": {
|
|
556
|
+
"1": {
|
|
557
|
+
"value": "0.75rem",
|
|
558
|
+
"type": "fontSizes",
|
|
559
|
+
"description": "12px"
|
|
560
|
+
},
|
|
561
|
+
"2": {
|
|
562
|
+
"value": "0.875rem",
|
|
563
|
+
"type": "fontSizes",
|
|
564
|
+
"description": "14px"
|
|
565
|
+
},
|
|
566
|
+
"3": {
|
|
567
|
+
"value": "1rem",
|
|
568
|
+
"type": "fontSizes",
|
|
569
|
+
"description": "16px"
|
|
570
|
+
},
|
|
571
|
+
"4": {
|
|
572
|
+
"value": "1.125rem",
|
|
573
|
+
"type": "fontSizes",
|
|
574
|
+
"description": "18px"
|
|
575
|
+
},
|
|
576
|
+
"5": {
|
|
577
|
+
"value": "1.25rem",
|
|
578
|
+
"type": "fontSizes",
|
|
579
|
+
"description": "20px"
|
|
580
|
+
},
|
|
581
|
+
"6": {
|
|
582
|
+
"value": "1.375rem",
|
|
583
|
+
"type": "fontSizes",
|
|
584
|
+
"description": "22px"
|
|
585
|
+
},
|
|
586
|
+
"7": {
|
|
587
|
+
"value": "1.5rem",
|
|
588
|
+
"type": "fontSizes",
|
|
589
|
+
"description": "24px"
|
|
590
|
+
},
|
|
591
|
+
"8": {
|
|
592
|
+
"value": "2rem",
|
|
593
|
+
"type": "fontSizes",
|
|
594
|
+
"description": "32px"
|
|
595
|
+
},
|
|
596
|
+
"9": {
|
|
597
|
+
"value": "2.25rem",
|
|
598
|
+
"type": "fontSizes",
|
|
599
|
+
"description": "36px"
|
|
600
|
+
},
|
|
601
|
+
"10": {
|
|
602
|
+
"value": "3rem",
|
|
603
|
+
"type": "fontSizes",
|
|
604
|
+
"description": "48px"
|
|
605
|
+
}
|
|
606
|
+
},
|
|
607
|
+
"fontWeight": {
|
|
608
|
+
"regular": {
|
|
609
|
+
"value": "400",
|
|
610
|
+
"type": "fontWeights"
|
|
611
|
+
},
|
|
612
|
+
"medium": {
|
|
613
|
+
"value": "500",
|
|
614
|
+
"type": "fontWeights"
|
|
615
|
+
},
|
|
616
|
+
"bold": {
|
|
617
|
+
"value": "700",
|
|
618
|
+
"type": "fontWeights"
|
|
619
|
+
}
|
|
620
|
+
},
|
|
391
621
|
"typography": {
|
|
392
622
|
"heading": {
|
|
393
623
|
"xs": {
|
|
394
624
|
"value": {
|
|
395
625
|
"fontFamily": "{fontFamily.sans}",
|
|
396
626
|
"fontWeight": "{fontWeight.bold}",
|
|
397
|
-
"
|
|
398
|
-
"
|
|
627
|
+
"fontSize": "{fontSize.3}",
|
|
628
|
+
"lineHeight": "{lineHeight.2}"
|
|
399
629
|
},
|
|
400
|
-
"type": "typography"
|
|
401
|
-
"description": "Heading XS"
|
|
630
|
+
"type": "typography"
|
|
402
631
|
},
|
|
403
632
|
"s": {
|
|
404
633
|
"value": {
|
|
405
634
|
"fontFamily": "{fontFamily.sans}",
|
|
406
635
|
"fontWeight": "{fontWeight.bold}",
|
|
407
|
-
"
|
|
408
|
-
"
|
|
636
|
+
"fontSize": "{fontSize.4}",
|
|
637
|
+
"lineHeight": "{lineHeight.3}"
|
|
409
638
|
},
|
|
410
|
-
"type": "typography"
|
|
411
|
-
"description": "Heading S"
|
|
639
|
+
"type": "typography"
|
|
412
640
|
},
|
|
413
641
|
"m": {
|
|
414
642
|
"value": {
|
|
415
643
|
"fontFamily": "{fontFamily.sans}",
|
|
416
644
|
"fontWeight": "{fontWeight.regular}",
|
|
417
|
-
"
|
|
418
|
-
"
|
|
645
|
+
"fontSize": "{fontSize.7}",
|
|
646
|
+
"lineHeight": "{lineHeight.4}"
|
|
419
647
|
},
|
|
420
|
-
"type": "typography"
|
|
421
|
-
"description": "Heading M"
|
|
648
|
+
"type": "typography"
|
|
422
649
|
},
|
|
423
650
|
"l": {
|
|
424
651
|
"value": {
|
|
425
652
|
"fontFamily": "{fontFamily.sans}",
|
|
426
653
|
"fontWeight": "{fontWeight.regular}",
|
|
427
|
-
"
|
|
428
|
-
"
|
|
654
|
+
"fontSize": "{fontSize.9}",
|
|
655
|
+
"lineHeight": "{lineHeight.6}"
|
|
429
656
|
},
|
|
430
|
-
"type": "typography"
|
|
431
|
-
"description": "Heading L"
|
|
657
|
+
"type": "typography"
|
|
432
658
|
},
|
|
433
659
|
"xl": {
|
|
434
660
|
"value": {
|
|
435
661
|
"fontFamily": "{fontFamily.sans}",
|
|
436
662
|
"fontWeight": "{fontWeight.bold}",
|
|
437
|
-
"
|
|
438
|
-
"
|
|
663
|
+
"fontSize": "{fontSize.10}",
|
|
664
|
+
"lineHeight": "{lineHeight.7}"
|
|
439
665
|
},
|
|
440
|
-
"type": "typography"
|
|
441
|
-
"description": "Heading XL"
|
|
666
|
+
"type": "typography"
|
|
442
667
|
}
|
|
443
668
|
},
|
|
444
669
|
"body": {
|
|
@@ -446,31 +671,28 @@
|
|
|
446
671
|
"value": {
|
|
447
672
|
"fontFamily": "{fontFamily.sans}",
|
|
448
673
|
"fontWeight": "{fontWeight.regular}",
|
|
449
|
-
"
|
|
450
|
-
"
|
|
674
|
+
"fontSize": "{fontSize.2}",
|
|
675
|
+
"lineHeight": "{lineHeight.1}"
|
|
451
676
|
},
|
|
452
|
-
"type": "typography"
|
|
453
|
-
"description": "Micro text"
|
|
677
|
+
"type": "typography"
|
|
454
678
|
},
|
|
455
679
|
"s": {
|
|
456
680
|
"value": {
|
|
457
681
|
"fontFamily": "{fontFamily.sans}",
|
|
458
682
|
"fontWeight": "{fontWeight.regular}",
|
|
459
|
-
"
|
|
460
|
-
"
|
|
683
|
+
"fontSize": "{fontSize.3}",
|
|
684
|
+
"lineHeight": "{lineHeight.2}"
|
|
461
685
|
},
|
|
462
|
-
"type": "typography"
|
|
463
|
-
"description": "Small text"
|
|
686
|
+
"type": "typography"
|
|
464
687
|
},
|
|
465
688
|
"m": {
|
|
466
689
|
"value": {
|
|
467
690
|
"fontFamily": "{fontFamily.sans}",
|
|
468
691
|
"fontWeight": "{fontWeight.regular}",
|
|
469
|
-
"
|
|
470
|
-
"
|
|
692
|
+
"fontSize": "{fontSize.4}",
|
|
693
|
+
"lineHeight": "{lineHeight.3}"
|
|
471
694
|
},
|
|
472
|
-
"type": "typography"
|
|
473
|
-
"description": "Body text"
|
|
695
|
+
"type": "typography"
|
|
474
696
|
},
|
|
475
697
|
"l": {
|
|
476
698
|
"value": {
|
|
@@ -479,8 +701,7 @@
|
|
|
479
701
|
"lineHeight": "{lineHeight.4}",
|
|
480
702
|
"fontSize": "{fontSize.7}"
|
|
481
703
|
},
|
|
482
|
-
"type": "typography"
|
|
483
|
-
"description": "Large text"
|
|
704
|
+
"type": "typography"
|
|
484
705
|
}
|
|
485
706
|
},
|
|
486
707
|
"button": {
|
|
@@ -488,79 +709,48 @@
|
|
|
488
709
|
"value": {
|
|
489
710
|
"fontFamily": "{fontFamily.sans}",
|
|
490
711
|
"fontWeight": "{fontWeight.regular}",
|
|
491
|
-
"lineHeight": "{lineHeight.1}",
|
|
492
712
|
"fontSize": "{fontSize.4}",
|
|
713
|
+
"lineHeight": "{lineHeight.1}",
|
|
493
714
|
"letterSpacing": "{letterSpacing.button}"
|
|
494
715
|
},
|
|
495
716
|
"type": "typography"
|
|
496
717
|
}
|
|
497
718
|
},
|
|
498
719
|
"number": {
|
|
720
|
+
"s": {
|
|
721
|
+
"value": {
|
|
722
|
+
"fontFamily": "{fontFamily.number}",
|
|
723
|
+
"fontWeight": "{fontWeight.medium}",
|
|
724
|
+
"lineHeight": "{lineHeight.2}",
|
|
725
|
+
"fontSize": "{fontSize.3}"
|
|
726
|
+
},
|
|
727
|
+
"type": "typography"
|
|
728
|
+
},
|
|
499
729
|
"m": {
|
|
500
730
|
"value": {
|
|
501
731
|
"fontFamily": "{fontFamily.number}",
|
|
502
732
|
"fontWeight": "{fontWeight.medium}",
|
|
503
733
|
"lineHeight": "{lineHeight.3}",
|
|
504
|
-
"fontSize": "{fontSize.4}"
|
|
505
|
-
|
|
734
|
+
"fontSize": "{fontSize.4}"
|
|
735
|
+
},
|
|
736
|
+
"type": "typography"
|
|
737
|
+
},
|
|
738
|
+
"l": {
|
|
739
|
+
"value": {
|
|
740
|
+
"fontFamily": "{fontFamily.number}",
|
|
741
|
+
"fontWeight": "{fontWeight.medium}",
|
|
742
|
+
"lineHeight": "{lineHeight.4}",
|
|
743
|
+
"fontSize": "{fontSize.7}"
|
|
506
744
|
},
|
|
507
745
|
"type": "typography"
|
|
508
746
|
}
|
|
509
747
|
}
|
|
510
748
|
},
|
|
511
|
-
"borderWidth": {
|
|
512
|
-
"s": {
|
|
513
|
-
"value": "1px",
|
|
514
|
-
"type": "borderWidth",
|
|
515
|
-
"description": "Small border width"
|
|
516
|
-
},
|
|
517
|
-
"m": {
|
|
518
|
-
"value": "2px",
|
|
519
|
-
"type": "borderWidth",
|
|
520
|
-
"description": "Medium border width"
|
|
521
|
-
},
|
|
522
|
-
"l": {
|
|
523
|
-
"value": "3px",
|
|
524
|
-
"type": "borderWidth",
|
|
525
|
-
"description": "Large border width"
|
|
526
|
-
}
|
|
527
|
-
},
|
|
528
749
|
"letterSpacing": {
|
|
529
750
|
"button": {
|
|
530
751
|
"value": "0.0125rem",
|
|
531
752
|
"type": "letterSpacing",
|
|
532
|
-
"description": "small letter spacing adjustment to slightly kern letters out for readability on buttons
|
|
533
|
-
}
|
|
534
|
-
},
|
|
535
|
-
"iconSize": {
|
|
536
|
-
"s": {
|
|
537
|
-
"value": "1rem",
|
|
538
|
-
"type": "sizing",
|
|
539
|
-
"description": "16px"
|
|
540
|
-
},
|
|
541
|
-
"m": {
|
|
542
|
-
"value": "1.25rem",
|
|
543
|
-
"type": "sizing",
|
|
544
|
-
"description": "20px"
|
|
545
|
-
},
|
|
546
|
-
"l": {
|
|
547
|
-
"value": "1.5rem",
|
|
548
|
-
"type": "sizing",
|
|
549
|
-
"description": "24px"
|
|
550
|
-
}
|
|
551
|
-
},
|
|
552
|
-
"Shadow": {
|
|
553
|
-
"modal": {
|
|
554
|
-
"value": {
|
|
555
|
-
"x": "6",
|
|
556
|
-
"y": "6",
|
|
557
|
-
"blur": "6",
|
|
558
|
-
"spread": "0",
|
|
559
|
-
"color": "rgba(0,0,0,0.16)",
|
|
560
|
-
"type": "dropShadow"
|
|
561
|
-
},
|
|
562
|
-
"type": "boxShadow",
|
|
563
|
-
"description": "Drop shadow for modals."
|
|
753
|
+
"description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
|
|
564
754
|
}
|
|
565
755
|
}
|
|
566
|
-
}
|
|
756
|
+
}
|