@abgov/design-tokens 1.3.0 → 1.4.0-dev.1

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 (12) hide show
  1. package/data/component-design-tokens/accordion-design-tokens.json +54 -0
  2. package/data/component-design-tokens/button-design-tokens.json +26 -0
  3. package/data/component-design-tokens/callout-design-tokens.json +122 -0
  4. package/data/component-design-tokens/container-design-tokens.json +18 -0
  5. package/data/component-design-tokens/side-menu-design-tokens.json +46 -0
  6. package/data/component-design-tokens/table-design-tokens.json +10 -0
  7. package/data/goa-global-design-tokens.json +756 -0
  8. package/dist/tokens.css +116 -67
  9. package/dist/tokens.scss +117 -68
  10. package/lib/design-tokens.js +16 -0
  11. package/package.json +1 -1
  12. package/data/global-ddi.json +0 -851
package/dist/tokens.css CHANGED
@@ -1,25 +1,23 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 09 Oct 2024 15:56:39 GMT
3
+ * Generated on Fri, 18 Oct 2024 17:48:30 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --goa-callout-emergency-border-color: none;
8
- --goa-callout-success-border-color: none;
9
- --goa-callout-warning-border-color: none;
10
- --goa-callout-info-border-color: none;
11
- --goa-button-height-start: 3.25rem;
12
- --goa-button-height-compact: 2rem;
13
- --goa-button-height: 2.625rem;
14
- --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
15
- --goa-icon-size-l: 1.5rem;
16
- --goa-icon-size-m: 1.25rem;
17
- --goa-icon-size-s: 1rem;
18
7
  --goa-letter-spacing-button: 0.0125rem;
19
- --goa-border-width-l: 3px;
20
- --goa-border-width-m: 2px;
21
- --goa-border-width-s: 1px;
22
- --goa-border-width-none: 0px;
8
+ --goa-font-weight-bold: 700;
9
+ --goa-font-weight-medium: 500;
10
+ --goa-font-weight-regular: 400;
11
+ --goa-font-size-10: 3rem;
12
+ --goa-font-size-9: 2.25rem;
13
+ --goa-font-size-8: 2rem;
14
+ --goa-font-size-7: 1.5rem;
15
+ --goa-font-size-6: 1.375rem;
16
+ --goa-font-size-5: 1.25rem;
17
+ --goa-font-size-4: 1.125rem;
18
+ --goa-font-size-3: 1rem;
19
+ --goa-font-size-2: 0.875rem;
20
+ --goa-font-size-1: 0.75rem;
23
21
  --goa-font-family-number: roboto-mono, monospace;
24
22
  --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
25
23
  --goa-line-height-05: 1.125rem;
@@ -30,10 +28,17 @@
30
28
  --goa-line-height-3: 1.75rem;
31
29
  --goa-line-height-2: 1.5rem;
32
30
  --goa-line-height-1: 1.25rem;
33
- --goa-opacity-background-loading: 90%;
34
- --goa-opacity-background-modal: 50%;
35
- --goa-border-radius-m: 0.25rem;
36
- --goa-border-radius-none: 0rem;
31
+ --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
32
+ --goa-shadow-600: 0px 20px 20px -8px 1a1a1a47;
33
+ --goa-shadow-500: 0px 12px 20px -8px 1a1a1a3D;
34
+ --goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
35
+ --goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
36
+ --goa-shadow-200: 0px 3px 1px -1px 1a1a1a12;
37
+ --goa-shadow-150: 0px 1px 0px 0px 1a1a1a40;
38
+ --goa-shadow-100: 0px 1px 0px 0px 1A1A1A12;
39
+ --goa-icon-size-l: 1.5rem;
40
+ --goa-icon-size-m: 1.25rem;
41
+ --goa-icon-size-s: 1rem;
37
42
  --goa-space-4xl: 8rem;
38
43
  --goa-space-3xl: 4rem;
39
44
  --goa-space-2xl: 3rem;
@@ -45,28 +50,49 @@
45
50
  --goa-space-2xs: 0.25rem;
46
51
  --goa-space-3xs: 0.125rem;
47
52
  --goa-space-none: 0rem;
48
- --goa-font-size-10: 3rem;
49
- --goa-font-size-9: 2.25rem;
50
- --goa-font-size-8: 2rem;
51
- --goa-font-size-7: 1.5rem;
52
- --goa-font-size-6: 1.375rem;
53
- --goa-font-size-5: 1.25rem;
54
- --goa-font-size-4: 1.125rem;
55
- --goa-font-size-3: 1rem;
56
- --goa-font-size-2: 0.875rem;
57
- --goa-font-size-1: 0.75rem;
58
- --goa-font-weight-bold: 700;
59
- --goa-font-weight-medium: 500;
60
- --goa-font-weight-regular: 400;
53
+ --goa-border-width-l: 3px;
54
+ --goa-border-width-m: 2px;
55
+ --goa-border-width-s: 1px;
56
+ --goa-border-width-xs: 0.7px;
57
+ --goa-border-width-2xs: 0.5px;
58
+ --goa-border-radius-3xl: 0.75rem;
59
+ --goa-border-radius-2xl: 0.625rem;
60
+ --goa-border-radius-xl: 0.5rem;
61
+ --goa-border-radius-l: 0.375rem;
62
+ --goa-border-radius-m: 0.25rem;
63
+ --goa-border-radius-none: 0;
64
+ --goa-opacity-background-loading: 90%;
65
+ --goa-opacity-background-modal: 50%;
66
+ --goa-color-extended-yellow: #fce796;
67
+ --goa-color-extended-violet: #d4c2ff;
68
+ --goa-color-extended-red: #ed948d;
69
+ --goa-color-extended-pink: #ff8fc5;
70
+ --goa-color-extended-orange: #ffc76d;
71
+ --goa-color-extended-green: #bbfcb4;
72
+ --goa-color-extended-blue: #aac9e7;
73
+ --goa-color-extended-aqua: #7febe6;
74
+ --goa-color-extended-light-yellow: #fff7bf;
75
+ --goa-color-extended-light-violet: #efe2fb;
76
+ --goa-color-extended-light-red: #f4cdc6;
77
+ --goa-color-extended-light-pink: #f9e1eb;
78
+ --goa-color-extended-light-orange: #fcd6c3;
79
+ --goa-color-extended-light-green: #cce2d9;
80
+ --goa-color-extended-light-blue: #ddefff;
81
+ --goa-color-extended-light-aqua: #dcfbf8;
61
82
  --goa-color-greyscale-white: #ffffff;
62
83
  --goa-color-greyscale-black: #333333;
84
+ --goa-color-greyscale-900: #474747;
85
+ --goa-color-greyscale-800: #5c5c5c;
63
86
  --goa-color-greyscale-700: #666666;
64
87
  --goa-color-greyscale-600: #858585;
65
88
  --goa-color-greyscale-500: #949494;
66
89
  --goa-color-greyscale-400: #adadad;
90
+ --goa-color-greyscale-300: #c2c2c2;
67
91
  --goa-color-greyscale-200: #dcdcdc;
92
+ --goa-color-greyscale-150: #e7e7e7;
68
93
  --goa-color-greyscale-100: #f1f1f1;
69
94
  --goa-color-greyscale-50: #f8f8f8;
95
+ --goa-color-critical-default: #171d23;
70
96
  --goa-color-success-background: #eef9f3;
71
97
  --goa-color-success-dark: #00563a;
72
98
  --goa-color-success-light: #cce4dc;
@@ -79,23 +105,58 @@
79
105
  --goa-color-warning-dark: #bf8d23;
80
106
  --goa-color-warning-light: #ffeab6;
81
107
  --goa-color-warning-default: #f9ce2d;
82
- --goa-color-info-background: #eff8ff;
83
- --goa-color-info-dark: #003b70;
84
- --goa-color-info-light: #aac9e7;
85
- --goa-color-info-default: #004a8f;
86
- --goa-color-interactive-disabled: #80b7e1;
108
+ --goa-color-information-background: #eff8ff;
109
+ --goa-color-information-dark: #003b70;
110
+ --goa-color-information-light: #aac9e7;
111
+ --goa-color-information-default: #004a8f;
112
+ --goa-color-brand-light: #c8eefa;
113
+ --goa-color-brand-dark: #005072;
114
+ --goa-color-brand-default: #0081a2;
115
+ --goa-color-interactive-visited: #756693;
116
+ --goa-color-interactive-focus-black: #000000;
87
117
  --goa-color-interactive-focus: #feba35;
118
+ --goa-color-interactive-error-disabled: #f58185;
119
+ --goa-color-interactive-error-hover: #ba0000;
88
120
  --goa-color-interactive-error: #ec040b;
121
+ --goa-color-interactive-disabled: #80b7e1;
89
122
  --goa-color-interactive-hover: #004f84;
90
123
  --goa-color-interactive-default: #0070c4;
91
- --goa-color-brand-light: #c8eefa;
92
- --goa-color-brand-dark: #005072;
93
- --goa-color-brand-default: #0081a2;
124
+ --goa-side-menu-parent-color-bg-hover: #CEDFEE;
125
+ --goa-side-menu-child-border-width: 4px;
126
+ --goa-callout-emergency-border-color: none;
127
+ --goa-callout-success-border-color: none;
128
+ --goa-callout-warning-border-color: none;
129
+ --goa-callout-info-border-color: none;
130
+ --goa-callout-border-width: 0px;
131
+ --goa-button-height-compact: 32px;
132
+ --goa-button-height: 42px;
133
+ --goa-typography-number-l: var(--goa-font-weight-medium) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-number);
134
+ --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
135
+ --goa-typography-number-s: var(--goa-font-weight-medium) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-number);
136
+ --goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
137
+ --goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
138
+ --goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
139
+ --goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
140
+ --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
141
+ --goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
142
+ --goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
143
+ --goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
144
+ --goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
145
+ --goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
146
+ --goa-color-text-disabled: var(--goa-color-greyscale-700);
147
+ --goa-color-text-light: var(--goa-color-greyscale-white);
148
+ --goa-color-text-secondary: var(--goa-color-greyscale-700);
149
+ --goa-color-text-default: var(--goa-color-greyscale-black);
94
150
  --goa-table-color-border-heading: var(--goa-color-greyscale-600);
151
+ --goa-side-menu-child-color-bg-selected: var(--goa-color-information-background);
152
+ --goa-side-menu-child-color-bg-hover: var(--goa-color-information-background);
153
+ --goa-side-menu-group-border-radius: var(--goa-border-radius-none);
154
+ --goa-side-menu-parent-padding: var(--goa-space-none);
155
+ --goa-side-menu-group-padding: var(--goa-space-m) var(--goa-space-none) var(--goa-space-l) var(--goa-space-none);
156
+ --goa-side-menu-group-color-bg: var(--goa-color-greyscale-white);
95
157
  --goa-container-padding: var(--goa-space-l);
96
158
  --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
97
159
  --goa-container-border-radius: var(--goa-border-radius-m);
98
- --goa-callout-event-icon-color: var(--goa-color-greyscale-white);
99
160
  --goa-callout-emergency-icon-color: var(--goa-color-greyscale-white);
100
161
  --goa-callout-emergency-color-bg-statusbar: var(--goa-color-emergency-default);
101
162
  --goa-callout-emergency-color-bg-content: var(--goa-color-greyscale-100);
@@ -105,52 +166,40 @@
105
166
  --goa-callout-warning-icon-color: var(--goa-color-greyscale-black);
106
167
  --goa-callout-warning-color-bg-statusbar: var(--goa-color-warning-default);
107
168
  --goa-callout-warning-color-bg-content: var(--goa-color-greyscale-100);
108
- --goa-callout-info-color-bg-statusbar: var(--goa-color-info-default);
109
169
  --goa-callout-info-icon-color: var(--goa-color-greyscale-white);
170
+ --goa-callout-info-color-bg-statusbar: var(--goa-color-information-default);
110
171
  --goa-callout-info-color-bg-content: var(--goa-color-greyscale-100);
111
172
  --goa-callout-m-statusbar-padding: var(--goa-space-s) var(--goa-space-2xs);
112
173
  --goa-callout-m-content-gap: var(--goa-space-2xs);
113
174
  --goa-callout-m-content-padding: var(--goa-space-s);
114
- --goa-callout-m-border-width: var(--goa-border-width-none);
175
+ --goa-callout-m-icon-size: var(--goa-icon-size-s);
115
176
  --goa-callout-l-statusbar-padding: var(--goa-space-l) var(--goa-space-s);
116
177
  --goa-callout-l-content-gap: var(--goa-space-m);
117
178
  --goa-callout-l-content-padding: var(--goa-space-l);
118
- --goa-callout-l-border-width: var(--goa-border-width-none);
179
+ --goa-callout-l-icon-size: var(--goa-icon-size-m);
119
180
  --goa-callout-border-radius: var(--goa-border-radius-none);
181
+ --goa-button-padding-lr-compact: var(--goa-space-xs);
182
+ --goa-button-padding-lr: var(--goa-space-s);
183
+ --goa-button-border-radius: var(--goa-border-radius-m);
120
184
  --goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
121
185
  --goa-accordion-padding-content-narrow: var(--goa-space-l);
122
186
  --goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
123
- --goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m) var(--goa-space-s) 0;
187
+ --goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m);
124
188
  --goa-accordion-border-radius: var(--goa-border-radius-m);
125
189
  --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
126
190
  --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
127
191
  --goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
128
- --goa-button-padding-lr-compact: var(--goa-space-xs);
129
- --goa-button-padding-lr: var(--goa-space-s);
130
- --goa-button-border-radius: var(--goa-border-radius-m);
131
- --goa-typography-number-m: var(--goa-font-weight-medium) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-number);
132
- --goa-typography-button-default: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-1) var(--goa-font-family-sans);
133
- --goa-typography-body-l: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
134
- --goa-typography-body-m: var(--goa-font-weight-regular) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
135
- --goa-typography-body-s: var(--goa-font-weight-regular) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
136
- --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2)/var(--goa-line-height-1) var(--goa-font-family-sans);
137
- --goa-typography-heading-xl: var(--goa-font-weight-bold) var(--goa-font-size-10)/var(--goa-line-height-7) var(--goa-font-family-sans);
138
- --goa-typography-heading-l: var(--goa-font-weight-regular) var(--goa-font-size-9)/var(--goa-line-height-6) var(--goa-font-family-sans);
139
- --goa-typography-heading-m: var(--goa-font-weight-regular) var(--goa-font-size-7)/var(--goa-line-height-4) var(--goa-font-family-sans);
140
- --goa-typography-heading-s: var(--goa-font-weight-bold) var(--goa-font-size-4)/var(--goa-line-height-3) var(--goa-font-family-sans);
141
- --goa-typography-heading-xs: var(--goa-font-weight-bold) var(--goa-font-size-3)/var(--goa-line-height-2) var(--goa-font-family-sans);
142
- --goa-color-text-disabled: var(--goa-color-greyscale-700);
143
- --goa-color-text-light: var(--goa-color-greyscale-white);
144
- --goa-color-text-secondary: var(--goa-color-greyscale-700);
145
- --goa-color-text-default: var(--goa-color-greyscale-black);
146
192
  --goa-table-color-heading: var(--goa-color-text-secondary);
193
+ --goa-goa-side-menu-parent-text-active: var(--goa-typography-body-m);
194
+ --goa-goa-side-menu-parent-text: var(--goa-typography-body-m);
195
+ --goa-side-menu-child-color-text-selected: var(--goa-color-text-default);
147
196
  --goa-callout-m-text-size: var(--goa-typography-body-s);
148
197
  --goa-callout-m-heading-size: var(--goa-typography-heading-xs);
149
198
  --goa-callout-l-text-size: var(--goa-typography-body-m);
150
- --goa-callout-l-heading-size: var(--goa-typography-heading-m);
151
- --goa-accordion-color-heading-hover: var(--goa-color-text-default);
199
+ --goa-callout-l-heading: var(--goa-typography-heading-m);
200
+ --goa-button-text: var(--goa-typography-button-default);
152
201
  --goa-accordion-heading-m: var(--goa-typography-heading-m);
153
202
  --goa-accordion-heading-s: var(--goa-typography-heading-s);
203
+ --goa-accordion-color-heading-hover: var(--goa-color-text-default);
154
204
  --goa-accordion-color-heading: var(--goa-color-text-default);
155
- --goa-button-text: var(--goa-typography-button-default);
156
205
  }
package/dist/tokens.scss CHANGED
@@ -1,23 +1,21 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 09 Oct 2024 15:56:39 GMT
3
+ // Generated on Fri, 18 Oct 2024 17:48:30 GMT
4
4
 
5
- $goa-callout-emergency-border-color: none;
6
- $goa-callout-success-border-color: none;
7
- $goa-callout-warning-border-color: none;
8
- $goa-callout-info-border-color: none;
9
- $goa-button-height-start: 3.25rem;
10
- $goa-button-height-compact: 2rem;
11
- $goa-button-height: 2.625rem;
12
- $goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
13
- $goa-icon-size-l: 1.5rem;
14
- $goa-icon-size-m: 1.25rem;
15
- $goa-icon-size-s: 1rem;
16
5
  $goa-letter-spacing-button: 0.0125rem;
17
- $goa-border-width-l: 3px;
18
- $goa-border-width-m: 2px;
19
- $goa-border-width-s: 1px;
20
- $goa-border-width-none: 0px;
6
+ $goa-font-weight-bold: 700;
7
+ $goa-font-weight-medium: 500;
8
+ $goa-font-weight-regular: 400;
9
+ $goa-font-size-10: 3rem;
10
+ $goa-font-size-9: 2.25rem;
11
+ $goa-font-size-8: 2rem;
12
+ $goa-font-size-7: 1.5rem;
13
+ $goa-font-size-6: 1.375rem;
14
+ $goa-font-size-5: 1.25rem;
15
+ $goa-font-size-4: 1.125rem;
16
+ $goa-font-size-3: 1rem;
17
+ $goa-font-size-2: 0.875rem;
18
+ $goa-font-size-1: 0.75rem;
21
19
  $goa-font-family-number: roboto-mono, monospace;
22
20
  $goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
23
21
  $goa-line-height-05: 1.125rem;
@@ -28,10 +26,17 @@ $goa-line-height-4: 2rem;
28
26
  $goa-line-height-3: 1.75rem;
29
27
  $goa-line-height-2: 1.5rem;
30
28
  $goa-line-height-1: 1.25rem;
31
- $goa-opacity-background-loading: 90%;
32
- $goa-opacity-background-modal: 50%;
33
- $goa-border-radius-m: 0.25rem;
34
- $goa-border-radius-none: 0rem;
29
+ $goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
30
+ $goa-shadow-600: 0px 20px 20px -8px 1a1a1a47;
31
+ $goa-shadow-500: 0px 12px 20px -8px 1a1a1a3D;
32
+ $goa-shadow-400: 0px 8px 16px -4px #1a1a1a38;
33
+ $goa-shadow-300: 0px 4px 6px -2px #1a1a1a33;
34
+ $goa-shadow-200: 0px 3px 1px -1px 1a1a1a12;
35
+ $goa-shadow-150: 0px 1px 0px 0px 1a1a1a40;
36
+ $goa-shadow-100: 0px 1px 0px 0px 1A1A1A12;
37
+ $goa-icon-size-l: 1.5rem;
38
+ $goa-icon-size-m: 1.25rem;
39
+ $goa-icon-size-s: 1rem;
35
40
  $goa-space-4xl: 8rem;
36
41
  $goa-space-3xl: 4rem;
37
42
  $goa-space-2xl: 3rem;
@@ -43,28 +48,49 @@ $goa-space-xs: 0.5rem;
43
48
  $goa-space-2xs: 0.25rem;
44
49
  $goa-space-3xs: 0.125rem;
45
50
  $goa-space-none: 0rem;
46
- $goa-font-size-10: 3rem;
47
- $goa-font-size-9: 2.25rem;
48
- $goa-font-size-8: 2rem;
49
- $goa-font-size-7: 1.5rem;
50
- $goa-font-size-6: 1.375rem;
51
- $goa-font-size-5: 1.25rem;
52
- $goa-font-size-4: 1.125rem;
53
- $goa-font-size-3: 1rem;
54
- $goa-font-size-2: 0.875rem;
55
- $goa-font-size-1: 0.75rem;
56
- $goa-font-weight-bold: 700;
57
- $goa-font-weight-medium: 500;
58
- $goa-font-weight-regular: 400;
51
+ $goa-border-width-l: 3px;
52
+ $goa-border-width-m: 2px;
53
+ $goa-border-width-s: 1px;
54
+ $goa-border-width-xs: 0.7px;
55
+ $goa-border-width-2xs: 0.5px;
56
+ $goa-border-radius-3xl: 0.75rem;
57
+ $goa-border-radius-2xl: 0.625rem;
58
+ $goa-border-radius-xl: 0.5rem;
59
+ $goa-border-radius-l: 0.375rem;
60
+ $goa-border-radius-m: 0.25rem;
61
+ $goa-border-radius-none: 0;
62
+ $goa-opacity-background-loading: 90%;
63
+ $goa-opacity-background-modal: 50%;
64
+ $goa-color-extended-yellow: #fce796;
65
+ $goa-color-extended-violet: #d4c2ff;
66
+ $goa-color-extended-red: #ed948d;
67
+ $goa-color-extended-pink: #ff8fc5;
68
+ $goa-color-extended-orange: #ffc76d;
69
+ $goa-color-extended-green: #bbfcb4;
70
+ $goa-color-extended-blue: #aac9e7;
71
+ $goa-color-extended-aqua: #7febe6;
72
+ $goa-color-extended-light-yellow: #fff7bf;
73
+ $goa-color-extended-light-violet: #efe2fb;
74
+ $goa-color-extended-light-red: #f4cdc6;
75
+ $goa-color-extended-light-pink: #f9e1eb;
76
+ $goa-color-extended-light-orange: #fcd6c3;
77
+ $goa-color-extended-light-green: #cce2d9;
78
+ $goa-color-extended-light-blue: #ddefff;
79
+ $goa-color-extended-light-aqua: #dcfbf8;
59
80
  $goa-color-greyscale-white: #ffffff;
60
81
  $goa-color-greyscale-black: #333333;
82
+ $goa-color-greyscale-900: #474747;
83
+ $goa-color-greyscale-800: #5c5c5c;
61
84
  $goa-color-greyscale-700: #666666;
62
85
  $goa-color-greyscale-600: #858585;
63
86
  $goa-color-greyscale-500: #949494;
64
87
  $goa-color-greyscale-400: #adadad;
88
+ $goa-color-greyscale-300: #c2c2c2;
65
89
  $goa-color-greyscale-200: #dcdcdc;
90
+ $goa-color-greyscale-150: #e7e7e7;
66
91
  $goa-color-greyscale-100: #f1f1f1;
67
92
  $goa-color-greyscale-50: #f8f8f8;
93
+ $goa-color-critical-default: #171d23;
68
94
  $goa-color-success-background: #eef9f3;
69
95
  $goa-color-success-dark: #00563a;
70
96
  $goa-color-success-light: #cce4dc;
@@ -77,23 +103,58 @@ $goa-color-warning-background: #fff6e5;
77
103
  $goa-color-warning-dark: #bf8d23;
78
104
  $goa-color-warning-light: #ffeab6;
79
105
  $goa-color-warning-default: #f9ce2d;
80
- $goa-color-info-background: #eff8ff;
81
- $goa-color-info-dark: #003b70;
82
- $goa-color-info-light: #aac9e7;
83
- $goa-color-info-default: #004a8f;
84
- $goa-color-interactive-disabled: #80b7e1;
106
+ $goa-color-information-background: #eff8ff;
107
+ $goa-color-information-dark: #003b70;
108
+ $goa-color-information-light: #aac9e7;
109
+ $goa-color-information-default: #004a8f;
110
+ $goa-color-brand-light: #c8eefa;
111
+ $goa-color-brand-dark: #005072;
112
+ $goa-color-brand-default: #0081a2;
113
+ $goa-color-interactive-visited: #756693;
114
+ $goa-color-interactive-focus-black: #000000;
85
115
  $goa-color-interactive-focus: #feba35;
116
+ $goa-color-interactive-error-disabled: #f58185;
117
+ $goa-color-interactive-error-hover: #ba0000;
86
118
  $goa-color-interactive-error: #ec040b;
119
+ $goa-color-interactive-disabled: #80b7e1;
87
120
  $goa-color-interactive-hover: #004f84;
88
121
  $goa-color-interactive-default: #0070c4;
89
- $goa-color-brand-light: #c8eefa;
90
- $goa-color-brand-dark: #005072;
91
- $goa-color-brand-default: #0081a2;
122
+ $goa-side-menu-parent-color-bg-hover: #CEDFEE;
123
+ $goa-side-menu-child-border-width: 4px;
124
+ $goa-callout-emergency-border-color: none;
125
+ $goa-callout-success-border-color: none;
126
+ $goa-callout-warning-border-color: none;
127
+ $goa-callout-info-border-color: none;
128
+ $goa-callout-border-width: 0px;
129
+ $goa-button-height-compact: 32px;
130
+ $goa-button-height: 42px;
131
+ $goa-typography-number-l: $goa-font-weight-medium $goa-font-size-7/$goa-line-height-4 $goa-font-family-number;
132
+ $goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
133
+ $goa-typography-number-s: $goa-font-weight-medium $goa-font-size-3/$goa-line-height-2 $goa-font-family-number;
134
+ $goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
135
+ $goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
136
+ $goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
137
+ $goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
138
+ $goa-typography-body-xs: $goa-font-weight-regular $goa-font-size-2/$goa-line-height-1 $goa-font-family-sans;
139
+ $goa-typography-heading-xl: $goa-font-weight-bold $goa-font-size-10/$goa-line-height-7 $goa-font-family-sans;
140
+ $goa-typography-heading-l: $goa-font-weight-regular $goa-font-size-9/$goa-line-height-6 $goa-font-family-sans;
141
+ $goa-typography-heading-m: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
142
+ $goa-typography-heading-s: $goa-font-weight-bold $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
143
+ $goa-typography-heading-xs: $goa-font-weight-bold $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
144
+ $goa-color-text-disabled: $goa-color-greyscale-700;
145
+ $goa-color-text-light: $goa-color-greyscale-white;
146
+ $goa-color-text-secondary: $goa-color-greyscale-700;
147
+ $goa-color-text-default: $goa-color-greyscale-black;
92
148
  $goa-table-color-border-heading: $goa-color-greyscale-600;
149
+ $goa-side-menu-child-color-bg-selected: $goa-color-information-background;
150
+ $goa-side-menu-child-color-bg-hover: $goa-color-information-background;
151
+ $goa-side-menu-group-border-radius: $goa-border-radius-none;
152
+ $goa-side-menu-parent-padding: $goa-space-none;
153
+ $goa-side-menu-group-padding: $goa-space-m $goa-space-none $goa-space-l $goa-space-none;
154
+ $goa-side-menu-group-color-bg: $goa-color-greyscale-white;
93
155
  $goa-container-padding: $goa-space-l;
94
156
  $goa-container-border: $goa-border-width-s solid $goa-color-greyscale-200;
95
157
  $goa-container-border-radius: $goa-border-radius-m;
96
- $goa-callout-event-icon-color: $goa-color-greyscale-white;
97
158
  $goa-callout-emergency-icon-color: $goa-color-greyscale-white;
98
159
  $goa-callout-emergency-color-bg-statusbar: $goa-color-emergency-default;
99
160
  $goa-callout-emergency-color-bg-content: $goa-color-greyscale-100;
@@ -103,51 +164,39 @@ $goa-callout-success-color-bg-content: $goa-color-greyscale-100;
103
164
  $goa-callout-warning-icon-color: $goa-color-greyscale-black;
104
165
  $goa-callout-warning-color-bg-statusbar: $goa-color-warning-default;
105
166
  $goa-callout-warning-color-bg-content: $goa-color-greyscale-100;
106
- $goa-callout-info-color-bg-statusbar: $goa-color-info-default;
107
167
  $goa-callout-info-icon-color: $goa-color-greyscale-white;
168
+ $goa-callout-info-color-bg-statusbar: $goa-color-information-default;
108
169
  $goa-callout-info-color-bg-content: $goa-color-greyscale-100;
109
170
  $goa-callout-m-statusbar-padding: $goa-space-s $goa-space-2xs;
110
171
  $goa-callout-m-content-gap: $goa-space-2xs;
111
172
  $goa-callout-m-content-padding: $goa-space-s;
112
- $goa-callout-m-border-width: $goa-border-width-none;
173
+ $goa-callout-m-icon-size: $goa-icon-size-s;
113
174
  $goa-callout-l-statusbar-padding: $goa-space-l $goa-space-s;
114
175
  $goa-callout-l-content-gap: $goa-space-m;
115
176
  $goa-callout-l-content-padding: $goa-space-l;
116
- $goa-callout-l-border-width: $goa-border-width-none;
177
+ $goa-callout-l-icon-size: $goa-icon-size-m;
117
178
  $goa-callout-border-radius: $goa-border-radius-none;
179
+ $goa-button-padding-lr-compact: $goa-space-xs;
180
+ $goa-button-padding-lr: $goa-space-s;
181
+ $goa-button-border-radius: $goa-border-radius-m;
118
182
  $goa-accordion-color-bg-heading-hover: $goa-color-greyscale-200;
119
183
  $goa-accordion-padding-content-narrow: $goa-space-l;
120
184
  $goa-accordion-padding-content-wide: $goa-space-l $goa-space-l $goa-space-xl 56px;
121
- $goa-accordion-padding-heading: $goa-space-s $goa-space-m $goa-space-s 0;
185
+ $goa-accordion-padding-heading: $goa-space-s $goa-space-m;
122
186
  $goa-accordion-border-radius: $goa-border-radius-m;
123
187
  $goa-accordion-border: $goa-border-width-s solid $goa-color-greyscale-200;
124
188
  $goa-accordion-color-bg-content: $goa-color-greyscale-white;
125
189
  $goa-accordion-color-bg-heading: $goa-color-greyscale-100;
126
- $goa-button-padding-lr-compact: $goa-space-xs;
127
- $goa-button-padding-lr: $goa-space-s;
128
- $goa-button-border-radius: $goa-border-radius-m;
129
- $goa-typography-number-m: $goa-font-weight-medium $goa-font-size-4/$goa-line-height-3 $goa-font-family-number;
130
- $goa-typography-button-default: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-1 $goa-font-family-sans;
131
- $goa-typography-body-l: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
132
- $goa-typography-body-m: $goa-font-weight-regular $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
133
- $goa-typography-body-s: $goa-font-weight-regular $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
134
- $goa-typography-body-xs: $goa-font-weight-regular $goa-font-size-2/$goa-line-height-1 $goa-font-family-sans;
135
- $goa-typography-heading-xl: $goa-font-weight-bold $goa-font-size-10/$goa-line-height-7 $goa-font-family-sans;
136
- $goa-typography-heading-l: $goa-font-weight-regular $goa-font-size-9/$goa-line-height-6 $goa-font-family-sans;
137
- $goa-typography-heading-m: $goa-font-weight-regular $goa-font-size-7/$goa-line-height-4 $goa-font-family-sans;
138
- $goa-typography-heading-s: $goa-font-weight-bold $goa-font-size-4/$goa-line-height-3 $goa-font-family-sans;
139
- $goa-typography-heading-xs: $goa-font-weight-bold $goa-font-size-3/$goa-line-height-2 $goa-font-family-sans;
140
- $goa-color-text-disabled: $goa-color-greyscale-700;
141
- $goa-color-text-light: $goa-color-greyscale-white;
142
- $goa-color-text-secondary: $goa-color-greyscale-700;
143
- $goa-color-text-default: $goa-color-greyscale-black;
144
190
  $goa-table-color-heading: $goa-color-text-secondary;
191
+ $goa-goa-side-menu-parent-text-active: $goa-typography-body-m;
192
+ $goa-goa-side-menu-parent-text: $goa-typography-body-m;
193
+ $goa-side-menu-child-color-text-selected: $goa-color-text-default;
145
194
  $goa-callout-m-text-size: $goa-typography-body-s;
146
195
  $goa-callout-m-heading-size: $goa-typography-heading-xs;
147
196
  $goa-callout-l-text-size: $goa-typography-body-m;
148
- $goa-callout-l-heading-size: $goa-typography-heading-m;
149
- $goa-accordion-color-heading-hover: $goa-color-text-default;
197
+ $goa-callout-l-heading: $goa-typography-heading-m;
198
+ $goa-button-text: $goa-typography-button-default;
150
199
  $goa-accordion-heading-m: $goa-typography-heading-m;
151
200
  $goa-accordion-heading-s: $goa-typography-heading-s;
152
- $goa-accordion-color-heading: $goa-color-text-default;
153
- $goa-button-text: $goa-typography-button-default;
201
+ $goa-accordion-color-heading-hover: $goa-color-text-default;
202
+ $goa-accordion-color-heading: $goa-color-text-default;
package/lib/design-tokens.js CHANGED
@@ -31,6 +31,20 @@ function generate(outputPath) {
31
31
  },
32
32
  });
33
33
 
34
+ // Border
35
+ StyleDictionary.registerTransform({
36
+ name: "border",
37
+ type: "value",
38
+ transitive: true,
39
+ matcher: function(token) {
40
+ return token.type === "border";
41
+ },
42
+ transformer: function(token) {
43
+ const { color, width, style } = token.original.value;
44
+ return `${width} ${style} ${color}`;
45
+ },
46
+ });
47
+
34
48
  try {
35
49
  StyleDictionary.extend({
36
50
  source: [`./data/**/*.json`],
@@ -41,6 +55,7 @@ function generate(outputPath) {
41
55
  ...StyleDictionary.transformGroup.scss,
42
56
  "typography/shorthand",
43
57
  "box-shadow",
58
+ "border",
44
59
  ],
45
60
  buildPath: `${outputPath}/dist/`,
46
61
  files: [
@@ -59,6 +74,7 @@ function generate(outputPath) {
59
74
  ...StyleDictionary.transformGroup.css,
60
75
  "typography/shorthand",
61
76
  "box-shadow",
77
+ "border",
62
78
  ],
63
79
  buildPath: `${outputPath}/dist/`,
64
80
  files: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.3.0",
3
+ "version": "1.4.0-dev.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",