@abgov/design-tokens 1.0.4 → 1.0.5-dev.2

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.
Files changed (11) hide show
  1. package/.github/workflows/publish.yml +13 -5
  2. package/.github/workflows/pull-request.yml +11 -5
  3. package/css/tokens.css +109 -87
  4. package/data/badge.json +98 -0
  5. package/data/button.json +1 -0
  6. package/data/global-ddi.json +512 -0
  7. package/index.spec.js +12 -0
  8. package/lib/design-tokens.js +45 -37
  9. package/package.json +1 -1
  10. package/scss/tokens.scss +109 -87
  11. package/data/tokens.json +0 -514
package/data/tokens.json DELETED
@@ -1,514 +0,0 @@
1
- {
2
- "colour": {
3
- "brand": {
4
- "default": {
5
- "value": "#0081A2",
6
- "type": "color",
7
- "description": "Teal GOA Colour"
8
- },
9
- "dark": {
10
- "value": "#005072",
11
- "type": "color",
12
- "description": "Dark GOA brand colour"
13
- },
14
- "light": {
15
- "value": "#C8EEFA",
16
- "type": "color",
17
- "description": "Light GOA brand colour"
18
- }
19
- },
20
- "interactive": {
21
- "default": {
22
- "value": "#0070C4",
23
- "type": "color",
24
- "description": "Default colour for interactive elements."
25
- },
26
- "hover": {
27
- "value": "#004F84",
28
- "type": "color",
29
- "description": "Hover state for interactive elements."
30
- },
31
- "error": {
32
- "value": "#EC040B",
33
- "type": "color",
34
- "description": "Error state for interactive elements."
35
- },
36
- "focus": {
37
- "value": "#FEBA35",
38
- "type": "color",
39
- "description": "Focus state for interactive elements."
40
- }
41
- },
42
- "text": {
43
- "default": {
44
- "value": "#333333",
45
- "type": "color",
46
- "description": "Default colour for most text (such as body, headings, subheadings)."
47
- },
48
- "secondary": {
49
- "value": "#666666",
50
- "type": "color",
51
- "description": "Default colour for secondary text (such as disabled button text, and secondary text labels eg. “optional” or “partially complete”)."
52
- },
53
- "light": {
54
- "value": "#FFFFFF",
55
- "type": "color",
56
- "description": "Use as the text colour on dark backgrounds."
57
- }
58
- },
59
- "status": {
60
- "info": {
61
- "default": {
62
- "value": "#005DAA",
63
- "type": "color",
64
- "description": "Use this colour to indicate information to the user."
65
- },
66
- "light": {
67
- "value": "#B2D4ED",
68
- "type": "color"
69
- },
70
- "dark": {
71
- "value": "#00347A",
72
- "type": "color"
73
- }
74
- },
75
- "warning": {
76
- "default": {
77
- "value": "#FEBA35",
78
- "type": "color",
79
- "description": "Use this colour to indicate a warning to the user."
80
- },
81
- "light": {
82
- "value": "#FCEFD0",
83
- "type": "color"
84
- },
85
- "dark": {
86
- "value": "#C68A00",
87
- "type": "color"
88
- }
89
- },
90
- "emergency": {
91
- "default": {
92
- "value": "#EC040B",
93
- "type": "color",
94
- "description": "Use this colour to indicate an emergency to the user."
95
- },
96
- "light": {
97
- "value": "#FFCECF",
98
- "type": "color"
99
- },
100
- "dark": {
101
- "value": "#B00000",
102
- "type": "color"
103
- }
104
- },
105
- "success": {
106
- "default": {
107
- "value": "#00853F",
108
- "type": "color",
109
- "description": "Use this colour to indicate success to the user."
110
- },
111
- "light": {
112
- "value": "#C6E0D0",
113
- "type": "color"
114
- },
115
- "dark": {
116
- "value": "#005715",
117
- "type": "color"
118
- }
119
- }
120
- },
121
- "greyscale": {
122
- "100": {
123
- "value": "#F1F1F1",
124
- "type": "color"
125
- },
126
- "200": {
127
- "value": "#DCDCDC",
128
- "type": "color"
129
- },
130
- "400": {
131
- "value": "#ADADAD",
132
- "type": "color"
133
- },
134
- "500": {
135
- "value": "#949494",
136
- "type": "color"
137
- },
138
- "600": {
139
- "value": "#666666",
140
- "type": "color"
141
- },
142
- "black": {
143
- "value": "#333333",
144
- "type": "color"
145
- },
146
- "white": {
147
- "value": "#FFFFFF",
148
- "type": "color"
149
- }
150
- }
151
- },
152
- "fontWeight": {
153
- "regular": {
154
- "value": "400",
155
- "type": "fontWeights"
156
- },
157
- "medium": {
158
- "value": "500",
159
- "type": "fontWeights"
160
- },
161
- "bold": {
162
- "value": "700",
163
- "type": "fontWeights"
164
- }
165
- },
166
- "fontSize": {
167
- "1": {
168
- "value": "0.75rem",
169
- "type": "fontSizes",
170
- "description": "12px"
171
- },
172
- "2": {
173
- "value": "0.875rem",
174
- "type": "fontSizes",
175
- "description": "14px"
176
- },
177
- "3": {
178
- "value": "1rem",
179
- "type": "fontSizes",
180
- "description": "16px"
181
- },
182
- "4": {
183
- "value": "1.125rem",
184
- "type": "fontSizes",
185
- "description": "18px"
186
- },
187
- "5": {
188
- "value": "1.25rem",
189
- "type": "fontSizes",
190
- "description": "20px"
191
- },
192
- "6": {
193
- "value": "1.375rem",
194
- "type": "fontSizes",
195
- "description": "22px"
196
- },
197
- "7": {
198
- "value": "1.5rem",
199
- "type": "fontSizes",
200
- "description": "24px"
201
- },
202
- "8": {
203
- "value": "2rem",
204
- "type": "fontSizes",
205
- "description": "32px"
206
- },
207
- "9": {
208
- "value": "2.25rem",
209
- "type": "fontSizes",
210
- "description": "2.25rem"
211
- },
212
- "10": {
213
- "value": "3rem",
214
- "type": "fontSizes",
215
- "description": "48px"
216
- }
217
- },
218
- "spacing": {
219
- "none": {
220
- "value": "0rem",
221
- "type": "spacing",
222
- "description": "0px | 0rem"
223
- },
224
- "3xs": {
225
- "value": "0.125rem",
226
- "type": "spacing",
227
- "description": "2px"
228
- },
229
- "2xs": {
230
- "value": "0.25rem",
231
- "type": "spacing",
232
- "description": "4px"
233
- },
234
- "xs": {
235
- "value": "0.5rem",
236
- "type": "spacing",
237
- "description": "8px"
238
- },
239
- "s": {
240
- "value": "0.75rem",
241
- "type": "spacing",
242
- "description": "12px"
243
- },
244
- "m": {
245
- "value": "1rem",
246
- "type": "spacing",
247
- "description": "16px"
248
- },
249
- "l": {
250
- "value": "1.5rem",
251
- "type": "spacing",
252
- "description": "24px"
253
- },
254
- "xl": {
255
- "value": "2rem",
256
- "type": "spacing",
257
- "description": "32px"
258
- },
259
- "2xl": {
260
- "value": "3rem",
261
- "type": "spacing",
262
- "description": "48px"
263
- },
264
- "3xl": {
265
- "value": "4rem",
266
- "type": "spacing",
267
- "description": "64px"
268
- },
269
- "4xl": {
270
- "value": "8rem",
271
- "type": "spacing",
272
- "description": "128px"
273
- }
274
- },
275
- "borderRadius": {
276
- "0": {
277
- "value": "0",
278
- "type": "borderRadius",
279
- "description": "0px"
280
- },
281
- "4": {
282
- "value": "4",
283
- "type": "borderRadius",
284
- "description": "4px | 0.25rem"
285
- },
286
- "pill": {
287
- "value": "999px",
288
- "type": "borderRadius",
289
- "description": "999px | 999rem"
290
- },
291
- "circle": {
292
- "value": "50%",
293
- "type": "borderRadius",
294
- "description": "50%"
295
- }
296
- },
297
- "opacity": {
298
- "3": {
299
- "value": "30%",
300
- "type": "opacity",
301
- "description": "30% opacity"
302
- },
303
- "5": {
304
- "value": "50%",
305
- "type": "opacity",
306
- "description": "50% opacity"
307
- },
308
- "8": {
309
- "value": "80%",
310
- "type": "opacity",
311
- "description": "80% opacity"
312
- }
313
- },
314
- "lineHeight": {
315
- "1": {
316
- "value": "1.25rem",
317
- "type": "lineHeights",
318
- "description": "20px"
319
- },
320
- "2": {
321
- "value": "1.5rem",
322
- "type": "lineHeights",
323
- "description": "24px"
324
- },
325
- "3": {
326
- "value": "1.75rem",
327
- "type": "lineHeights",
328
- "description": "28px"
329
- },
330
- "4": {
331
- "value": "2rem",
332
- "type": "lineHeights",
333
- "description": "32px"
334
- },
335
- "5": {
336
- "value": "2.5rem",
337
- "type": "lineHeights",
338
- "description": "40px"
339
- },
340
- "6": {
341
- "value": "2.75rem",
342
- "type": "lineHeights",
343
- "description": "44px"
344
- },
345
- "7": {
346
- "value": "3.5rem",
347
- "type": "lineHeights",
348
- "description": "56px"
349
- }
350
- },
351
- "fontFamilies": {
352
- "default": {
353
- "value": "Acumin-pro-semi-condensed",
354
- "type": "fontFamilies",
355
- "description": "Deafult font family for GOA"
356
- },
357
- "numbers": {
358
- "value": "roboto-mono",
359
- "type": "fontFamilies",
360
- "description": "monospace typeface for numbers"
361
- }
362
- },
363
- "typography": {
364
- "heading": {
365
- "xl": {
366
- "value": {
367
- "fontFamily": "{fontFamilies.default}",
368
- "fontWeight": "{fontWeight.bold}",
369
- "lineHeight": "{lineHeight.7}",
370
- "fontSize": "{fontSize.10}"
371
- },
372
- "type": "typography",
373
- "description": "Heading XL"
374
- },
375
- "l": {
376
- "value": {
377
- "fontFamily": "{fontFamilies.default}",
378
- "fontWeight": "{fontWeight.regular}",
379
- "lineHeight": "{lineHeight.6}",
380
- "fontSize": "{fontSize.9}"
381
- },
382
- "type": "typography",
383
- "description": "Heading L"
384
- },
385
- "m": {
386
- "value": {
387
- "fontFamily": "{fontFamilies.default}",
388
- "fontWeight": "{fontWeight.regular}",
389
- "lineHeight": "{lineHeight.4}",
390
- "fontSize": "{fontSize.7}"
391
- },
392
- "type": "typography",
393
- "description": "Heading M"
394
- },
395
- "s": {
396
- "value": {
397
- "fontFamily": "{fontFamilies.default}",
398
- "fontWeight": "{fontWeight.bold}",
399
- "lineHeight": "{lineHeight.3}",
400
- "fontSize": "{fontSize.4}"
401
- },
402
- "type": "typography",
403
- "description": "Heading S"
404
- },
405
- "xs": {
406
- "value": {
407
- "fontFamily": "{fontFamilies.default}",
408
- "fontWeight": "{fontWeight.bold}",
409
- "lineHeight": "{lineHeight.2}",
410
- "fontSize": "{fontSize.3}"
411
- },
412
- "type": "typography",
413
- "description": "Heading XS"
414
- }
415
- },
416
- "body": {
417
- "l": {
418
- "value": {
419
- "fontFamily": "{fontFamilies.default}",
420
- "fontWeight": "{fontWeight.regular}",
421
- "lineHeight": "{lineHeight.4}",
422
- "fontSize": "{fontSize.7}"
423
- },
424
- "type": "typography",
425
- "description": "Large text"
426
- },
427
- "m": {
428
- "value": {
429
- "fontFamily": "{fontFamilies.default}",
430
- "fontWeight": "{fontWeight.regular}",
431
- "lineHeight": "{lineHeight.3}",
432
- "fontSize": "{fontSize.4}"
433
- },
434
- "type": "typography",
435
- "description": "Body text"
436
- },
437
- "s": {
438
- "value": {
439
- "fontFamily": "{fontFamilies.default}",
440
- "fontWeight": "{fontWeight.regular}",
441
- "lineHeight": "{lineHeight.2}",
442
- "fontSize": "{fontSize.3}"
443
- },
444
- "type": "typography",
445
- "description": "Small text"
446
- },
447
- "xs": {
448
- "value": {
449
- "fontFamily": "{fontFamilies.default}",
450
- "fontWeight": "{fontWeight.regular}",
451
- "lineHeight": "{lineHeight.1}",
452
- "fontSize": "{fontSize.2}"
453
- },
454
- "type": "typography",
455
- "description": "Micro text"
456
- }
457
- },
458
- "button": {
459
- "default": {
460
- "value": {
461
- "fontFamily": "{fontFamilies.default}",
462
- "fontWeight": "{fontWeight.regular}",
463
- "lineHeight": "{lineHeight.1}",
464
- "fontSize": "{fontSize.4}",
465
- "letterSpacing": "{letterSpacing.buttons}"
466
- },
467
- "type": "typography"
468
- }
469
- }
470
- },
471
- "borderWidth": {
472
- "s": {
473
- "value": "1",
474
- "type": "borderWidth",
475
- "description": "Small border width"
476
- },
477
- "m": {
478
- "value": "2",
479
- "type": "borderWidth",
480
- "description": "Medium border width"
481
- },
482
- "l": {
483
- "value": "3",
484
- "type": "borderWidth",
485
- "description": "Large border width"
486
- }
487
- },
488
- "letterSpacing": {
489
- "buttons": {
490
- "value": "1%",
491
- "type": "letterSpacing",
492
- "description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
493
- }
494
- },
495
- "iconSize": {
496
- "s": {
497
- "value": "1rem",
498
- "type": "sizing",
499
- "description": "16px"
500
- },
501
- "m": {
502
- "value": "1.25rem",
503
- "type": "sizing",
504
- "description": "20px"
505
- },
506
- "l": {
507
- "value": "1.5rem",
508
- "type": "sizing",
509
- "description": "24px"
510
- }
511
- }
512
- }
513
-
514
-