@abgov/design-tokens 1.5.0 → 1.5.2

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 (9) hide show
  1. package/data/component-design-tokens/badge-design-tokens.json +2 -9
  2. package/data/component-design-tokens/button-design-tokens.json +3 -3
  3. package/data/component-design-tokens/drawer-design-tokens.json +4 -11
  4. package/data/component-design-tokens/header-design-tokens.json +250 -18
  5. package/data/component-design-tokens/popover-design-tokens.json +2 -9
  6. package/data/goa-global-design-tokens.json +221 -221
  7. package/dist/tokens.css +115 -66
  8. package/dist/tokens.scss +115 -66
  9. package/package.json +1 -1
package/data/component-design-tokens/badge-design-tokens.json CHANGED
@@ -90,14 +90,7 @@
90
90
  "type": "sizing"
91
91
  },
92
92
  "badge-border": {
93
- "value": {
94
- "x": "0",
95
- "y": "0",
96
- "blur": "0",
97
- "spread": "{borderWidth.s}",
98
- "color": "rgba(0,0,0,0.5)",
99
- "type": "innerShadow"
100
- },
101
- "type": "boxShadow"
93
+ "value": "inset 0 0 {borderWidth.s} 0 rgba(0, 0, 0, 0.5)",
94
+ "type": "other"
102
95
  }
103
96
  }
package/data/component-design-tokens/button-design-tokens.json CHANGED
@@ -34,17 +34,17 @@
34
34
  "description": "52px"
35
35
  },
36
36
  "button-text": {
37
- "value": "{fontFamily.sans} {fontWeight.regular} {fontSize.5} {lineHeight.1} {button-letter-spacing}",
37
+ "value": "{fontWeight.regular} {fontSize.5}/{lineHeight.1} {fontFamily.sans}",
38
38
  "type": "other",
39
39
  "description": "typography for default button size"
40
40
  },
41
41
  "button-text-compact": {
42
- "value": "{fontFamily.sans} {fontWeight.regular} {fontSize.4} {lineHeight.05} {button-letter-spacing}",
42
+ "value": "{fontWeight.regular} {fontSize.4}/{lineHeight.05} {fontFamily.sans}",
43
43
  "type": "other",
44
44
  "description": "typography for compact button size"
45
45
  },
46
46
  "button-text-start": {
47
- "value": "{fontFamily.sans} {fontWeight.bold} {fontSize.5} {lineHeight.1} {button-letter-spacing}",
47
+ "value": "{fontWeight.bold} {fontSize.5}/{lineHeight.1} {fontFamily.sans}",
48
48
  "type": "other",
49
49
  "description": "typography for start button size"
50
50
  },
package/data/component-design-tokens/drawer-design-tokens.json CHANGED
@@ -26,17 +26,6 @@
26
26
  },
27
27
  "type": "boxShadow"
28
28
  },
29
- "drawer-right-shadow": {
30
- "value": {
31
- "x": "-4",
32
- "y": "0",
33
- "blur": "12",
34
- "spread": "0",
35
- "color": "rgba(0,0,0,0.2)",
36
- "type": "innerShadow"
37
- },
38
- "type": "boxShadow"
39
- },
40
29
  "drawer-transition-time": {
41
30
  "value": "200ms",
42
31
  "type": "other"
@@ -44,5 +33,9 @@
44
33
  "drawer-padding": {
45
34
  "value": "{space.m}",
46
35
  "type": "spacing"
36
+ },
37
+ "drawer-right-shadow": {
38
+ "value": "inset -4 0 12 0 {borderWidth.s} rgba(0,0,0,0.2)",
39
+ "type": "other"
47
40
  }
48
41
  }
package/data/component-design-tokens/header-design-tokens.json CHANGED
@@ -7,64 +7,296 @@
7
7
  },
8
8
  "type": "border"
9
9
  },
10
- "app-header-border-top-menu-item": {
11
- "value": "inset 0 1px 0 0 {color.greyscale.200}",
12
- "type": "other"
10
+ "app-header-service-name-border-focus": {
11
+ "value": {
12
+ "width": "{borderWidth.l}",
13
+ "style": "solid",
14
+ "color": "{color.interactive.focus}"
15
+ },
16
+ "type": "border"
13
17
  },
14
18
  "app-header-border-bottom-menu-item": {
15
19
  "value": "inset 0 -1px 0 0 {color.greyscale.200}",
16
20
  "type": "other"
17
21
  },
18
- "app-header-padding-nav-item-with-children": {
19
- "value": "{space.m} {space.s} {space.s}",
20
- "type": "spacing"
22
+ "app-header-border-focus": {
23
+ "value": {
24
+ "width": "{borderWidth.l}",
25
+ "style": "solid",
26
+ "color": "{color.interactive.focus}"
27
+ },
28
+ "type": "border"
21
29
  },
22
- "app-header-padding-secondary-nav-item-in-menu": {
23
- "value": "9px {space.m} 9px {space.xl}",
24
- "type": "spacing"
30
+ "app-header-border-nav-item-current": {
31
+ "value": {
32
+ "width": "{space.2xs}",
33
+ "style": "solid",
34
+ "color": "{color.interactive.default}"
35
+ },
36
+ "type": "border"
25
37
  },
26
- "app-header-padding-secondary-nav-item-in-menu-mobile": {
27
- "value": "9px {space.m} 9px 80px",
28
- "type": "spacing"
38
+ "app-header-border-nav-item-current-focus": {
39
+ "value": {
40
+ "width": "{space.2xs}",
41
+ "style": "solid",
42
+ "color": "{color.interactive.hover}"
43
+ },
44
+ "type": "border"
45
+ },
46
+ "app-header-border-nav-item-current-hover": {
47
+ "value": {
48
+ "width": "{space.2xs}",
49
+ "style": "solid",
50
+ "color": "{color.interactive.hover}"
51
+ },
52
+ "type": "border"
53
+ },
54
+ "app-header-border-nav-item-default": {
55
+ "value": {
56
+ "width": "{space.2xs}",
57
+ "style": "solid",
58
+ "color": "transparent"
59
+ },
60
+ "type": "border"
61
+ },
62
+ "app-header-border-nav-item-focus": {
63
+ "value": {
64
+ "width": "{space.2xs}",
65
+ "style": "solid",
66
+ "color": "{color.interactive.hover}"
67
+ },
68
+ "type": "border"
69
+ },
70
+ "app-header-border-nav-item-hover": {
71
+ "value": {
72
+ "width": "{space.2xs}",
73
+ "style": "solid",
74
+ "color": "{color.interactive.hover}"
75
+ },
76
+ "type": "border"
77
+ },
78
+ "app-header-border-top-menu-item": {
79
+ "value": "inset 0 1px 0 0 {color.greyscale.200}",
80
+ "type": "other"
29
81
  },
30
82
  "app-header-color-bg": {
31
83
  "value": "{color.greyscale.white}",
32
84
  "type": "color"
33
85
  },
86
+ "app-header-color-bg-menu-button-focus": {
87
+ "value": "{color.greyscale.100}",
88
+ "type": "color"
89
+ },
90
+ "app-header-color-bg-menu-button-hover": {
91
+ "value": "{color.greyscale.100}",
92
+ "type": "color"
93
+ },
94
+ "app-header-color-bg-nav-item": {
95
+ "value": "{color.greyscale.white}",
96
+ "type": "color"
97
+ },
98
+ "app-header-color-bg-nav-item-current": {
99
+ "value": "{color.greyscale.white}",
100
+ "type": "color"
101
+ },
102
+ "app-header-color-bg-nav-item-focus": {
103
+ "value": "{color.greyscale.white}",
104
+ "type": "color"
105
+ },
106
+ "app-header-color-bg-nav-item-hover": {
107
+ "value": "{color.greyscale.white}",
108
+ "type": "color"
109
+ },
110
+ "app-header-color-bg-nav-item-in-menu-current": {
111
+ "value": "{color.interactive.default}",
112
+ "type": "color"
113
+ },
114
+ "app-header-nav-color-text-link-item": {
115
+ "value": "{color.interactive.default}",
116
+ "type": "color"
117
+ },
118
+ "app-header-nav-color-text-link-item-hover": {
119
+ "value": "{color.interactive.hover}",
120
+ "type": "color"
121
+ },
122
+ "app-header-nav-color-text-link-item-focus": {
123
+ "value": "{color.interactive.hover}",
124
+ "type": "color"
125
+ },
126
+ "app-header-color-bg-nav-item-in-menu-current-hover": {
127
+ "value": "{color.interactive.hover}",
128
+ "type": "color"
129
+ },
130
+ "app-header-color-bg-nav-item-child-hover": {
131
+ "value": "{color.interactive.hover}",
132
+ "type": "color"
133
+ },
134
+ "app-header-color-bg-nav-item-child-focus": {
135
+ "value": "{color.greyscale.100}",
136
+ "type": "color"
137
+ },
34
138
  "app-header-color-text-nav-item": {
35
139
  "value": "{color.text.default}",
36
140
  "type": "color"
37
141
  },
38
- "app-header-color-text-nav-item-hover": {
142
+ "app-header-color-menu-button-focus": {
39
143
  "value": "{color.interactive.hover}",
40
144
  "type": "color"
41
145
  },
42
- "app-header-color-text-nav-item-focus": {
146
+ "app-header-color-menu-button-hover": {
43
147
  "value": "{color.interactive.hover}",
44
148
  "type": "color"
45
149
  },
46
- "app-header-color-text-nav-item-current": {
150
+ "app-header-color-service-name": {
47
151
  "value": "{color.text.default}",
48
152
  "type": "color"
49
153
  },
50
- "app-header-color-menu-button": {
154
+ "app-header-color-text-nav-item": {
51
155
  "value": "{color.text.default}",
52
156
  "type": "color"
53
157
  },
54
- "app-header-color-menu-button-hover": {
158
+ "app-header-color-text-nav-item-current": {
159
+ "value": "{color.text.default}",
160
+ "type": "color"
161
+ },
162
+ "app-header-color-text-nav-item-focus": {
55
163
  "value": "{color.interactive.hover}",
56
164
  "type": "color"
57
165
  },
58
- "app-header-color-menu-button-focus": {
166
+ "app-header-color-text-nav-item-hover": {
59
167
  "value": "{color.interactive.hover}",
60
168
  "type": "color"
61
169
  },
170
+ "app-header-max-width-service-name": {
171
+ "value": "28rem",
172
+ "type": "dimension"
173
+ },
174
+ "app-header-min-width-service-name": {
175
+ "value": "8rem",
176
+ "type": "dimension"
177
+ },
62
178
  "app-header-padding-desktop": {
63
179
  "value": "{space.3xl}",
64
180
  "type": "spacing"
65
181
  },
182
+ "app-header-padding-link-item": {
183
+ "value": "{space.m}",
184
+ "type": "spacing"
185
+ },
186
+ "app-header-padding-logo": {
187
+ "value": "14px {space.xl} {space.m} 0px",
188
+ "type": "spacing"
189
+ },
66
190
  "app-header-padding-logo-mobile": {
67
191
  "value": "{space.s} {space.m}",
68
192
  "type": "spacing"
193
+ },
194
+ "app-header-padding-menu-button": {
195
+ "value": "{space.m} {space.s}",
196
+ "type": "spacing"
197
+ },
198
+ "app-header-padding-mobile": {
199
+ "value": "{space.m}",
200
+ "type": "spacing"
201
+ },
202
+ "app-header-padding-nav-item": {
203
+ "value": "{space.m} {space.s}",
204
+ "type": "spacing"
205
+ },
206
+ "app-header-padding-nav-item-with-children": {
207
+ "value": "{space.m} {space.s} {space.s}",
208
+ "type": "spacing"
209
+ },
210
+ "app-header-padding-nav-item-in-menu": {
211
+ "value": "9px {space.m}",
212
+ "type": "spacing"
213
+ },
214
+ "app-header-padding-secondary-nav-item-in-menu-mobile": {
215
+ "value": "9px {space.m} 9px 80px",
216
+ "type": "spacing"
217
+ },
218
+ "app-header-padding-secondary-nav-item-in-menu": {
219
+ "value": "9px {space.m} 9px {space.xl}",
220
+ "type": "spacing"
221
+ },
222
+ "app-header-padding-tablet": {
223
+ "value": "{space.xl}",
224
+ "type": "spacing"
225
+ },
226
+ "app-header-size-logo": {
227
+ "value": "{space.xl}",
228
+ "type": "sizing"
229
+ },
230
+ "app-header-size-logo-mobile": {
231
+ "value": "{space.l}",
232
+ "type": "sizing"
233
+ },
234
+ "app-header-space-btw-logo-service-name": {
235
+ "value": "{space.m}",
236
+ "type": "spacing"
237
+ },
238
+ "app-header-space-btw-logo-service-name-mobile": {
239
+ "value": "{space.xs}",
240
+ "type": "spacing"
241
+ },
242
+ "app-header-space-btw-service-name-nav-items-mobile": {
243
+ "value": "{space.l}",
244
+ "type": "spacing"
245
+ },
246
+ "app-header-typography-menu-button": {
247
+ "value": "{typography.body.m}",
248
+ "type": "other"
249
+ },
250
+ "app-header-typography-menu-button-mobile": {
251
+ "value": "{typography.body.s}",
252
+ "type": "other"
253
+ },
254
+ "app-header-typography-nav-item": {
255
+ "value": "{typography.heading.s}",
256
+ "type": "other"
257
+ },
258
+ "app-header-typography-menu-item": {
259
+ "value": "{typography.body.m}",
260
+ "type": "other"
261
+ },
262
+ "app-header-typography-link-item": {
263
+ "value": "{typography.body.m}",
264
+ "type": "other"
265
+ },
266
+ "app-header-typography-service-name": {
267
+ "value": "{typography.body.m}",
268
+ "type": "other"
269
+ },
270
+ "app-header-typography-service-name-mobile": {
271
+ "value": "{typography.body.s}",
272
+ "type": "other"
273
+ },
274
+ "app-header-height-nav-item": {
275
+ "value": "{space.3xl}",
276
+ "type": "dimension"
277
+ },
278
+ "app-header-height-nav-item-mobile": {
279
+ "value": "50px",
280
+ "type": "dimension"
281
+ },
282
+ "app-header-nav-color-bg-link-item": {
283
+ "value": "transparent",
284
+ "type": "color"
285
+ },
286
+ "app-header-nav-color-bg-link-item-hover": {
287
+ "value": "transparent",
288
+ "type": "color"
289
+ },
290
+ "app-header-nav-color-bg-link-item-focus": {
291
+ "value": "transparent",
292
+ "type": "color"
293
+ },
294
+ "app-header-nav-color-bg-link-item-in-menu": {
295
+ "value": "transparent",
296
+ "type": "color"
297
+ },
298
+ "app-header-nav-color-bg-link-item-in-menu-focus": {
299
+ "value": "{color.greyscale.100}",
300
+ "type": "color"
69
301
  }
70
302
  }
package/data/component-design-tokens/popover-design-tokens.json CHANGED
@@ -20,14 +20,7 @@
20
20
  "type": "spacing"
21
21
  },
22
22
  "popover-shadow": {
23
- "value": {
24
- "x": "0",
25
- "y": "3",
26
- "blur": "6",
27
- "spread": "0",
28
- "color": "rgba(0, 0, 0, 0.25)",
29
- "type": "dropShadow"
30
- },
31
- "type": "boxShadow"
23
+ "value": "drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.25))",
24
+ "type": "other"
32
25
  }
33
26
  }