@abgov/design-tokens 1.0.5-dev.4 → 1.0.5-dev.5

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/index.css +100 -0
  2. package/css/tokens.css +22 -15
  3. package/data/global-ddi.json +103 -62
  4. package/index.spec.js +13 -11
  5. package/lib/design-tokens.js +20 -2
  6. package/package.json +1 -1
  7. package/scss/index.scss +97 -0
  8. package/scss/tokens.scss +23 -16
package/css/index.css ADDED
@@ -0,0 +1,100 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 05 Jan 2023 22:44:54 GMT
4
+ */
5
+
6
+ :root {
7
+ --goa-color-brand-default: #0081a2;
8
+ --goa-color-brand-dark: #005072;
9
+ --goa-color-brand-light: #c8eefa;
10
+ --goa-color-interactive-default: #0070c4;
11
+ --goa-color-interactive-disabled: #80b7e1;
12
+ --goa-color-interactive-hover: #004f84;
13
+ --goa-color-interactive-error: #ec040b;
14
+ --goa-color-interactive-focus: #feba35;
15
+ --goa-color-text-default: #333333;
16
+ --goa-color-text-secondary: #666666;
17
+ --goa-color-text-light: #ffffff;
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;
34
+ --goa-color-greyscale-100: #f1f1f1;
35
+ --goa-color-greyscale-200: #dcdcdc;
36
+ --goa-color-greyscale-400: #adadad;
37
+ --goa-color-greyscale-500: #949494;
38
+ --goa-color-greyscale-600: #858585;
39
+ --goa-color-greyscale-700: #666666;
40
+ --goa-color-greyscale-black: #333333;
41
+ --goa-color-greyscale-white: #ffffff;
42
+ --goa-font-weight-regular: 400;
43
+ --goa-font-weight-medium: 500;
44
+ --goa-font-weight-bold: 700;
45
+ --goa-font-size-1: 0.75rem;
46
+ --goa-font-size-2: 0.875rem;
47
+ --goa-font-size-3: 1rem;
48
+ --goa-font-size-4: 1.125rem;
49
+ --goa-font-size-5: 1.25rem;
50
+ --goa-font-size-6: 1.375rem;
51
+ --goa-font-size-7: 1.5rem;
52
+ --goa-font-size-8: 2rem;
53
+ --goa-font-size-9: 2.25rem;
54
+ --goa-font-size-10: 3rem;
55
+ --goa-spacing-none: 0rem;
56
+ --goa-spacing-3xs: 0.125rem;
57
+ --goa-spacing-2xs: 0.25rem;
58
+ --goa-spacing-xs: 0.5rem;
59
+ --goa-spacing-s: 0.75rem;
60
+ --goa-spacing-m: 1rem;
61
+ --goa-spacing-l: 1.5rem;
62
+ --goa-spacing-xl: 2rem;
63
+ --goa-spacing-2xl: 3rem;
64
+ --goa-spacing-3xl: 4rem;
65
+ --goa-spacing-4xl: 8rem;
66
+ --goa-border-radius-0: 0rem;
67
+ --goa-border-radius-4: 0.25rem;
68
+ --goa-border-radius-pill: 999px;
69
+ --goa-border-radius-circle: 50%;
70
+ --goa-opacity-3: 30%;
71
+ --goa-opacity-5: 50%;
72
+ --goa-opacity-8: 80%;
73
+ --goa-line-height-1: 1.25rem;
74
+ --goa-line-height-2: 1.5rem;
75
+ --goa-line-height-3: 1.75rem;
76
+ --goa-line-height-4: 2rem;
77
+ --goa-line-height-5: 2.5rem;
78
+ --goa-line-height-6: 2.75rem;
79
+ --goa-line-height-7: 3.5rem;
80
+ --goa-font-families-default: Acumin-pro-semi-condensed;
81
+ --goa-font-families-numbers: roboto-mono;
82
+ --goa-typography-heading-xl: 700 3rem/3.5rem Acumin-pro-semi-condensed;
83
+ --goa-typography-heading-l: 400 2.25rem/2.75rem Acumin-pro-semi-condensed;
84
+ --goa-typography-heading-m: 400 1.5rem/2rem Acumin-pro-semi-condensed;
85
+ --goa-typography-heading-s: 700 1.125rem/1.75rem Acumin-pro-semi-condensed;
86
+ --goa-typography-heading-xs: 700 1rem/1.5rem Acumin-pro-semi-condensed;
87
+ --goa-typography-body-l: 400 1.5rem/2rem Acumin-pro-semi-condensed;
88
+ --goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
89
+ --goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
90
+ --goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
91
+ --goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
92
+ --goa-border-width-s: 1px;
93
+ --goa-border-width-m: 2px;
94
+ --goa-border-width-l: 3px;
95
+ --goa-letter-spacing-1: 0.0125rem;
96
+ --goa-icon-size-s: 1rem;
97
+ --goa-icon-size-m: 1.25rem;
98
+ --goa-icon-size-l: 1.5rem;
99
+ --goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
100
+ }
package/css/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 16 Dec 2022 03:19:58 GMT
3
+ * Generated on Thu, 05 Jan 2023 22:31:12 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-status-info-default: #005daa;
18
- --goa-color-status-info-light: #b2d4ed;
19
- --goa-color-status-info-dark: #00347a;
20
- --goa-color-status-warning-default: #feba35;
21
- --goa-color-status-warning-light: #fcefd0;
22
- --goa-color-status-warning-dark: #c68a00;
23
- --goa-color-status-emergency-default: #ec040b;
24
- --goa-color-status-emergency-light: #ffcecf;
25
- --goa-color-status-emergency-dark: #b00000;
26
- --goa-color-status-success-default: #00853f;
27
- --goa-color-status-success-light: #c6e0d0;
28
- --goa-color-status-success-dark: #005715;
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: #666666;
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-buttons: 0.0125rem;
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
  }
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
- "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
- }
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.buttons}"
492
+ "letterSpacing": "{letterSpacing.1}"
466
493
  },
467
494
  "type": "typography"
468
495
  }
@@ -486,7 +513,7 @@
486
513
  }
487
514
  },
488
515
  "letterSpacing": {
489
- "buttons": {
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/index.spec.js CHANGED
@@ -12,24 +12,26 @@ describe("GoA Design Tokens", () => {
12
12
  SC.generate("./tmp");
13
13
  const dirs = fs.readdirSync("./tmp");
14
14
  expect(dirs.length).toBe(2);
15
- expect(dirs).toContain("css");
16
- expect(dirs).toContain("scss");
15
+ expect(dirs[0]).toContain("css");
16
+ expect(dirs[1]).toContain("scss");
17
17
 
18
- for (const dir of dirs) {
19
- const files = fs.readdirSync("./tmp/" + dir);
20
- expect(files.length).toBe(1);
21
- expect(files[0]).toBe(`tokens.${dir}`);
22
- }
18
+ const cssfiles = fs.readdirSync("./tmp/css");
19
+ expect(cssfiles.length).toBe(1);
20
+ expect(cssfiles[0]).toBe(`index.css`);
21
+
22
+ const scssfiles = fs.readdirSync("./tmp/scss");
23
+ expect(scssfiles.length).toBe(1);
24
+ expect(scssfiles[0]).toBe(`index.scss`);
23
25
  });
24
26
 
25
27
  it("should create valid css output", async () => {
26
28
  SC.generate("./tmp");
27
- const raw = fs.readFileSync("./tmp/css/tokens.css", { encoding: "utf8" });
28
- expect(raw).toContain("--goa-color-brand-default");
29
+ const raw = fs.readFileSync("./tmp/css/index.css", { encoding: "utf8" });
30
+ expect(raw).not.toContain("[object Object]");
29
31
  });
30
32
  it("should create valid scss output", async () => {
31
33
  SC.generate("./tmp");
32
- const raw = fs.readFileSync("./tmp/scss/tokens.scss", { encoding: "utf8" });
33
- expect(raw).toContain("$goa-color-brand-default");
34
+ const raw = fs.readFileSync("./tmp/scss/index.scss", { encoding: "utf8" });
35
+ expect(raw).not.toContain("[object Object]");
34
36
  });
35
37
  });
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,11 +40,12 @@ function generate(outputPath) {
24
40
  transforms: [
25
41
  ...StyleDictionary.transformGroup.scss,
26
42
  "typography/shorthand",
43
+ "box-shadow",
27
44
  ],
28
45
  buildPath: `${outputPath}/scss/`,
29
46
  files: [
30
47
  {
31
- destination: "tokens.scss",
48
+ destination: "index.scss",
32
49
  format: "scss/variables",
33
50
  },
34
51
  ],
@@ -38,11 +55,12 @@ function generate(outputPath) {
38
55
  transforms: [
39
56
  ...StyleDictionary.transformGroup.css,
40
57
  "typography/shorthand",
58
+ "box-shadow",
41
59
  ],
42
60
  buildPath: `${outputPath}/css/`,
43
61
  files: [
44
62
  {
45
- destination: "tokens.css",
63
+ destination: "index.css",
46
64
  format: "css/variables",
47
65
  },
48
66
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.0.5-dev.4",
3
+ "version": "1.0.5-dev.5",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",
package/scss/index.scss ADDED
@@ -0,0 +1,97 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Thu, 05 Jan 2023 22:44:54 GMT
4
+
5
+ $goa-color-brand-default: #0081a2;
6
+ $goa-color-brand-dark: #005072;
7
+ $goa-color-brand-light: #c8eefa;
8
+ $goa-color-interactive-default: #0070c4;
9
+ $goa-color-interactive-disabled: #80b7e1;
10
+ $goa-color-interactive-hover: #004f84;
11
+ $goa-color-interactive-error: #ec040b;
12
+ $goa-color-interactive-focus: #feba35;
13
+ $goa-color-text-default: #333333;
14
+ $goa-color-text-secondary: #666666;
15
+ $goa-color-text-light: #ffffff;
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;
32
+ $goa-color-greyscale-100: #f1f1f1;
33
+ $goa-color-greyscale-200: #dcdcdc;
34
+ $goa-color-greyscale-400: #adadad;
35
+ $goa-color-greyscale-500: #949494;
36
+ $goa-color-greyscale-600: #858585;
37
+ $goa-color-greyscale-700: #666666;
38
+ $goa-color-greyscale-black: #333333;
39
+ $goa-color-greyscale-white: #ffffff;
40
+ $goa-font-weight-regular: 400;
41
+ $goa-font-weight-medium: 500;
42
+ $goa-font-weight-bold: 700;
43
+ $goa-font-size-1: 0.75rem;
44
+ $goa-font-size-2: 0.875rem;
45
+ $goa-font-size-3: 1rem;
46
+ $goa-font-size-4: 1.125rem;
47
+ $goa-font-size-5: 1.25rem;
48
+ $goa-font-size-6: 1.375rem;
49
+ $goa-font-size-7: 1.5rem;
50
+ $goa-font-size-8: 2rem;
51
+ $goa-font-size-9: 2.25rem;
52
+ $goa-font-size-10: 3rem;
53
+ $goa-spacing-none: 0rem;
54
+ $goa-spacing-3xs: 0.125rem;
55
+ $goa-spacing-2xs: 0.25rem;
56
+ $goa-spacing-xs: 0.5rem;
57
+ $goa-spacing-s: 0.75rem;
58
+ $goa-spacing-m: 1rem;
59
+ $goa-spacing-l: 1.5rem;
60
+ $goa-spacing-xl: 2rem;
61
+ $goa-spacing-2xl: 3rem;
62
+ $goa-spacing-3xl: 4rem;
63
+ $goa-spacing-4xl: 8rem;
64
+ $goa-border-radius-0: 0rem;
65
+ $goa-border-radius-4: 0.25rem;
66
+ $goa-border-radius-pill: 999px;
67
+ $goa-border-radius-circle: 50%;
68
+ $goa-opacity-3: 30%;
69
+ $goa-opacity-5: 50%;
70
+ $goa-opacity-8: 80%;
71
+ $goa-line-height-1: 1.25rem;
72
+ $goa-line-height-2: 1.5rem;
73
+ $goa-line-height-3: 1.75rem;
74
+ $goa-line-height-4: 2rem;
75
+ $goa-line-height-5: 2.5rem;
76
+ $goa-line-height-6: 2.75rem;
77
+ $goa-line-height-7: 3.5rem;
78
+ $goa-font-families-default: Acumin-pro-semi-condensed;
79
+ $goa-font-families-numbers: roboto-mono;
80
+ $goa-typography-heading-xl: 700 3rem/3.5rem Acumin-pro-semi-condensed;
81
+ $goa-typography-heading-l: 400 2.25rem/2.75rem Acumin-pro-semi-condensed;
82
+ $goa-typography-heading-m: 400 1.5rem/2rem Acumin-pro-semi-condensed;
83
+ $goa-typography-heading-s: 700 1.125rem/1.75rem Acumin-pro-semi-condensed;
84
+ $goa-typography-heading-xs: 700 1rem/1.5rem Acumin-pro-semi-condensed;
85
+ $goa-typography-body-l: 400 1.5rem/2rem Acumin-pro-semi-condensed;
86
+ $goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
87
+ $goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
88
+ $goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
89
+ $goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
90
+ $goa-border-width-s: 1px;
91
+ $goa-border-width-m: 2px;
92
+ $goa-border-width-l: 3px;
93
+ $goa-letter-spacing-1: 0.0125rem;
94
+ $goa-icon-size-s: 1rem;
95
+ $goa-icon-size-m: 1.25rem;
96
+ $goa-icon-size-l: 1.5rem;
97
+ $goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
package/scss/tokens.scss CHANGED
@@ -1,34 +1,40 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 16 Dec 2022 03:19:58 GMT
3
+ // Generated on Thu, 05 Jan 2023 22:31:12 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-status-info-default: #005daa;
16
- $goa-color-status-info-light: #b2d4ed;
17
- $goa-color-status-info-dark: #00347a;
18
- $goa-color-status-warning-default: #feba35;
19
- $goa-color-status-warning-light: #fcefd0;
20
- $goa-color-status-warning-dark: #c68a00;
21
- $goa-color-status-emergency-default: #ec040b;
22
- $goa-color-status-emergency-light: #ffcecf;
23
- $goa-color-status-emergency-dark: #b00000;
24
- $goa-color-status-success-default: #00853f;
25
- $goa-color-status-success-light: #c6e0d0;
26
- $goa-color-status-success-dark: #005715;
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: #666666;
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-buttons: 0.0125rem;
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);