@abgov/design-tokens 1.1.0 → 1.2.0
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/README.md +2 -11
- package/data/global-ddi.json +17 -13
- package/dist/tokens.css +14 -13
- package/dist/tokens.scss +14 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,17 +6,8 @@
|
|
|
6
6
|
npm i --save-dev @abgov/design-tokens
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
add the following
|
|
11
|
-
|
|
12
|
-
SCSS
|
|
9
|
+
Add the following to your top level *.css file:
|
|
13
10
|
|
|
14
11
|
```scss
|
|
15
|
-
@import "@abgov/design-tokens/
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
CSS
|
|
19
|
-
|
|
20
|
-
```css
|
|
21
|
-
@import "@abgov/design-tokens/css/tokens";
|
|
12
|
+
@import "@abgov/design-tokens/dist/tokens";
|
|
22
13
|
```
|
package/data/global-ddi.json
CHANGED
|
@@ -68,16 +68,16 @@
|
|
|
68
68
|
},
|
|
69
69
|
"info": {
|
|
70
70
|
"default": {
|
|
71
|
-
"value": "#
|
|
71
|
+
"value": "#004A8F",
|
|
72
72
|
"type": "color",
|
|
73
73
|
"description": "Use this color to indicate information to the user."
|
|
74
74
|
},
|
|
75
75
|
"light": {
|
|
76
|
-
"value": "#
|
|
76
|
+
"value": "#AAC9E7",
|
|
77
77
|
"type": "color"
|
|
78
78
|
},
|
|
79
79
|
"dark": {
|
|
80
|
-
"value": "#
|
|
80
|
+
"value": "#003B70",
|
|
81
81
|
"type": "color"
|
|
82
82
|
},
|
|
83
83
|
"background": {
|
|
@@ -88,16 +88,16 @@
|
|
|
88
88
|
},
|
|
89
89
|
"warning": {
|
|
90
90
|
"default": {
|
|
91
|
-
"value": "#
|
|
91
|
+
"value": "#F9CE2D",
|
|
92
92
|
"type": "color",
|
|
93
93
|
"description": "Use this color to indicate a warning to the user."
|
|
94
94
|
},
|
|
95
95
|
"light": {
|
|
96
|
-
"value": "#
|
|
96
|
+
"value": "#FFEAB6",
|
|
97
97
|
"type": "color"
|
|
98
98
|
},
|
|
99
99
|
"dark": {
|
|
100
|
-
"value": "#
|
|
100
|
+
"value": "#BF8D23",
|
|
101
101
|
"type": "color"
|
|
102
102
|
},
|
|
103
103
|
"background": {
|
|
@@ -108,16 +108,16 @@
|
|
|
108
108
|
},
|
|
109
109
|
"emergency": {
|
|
110
110
|
"default": {
|
|
111
|
-
"value": "#
|
|
111
|
+
"value": "#DA291C",
|
|
112
112
|
"type": "color",
|
|
113
113
|
"description": "Use this color to indicate an emergency to the user."
|
|
114
114
|
},
|
|
115
115
|
"light": {
|
|
116
|
-
"value": "#
|
|
116
|
+
"value": "#FBD1CE",
|
|
117
117
|
"type": "color"
|
|
118
118
|
},
|
|
119
119
|
"dark": {
|
|
120
|
-
"value": "#
|
|
120
|
+
"value": "#A91A10",
|
|
121
121
|
"type": "color"
|
|
122
122
|
},
|
|
123
123
|
"background": {
|
|
@@ -128,16 +128,16 @@
|
|
|
128
128
|
},
|
|
129
129
|
"success": {
|
|
130
130
|
"default": {
|
|
131
|
-
"value": "#
|
|
131
|
+
"value": "#006F4C",
|
|
132
132
|
"type": "color",
|
|
133
133
|
"description": "Use this color to indicate success to the user."
|
|
134
134
|
},
|
|
135
135
|
"light": {
|
|
136
|
-
"value": "#
|
|
136
|
+
"value": "#CCE4DC",
|
|
137
137
|
"type": "color"
|
|
138
138
|
},
|
|
139
139
|
"dark": {
|
|
140
|
-
"value": "#
|
|
140
|
+
"value": "#00563A",
|
|
141
141
|
"type": "color"
|
|
142
142
|
},
|
|
143
143
|
"background": {
|
|
@@ -147,6 +147,10 @@
|
|
|
147
147
|
}
|
|
148
148
|
},
|
|
149
149
|
"greyscale": {
|
|
150
|
+
"50": {
|
|
151
|
+
"value": "#F8F8F8",
|
|
152
|
+
"type": "color"
|
|
153
|
+
},
|
|
150
154
|
"100": {
|
|
151
155
|
"value": "#F1F1F1",
|
|
152
156
|
"type": "color"
|
|
@@ -559,4 +563,4 @@
|
|
|
559
563
|
"description": "Drop shadow for modals."
|
|
560
564
|
}
|
|
561
565
|
}
|
|
562
|
-
}
|
|
566
|
+
}
|
package/dist/tokens.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 11 Jun 2024 15:00:35 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -16,22 +16,23 @@
|
|
|
16
16
|
--goa-color-text-secondary: #666666;
|
|
17
17
|
--goa-color-text-light: #ffffff;
|
|
18
18
|
--goa-color-text-disabled: #666666;
|
|
19
|
-
--goa-color-info-default: #
|
|
20
|
-
--goa-color-info-light: #
|
|
21
|
-
--goa-color-info-dark: #
|
|
19
|
+
--goa-color-info-default: #004a8f;
|
|
20
|
+
--goa-color-info-light: #aac9e7;
|
|
21
|
+
--goa-color-info-dark: #003b70;
|
|
22
22
|
--goa-color-info-background: #eff8ff;
|
|
23
|
-
--goa-color-warning-default: #
|
|
24
|
-
--goa-color-warning-light: #
|
|
25
|
-
--goa-color-warning-dark: #
|
|
23
|
+
--goa-color-warning-default: #f9ce2d;
|
|
24
|
+
--goa-color-warning-light: #ffeab6;
|
|
25
|
+
--goa-color-warning-dark: #bf8d23;
|
|
26
26
|
--goa-color-warning-background: #fff6e5;
|
|
27
|
-
--goa-color-emergency-default: #
|
|
28
|
-
--goa-color-emergency-light: #
|
|
29
|
-
--goa-color-emergency-dark: #
|
|
27
|
+
--goa-color-emergency-default: #da291c;
|
|
28
|
+
--goa-color-emergency-light: #fbd1ce;
|
|
29
|
+
--goa-color-emergency-dark: #a91a10;
|
|
30
30
|
--goa-color-emergency-background: #fff1f2;
|
|
31
|
-
--goa-color-success-default: #
|
|
32
|
-
--goa-color-success-light: #
|
|
33
|
-
--goa-color-success-dark: #
|
|
31
|
+
--goa-color-success-default: #006f4c;
|
|
32
|
+
--goa-color-success-light: #cce4dc;
|
|
33
|
+
--goa-color-success-dark: #00563a;
|
|
34
34
|
--goa-color-success-background: #eef9f3;
|
|
35
|
+
--goa-color-greyscale-50: #f8f8f8;
|
|
35
36
|
--goa-color-greyscale-100: #f1f1f1;
|
|
36
37
|
--goa-color-greyscale-200: #dcdcdc;
|
|
37
38
|
--goa-color-greyscale-400: #adadad;
|
package/dist/tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Tue, 11 Jun 2024 15:00:35 GMT
|
|
4
4
|
|
|
5
5
|
$goa-color-brand-default: #0081a2;
|
|
6
6
|
$goa-color-brand-dark: #005072;
|
|
@@ -14,22 +14,23 @@ $goa-color-text-default: #333333;
|
|
|
14
14
|
$goa-color-text-secondary: #666666;
|
|
15
15
|
$goa-color-text-light: #ffffff;
|
|
16
16
|
$goa-color-text-disabled: #666666;
|
|
17
|
-
$goa-color-info-default: #
|
|
18
|
-
$goa-color-info-light: #
|
|
19
|
-
$goa-color-info-dark: #
|
|
17
|
+
$goa-color-info-default: #004a8f;
|
|
18
|
+
$goa-color-info-light: #aac9e7;
|
|
19
|
+
$goa-color-info-dark: #003b70;
|
|
20
20
|
$goa-color-info-background: #eff8ff;
|
|
21
|
-
$goa-color-warning-default: #
|
|
22
|
-
$goa-color-warning-light: #
|
|
23
|
-
$goa-color-warning-dark: #
|
|
21
|
+
$goa-color-warning-default: #f9ce2d;
|
|
22
|
+
$goa-color-warning-light: #ffeab6;
|
|
23
|
+
$goa-color-warning-dark: #bf8d23;
|
|
24
24
|
$goa-color-warning-background: #fff6e5;
|
|
25
|
-
$goa-color-emergency-default: #
|
|
26
|
-
$goa-color-emergency-light: #
|
|
27
|
-
$goa-color-emergency-dark: #
|
|
25
|
+
$goa-color-emergency-default: #da291c;
|
|
26
|
+
$goa-color-emergency-light: #fbd1ce;
|
|
27
|
+
$goa-color-emergency-dark: #a91a10;
|
|
28
28
|
$goa-color-emergency-background: #fff1f2;
|
|
29
|
-
$goa-color-success-default: #
|
|
30
|
-
$goa-color-success-light: #
|
|
31
|
-
$goa-color-success-dark: #
|
|
29
|
+
$goa-color-success-default: #006f4c;
|
|
30
|
+
$goa-color-success-light: #cce4dc;
|
|
31
|
+
$goa-color-success-dark: #00563a;
|
|
32
32
|
$goa-color-success-background: #eef9f3;
|
|
33
|
+
$goa-color-greyscale-50: #f8f8f8;
|
|
33
34
|
$goa-color-greyscale-100: #f1f1f1;
|
|
34
35
|
$goa-color-greyscale-200: #dcdcdc;
|
|
35
36
|
$goa-color-greyscale-400: #adadad;
|