@abgov/design-tokens 1.0.5-dev.4 → 1.0.5-dev.6
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/global-ddi.json +103 -62
- package/{css → dist}/tokens.css +22 -15
- package/{scss → dist}/tokens.scss +23 -16
- package/index.spec.js +8 -13
- package/lib/design-tokens.js +20 -2
- package/package.json +1 -1
package/data/global-ddi.json
CHANGED
|
@@ -23,6 +23,11 @@
|
|
|
23
23
|
"type": "color",
|
|
24
24
|
"description": "Default color for interactive elements."
|
|
25
25
|
},
|
|
26
|
+
"disabled": {
|
|
27
|
+
"value": "#80B7E1",
|
|
28
|
+
"type": "color",
|
|
29
|
+
"description": "Color for disabled interactive elements."
|
|
30
|
+
},
|
|
26
31
|
"hover": {
|
|
27
32
|
"value": "#004F84",
|
|
28
33
|
"type": "color",
|
|
@@ -56,66 +61,84 @@
|
|
|
56
61
|
"description": "Use as the text color on dark backgrounds."
|
|
57
62
|
}
|
|
58
63
|
},
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
},
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
},
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
"
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
"
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
64
|
+
"info": {
|
|
65
|
+
"default": {
|
|
66
|
+
"value": "#005DAA",
|
|
67
|
+
"type": "color",
|
|
68
|
+
"description": "Use this color to indicate information to the user."
|
|
69
|
+
},
|
|
70
|
+
"background": {
|
|
71
|
+
"value": "#EFF8FF",
|
|
72
|
+
"type": "color",
|
|
73
|
+
"description": "Use this color as a background when indicating information to the user such as within a container or small callout."
|
|
74
|
+
},
|
|
75
|
+
"light": {
|
|
76
|
+
"value": "#B2D4ED",
|
|
77
|
+
"type": "color"
|
|
78
|
+
},
|
|
79
|
+
"dark": {
|
|
80
|
+
"value": "#00347A",
|
|
81
|
+
"type": "color"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"caution": {
|
|
85
|
+
"background": {
|
|
86
|
+
"value": "#FFF6E5",
|
|
87
|
+
"type": "color",
|
|
88
|
+
"description": "Use this color as a background when indicating caution to the user such as within a container or small callout."
|
|
89
|
+
},
|
|
90
|
+
"default": {
|
|
91
|
+
"value": "#FEBA35",
|
|
92
|
+
"type": "color",
|
|
93
|
+
"description": "Use this color to indicate a warning to the user."
|
|
94
|
+
},
|
|
95
|
+
"light": {
|
|
96
|
+
"value": "#FCEFD0",
|
|
97
|
+
"type": "color"
|
|
98
|
+
},
|
|
99
|
+
"dark": {
|
|
100
|
+
"value": "#C68A00",
|
|
101
|
+
"type": "color"
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
"emergency": {
|
|
105
|
+
"background": {
|
|
106
|
+
"value": "#FFF1F2",
|
|
107
|
+
"type": "color",
|
|
108
|
+
"description": "Use this color as a background when indicating emergency to the user such as within a container or small callout."
|
|
109
|
+
},
|
|
110
|
+
"default": {
|
|
111
|
+
"value": "#EC040B",
|
|
112
|
+
"type": "color",
|
|
113
|
+
"description": "Use this color to indicate an emergency to the user."
|
|
114
|
+
},
|
|
115
|
+
"light": {
|
|
116
|
+
"value": "#FFCECF",
|
|
117
|
+
"type": "color"
|
|
118
|
+
},
|
|
119
|
+
"dark": {
|
|
120
|
+
"value": "#B00000",
|
|
121
|
+
"type": "color"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
"success": {
|
|
125
|
+
"background": {
|
|
126
|
+
"value": "#EEF9F3",
|
|
127
|
+
"type": "color",
|
|
128
|
+
"description": "Use this color as a background when indicating success to the user such as within a container or small callout."
|
|
129
|
+
},
|
|
130
|
+
"default": {
|
|
131
|
+
"value": "#00853F",
|
|
132
|
+
"type": "color",
|
|
133
|
+
"description": "Use this color to indicate success to the user."
|
|
134
|
+
},
|
|
135
|
+
"light": {
|
|
136
|
+
"value": "#C6E0D0",
|
|
137
|
+
"type": "color"
|
|
138
|
+
},
|
|
139
|
+
"dark": {
|
|
140
|
+
"value": "#005715",
|
|
141
|
+
"type": "color"
|
|
119
142
|
}
|
|
120
143
|
},
|
|
121
144
|
"greyscale": {
|
|
@@ -136,6 +159,10 @@
|
|
|
136
159
|
"type": "color"
|
|
137
160
|
},
|
|
138
161
|
"600": {
|
|
162
|
+
"value": "#858585",
|
|
163
|
+
"type": "color"
|
|
164
|
+
},
|
|
165
|
+
"700": {
|
|
139
166
|
"value": "#666666",
|
|
140
167
|
"type": "color"
|
|
141
168
|
},
|
|
@@ -462,7 +489,7 @@
|
|
|
462
489
|
"fontWeight": "{fontWeight.regular}",
|
|
463
490
|
"lineHeight": "{lineHeight.1}",
|
|
464
491
|
"fontSize": "{fontSize.4}",
|
|
465
|
-
"letterSpacing": "{letterSpacing.
|
|
492
|
+
"letterSpacing": "{letterSpacing.1}"
|
|
466
493
|
},
|
|
467
494
|
"type": "typography"
|
|
468
495
|
}
|
|
@@ -486,7 +513,7 @@
|
|
|
486
513
|
}
|
|
487
514
|
},
|
|
488
515
|
"letterSpacing": {
|
|
489
|
-
"
|
|
516
|
+
"1": {
|
|
490
517
|
"value": "0.0125rem",
|
|
491
518
|
"type": "letterSpacing",
|
|
492
519
|
"description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
|
|
@@ -508,5 +535,19 @@
|
|
|
508
535
|
"type": "sizing",
|
|
509
536
|
"description": "24px"
|
|
510
537
|
}
|
|
538
|
+
},
|
|
539
|
+
"dropShadow": {
|
|
540
|
+
"modal": {
|
|
541
|
+
"value": {
|
|
542
|
+
"x": "6",
|
|
543
|
+
"y": "6",
|
|
544
|
+
"blur": "6",
|
|
545
|
+
"spread": "0",
|
|
546
|
+
"color": "rgba(0,0,0,0.16)",
|
|
547
|
+
"type": "dropShadow"
|
|
548
|
+
},
|
|
549
|
+
"type": "boxShadow",
|
|
550
|
+
"description": "Drop shadow for modals."
|
|
551
|
+
}
|
|
511
552
|
}
|
|
512
553
|
}
|
package/{css → dist}/tokens.css
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 05 Jan 2023 23:07:45 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -8,29 +8,35 @@
|
|
|
8
8
|
--goa-color-brand-dark: #005072;
|
|
9
9
|
--goa-color-brand-light: #c8eefa;
|
|
10
10
|
--goa-color-interactive-default: #0070c4;
|
|
11
|
+
--goa-color-interactive-disabled: #80b7e1;
|
|
11
12
|
--goa-color-interactive-hover: #004f84;
|
|
12
13
|
--goa-color-interactive-error: #ec040b;
|
|
13
14
|
--goa-color-interactive-focus: #feba35;
|
|
14
15
|
--goa-color-text-default: #333333;
|
|
15
16
|
--goa-color-text-secondary: #666666;
|
|
16
17
|
--goa-color-text-light: #ffffff;
|
|
17
|
-
--goa-color-
|
|
18
|
-
--goa-color-
|
|
19
|
-
--goa-color-
|
|
20
|
-
--goa-color-
|
|
21
|
-
--goa-color-
|
|
22
|
-
--goa-color-
|
|
23
|
-
--goa-color-
|
|
24
|
-
--goa-color-
|
|
25
|
-
--goa-color-
|
|
26
|
-
--goa-color-
|
|
27
|
-
--goa-color-
|
|
28
|
-
--goa-color-
|
|
18
|
+
--goa-color-info-default: #005daa;
|
|
19
|
+
--goa-color-info-background: #eff8ff;
|
|
20
|
+
--goa-color-info-light: #b2d4ed;
|
|
21
|
+
--goa-color-info-dark: #00347a;
|
|
22
|
+
--goa-color-caution-background: #fff6e5;
|
|
23
|
+
--goa-color-caution-default: #feba35;
|
|
24
|
+
--goa-color-caution-light: #fcefd0;
|
|
25
|
+
--goa-color-caution-dark: #c68a00;
|
|
26
|
+
--goa-color-emergency-background: #fff1f2;
|
|
27
|
+
--goa-color-emergency-default: #ec040b;
|
|
28
|
+
--goa-color-emergency-light: #ffcecf;
|
|
29
|
+
--goa-color-emergency-dark: #b00000;
|
|
30
|
+
--goa-color-success-background: #eef9f3;
|
|
31
|
+
--goa-color-success-default: #00853f;
|
|
32
|
+
--goa-color-success-light: #c6e0d0;
|
|
33
|
+
--goa-color-success-dark: #005715;
|
|
29
34
|
--goa-color-greyscale-100: #f1f1f1;
|
|
30
35
|
--goa-color-greyscale-200: #dcdcdc;
|
|
31
36
|
--goa-color-greyscale-400: #adadad;
|
|
32
37
|
--goa-color-greyscale-500: #949494;
|
|
33
|
-
--goa-color-greyscale-600: #
|
|
38
|
+
--goa-color-greyscale-600: #858585;
|
|
39
|
+
--goa-color-greyscale-700: #666666;
|
|
34
40
|
--goa-color-greyscale-black: #333333;
|
|
35
41
|
--goa-color-greyscale-white: #ffffff;
|
|
36
42
|
--goa-font-weight-regular: 400;
|
|
@@ -86,8 +92,9 @@
|
|
|
86
92
|
--goa-border-width-s: 1px;
|
|
87
93
|
--goa-border-width-m: 2px;
|
|
88
94
|
--goa-border-width-l: 3px;
|
|
89
|
-
--goa-letter-spacing-
|
|
95
|
+
--goa-letter-spacing-1: 0.0125rem;
|
|
90
96
|
--goa-icon-size-s: 1rem;
|
|
91
97
|
--goa-icon-size-m: 1.25rem;
|
|
92
98
|
--goa-icon-size-l: 1.5rem;
|
|
99
|
+
--goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
|
93
100
|
}
|
|
@@ -1,34 +1,40 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 05 Jan 2023 23:07:45 GMT
|
|
4
4
|
|
|
5
5
|
$goa-color-brand-default: #0081a2;
|
|
6
6
|
$goa-color-brand-dark: #005072;
|
|
7
7
|
$goa-color-brand-light: #c8eefa;
|
|
8
8
|
$goa-color-interactive-default: #0070c4;
|
|
9
|
+
$goa-color-interactive-disabled: #80b7e1;
|
|
9
10
|
$goa-color-interactive-hover: #004f84;
|
|
10
11
|
$goa-color-interactive-error: #ec040b;
|
|
11
12
|
$goa-color-interactive-focus: #feba35;
|
|
12
13
|
$goa-color-text-default: #333333;
|
|
13
14
|
$goa-color-text-secondary: #666666;
|
|
14
15
|
$goa-color-text-light: #ffffff;
|
|
15
|
-
$goa-color-
|
|
16
|
-
$goa-color-
|
|
17
|
-
$goa-color-
|
|
18
|
-
$goa-color-
|
|
19
|
-
$goa-color-
|
|
20
|
-
$goa-color-
|
|
21
|
-
$goa-color-
|
|
22
|
-
$goa-color-
|
|
23
|
-
$goa-color-
|
|
24
|
-
$goa-color-
|
|
25
|
-
$goa-color-
|
|
26
|
-
$goa-color-
|
|
16
|
+
$goa-color-info-default: #005daa;
|
|
17
|
+
$goa-color-info-background: #eff8ff;
|
|
18
|
+
$goa-color-info-light: #b2d4ed;
|
|
19
|
+
$goa-color-info-dark: #00347a;
|
|
20
|
+
$goa-color-caution-background: #fff6e5;
|
|
21
|
+
$goa-color-caution-default: #feba35;
|
|
22
|
+
$goa-color-caution-light: #fcefd0;
|
|
23
|
+
$goa-color-caution-dark: #c68a00;
|
|
24
|
+
$goa-color-emergency-background: #fff1f2;
|
|
25
|
+
$goa-color-emergency-default: #ec040b;
|
|
26
|
+
$goa-color-emergency-light: #ffcecf;
|
|
27
|
+
$goa-color-emergency-dark: #b00000;
|
|
28
|
+
$goa-color-success-background: #eef9f3;
|
|
29
|
+
$goa-color-success-default: #00853f;
|
|
30
|
+
$goa-color-success-light: #c6e0d0;
|
|
31
|
+
$goa-color-success-dark: #005715;
|
|
27
32
|
$goa-color-greyscale-100: #f1f1f1;
|
|
28
33
|
$goa-color-greyscale-200: #dcdcdc;
|
|
29
34
|
$goa-color-greyscale-400: #adadad;
|
|
30
35
|
$goa-color-greyscale-500: #949494;
|
|
31
|
-
$goa-color-greyscale-600: #
|
|
36
|
+
$goa-color-greyscale-600: #858585;
|
|
37
|
+
$goa-color-greyscale-700: #666666;
|
|
32
38
|
$goa-color-greyscale-black: #333333;
|
|
33
39
|
$goa-color-greyscale-white: #ffffff;
|
|
34
40
|
$goa-font-weight-regular: 400;
|
|
@@ -84,7 +90,8 @@ $goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
|
|
|
84
90
|
$goa-border-width-s: 1px;
|
|
85
91
|
$goa-border-width-m: 2px;
|
|
86
92
|
$goa-border-width-l: 3px;
|
|
87
|
-
$goa-letter-spacing-
|
|
93
|
+
$goa-letter-spacing-1: 0.0125rem;
|
|
88
94
|
$goa-icon-size-s: 1rem;
|
|
89
95
|
$goa-icon-size-m: 1.25rem;
|
|
90
|
-
$goa-icon-size-l: 1.5rem;
|
|
96
|
+
$goa-icon-size-l: 1.5rem;
|
|
97
|
+
$goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
|
package/index.spec.js
CHANGED
|
@@ -10,26 +10,21 @@ describe("GoA Design Tokens", () => {
|
|
|
10
10
|
|
|
11
11
|
it("should create css and scss files", async () => {
|
|
12
12
|
SC.generate("./tmp");
|
|
13
|
-
const dirs = fs.readdirSync("./tmp");
|
|
14
|
-
expect(dirs.length).toBe(2);
|
|
15
|
-
expect(dirs).toContain("css");
|
|
16
|
-
expect(dirs).toContain("scss");
|
|
17
13
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
14
|
+
const cssfiles = fs.readdirSync("./tmp/dist");
|
|
15
|
+
expect(cssfiles.length).toBe(2);
|
|
16
|
+
expect(cssfiles[0]).toBe(`tokens.css`);
|
|
17
|
+
expect(cssfiles[1]).toBe(`tokens.scss`);
|
|
23
18
|
});
|
|
24
19
|
|
|
25
20
|
it("should create valid css output", async () => {
|
|
26
21
|
SC.generate("./tmp");
|
|
27
|
-
const raw = fs.readFileSync("./tmp/
|
|
28
|
-
expect(raw).toContain("
|
|
22
|
+
const raw = fs.readFileSync("./tmp/dist/tokens.css", { encoding: "utf8" });
|
|
23
|
+
expect(raw).not.toContain("[object Object]");
|
|
29
24
|
});
|
|
30
25
|
it("should create valid scss output", async () => {
|
|
31
26
|
SC.generate("./tmp");
|
|
32
|
-
const raw = fs.readFileSync("./tmp/
|
|
33
|
-
expect(raw).toContain("
|
|
27
|
+
const raw = fs.readFileSync("./tmp/dist/tokens.scss", { encoding: "utf8" });
|
|
28
|
+
expect(raw).not.toContain("[object Object]");
|
|
34
29
|
});
|
|
35
30
|
});
|
package/lib/design-tokens.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
const StyleDictionary = require("style-dictionary");
|
|
2
2
|
|
|
3
3
|
function generate(outputPath) {
|
|
4
|
+
|
|
5
|
+
// Typography
|
|
4
6
|
StyleDictionary.registerTransform({
|
|
5
7
|
name: "typography/shorthand",
|
|
6
8
|
type: "value",
|
|
@@ -15,6 +17,20 @@ function generate(outputPath) {
|
|
|
15
17
|
},
|
|
16
18
|
});
|
|
17
19
|
|
|
20
|
+
// Drop Shadow
|
|
21
|
+
StyleDictionary.registerTransform({
|
|
22
|
+
name: "box-shadow",
|
|
23
|
+
type: "value",
|
|
24
|
+
transitive: true,
|
|
25
|
+
matcher: function(token) {
|
|
26
|
+
return token.type === "boxShadow";
|
|
27
|
+
},
|
|
28
|
+
transformer: function(token) {
|
|
29
|
+
const { x, y, blur, spread, color } = token.original.value;
|
|
30
|
+
return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
|
|
31
|
+
},
|
|
32
|
+
});
|
|
33
|
+
|
|
18
34
|
try {
|
|
19
35
|
StyleDictionary.extend({
|
|
20
36
|
source: [`./data/**/*.json`],
|
|
@@ -24,8 +40,9 @@ function generate(outputPath) {
|
|
|
24
40
|
transforms: [
|
|
25
41
|
...StyleDictionary.transformGroup.scss,
|
|
26
42
|
"typography/shorthand",
|
|
43
|
+
"box-shadow",
|
|
27
44
|
],
|
|
28
|
-
buildPath: `${outputPath}/
|
|
45
|
+
buildPath: `${outputPath}/dist/`,
|
|
29
46
|
files: [
|
|
30
47
|
{
|
|
31
48
|
destination: "tokens.scss",
|
|
@@ -38,8 +55,9 @@ function generate(outputPath) {
|
|
|
38
55
|
transforms: [
|
|
39
56
|
...StyleDictionary.transformGroup.css,
|
|
40
57
|
"typography/shorthand",
|
|
58
|
+
"box-shadow",
|
|
41
59
|
],
|
|
42
|
-
buildPath: `${outputPath}/
|
|
60
|
+
buildPath: `${outputPath}/dist/`,
|
|
43
61
|
files: [
|
|
44
62
|
{
|
|
45
63
|
destination: "tokens.css",
|