@abgov/design-tokens 1.0.5-dev.2 → 1.0.5-dev.4
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/css/tokens.css +2 -24
- package/data/global-ddi.json +15 -15
- package/package.json +1 -1
- package/scss/tokens.scss +2 -24
- package/data/badge.json +0 -98
- package/data/button.json +0 -1
package/css/tokens.css
CHANGED
|
@@ -1,31 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 16 Dec 2022 03:19:58 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--goa-information-background-colour: #f1f1f1;
|
|
8
|
-
--goa-information-text-colour: #005daa;
|
|
9
|
-
--goa-information-icon-colour: #005daa;
|
|
10
|
-
--goa-font-family: Acumin-pro-semi-condensed;
|
|
11
|
-
--goa-font-size: 0.875rem;
|
|
12
|
-
--goa-font-weight: 400;
|
|
13
|
-
--goa-important-background-colour: #feba35;
|
|
14
|
-
--goa-important-text-colour: #333333;
|
|
15
|
-
--goa-important-icon-colour: #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-colour: #ec040b;
|
|
22
|
-
--goa-emergency-text-colour: #ffffff;
|
|
23
|
-
--goa-emergency-icon-colour: #ffffff;
|
|
24
|
-
--goa-success-background-colour: #00853f;
|
|
25
|
-
--goa-success-text-colour: #ffffff;
|
|
26
|
-
--goa-success-icon-colour: #ffffff;
|
|
27
|
-
--goa-space-between: 0.25rem;
|
|
28
|
-
--goa-border-radius: 0.25rem;
|
|
29
7
|
--goa-color-brand-default: #0081a2;
|
|
30
8
|
--goa-color-brand-dark: #005072;
|
|
31
9
|
--goa-color-brand-light: #c8eefa;
|
|
@@ -108,7 +86,7 @@
|
|
|
108
86
|
--goa-border-width-s: 1px;
|
|
109
87
|
--goa-border-width-m: 2px;
|
|
110
88
|
--goa-border-width-l: 3px;
|
|
111
|
-
--goa-letter-spacing-buttons:
|
|
89
|
+
--goa-letter-spacing-buttons: 0.0125rem;
|
|
112
90
|
--goa-icon-size-s: 1rem;
|
|
113
91
|
--goa-icon-size-m: 1.25rem;
|
|
114
92
|
--goa-icon-size-l: 1.5rem;
|
package/data/global-ddi.json
CHANGED
|
@@ -4,56 +4,56 @@
|
|
|
4
4
|
"default": {
|
|
5
5
|
"value": "#0081A2",
|
|
6
6
|
"type": "color",
|
|
7
|
-
"description": "Teal GOA
|
|
7
|
+
"description": "Teal GOA color"
|
|
8
8
|
},
|
|
9
9
|
"dark": {
|
|
10
10
|
"value": "#005072",
|
|
11
11
|
"type": "color",
|
|
12
|
-
"description": "Dark GOA brand
|
|
12
|
+
"description": "Dark GOA brand color"
|
|
13
13
|
},
|
|
14
14
|
"light": {
|
|
15
15
|
"value": "#C8EEFA",
|
|
16
16
|
"type": "color",
|
|
17
|
-
"description": "Light GOA brand
|
|
17
|
+
"description": "Light GOA brand color"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"interactive": {
|
|
21
21
|
"default": {
|
|
22
22
|
"value": "#0070C4",
|
|
23
23
|
"type": "color",
|
|
24
|
-
"description": "Default
|
|
24
|
+
"description": "Default color for interactive elements."
|
|
25
25
|
},
|
|
26
26
|
"hover": {
|
|
27
27
|
"value": "#004F84",
|
|
28
28
|
"type": "color",
|
|
29
|
-
"description": "Hover state for interactive elements."
|
|
29
|
+
"description": "Hover state color for interactive elements."
|
|
30
30
|
},
|
|
31
31
|
"error": {
|
|
32
32
|
"value": "#EC040B",
|
|
33
33
|
"type": "color",
|
|
34
|
-
"description": "Error state for interactive elements."
|
|
34
|
+
"description": "Error state color for interactive elements."
|
|
35
35
|
},
|
|
36
36
|
"focus": {
|
|
37
37
|
"value": "#FEBA35",
|
|
38
38
|
"type": "color",
|
|
39
|
-
"description": "Focus state for interactive elements."
|
|
39
|
+
"description": "Focus state color for interactive elements."
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
"text": {
|
|
43
43
|
"default": {
|
|
44
44
|
"value": "#333333",
|
|
45
45
|
"type": "color",
|
|
46
|
-
"description": "Default
|
|
46
|
+
"description": "Default color for most text (such as body, headings, subheadings)."
|
|
47
47
|
},
|
|
48
48
|
"secondary": {
|
|
49
49
|
"value": "#666666",
|
|
50
50
|
"type": "color",
|
|
51
|
-
"description": "Default
|
|
51
|
+
"description": "Default color for secondary text (such as disabled button text, and secondary text labels eg. “optional” or “partially complete”)."
|
|
52
52
|
},
|
|
53
53
|
"light": {
|
|
54
54
|
"value": "#FFFFFF",
|
|
55
55
|
"type": "color",
|
|
56
|
-
"description": "Use as the text
|
|
56
|
+
"description": "Use as the text color on dark backgrounds."
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
"status": {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"default": {
|
|
62
62
|
"value": "#005DAA",
|
|
63
63
|
"type": "color",
|
|
64
|
-
"description": "Use this
|
|
64
|
+
"description": "Use this color to indicate information to the user."
|
|
65
65
|
},
|
|
66
66
|
"light": {
|
|
67
67
|
"value": "#B2D4ED",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"default": {
|
|
77
77
|
"value": "#FEBA35",
|
|
78
78
|
"type": "color",
|
|
79
|
-
"description": "Use this
|
|
79
|
+
"description": "Use this color to indicate a warning to the user."
|
|
80
80
|
},
|
|
81
81
|
"light": {
|
|
82
82
|
"value": "#FCEFD0",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"default": {
|
|
92
92
|
"value": "#EC040B",
|
|
93
93
|
"type": "color",
|
|
94
|
-
"description": "Use this
|
|
94
|
+
"description": "Use this color to indicate an emergency to the user."
|
|
95
95
|
},
|
|
96
96
|
"light": {
|
|
97
97
|
"value": "#FFCECF",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"default": {
|
|
107
107
|
"value": "#00853F",
|
|
108
108
|
"type": "color",
|
|
109
|
-
"description": "Use this
|
|
109
|
+
"description": "Use this color to indicate success to the user."
|
|
110
110
|
},
|
|
111
111
|
"light": {
|
|
112
112
|
"value": "#C6E0D0",
|
|
@@ -487,7 +487,7 @@
|
|
|
487
487
|
},
|
|
488
488
|
"letterSpacing": {
|
|
489
489
|
"buttons": {
|
|
490
|
-
"value": "
|
|
490
|
+
"value": "0.0125rem",
|
|
491
491
|
"type": "letterSpacing",
|
|
492
492
|
"description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
|
|
493
493
|
}
|
package/package.json
CHANGED
package/scss/tokens.scss
CHANGED
|
@@ -1,29 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Fri, 16 Dec 2022 03:19:58 GMT
|
|
4
4
|
|
|
5
|
-
$goa-information-background-colour: #f1f1f1;
|
|
6
|
-
$goa-information-text-colour: #005daa;
|
|
7
|
-
$goa-information-icon-colour: #005daa;
|
|
8
|
-
$goa-font-family: Acumin-pro-semi-condensed;
|
|
9
|
-
$goa-font-size: 0.875rem;
|
|
10
|
-
$goa-font-weight: 400;
|
|
11
|
-
$goa-important-background-colour: #feba35;
|
|
12
|
-
$goa-important-text-colour: #333333;
|
|
13
|
-
$goa-important-icon-colour: #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-colour: #ec040b;
|
|
20
|
-
$goa-emergency-text-colour: #ffffff;
|
|
21
|
-
$goa-emergency-icon-colour: #ffffff;
|
|
22
|
-
$goa-success-background-colour: #00853f;
|
|
23
|
-
$goa-success-text-colour: #ffffff;
|
|
24
|
-
$goa-success-icon-colour: #ffffff;
|
|
25
|
-
$goa-space-between: 0.25rem;
|
|
26
|
-
$goa-border-radius: 0.25rem;
|
|
27
5
|
$goa-color-brand-default: #0081a2;
|
|
28
6
|
$goa-color-brand-dark: #005072;
|
|
29
7
|
$goa-color-brand-light: #c8eefa;
|
|
@@ -106,7 +84,7 @@ $goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
|
|
|
106
84
|
$goa-border-width-s: 1px;
|
|
107
85
|
$goa-border-width-m: 2px;
|
|
108
86
|
$goa-border-width-l: 3px;
|
|
109
|
-
$goa-letter-spacing-buttons:
|
|
87
|
+
$goa-letter-spacing-buttons: 0.0125rem;
|
|
110
88
|
$goa-icon-size-s: 1rem;
|
|
111
89
|
$goa-icon-size-m: 1.25rem;
|
|
112
90
|
$goa-icon-size-l: 1.5rem;
|
package/data/badge.json
DELETED
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"information": {
|
|
3
|
-
"background-colour": {
|
|
4
|
-
"value": "{color.greyscale.100}",
|
|
5
|
-
"type": "color"
|
|
6
|
-
},
|
|
7
|
-
"text-colour": {
|
|
8
|
-
"value": "{color.status.info.default}",
|
|
9
|
-
"type": "color"
|
|
10
|
-
},
|
|
11
|
-
"icon-colour": {
|
|
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-colour": {
|
|
30
|
-
"value": "{color.status.warning.default}",
|
|
31
|
-
"type": "color"
|
|
32
|
-
},
|
|
33
|
-
"text-colour": {
|
|
34
|
-
"value": "{color.text.default}",
|
|
35
|
-
"type": "color"
|
|
36
|
-
},
|
|
37
|
-
"icon-colour": {
|
|
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-colour": {
|
|
64
|
-
"value": "{color.status.emergency.default}",
|
|
65
|
-
"type": "color"
|
|
66
|
-
},
|
|
67
|
-
"text-colour": {
|
|
68
|
-
"value": "{color.text.light}",
|
|
69
|
-
"type": "color"
|
|
70
|
-
},
|
|
71
|
-
"icon-colour": {
|
|
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-colour": {
|
|
82
|
-
"value": "{color.text.light}",
|
|
83
|
-
"type": "color"
|
|
84
|
-
},
|
|
85
|
-
"icon-colour": {
|
|
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
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|