@abgov/design-tokens 1.5.0 → 1.5.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 (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 +180 -20
  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 +100 -66
  8. package/dist/tokens.scss +100 -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 0 {borderWidth.s} 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,224 @@
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"
13
- },
14
10
  "app-header-border-bottom-menu-item": {
15
11
  "value": "inset 0 -1px 0 0 {color.greyscale.200}",
16
12
  "type": "other"
17
13
  },
18
- "app-header-padding-nav-item-with-children": {
19
- "value": "{space.m} {space.s} {space.s}",
20
- "type": "spacing"
14
+ "app-header-border-focus": {
15
+ "value": {
16
+ "width": "{borderWidth.l}",
17
+ "style": "solid",
18
+ "color": "{color.interactive.focus}"
19
+ },
20
+ "type": "border"
21
21
  },
22
- "app-header-padding-secondary-nav-item-in-menu": {
23
- "value": "9px {space.m} 9px {space.xl}",
24
- "type": "spacing"
22
+ "app-header-border-nav-item-current": {
23
+ "value": {
24
+ "width": "{space.2xs}",
25
+ "style": "solid",
26
+ "color": "{color.interactive.default}"
27
+ },
28
+ "type": "border"
25
29
  },
26
- "app-header-padding-secondary-nav-item-in-menu-mobile": {
27
- "value": "9px {space.m} 9px 80px",
28
- "type": "spacing"
30
+ "app-header-border-nav-item-current-focus": {
31
+ "value": {
32
+ "width": "{space.2xs}",
33
+ "style": "solid",
34
+ "color": "{color.interactive.hover}"
35
+ },
36
+ "type": "border"
37
+ },
38
+ "app-header-border-nav-item-default": {
39
+ "value": {
40
+ "width": "{space.2xs}",
41
+ "style": "solid",
42
+ "color": "transparent"
43
+ },
44
+ "type": "border"
45
+ },
46
+ "app-header-border-nav-item-focus": {
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-hover": {
55
+ "value": {
56
+ "width": "{space.2xs}",
57
+ "style": "solid",
58
+ "color": "{color.interactive.hover}"
59
+ },
60
+ "type": "border"
61
+ },
62
+ "app-header-border-top-menu-item": {
63
+ "value": "inset 0 1px 0 0 {color.greyscale.200}",
64
+ "type": "other"
29
65
  },
30
66
  "app-header-color-bg": {
31
67
  "value": "{color.greyscale.white}",
32
68
  "type": "color"
33
69
  },
34
- "app-header-color-text-nav-item": {
70
+ "app-header-color-bg-menu-button-focus": {
71
+ "value": "{color.greyscale.100}",
72
+ "type": "color"
73
+ },
74
+ "app-header-color-bg-menu-button-hover": {
75
+ "value": "{color.greyscale.100}",
76
+ "type": "color"
77
+ },
78
+ "app-header-color-bg-nav-item": {
79
+ "value": "{color.greyscale.white}",
80
+ "type": "color"
81
+ },
82
+ "app-header-color-bg-nav-item-current": {
83
+ "value": "{color.greyscale.white}",
84
+ "type": "color"
85
+ },
86
+ "app-header-color-bg-nav-item-focus": {
87
+ "value": "{color.greyscale.white}",
88
+ "type": "color"
89
+ },
90
+ "app-header-color-bg-nav-item-hover": {
91
+ "value": "{color.greyscale.white}",
92
+ "type": "color"
93
+ },
94
+ "app-header-color-bg-nav-item-in-menu-current": {
95
+ "value": "{color.interactive.default}",
96
+ "type": "color"
97
+ },
98
+ "app-header-color-bg-nav-item-in-menu-current-hover": {
99
+ "value": "{color.interactive.hover}",
100
+ "type": "color"
101
+ },
102
+ "app-header-color-menu-button": {
35
103
  "value": "{color.text.default}",
36
104
  "type": "color"
37
105
  },
38
- "app-header-color-text-nav-item-hover": {
106
+ "app-header-color-menu-button-focus": {
39
107
  "value": "{color.interactive.hover}",
40
108
  "type": "color"
41
109
  },
42
- "app-header-color-text-nav-item-focus": {
110
+ "app-header-color-menu-button-hover": {
43
111
  "value": "{color.interactive.hover}",
44
112
  "type": "color"
45
113
  },
46
- "app-header-color-text-nav-item-current": {
114
+ "app-header-color-service-name": {
47
115
  "value": "{color.text.default}",
48
116
  "type": "color"
49
117
  },
50
- "app-header-color-menu-button": {
118
+ "app-header-color-text-nav-item": {
51
119
  "value": "{color.text.default}",
52
120
  "type": "color"
53
121
  },
54
- "app-header-color-menu-button-hover": {
122
+ "app-header-color-text-nav-item-current": {
123
+ "value": "{color.text.default}",
124
+ "type": "color"
125
+ },
126
+ "app-header-color-text-nav-item-focus": {
55
127
  "value": "{color.interactive.hover}",
56
128
  "type": "color"
57
129
  },
58
- "app-header-color-menu-button-focus": {
130
+ "app-header-color-text-nav-item-hover": {
59
131
  "value": "{color.interactive.hover}",
60
132
  "type": "color"
61
133
  },
134
+ "app-header-max-width-service-name": {
135
+ "value": "28rem",
136
+ "type": "dimension"
137
+ },
138
+ "app-header-min-width-service-name": {
139
+ "value": "8rem",
140
+ "type": "dimension"
141
+ },
62
142
  "app-header-padding-desktop": {
63
143
  "value": "{space.3xl}",
64
144
  "type": "spacing"
65
145
  },
146
+ "app-header-padding-link-item": {
147
+ "value": "{space.m}",
148
+ "type": "spacing"
149
+ },
150
+ "app-header-padding-logo": {
151
+ "value": "14px {space.xl} {space.m} 0px",
152
+ "type": "spacing"
153
+ },
66
154
  "app-header-padding-logo-mobile": {
67
155
  "value": "{space.s} {space.m}",
68
156
  "type": "spacing"
157
+ },
158
+ "app-header-padding-menu-button": {
159
+ "value": "{space.m} {space.s}",
160
+ "type": "spacing"
161
+ },
162
+ "app-header-padding-mobile": {
163
+ "value": "{space.m}",
164
+ "type": "spacing"
165
+ },
166
+ "app-header-padding-nav-item": {
167
+ "value": "{space.m} {space.s}",
168
+ "type": "spacing"
169
+ },
170
+ "app-header-padding-nav-item-with-children": {
171
+ "value": "{space.m} {space.s} {space.s}",
172
+ "type": "spacing"
173
+ },
174
+ "app-header-padding-nav-item-in-menu": {
175
+ "value": "9px {space.m}",
176
+ "type": "spacing"
177
+ },
178
+ "app-header-padding-secondary-nav-item-in-menu-mobile": {
179
+ "value": "9px {space.m} 9px 80px",
180
+ "type": "spacing"
181
+ },
182
+ "app-header-padding-secondary-nav-item-in-menu": {
183
+ "value": "9px {space.m} 9px {space.xl}",
184
+ "type": "spacing"
185
+ },
186
+ "app-header-padding-tablet": {
187
+ "value": "{space.xl}",
188
+ "type": "spacing"
189
+ },
190
+ "app-header-size-logo": {
191
+ "value": "{space.xl}",
192
+ "type": "sizing"
193
+ },
194
+ "app-header-size-logo-mobile": {
195
+ "value": "{space.l}",
196
+ "type": "sizing"
197
+ },
198
+ "app-header-space-btw-logo-service-name": {
199
+ "value": "{space.m}",
200
+ "type": "spacing"
201
+ },
202
+ "app-header-space-btw-logo-service-name-mobile": {
203
+ "value": "{space.xs}",
204
+ "type": "spacing"
205
+ },
206
+ "app-header-space-btw-service-name-nav-items-mobile": {
207
+ "value": "{space.l}",
208
+ "type": "spacing"
209
+ },
210
+ "app-header-typography-menu-button": {
211
+ "value": "{typography.body.m}",
212
+ "type": "other"
213
+ },
214
+ "app-header-typography-menu-button-mobile": {
215
+ "value": "{typography.body.s}",
216
+ "type": "other"
217
+ },
218
+ "app-header-typography-nav-item": {
219
+ "value": "{typography.heading.s}",
220
+ "type": "other"
221
+ },
222
+ "app-header-typography-service-name": {
223
+ "value": "{typography.body.m}",
224
+ "type": "other"
225
+ },
226
+ "app-header-typography-service-name-mobile": {
227
+ "value": "{typography.body.s}",
228
+ "type": "other"
69
229
  }
70
230
  }
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
  }