@abgov/design-tokens 1.2.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 (11) 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/{global-ddi.json → goa-global-design-tokens.json} +430 -240
  8. package/dist/tokens.css +194 -90
  9. package/dist/tokens.scss +194 -90
  10. package/lib/design-tokens.js +22 -0
  11. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -1,101 +1,205 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Jun 2024 15:00:35 GMT
3
+ * Generated on Fri, 18 Oct 2024 17:48:30 GMT
4
4
  */
5
5
 
6
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-hover: #004f84;
12
- --goa-color-interactive-error: #ec040b;
13
- --goa-color-interactive-focus: #feba35;
14
- --goa-color-interactive-disabled: #80b7e1;
15
- --goa-color-text-default: #333333;
16
- --goa-color-text-secondary: #666666;
17
- --goa-color-text-light: #ffffff;
18
- --goa-color-text-disabled: #666666;
19
- --goa-color-info-default: #004a8f;
20
- --goa-color-info-light: #aac9e7;
21
- --goa-color-info-dark: #003b70;
22
- --goa-color-info-background: #eff8ff;
23
- --goa-color-warning-default: #f9ce2d;
24
- --goa-color-warning-light: #ffeab6;
25
- --goa-color-warning-dark: #bf8d23;
26
- --goa-color-warning-background: #fff6e5;
27
- --goa-color-emergency-default: #da291c;
28
- --goa-color-emergency-light: #fbd1ce;
29
- --goa-color-emergency-dark: #a91a10;
30
- --goa-color-emergency-background: #fff1f2;
31
- --goa-color-success-default: #006f4c;
32
- --goa-color-success-light: #cce4dc;
33
- --goa-color-success-dark: #00563a;
34
- --goa-color-success-background: #eef9f3;
35
- --goa-color-greyscale-50: #f8f8f8;
36
- --goa-color-greyscale-100: #f1f1f1;
37
- --goa-color-greyscale-200: #dcdcdc;
38
- --goa-color-greyscale-400: #adadad;
39
- --goa-color-greyscale-500: #949494;
40
- --goa-color-greyscale-600: #858585;
41
- --goa-color-greyscale-700: #666666;
42
- --goa-color-greyscale-black: #333333;
43
- --goa-color-greyscale-white: #ffffff;
44
- --goa-font-weight-regular: 400;
45
- --goa-font-weight-medium: 500;
7
+ --goa-letter-spacing-button: 0.0125rem;
46
8
  --goa-font-weight-bold: 700;
47
- --goa-font-size-1: 0.75rem;
48
- --goa-font-size-2: 0.875rem;
49
- --goa-font-size-3: 1rem;
50
- --goa-font-size-4: 1.125rem;
51
- --goa-font-size-5: 1.25rem;
52
- --goa-font-size-6: 1.375rem;
53
- --goa-font-size-7: 1.5rem;
54
- --goa-font-size-8: 2rem;
55
- --goa-font-size-9: 2.25rem;
9
+ --goa-font-weight-medium: 500;
10
+ --goa-font-weight-regular: 400;
56
11
  --goa-font-size-10: 3rem;
57
- --goa-space-none: 0rem;
58
- --goa-space-3xs: 0.125rem;
59
- --goa-space-2xs: 0.25rem;
60
- --goa-space-xs: 0.5rem;
61
- --goa-space-s: 0.75rem;
62
- --goa-space-m: 1rem;
63
- --goa-space-l: 1.5rem;
64
- --goa-space-xl: 2rem;
65
- --goa-space-2xl: 3rem;
66
- --goa-space-3xl: 4rem;
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;
21
+ --goa-font-family-number: roboto-mono, monospace;
22
+ --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
23
+ --goa-line-height-05: 1.125rem;
24
+ --goa-line-height-7: 3.5rem;
25
+ --goa-line-height-6: 2.75rem;
26
+ --goa-line-height-5: 2.5rem;
27
+ --goa-line-height-4: 2rem;
28
+ --goa-line-height-3: 1.75rem;
29
+ --goa-line-height-2: 1.5rem;
30
+ --goa-line-height-1: 1.25rem;
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;
67
42
  --goa-space-4xl: 8rem;
68
- --goa-border-radius-none: 0rem;
43
+ --goa-space-3xl: 4rem;
44
+ --goa-space-2xl: 3rem;
45
+ --goa-space-xl: 2rem;
46
+ --goa-space-l: 1.5rem;
47
+ --goa-space-m: 1rem;
48
+ --goa-space-s: 0.75rem;
49
+ --goa-space-xs: 0.5rem;
50
+ --goa-space-2xs: 0.25rem;
51
+ --goa-space-3xs: 0.125rem;
52
+ --goa-space-none: 0rem;
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;
69
62
  --goa-border-radius-m: 0.25rem;
70
- --goa-opacity-background-modal: 50%;
63
+ --goa-border-radius-none: 0;
71
64
  --goa-opacity-background-loading: 90%;
72
- --goa-line-height-1: 1.25rem;
73
- --goa-line-height-2: 1.5rem;
74
- --goa-line-height-3: 1.75rem;
75
- --goa-line-height-4: 2rem;
76
- --goa-line-height-5: 2.5rem;
77
- --goa-line-height-6: 2.75rem;
78
- --goa-line-height-7: 3.5rem;
79
- --goa-line-height-05: 1.125rem;
80
- --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
81
- --goa-font-family-number: roboto-mono, monospace;
82
- --goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
83
- --goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
84
- --goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
85
- --goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
86
- --goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
87
- --goa-typography-body-xs: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
88
- --goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
89
- --goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
90
- --goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
91
- --goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
92
- --goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;
93
- --goa-border-width-s: 1px;
94
- --goa-border-width-m: 2px;
95
- --goa-border-width-l: 3px;
96
- --goa-letter-spacing-button: 0.0125rem;
97
- --goa-icon-size-s: 1rem;
98
- --goa-icon-size-m: 1.25rem;
99
- --goa-icon-size-l: 1.5rem;
100
- --goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
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;
82
+ --goa-color-greyscale-white: #ffffff;
83
+ --goa-color-greyscale-black: #333333;
84
+ --goa-color-greyscale-900: #474747;
85
+ --goa-color-greyscale-800: #5c5c5c;
86
+ --goa-color-greyscale-700: #666666;
87
+ --goa-color-greyscale-600: #858585;
88
+ --goa-color-greyscale-500: #949494;
89
+ --goa-color-greyscale-400: #adadad;
90
+ --goa-color-greyscale-300: #c2c2c2;
91
+ --goa-color-greyscale-200: #dcdcdc;
92
+ --goa-color-greyscale-150: #e7e7e7;
93
+ --goa-color-greyscale-100: #f1f1f1;
94
+ --goa-color-greyscale-50: #f8f8f8;
95
+ --goa-color-critical-default: #171d23;
96
+ --goa-color-success-background: #eef9f3;
97
+ --goa-color-success-dark: #00563a;
98
+ --goa-color-success-light: #cce4dc;
99
+ --goa-color-success-default: #006f4c;
100
+ --goa-color-emergency-background: #fff1f2;
101
+ --goa-color-emergency-dark: #a91a10;
102
+ --goa-color-emergency-light: #fbd1ce;
103
+ --goa-color-emergency-default: #da291c;
104
+ --goa-color-warning-background: #fff6e5;
105
+ --goa-color-warning-dark: #bf8d23;
106
+ --goa-color-warning-light: #ffeab6;
107
+ --goa-color-warning-default: #f9ce2d;
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;
117
+ --goa-color-interactive-focus: #feba35;
118
+ --goa-color-interactive-error-disabled: #f58185;
119
+ --goa-color-interactive-error-hover: #ba0000;
120
+ --goa-color-interactive-error: #ec040b;
121
+ --goa-color-interactive-disabled: #80b7e1;
122
+ --goa-color-interactive-hover: #004f84;
123
+ --goa-color-interactive-default: #0070c4;
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);
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);
157
+ --goa-container-padding: var(--goa-space-l);
158
+ --goa-container-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
159
+ --goa-container-border-radius: var(--goa-border-radius-m);
160
+ --goa-callout-emergency-icon-color: var(--goa-color-greyscale-white);
161
+ --goa-callout-emergency-color-bg-statusbar: var(--goa-color-emergency-default);
162
+ --goa-callout-emergency-color-bg-content: var(--goa-color-greyscale-100);
163
+ --goa-callout-success-icon-color: var(--goa-color-greyscale-white);
164
+ --goa-callout-success-color-bg-statusbar: var(--goa-color-success-default);
165
+ --goa-callout-success-color-bg-content: var(--goa-color-greyscale-100);
166
+ --goa-callout-warning-icon-color: var(--goa-color-greyscale-black);
167
+ --goa-callout-warning-color-bg-statusbar: var(--goa-color-warning-default);
168
+ --goa-callout-warning-color-bg-content: var(--goa-color-greyscale-100);
169
+ --goa-callout-info-icon-color: var(--goa-color-greyscale-white);
170
+ --goa-callout-info-color-bg-statusbar: var(--goa-color-information-default);
171
+ --goa-callout-info-color-bg-content: var(--goa-color-greyscale-100);
172
+ --goa-callout-m-statusbar-padding: var(--goa-space-s) var(--goa-space-2xs);
173
+ --goa-callout-m-content-gap: var(--goa-space-2xs);
174
+ --goa-callout-m-content-padding: var(--goa-space-s);
175
+ --goa-callout-m-icon-size: var(--goa-icon-size-s);
176
+ --goa-callout-l-statusbar-padding: var(--goa-space-l) var(--goa-space-s);
177
+ --goa-callout-l-content-gap: var(--goa-space-m);
178
+ --goa-callout-l-content-padding: var(--goa-space-l);
179
+ --goa-callout-l-icon-size: var(--goa-icon-size-m);
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);
184
+ --goa-accordion-color-bg-heading-hover: var(--goa-color-greyscale-200);
185
+ --goa-accordion-padding-content-narrow: var(--goa-space-l);
186
+ --goa-accordion-padding-content-wide: var(--goa-space-l) var(--goa-space-l) var(--goa-space-xl) 56px;
187
+ --goa-accordion-padding-heading: var(--goa-space-s) var(--goa-space-m);
188
+ --goa-accordion-border-radius: var(--goa-border-radius-m);
189
+ --goa-accordion-border: var(--goa-border-width-s) solid var(--goa-color-greyscale-200);
190
+ --goa-accordion-color-bg-content: var(--goa-color-greyscale-white);
191
+ --goa-accordion-color-bg-heading: var(--goa-color-greyscale-100);
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);
196
+ --goa-callout-m-text-size: var(--goa-typography-body-s);
197
+ --goa-callout-m-heading-size: var(--goa-typography-heading-xs);
198
+ --goa-callout-l-text-size: var(--goa-typography-body-m);
199
+ --goa-callout-l-heading: var(--goa-typography-heading-m);
200
+ --goa-button-text: var(--goa-typography-button-default);
201
+ --goa-accordion-heading-m: var(--goa-typography-heading-m);
202
+ --goa-accordion-heading-s: var(--goa-typography-heading-s);
203
+ --goa-accordion-color-heading-hover: var(--goa-color-text-default);
204
+ --goa-accordion-color-heading: var(--goa-color-text-default);
101
205
  }
package/dist/tokens.scss CHANGED
@@ -1,98 +1,202 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Jun 2024 15:00:35 GMT
3
+ // Generated on Fri, 18 Oct 2024 17:48:30 GMT
4
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-hover: #004f84;
10
- $goa-color-interactive-error: #ec040b;
11
- $goa-color-interactive-focus: #feba35;
12
- $goa-color-interactive-disabled: #80b7e1;
13
- $goa-color-text-default: #333333;
14
- $goa-color-text-secondary: #666666;
15
- $goa-color-text-light: #ffffff;
16
- $goa-color-text-disabled: #666666;
17
- $goa-color-info-default: #004a8f;
18
- $goa-color-info-light: #aac9e7;
19
- $goa-color-info-dark: #003b70;
20
- $goa-color-info-background: #eff8ff;
21
- $goa-color-warning-default: #f9ce2d;
22
- $goa-color-warning-light: #ffeab6;
23
- $goa-color-warning-dark: #bf8d23;
24
- $goa-color-warning-background: #fff6e5;
25
- $goa-color-emergency-default: #da291c;
26
- $goa-color-emergency-light: #fbd1ce;
27
- $goa-color-emergency-dark: #a91a10;
28
- $goa-color-emergency-background: #fff1f2;
29
- $goa-color-success-default: #006f4c;
30
- $goa-color-success-light: #cce4dc;
31
- $goa-color-success-dark: #00563a;
32
- $goa-color-success-background: #eef9f3;
33
- $goa-color-greyscale-50: #f8f8f8;
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;
5
+ $goa-letter-spacing-button: 0.0125rem;
44
6
  $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;
7
+ $goa-font-weight-medium: 500;
8
+ $goa-font-weight-regular: 400;
54
9
  $goa-font-size-10: 3rem;
55
- $goa-space-none: 0rem;
56
- $goa-space-3xs: 0.125rem;
57
- $goa-space-2xs: 0.25rem;
58
- $goa-space-xs: 0.5rem;
59
- $goa-space-s: 0.75rem;
60
- $goa-space-m: 1rem;
61
- $goa-space-l: 1.5rem;
62
- $goa-space-xl: 2rem;
63
- $goa-space-2xl: 3rem;
64
- $goa-space-3xl: 4rem;
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;
19
+ $goa-font-family-number: roboto-mono, monospace;
20
+ $goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
21
+ $goa-line-height-05: 1.125rem;
22
+ $goa-line-height-7: 3.5rem;
23
+ $goa-line-height-6: 2.75rem;
24
+ $goa-line-height-5: 2.5rem;
25
+ $goa-line-height-4: 2rem;
26
+ $goa-line-height-3: 1.75rem;
27
+ $goa-line-height-2: 1.5rem;
28
+ $goa-line-height-1: 1.25rem;
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;
65
40
  $goa-space-4xl: 8rem;
66
- $goa-border-radius-none: 0rem;
41
+ $goa-space-3xl: 4rem;
42
+ $goa-space-2xl: 3rem;
43
+ $goa-space-xl: 2rem;
44
+ $goa-space-l: 1.5rem;
45
+ $goa-space-m: 1rem;
46
+ $goa-space-s: 0.75rem;
47
+ $goa-space-xs: 0.5rem;
48
+ $goa-space-2xs: 0.25rem;
49
+ $goa-space-3xs: 0.125rem;
50
+ $goa-space-none: 0rem;
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;
67
60
  $goa-border-radius-m: 0.25rem;
68
- $goa-opacity-background-modal: 50%;
61
+ $goa-border-radius-none: 0;
69
62
  $goa-opacity-background-loading: 90%;
70
- $goa-line-height-1: 1.25rem;
71
- $goa-line-height-2: 1.5rem;
72
- $goa-line-height-3: 1.75rem;
73
- $goa-line-height-4: 2rem;
74
- $goa-line-height-5: 2.5rem;
75
- $goa-line-height-6: 2.75rem;
76
- $goa-line-height-7: 3.5rem;
77
- $goa-line-height-05: 1.125rem;
78
- $goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
79
- $goa-font-family-number: roboto-mono, monospace;
80
- $goa-typography-heading-xs: 700 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
81
- $goa-typography-heading-s: 700 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
82
- $goa-typography-heading-m: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
83
- $goa-typography-heading-l: 400 2.25rem/2.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
84
- $goa-typography-heading-xl: 700 3rem/3.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
85
- $goa-typography-body-xs: 400 0.875rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
86
- $goa-typography-body-s: 400 1rem/1.5rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
87
- $goa-typography-body-m: 400 1.125rem/1.75rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
88
- $goa-typography-body-l: 400 1.5rem/2rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
89
- $goa-typography-button-default: 400 1.125rem/1.25rem acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
90
- $goa-typography-number-m: 500 1.125rem/1.75rem roboto-mono, monospace;
91
- $goa-border-width-s: 1px;
92
- $goa-border-width-m: 2px;
93
- $goa-border-width-l: 3px;
94
- $goa-letter-spacing-button: 0.0125rem;
95
- $goa-icon-size-s: 1rem;
96
- $goa-icon-size-m: 1.25rem;
97
- $goa-icon-size-l: 1.5rem;
98
- $goa-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
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;
80
+ $goa-color-greyscale-white: #ffffff;
81
+ $goa-color-greyscale-black: #333333;
82
+ $goa-color-greyscale-900: #474747;
83
+ $goa-color-greyscale-800: #5c5c5c;
84
+ $goa-color-greyscale-700: #666666;
85
+ $goa-color-greyscale-600: #858585;
86
+ $goa-color-greyscale-500: #949494;
87
+ $goa-color-greyscale-400: #adadad;
88
+ $goa-color-greyscale-300: #c2c2c2;
89
+ $goa-color-greyscale-200: #dcdcdc;
90
+ $goa-color-greyscale-150: #e7e7e7;
91
+ $goa-color-greyscale-100: #f1f1f1;
92
+ $goa-color-greyscale-50: #f8f8f8;
93
+ $goa-color-critical-default: #171d23;
94
+ $goa-color-success-background: #eef9f3;
95
+ $goa-color-success-dark: #00563a;
96
+ $goa-color-success-light: #cce4dc;
97
+ $goa-color-success-default: #006f4c;
98
+ $goa-color-emergency-background: #fff1f2;
99
+ $goa-color-emergency-dark: #a91a10;
100
+ $goa-color-emergency-light: #fbd1ce;
101
+ $goa-color-emergency-default: #da291c;
102
+ $goa-color-warning-background: #fff6e5;
103
+ $goa-color-warning-dark: #bf8d23;
104
+ $goa-color-warning-light: #ffeab6;
105
+ $goa-color-warning-default: #f9ce2d;
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;
115
+ $goa-color-interactive-focus: #feba35;
116
+ $goa-color-interactive-error-disabled: #f58185;
117
+ $goa-color-interactive-error-hover: #ba0000;
118
+ $goa-color-interactive-error: #ec040b;
119
+ $goa-color-interactive-disabled: #80b7e1;
120
+ $goa-color-interactive-hover: #004f84;
121
+ $goa-color-interactive-default: #0070c4;
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;
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;
155
+ $goa-container-padding: $goa-space-l;
156
+ $goa-container-border: $goa-border-width-s solid $goa-color-greyscale-200;
157
+ $goa-container-border-radius: $goa-border-radius-m;
158
+ $goa-callout-emergency-icon-color: $goa-color-greyscale-white;
159
+ $goa-callout-emergency-color-bg-statusbar: $goa-color-emergency-default;
160
+ $goa-callout-emergency-color-bg-content: $goa-color-greyscale-100;
161
+ $goa-callout-success-icon-color: $goa-color-greyscale-white;
162
+ $goa-callout-success-color-bg-statusbar: $goa-color-success-default;
163
+ $goa-callout-success-color-bg-content: $goa-color-greyscale-100;
164
+ $goa-callout-warning-icon-color: $goa-color-greyscale-black;
165
+ $goa-callout-warning-color-bg-statusbar: $goa-color-warning-default;
166
+ $goa-callout-warning-color-bg-content: $goa-color-greyscale-100;
167
+ $goa-callout-info-icon-color: $goa-color-greyscale-white;
168
+ $goa-callout-info-color-bg-statusbar: $goa-color-information-default;
169
+ $goa-callout-info-color-bg-content: $goa-color-greyscale-100;
170
+ $goa-callout-m-statusbar-padding: $goa-space-s $goa-space-2xs;
171
+ $goa-callout-m-content-gap: $goa-space-2xs;
172
+ $goa-callout-m-content-padding: $goa-space-s;
173
+ $goa-callout-m-icon-size: $goa-icon-size-s;
174
+ $goa-callout-l-statusbar-padding: $goa-space-l $goa-space-s;
175
+ $goa-callout-l-content-gap: $goa-space-m;
176
+ $goa-callout-l-content-padding: $goa-space-l;
177
+ $goa-callout-l-icon-size: $goa-icon-size-m;
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;
182
+ $goa-accordion-color-bg-heading-hover: $goa-color-greyscale-200;
183
+ $goa-accordion-padding-content-narrow: $goa-space-l;
184
+ $goa-accordion-padding-content-wide: $goa-space-l $goa-space-l $goa-space-xl 56px;
185
+ $goa-accordion-padding-heading: $goa-space-s $goa-space-m;
186
+ $goa-accordion-border-radius: $goa-border-radius-m;
187
+ $goa-accordion-border: $goa-border-width-s solid $goa-color-greyscale-200;
188
+ $goa-accordion-color-bg-content: $goa-color-greyscale-white;
189
+ $goa-accordion-color-bg-heading: $goa-color-greyscale-100;
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;
194
+ $goa-callout-m-text-size: $goa-typography-body-s;
195
+ $goa-callout-m-heading-size: $goa-typography-heading-xs;
196
+ $goa-callout-l-text-size: $goa-typography-body-m;
197
+ $goa-callout-l-heading: $goa-typography-heading-m;
198
+ $goa-button-text: $goa-typography-button-default;
199
+ $goa-accordion-heading-m: $goa-typography-heading-m;
200
+ $goa-accordion-heading-s: $goa-typography-heading-s;
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,12 +55,16 @@ 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: [
47
62
  {
48
63
  destination: "tokens.scss",
49
64
  format: "scss/variables",
65
+ options: {
66
+ outputReferences: true,
67
+ },
50
68
  },
51
69
  ],
52
70
  },
@@ -56,12 +74,16 @@ function generate(outputPath) {
56
74
  ...StyleDictionary.transformGroup.css,
57
75
  "typography/shorthand",
58
76
  "box-shadow",
77
+ "border",
59
78
  ],
60
79
  buildPath: `${outputPath}/dist/`,
61
80
  files: [
62
81
  {
63
82
  destination: "tokens.css",
64
83
  format: "css/variables",
84
+ options: {
85
+ outputReferences: true,
86
+ },
65
87
  },
66
88
  ],
67
89
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abgov/design-tokens",
3
- "version": "1.2.0",
3
+ "version": "1.4.0-dev.1",
4
4
  "main": "./index.js",
5
5
  "repository": {
6
6
  "type": "git",