@abgov/design-tokens 1.0.5-dev.1 → 1.0.5-dev.3

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 (8) hide show
  1. package/css/tokens.css +58 -36
  2. package/data/badge.json +98 -0
  3. package/data/button.json +1 -0
  4. package/data/global-ddi.json +512 -0
  5. package/index.spec.js +2 -2
  6. package/package.json +1 -1
  7. package/scss/tokens.scss +58 -36
  8. package/data/tokens.json +0 -514
package/css/tokens.css CHANGED
@@ -1,38 +1,60 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 08 Nov 2022 16:31:11 GMT
3
+ * Generated on Tue, 08 Nov 2022 20:58:21 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --goa-colour-brand-default: #0081A2;
8
- --goa-colour-brand-dark: #005072;
9
- --goa-colour-brand-light: #C8EEFA;
10
- --goa-colour-interactive-default: #0070C4;
11
- --goa-colour-interactive-hover: #004F84;
12
- --goa-colour-interactive-error: #EC040B;
13
- --goa-colour-interactive-focus: #FEBA35;
14
- --goa-colour-text-default: #333333;
15
- --goa-colour-text-secondary: #666666;
16
- --goa-colour-text-light: #FFFFFF;
17
- --goa-colour-status-info-default: #005DAA;
18
- --goa-colour-status-info-light: #B2D4ED;
19
- --goa-colour-status-info-dark: #00347A;
20
- --goa-colour-status-warning-default: #FEBA35;
21
- --goa-colour-status-warning-light: #FCEFD0;
22
- --goa-colour-status-warning-dark: #C68A00;
23
- --goa-colour-status-emergency-default: #EC040B;
24
- --goa-colour-status-emergency-light: #FFCECF;
25
- --goa-colour-status-emergency-dark: #B00000;
26
- --goa-colour-status-success-default: #00853F;
27
- --goa-colour-status-success-light: #C6E0D0;
28
- --goa-colour-status-success-dark: #005715;
29
- --goa-colour-greyscale-100: #F1F1F1;
30
- --goa-colour-greyscale-200: #DCDCDC;
31
- --goa-colour-greyscale-400: #ADADAD;
32
- --goa-colour-greyscale-500: #949494;
33
- --goa-colour-greyscale-600: #666666;
34
- --goa-colour-greyscale-black: #333333;
35
- --goa-colour-greyscale-white: #FFFFFF;
7
+ --goa-information-background-color: #f1f1f1;
8
+ --goa-information-text-color: #005daa;
9
+ --goa-information-icon-color: #005daa;
10
+ --goa-font-family: Acumin-pro-semi-condensed;
11
+ --goa-font-size: 0.875rem;
12
+ --goa-font-weight: 400;
13
+ --goa-important-background-color: #feba35;
14
+ --goa-important-text-color: #333333;
15
+ --goa-important-icon-color: #333333;
16
+ --goa-padding-left: 0.5rem;
17
+ --goa-padding-right: 0.5rem;
18
+ --goa-padding-top: 0.25rem;
19
+ --goa-padding-bottom: 0.25rem;
20
+ --goa-icon-size: 1rem;
21
+ --goa-emergency-background-color: #ec040b;
22
+ --goa-emergency-text-color: #ffffff;
23
+ --goa-emergency-icon-color: #ffffff;
24
+ --goa-success-background-colour: #00853f;
25
+ --goa-success-text-color: #ffffff;
26
+ --goa-success-icon-color: #ffffff;
27
+ --goa-space-between: 0.25rem;
28
+ --goa-border-radius: 0.25rem;
29
+ --goa-color-brand-default: #0081a2;
30
+ --goa-color-brand-dark: #005072;
31
+ --goa-color-brand-light: #c8eefa;
32
+ --goa-color-interactive-default: #0070c4;
33
+ --goa-color-interactive-hover: #004f84;
34
+ --goa-color-interactive-error: #ec040b;
35
+ --goa-color-interactive-focus: #feba35;
36
+ --goa-color-text-default: #333333;
37
+ --goa-color-text-secondary: #666666;
38
+ --goa-color-text-light: #ffffff;
39
+ --goa-color-status-info-default: #005daa;
40
+ --goa-color-status-info-light: #b2d4ed;
41
+ --goa-color-status-info-dark: #00347a;
42
+ --goa-color-status-warning-default: #feba35;
43
+ --goa-color-status-warning-light: #fcefd0;
44
+ --goa-color-status-warning-dark: #c68a00;
45
+ --goa-color-status-emergency-default: #ec040b;
46
+ --goa-color-status-emergency-light: #ffcecf;
47
+ --goa-color-status-emergency-dark: #b00000;
48
+ --goa-color-status-success-default: #00853f;
49
+ --goa-color-status-success-light: #c6e0d0;
50
+ --goa-color-status-success-dark: #005715;
51
+ --goa-color-greyscale-100: #f1f1f1;
52
+ --goa-color-greyscale-200: #dcdcdc;
53
+ --goa-color-greyscale-400: #adadad;
54
+ --goa-color-greyscale-500: #949494;
55
+ --goa-color-greyscale-600: #666666;
56
+ --goa-color-greyscale-black: #333333;
57
+ --goa-color-greyscale-white: #ffffff;
36
58
  --goa-font-weight-regular: 400;
37
59
  --goa-font-weight-medium: 500;
38
60
  --goa-font-weight-bold: 700;
@@ -57,8 +79,8 @@
57
79
  --goa-spacing-2xl: 3rem;
58
80
  --goa-spacing-3xl: 4rem;
59
81
  --goa-spacing-4xl: 8rem;
60
- --goa-border-radius-0: 0;
61
- --goa-border-radius-4: 4;
82
+ --goa-border-radius-0: 0rem;
83
+ --goa-border-radius-4: 0.25rem;
62
84
  --goa-border-radius-pill: 999px;
63
85
  --goa-border-radius-circle: 50%;
64
86
  --goa-opacity-3: 30%;
@@ -83,10 +105,10 @@
83
105
  --goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
84
106
  --goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
85
107
  --goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
86
- --goa-border-width-s: 1;
87
- --goa-border-width-m: 2;
88
- --goa-border-width-l: 3;
89
- --goa-letter-spacing-buttons: 1%;
108
+ --goa-border-width-s: 1px;
109
+ --goa-border-width-m: 2px;
110
+ --goa-border-width-l: 3px;
111
+ --goa-letter-spacing-1: 1%;
90
112
  --goa-icon-size-s: 1rem;
91
113
  --goa-icon-size-m: 1.25rem;
92
114
  --goa-icon-size-l: 1.5rem;
package/data/badge.json ADDED
@@ -0,0 +1,98 @@
1
+ {
2
+ "information": {
3
+ "background-color": {
4
+ "value": "{color.greyscale.100}",
5
+ "type": "color"
6
+ },
7
+ "text-color": {
8
+ "value": "{color.status.info.default}",
9
+ "type": "color"
10
+ },
11
+ "icon-color": {
12
+ "value": "{color.status.info.default}",
13
+ "type": "color"
14
+ }
15
+ },
16
+ "font-family": {
17
+ "value": "{fontFamilies.default}",
18
+ "type": "fontFamilies"
19
+ },
20
+ "font-size": {
21
+ "value": "{fontSize.2}",
22
+ "type": "fontSizes"
23
+ },
24
+ "font-weight": {
25
+ "value": "{fontWeight.regular}",
26
+ "type": "fontWeights"
27
+ },
28
+ "important": {
29
+ "background-color": {
30
+ "value": "{color.status.warning.default}",
31
+ "type": "color"
32
+ },
33
+ "text-color": {
34
+ "value": "{color.text.default}",
35
+ "type": "color"
36
+ },
37
+ "icon-color": {
38
+ "value": "{color.greyscale.black}",
39
+ "type": "color"
40
+ }
41
+ },
42
+ "padding-left": {
43
+ "value": "{spacing.xs}",
44
+ "type": "spacing"
45
+ },
46
+ "padding-right": {
47
+ "value": "{spacing.xs}",
48
+ "type": "spacing"
49
+ },
50
+ "padding-top": {
51
+ "value": "{spacing.2xs}",
52
+ "type": "spacing"
53
+ },
54
+ "padding-bottom": {
55
+ "value": "{spacing.2xs}",
56
+ "type": "spacing"
57
+ },
58
+ "icon-size": {
59
+ "value": "{iconSize.s}",
60
+ "type": "sizing"
61
+ },
62
+ "emergency": {
63
+ "background-color": {
64
+ "value": "{color.status.emergency.default}",
65
+ "type": "color"
66
+ },
67
+ "text-color": {
68
+ "value": "{color.text.light}",
69
+ "type": "color"
70
+ },
71
+ "icon-color": {
72
+ "value": "{color.greyscale.white}",
73
+ "type": "color"
74
+ }
75
+ },
76
+ "success": {
77
+ "background-colour": {
78
+ "value": "{color.status.success.default}",
79
+ "type": "color"
80
+ },
81
+ "text-color": {
82
+ "value": "{color.text.light}",
83
+ "type": "color"
84
+ },
85
+ "icon-color": {
86
+ "value": "{color.greyscale.white}",
87
+ "type": "color"
88
+ }
89
+ },
90
+ "space-between": {
91
+ "value": "{spacing.2xs}",
92
+ "type": "spacing"
93
+ },
94
+ "border-radius": {
95
+ "value": "{borderRadius.4}",
96
+ "type": "borderRadius"
97
+ }
98
+ }
package/data/button.json ADDED
@@ -0,0 +1 @@
1
+ {}
package/data/global-ddi.json ADDED
@@ -0,0 +1,512 @@
1
+ {
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
+ "interactive": {
21
+ "default": {
22
+ "value": "#0070C4",
23
+ "type": "color",
24
+ "description": "Default color 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 color 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 color on dark backgrounds."
57
+ }
58
+ },
59
+ "status": {
60
+ "info": {
61
+ "default": {
62
+ "value": "#005DAA",
63
+ "type": "color",
64
+ "description": "Use this color 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 color 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 color 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 color 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": "0rem",
278
+ "type": "borderRadius",
279
+ "description": "0px"
280
+ },
281
+ "4": {
282
+ "value": "0.25rem",
283
+ "type": "borderRadius",
284
+ "description": "4px"
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.1}"
466
+ },
467
+ "type": "typography"
468
+ }
469
+ }
470
+ },
471
+ "borderWidth": {
472
+ "s": {
473
+ "value": "1px",
474
+ "type": "borderWidth",
475
+ "description": "Small border width"
476
+ },
477
+ "m": {
478
+ "value": "2px",
479
+ "type": "borderWidth",
480
+ "description": "Medium border width"
481
+ },
482
+ "l": {
483
+ "value": "3px",
484
+ "type": "borderWidth",
485
+ "description": "Large border width"
486
+ }
487
+ },
488
+ "letterSpacing": {
489
+ "1": {
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
+ }
package/index.spec.js CHANGED
@@ -25,11 +25,11 @@ describe("GoA Design Tokens", () => {
25
25
  it("should create valid css output", async () => {
26
26
  SC.generate("./tmp");
27
27
  const raw = fs.readFileSync("./tmp/css/tokens.css", { encoding: "utf8" });
28
- expect(raw).toContain("--goa-colour-brand-default");
28
+ expect(raw).toContain("--goa-color-brand-default");
29
29
  });
30
30
  it("should create valid scss output", async () => {
31
31
  SC.generate("./tmp");
32
32
  const raw = fs.readFileSync("./tmp/scss/tokens.scss", { encoding: "utf8" });
33
- expect(raw).toContain("$goa-colour-brand-default");
33
+ expect(raw).toContain("$goa-color-brand-default");
34
34
  });
35
35
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.0.5-dev.1",
3
+ "version": "1.0.5-dev.3",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",
package/scss/tokens.scss CHANGED
@@ -1,36 +1,58 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 08 Nov 2022 16:31:11 GMT
3
+ // Generated on Tue, 08 Nov 2022 20:58:21 GMT
4
4
 
5
- $goa-colour-brand-default: #0081A2;
6
- $goa-colour-brand-dark: #005072;
7
- $goa-colour-brand-light: #C8EEFA;
8
- $goa-colour-interactive-default: #0070C4;
9
- $goa-colour-interactive-hover: #004F84;
10
- $goa-colour-interactive-error: #EC040B;
11
- $goa-colour-interactive-focus: #FEBA35;
12
- $goa-colour-text-default: #333333;
13
- $goa-colour-text-secondary: #666666;
14
- $goa-colour-text-light: #FFFFFF;
15
- $goa-colour-status-info-default: #005DAA;
16
- $goa-colour-status-info-light: #B2D4ED;
17
- $goa-colour-status-info-dark: #00347A;
18
- $goa-colour-status-warning-default: #FEBA35;
19
- $goa-colour-status-warning-light: #FCEFD0;
20
- $goa-colour-status-warning-dark: #C68A00;
21
- $goa-colour-status-emergency-default: #EC040B;
22
- $goa-colour-status-emergency-light: #FFCECF;
23
- $goa-colour-status-emergency-dark: #B00000;
24
- $goa-colour-status-success-default: #00853F;
25
- $goa-colour-status-success-light: #C6E0D0;
26
- $goa-colour-status-success-dark: #005715;
27
- $goa-colour-greyscale-100: #F1F1F1;
28
- $goa-colour-greyscale-200: #DCDCDC;
29
- $goa-colour-greyscale-400: #ADADAD;
30
- $goa-colour-greyscale-500: #949494;
31
- $goa-colour-greyscale-600: #666666;
32
- $goa-colour-greyscale-black: #333333;
33
- $goa-colour-greyscale-white: #FFFFFF;
5
+ $goa-information-background-color: #f1f1f1;
6
+ $goa-information-text-color: #005daa;
7
+ $goa-information-icon-color: #005daa;
8
+ $goa-font-family: Acumin-pro-semi-condensed;
9
+ $goa-font-size: 0.875rem;
10
+ $goa-font-weight: 400;
11
+ $goa-important-background-color: #feba35;
12
+ $goa-important-text-color: #333333;
13
+ $goa-important-icon-color: #333333;
14
+ $goa-padding-left: 0.5rem;
15
+ $goa-padding-right: 0.5rem;
16
+ $goa-padding-top: 0.25rem;
17
+ $goa-padding-bottom: 0.25rem;
18
+ $goa-icon-size: 1rem;
19
+ $goa-emergency-background-color: #ec040b;
20
+ $goa-emergency-text-color: #ffffff;
21
+ $goa-emergency-icon-color: #ffffff;
22
+ $goa-success-background-colour: #00853f;
23
+ $goa-success-text-color: #ffffff;
24
+ $goa-success-icon-color: #ffffff;
25
+ $goa-space-between: 0.25rem;
26
+ $goa-border-radius: 0.25rem;
27
+ $goa-color-brand-default: #0081a2;
28
+ $goa-color-brand-dark: #005072;
29
+ $goa-color-brand-light: #c8eefa;
30
+ $goa-color-interactive-default: #0070c4;
31
+ $goa-color-interactive-hover: #004f84;
32
+ $goa-color-interactive-error: #ec040b;
33
+ $goa-color-interactive-focus: #feba35;
34
+ $goa-color-text-default: #333333;
35
+ $goa-color-text-secondary: #666666;
36
+ $goa-color-text-light: #ffffff;
37
+ $goa-color-status-info-default: #005daa;
38
+ $goa-color-status-info-light: #b2d4ed;
39
+ $goa-color-status-info-dark: #00347a;
40
+ $goa-color-status-warning-default: #feba35;
41
+ $goa-color-status-warning-light: #fcefd0;
42
+ $goa-color-status-warning-dark: #c68a00;
43
+ $goa-color-status-emergency-default: #ec040b;
44
+ $goa-color-status-emergency-light: #ffcecf;
45
+ $goa-color-status-emergency-dark: #b00000;
46
+ $goa-color-status-success-default: #00853f;
47
+ $goa-color-status-success-light: #c6e0d0;
48
+ $goa-color-status-success-dark: #005715;
49
+ $goa-color-greyscale-100: #f1f1f1;
50
+ $goa-color-greyscale-200: #dcdcdc;
51
+ $goa-color-greyscale-400: #adadad;
52
+ $goa-color-greyscale-500: #949494;
53
+ $goa-color-greyscale-600: #666666;
54
+ $goa-color-greyscale-black: #333333;
55
+ $goa-color-greyscale-white: #ffffff;
34
56
  $goa-font-weight-regular: 400;
35
57
  $goa-font-weight-medium: 500;
36
58
  $goa-font-weight-bold: 700;
@@ -55,8 +77,8 @@ $goa-spacing-xl: 2rem;
55
77
  $goa-spacing-2xl: 3rem;
56
78
  $goa-spacing-3xl: 4rem;
57
79
  $goa-spacing-4xl: 8rem;
58
- $goa-border-radius-0: 0;
59
- $goa-border-radius-4: 4;
80
+ $goa-border-radius-0: 0rem;
81
+ $goa-border-radius-4: 0.25rem;
60
82
  $goa-border-radius-pill: 999px;
61
83
  $goa-border-radius-circle: 50%;
62
84
  $goa-opacity-3: 30%;
@@ -81,10 +103,10 @@ $goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
81
103
  $goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
82
104
  $goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
83
105
  $goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
84
- $goa-border-width-s: 1;
85
- $goa-border-width-m: 2;
86
- $goa-border-width-l: 3;
87
- $goa-letter-spacing-buttons: 1%;
106
+ $goa-border-width-s: 1px;
107
+ $goa-border-width-m: 2px;
108
+ $goa-border-width-l: 3px;
109
+ $goa-letter-spacing-1: 1%;
88
110
  $goa-icon-size-s: 1rem;
89
111
  $goa-icon-size-m: 1.25rem;
90
112
  $goa-icon-size-l: 1.5rem;
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
-