@amsterdam/design-system-tokens 0.1.3 → 0.1.4

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 (32) hide show
  1. package/dist/_variables.scss +188 -93
  2. package/dist/index.css +188 -93
  3. package/dist/index.d.ts +183 -80
  4. package/dist/index.js +178 -83
  5. package/dist/index.json +177 -82
  6. package/dist/index.tokens.json +416 -183
  7. package/dist/root.css +188 -93
  8. package/dist/tokens.d.ts +411 -129
  9. package/dist/tokens.js +4089 -1901
  10. package/dist/variables.less +188 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +40 -24
  13. package/src/common/utrecht/action.tokens.json +12 -0
  14. package/src/common/utrecht/focus.tokens.json +7 -0
  15. package/src/components/amsterdam/accordion.tokens.json +6 -4
  16. package/src/components/amsterdam/blockquote.tokens.json +17 -0
  17. package/src/components/amsterdam/breadcrumb.tokens.json +42 -0
  18. package/src/components/amsterdam/button.tokens.json +34 -4
  19. package/src/components/amsterdam/checkbox.tokens.json +121 -0
  20. package/src/components/amsterdam/footer.tokens.json +11 -0
  21. package/src/components/amsterdam/form-label.tokens.json +7 -5
  22. package/src/components/amsterdam/heading.tokens.json +25 -16
  23. package/src/components/amsterdam/icon.tokens.json +10 -10
  24. package/src/components/amsterdam/link.tokens.json +38 -51
  25. package/src/components/amsterdam/ordered-list.tokens.json +41 -0
  26. package/src/components/amsterdam/page-grid.tokens.json +20 -0
  27. package/src/components/amsterdam/page-heading.tokens.json +17 -0
  28. package/src/components/amsterdam/page-menu.tokens.json +25 -0
  29. package/src/components/amsterdam/paragraph.tokens.json +19 -12
  30. package/src/components/amsterdam/top-task-link.tokens.json +34 -0
  31. package/src/components/amsterdam/unordered-list.tokens.json +25 -11
  32. package/src/components/utrecht/button.tokens.json +17 -27
package/dist/variables.less CHANGED
@@ -1,36 +1,54 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 12 Jul 2023 11:08:54 GMT
3
+ // Generated on Fri, 08 Sep 2023 12:12:55 GMT
4
4
 
5
5
  @utrecht-button-subtle-disabled-background-color: transparent;
6
6
  @utrecht-button-subtle-background-color: transparent;
7
- @utrecht-button-disabled-border-color: transparent;
8
- @amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
9
- @amsterdam-unordered-list-unordered-list-list-style-type: '–';
10
- @amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
11
- @amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
12
- @amsterdam-unordered-list-item-padding-inline: 3px 0;
13
- @amsterdam-unordered-list-list-style: square;
14
- @amsterdam-unordered-list-gap: 0.5rem;
15
- @amsterdam-link-on-background-light-hover-text-decoration: none;
16
- @amsterdam-link-on-background-light-focus-text-decoration: underline;
17
- @amsterdam-link-on-background-light-text-underline-offset: 9px;
18
- @amsterdam-link-on-background-light-text-decoration-thickness: 2px;
19
- @amsterdam-link-on-background-light-text-decoration: underline;
20
- @amsterdam-link-on-background-dark-hover-text-decoration: none;
21
- @amsterdam-link-on-background-dark-focus-text-decoration: underline;
22
- @amsterdam-link-on-background-dark-text-decoration: underline;
23
- @amsterdam-link-in-list-text-underline-offset: 0.3em;
7
+ @utrecht-focus-outline-offset: 2px;
8
+ @utrecht-action-submit-cursor: pointer;
9
+ @utrecht-action-navigate-cursor: pointer;
10
+ @utrecht-action-inert-cursor: default;
11
+ @utrecht-action-disabled-cursor: not-allowed;
12
+ @utrecht-action-busy-cursor: wait;
13
+ @utrecht-action-activate-cursor: pointer;
14
+ @amsterdam-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
15
+ @amsterdam-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
16
+ @amsterdam-unordered-list-unordered-list-list-style-type: '\2013';
17
+ @amsterdam-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
18
+ @amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
19
+ @amsterdam-unordered-list-list-style-type: '\2022';
20
+ @amsterdam-unordered-list-gap: 0.75rem;
21
+ @amsterdam-page-menu-item-text-decoration: none;
22
+ @amsterdam-page-menu-item-gap: 0.5rem;
23
+ @amsterdam-page-menu-row-gap: 0.5rem;
24
+ @amsterdam-page-menu-column-gap: 2.5rem;
25
+ @amsterdam-page-grid-max-width: 1440px;
26
+ @amsterdam-page-grid-column-gap: clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem);
27
+ @amsterdam-page-grid-column-count-wide: 12;
28
+ @amsterdam-page-grid-column-count-narrow: 4;
29
+ @amsterdam-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
30
+ @amsterdam-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less than the parent to start-align the child’s marker with the parent text.
31
+ @amsterdam-ordered-list-ordered-list-list-style-type: lower-alpha;
32
+ @amsterdam-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
33
+ @amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
34
+ @amsterdam-ordered-list-list-style-type: decimal;
35
+ @amsterdam-ordered-list-gap: 0.75rem;
36
+ @amsterdam-link-standalone-focus-text-underline-offset: 7px;
37
+ @amsterdam-link-standalone-focus-text-decoration-thickness: 3px;
38
+ @amsterdam-link-standalone-text-decoration-thickness: 2px;
39
+ @amsterdam-link-standalone-text-underline-offset: 8px;
40
+ @amsterdam-link-in-list-text-decoration: none;
41
+ @amsterdam-link-in-list-focus-text-underline-offset: 7px;
42
+ @amsterdam-link-in-list-focus-text-decoration-thickness: 2px;
43
+ @amsterdam-link-in-list-focus-text-decoration: underline;
24
44
  @amsterdam-link-in-list-gap: 0.5em;
45
+ @amsterdam-link-inline-text-decoration: none;
46
+ @amsterdam-link-inline-line-height: inherit;
25
47
  @amsterdam-link-inline-font-size: inherit;
26
48
  @amsterdam-link-inline-font-family: inherit;
27
- @amsterdam-link-inline-text-underline-offset: 3px;
28
- @amsterdam-link-hover-text-decoration-thickness: 2px;
29
- @amsterdam-link-hover-text-decoration: underline;
30
- @amsterdam-link-focus-text-decoration: underline;
31
- @amsterdam-link-text-decoration-thickness: 2px;
32
- @amsterdam-link-text-underline-offset: 9px;
33
- @amsterdam-link-text-decoration: none;
49
+ @amsterdam-link-inline-focus-text-underline-offset: 3px;
50
+ @amsterdam-link-inline-focus-text-decoration: underline;
51
+ @amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
34
52
  @amsterdam-spacing-inset-xl: 2.5rem;
35
53
  @amsterdam-spacing-inset-lg: 1.5rem;
36
54
  @amsterdam-spacing-inset-md: 1rem;
@@ -40,29 +58,29 @@
40
58
  @amsterdam-border-width-md: 2px;
41
59
  @amsterdam-border-width-sm: 1px;
42
60
  @amsterdam-typography-text-level-7-line-height: 1.6;
43
- @amsterdam-typography-text-level-7-font-size-wide: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
44
- @amsterdam-typography-text-level-7-font-size-narrow: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
61
+ @amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
62
+ @amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
45
63
  @amsterdam-typography-text-level-6-line-height: 1.6;
46
- @amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
47
- @amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
64
+ @amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
65
+ @amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
48
66
  @amsterdam-typography-text-level-5-line-height: 1.5;
49
- @amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
50
- @amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
67
+ @amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
68
+ @amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
51
69
  @amsterdam-typography-text-level-4-line-height: 1.4;
52
- @amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
53
- @amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
70
+ @amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
71
+ @amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
54
72
  @amsterdam-typography-text-level-3-line-height: 1.4;
55
- @amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
56
- @amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
73
+ @amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
74
+ @amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
57
75
  @amsterdam-typography-text-level-2-line-height: 1.3;
58
- @amsterdam-typography-text-level-2-font-size-wide: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
59
- @amsterdam-typography-text-level-2-font-size-narrow: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
76
+ @amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
77
+ @amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
60
78
  @amsterdam-typography-text-level-1-line-height: 1.2;
61
- @amsterdam-typography-text-level-1-font-size-wide: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
62
- @amsterdam-typography-text-level-1-font-size-narrow: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
79
+ @amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
80
+ @amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
63
81
  @amsterdam-typography-text-level-0-line-height: 1.1;
64
- @amsterdam-typography-text-level-0-font-size-wide: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
65
- @amsterdam-typography-text-level-0-font-size-narrow: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
82
+ @amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
83
+ @amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
66
84
  @amsterdam-typography-font-weight-bold: 800;
67
85
  @amsterdam-typography-font-weight-normal: 400;
68
86
  @amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -83,23 +101,19 @@
83
101
  @amsterdam-color-primary-white: #ffffff;
84
102
  @amsterdam-color-primary-black: #000000;
85
103
  @utrecht-button-subtle-disabled-color: @amsterdam-color-neutral-grey2;
86
- @utrecht-button-subtle-hover-border-color: @amsterdam-color-neutral-grey3;
104
+ @utrecht-button-subtle-focus-color: @amsterdam-color-dark-blue;
105
+ @utrecht-button-subtle-hover-color: @amsterdam-color-dark-blue;
87
106
  @utrecht-button-subtle-color: @amsterdam-color-primary-blue;
88
- @utrecht-button-subtle-border-width: @amsterdam-border-width-md;
89
- @utrecht-button-secondary-action-disabled-border-color: @amsterdam-color-neutral-grey2;
90
107
  @utrecht-button-secondary-action-disabled-color: @amsterdam-color-neutral-grey2;
91
108
  @utrecht-button-secondary-action-disabled-background-color: @amsterdam-color-primary-white;
92
- @utrecht-button-secondary-action-hover-border-color: @amsterdam-color-dark-blue;
93
109
  @utrecht-button-secondary-action-hover-color: @amsterdam-color-dark-blue;
94
- @utrecht-button-secondary-action-border-width: @amsterdam-border-width-md;
95
- @utrecht-button-secondary-action-border-color: @amsterdam-color-primary-blue;
96
110
  @utrecht-button-secondary-action-color: @amsterdam-color-primary-blue;
97
111
  @utrecht-button-secondary-action-background-color: @amsterdam-color-primary-white;
112
+ @utrecht-button-primary-action-focus-background-color: @amsterdam-color-dark-blue;
98
113
  @utrecht-button-primary-action-hover-background-color: @amsterdam-color-dark-blue;
99
114
  @utrecht-button-primary-action-disabled-background-color: @amsterdam-color-neutral-grey2;
100
115
  @utrecht-button-primary-action-color: @amsterdam-color-primary-white;
101
116
  @utrecht-button-primary-action-background-color: @amsterdam-color-primary-blue;
102
- @utrecht-button-hover-background-color: @amsterdam-color-dark-blue;
103
117
  @utrecht-button-disabled-color: @amsterdam-color-primary-white;
104
118
  @utrecht-button-disabled-background-color: @amsterdam-color-neutral-grey2;
105
119
  @utrecht-button-padding-block-end: @amsterdam-spacing-inset-sm;
@@ -110,93 +124,174 @@
110
124
  @utrecht-button-font-family: @amsterdam-typography-font-family;
111
125
  @utrecht-button-color: @amsterdam-color-primary-white;
112
126
  @utrecht-button-background-color: @amsterdam-color-primary-blue;
127
+ @amsterdam-unordered-list-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
128
+ @amsterdam-unordered-list-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
113
129
  @amsterdam-unordered-list-line-height: @amsterdam-typography-text-level-6-line-height;
114
130
  @amsterdam-unordered-list-font-weight: 400;
115
- @amsterdam-unordered-list-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
116
- @amsterdam-unordered-list-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
117
131
  @amsterdam-unordered-list-font-family: @amsterdam-typography-font-family;
118
132
  @amsterdam-unordered-list-color: @amsterdam-color-primary-black;
133
+ @amsterdam-top-task-link-outline-offset: @amsterdam-focus-outline-offset;
134
+ @amsterdam-top-task-link-label-wide-font-size: @amsterdam-typography-text-level-4-wide-font-size;
135
+ @amsterdam-top-task-link-label-narrow-font-size: @amsterdam-typography-text-level-4-narrow-font-size;
136
+ @amsterdam-top-task-link-label-line-height: @amsterdam-typography-text-level-4-line-height;
137
+ @amsterdam-top-task-link-label-hover-color: @amsterdam-color-dark-blue;
138
+ @amsterdam-top-task-link-label-font-weight: 800;
139
+ @amsterdam-top-task-link-label-font-family: @amsterdam-typography-font-family;
140
+ @amsterdam-top-task-link-label-color: @amsterdam-color-primary-blue;
141
+ @amsterdam-top-task-link-description-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
142
+ @amsterdam-top-task-link-description-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
143
+ @amsterdam-top-task-link-description-line-height: @amsterdam-typography-text-level-7-line-height;
144
+ @amsterdam-top-task-link-description-font-weight: 400;
145
+ @amsterdam-top-task-link-description-font-family: @amsterdam-typography-font-family;
146
+ @amsterdam-top-task-link-description-color: @amsterdam-color-primary-black;
147
+ @amsterdam-paragraph-large-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
148
+ @amsterdam-paragraph-large-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
119
149
  @amsterdam-paragraph-large-line-height: @amsterdam-typography-text-level-5-line-height;
120
- @amsterdam-paragraph-large-font-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
121
- @amsterdam-paragraph-large-font-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
150
+ @amsterdam-paragraph-small-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
151
+ @amsterdam-paragraph-small-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
122
152
  @amsterdam-paragraph-small-line-height: @amsterdam-typography-text-level-7-line-height;
123
- @amsterdam-paragraph-small-font-size-wide: @amsterdam-typography-text-level-7-font-size-wide;
124
- @amsterdam-paragraph-small-font-size-narrow: @amsterdam-typography-text-level-7-font-size-narrow;
153
+ @amsterdam-paragraph-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
154
+ @amsterdam-paragraph-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
125
155
  @amsterdam-paragraph-line-height: @amsterdam-typography-text-level-6-line-height;
156
+ @amsterdam-paragraph-inverse-color: @amsterdam-color-primary-white;
126
157
  @amsterdam-paragraph-font-weight: 400;
127
- @amsterdam-paragraph-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
128
- @amsterdam-paragraph-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
129
158
  @amsterdam-paragraph-font-family: @amsterdam-typography-font-family;
130
159
  @amsterdam-paragraph-color: @amsterdam-color-primary-black;
160
+ @amsterdam-page-menu-item-hover-color: @amsterdam-color-dark-blue;
161
+ @amsterdam-page-menu-item-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
162
+ @amsterdam-page-menu-item-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
163
+ @amsterdam-page-menu-item-line-height: @amsterdam-typography-text-level-7-line-height;
164
+ @amsterdam-page-menu-item-font-weight: 400;
165
+ @amsterdam-page-menu-item-font-family: @amsterdam-typography-font-family;
166
+ @amsterdam-page-menu-item-color: @amsterdam-color-primary-black;
167
+ @amsterdam-page-heading-inverse-color: @amsterdam-color-primary-white;
168
+ @amsterdam-page-heading-font-weight: 800;
169
+ @amsterdam-page-heading-wide-font-size: @amsterdam-typography-text-level-0-wide-font-size;
170
+ @amsterdam-page-heading-narrow-font-size: @amsterdam-typography-text-level-0-narrow-font-size;
171
+ @amsterdam-page-heading-line-height: @amsterdam-typography-text-level-0-line-height;
172
+ @amsterdam-page-heading-font-family: @amsterdam-typography-font-family;
173
+ @amsterdam-page-heading-color: @amsterdam-color-primary-black;
174
+ @amsterdam-ordered-list-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
175
+ @amsterdam-ordered-list-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
176
+ @amsterdam-ordered-list-line-height: @amsterdam-typography-text-level-6-line-height;
177
+ @amsterdam-ordered-list-font-weight: 400;
178
+ @amsterdam-ordered-list-font-family: @amsterdam-typography-font-family;
179
+ @amsterdam-ordered-list-color: @amsterdam-color-primary-black;
131
180
  @amsterdam-link-on-background-light-visited-color: @amsterdam-color-primary-black;
132
181
  @amsterdam-link-on-background-light-hover-color: @amsterdam-color-primary-black;
133
- @amsterdam-link-on-background-light-focus-color: @amsterdam-color-primary-black;
134
- @amsterdam-link-on-background-light-font-size: [object Object];
135
- @amsterdam-link-on-background-light-active-color: @amsterdam-color-primary-black;
136
182
  @amsterdam-link-on-background-light-color: @amsterdam-color-primary-black;
137
183
  @amsterdam-link-on-background-dark-visited-color: @amsterdam-color-primary-white;
138
184
  @amsterdam-link-on-background-dark-hover-color: @amsterdam-color-primary-white;
139
- @amsterdam-link-on-background-dark-focus-color: @amsterdam-color-primary-white;
140
185
  @amsterdam-link-on-background-dark-color: @amsterdam-color-primary-white;
186
+ @amsterdam-link-standalone-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
187
+ @amsterdam-link-standalone-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
188
+ @amsterdam-link-standalone-line-height: @amsterdam-typography-text-level-6-line-height;
189
+ @amsterdam-link-in-list-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
190
+ @amsterdam-link-in-list-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
141
191
  @amsterdam-link-in-list-line-height: @amsterdam-typography-text-level-7-line-height;
142
- @amsterdam-link-in-list-font-size-wide: @amsterdam-typography-text-level-7-font-size-wide;
143
- @amsterdam-link-in-list-font-size-narrow: @amsterdam-typography-text-level-7-font-size-narrow;
144
192
  @amsterdam-link-inline-visited-color: @amsterdam-color-purple;
145
- @amsterdam-link-standalone-bold-font-weight: 800;
146
- @amsterdam-link-visited-color: @amsterdam-color-primary-blue;
147
- @amsterdam-link-line-height: @amsterdam-typography-text-level-6-line-height;
148
- @amsterdam-link-hover-color: @amsterdam-color-dark-blue;
149
193
  @amsterdam-link-focus-color: @amsterdam-color-dark-blue;
150
194
  @amsterdam-link-font-weight: 400;
151
- @amsterdam-link-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
152
- @amsterdam-link-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
153
195
  @amsterdam-link-font-family: @amsterdam-typography-font-family;
154
196
  @amsterdam-link-outline-offset: @amsterdam-focus-outline-offset;
155
197
  @amsterdam-link-color: @amsterdam-color-primary-blue;
156
198
  @amsterdam-icon-size-7-container-multiplier: @amsterdam-typography-text-level-7-line-height;
157
- @amsterdam-icon-size-7-icon-size-wide: @amsterdam-typography-text-level-7-font-size-wide;
158
- @amsterdam-icon-size-7-icon-size-narrow: @amsterdam-typography-text-level-7-font-size-narrow;
199
+ @amsterdam-icon-size-7-icon-size-wide: @amsterdam-typography-text-level-7-wide-font-size;
200
+ @amsterdam-icon-size-7-icon-size-narrow: @amsterdam-typography-text-level-7-narrow-font-size;
159
201
  @amsterdam-icon-size-6-container-multiplier: @amsterdam-typography-text-level-6-line-height;
160
- @amsterdam-icon-size-6-icon-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
161
- @amsterdam-icon-size-6-icon-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
202
+ @amsterdam-icon-size-6-icon-size-wide: @amsterdam-typography-text-level-6-wide-font-size;
203
+ @amsterdam-icon-size-6-icon-size-narrow: @amsterdam-typography-text-level-6-narrow-font-size;
162
204
  @amsterdam-icon-size-5-container-multiplier: @amsterdam-typography-text-level-5-line-height;
163
- @amsterdam-icon-size-5-icon-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
164
- @amsterdam-icon-size-5-icon-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
205
+ @amsterdam-icon-size-5-icon-size-wide: @amsterdam-typography-text-level-5-wide-font-size;
206
+ @amsterdam-icon-size-5-icon-size-narrow: @amsterdam-typography-text-level-5-narrow-font-size;
165
207
  @amsterdam-icon-size-4-container-multiplier: @amsterdam-typography-text-level-4-line-height;
166
- @amsterdam-icon-size-4-icon-size-wide: @amsterdam-typography-text-level-4-font-size-wide;
167
- @amsterdam-icon-size-4-icon-size-narrow: @amsterdam-typography-text-level-4-font-size-narrow;
208
+ @amsterdam-icon-size-4-icon-size-wide: @amsterdam-typography-text-level-4-wide-font-size;
209
+ @amsterdam-icon-size-4-icon-size-narrow: @amsterdam-typography-text-level-4-narrow-font-size;
168
210
  @amsterdam-icon-size-3-container-multiplier: @amsterdam-typography-text-level-3-line-height;
169
- @amsterdam-icon-size-3-icon-size-wide: @amsterdam-typography-text-level-3-font-size-wide;
170
- @amsterdam-icon-size-3-icon-size-narrow: @amsterdam-typography-text-level-3-font-size-narrow;
211
+ @amsterdam-icon-size-3-icon-size-wide: @amsterdam-typography-text-level-3-wide-font-size;
212
+ @amsterdam-icon-size-3-icon-size-narrow: @amsterdam-typography-text-level-3-narrow-font-size;
213
+ @amsterdam-heading-inverse-color: @amsterdam-color-primary-white;
171
214
  @amsterdam-heading-font-weight: 800;
172
215
  @amsterdam-heading-font-family: @amsterdam-typography-font-family;
173
216
  @amsterdam-heading-color: @amsterdam-color-primary-black;
217
+ @amsterdam-heading-4-wide-font-size: @amsterdam-typography-text-level-4-wide-font-size;
218
+ @amsterdam-heading-4-narrow-font-size: @amsterdam-typography-text-level-4-narrow-font-size;
174
219
  @amsterdam-heading-4-line-height: @amsterdam-typography-text-level-4-line-height;
175
- @amsterdam-heading-4-font-size-wide: @amsterdam-typography-text-level-4-font-size-wide;
176
- @amsterdam-heading-4-font-size-narrow: @amsterdam-typography-text-level-4-font-size-narrow;
220
+ @amsterdam-heading-3-wide-font-size: @amsterdam-typography-text-level-3-wide-font-size;
221
+ @amsterdam-heading-3-narrow-font-size: @amsterdam-typography-text-level-3-narrow-font-size;
177
222
  @amsterdam-heading-3-line-height: @amsterdam-typography-text-level-3-line-height;
178
- @amsterdam-heading-3-font-size-wide: @amsterdam-typography-text-level-3-font-size-wide;
179
- @amsterdam-heading-3-font-size-narrow: @amsterdam-typography-text-level-3-font-size-narrow;
223
+ @amsterdam-heading-2-wide-font-size: @amsterdam-typography-text-level-2-wide-font-size;
224
+ @amsterdam-heading-2-narrow-font-size: @amsterdam-typography-text-level-2-narrow-font-size;
180
225
  @amsterdam-heading-2-line-height: @amsterdam-typography-text-level-2-line-height;
181
- @amsterdam-heading-2-font-size-wide: @amsterdam-typography-text-level-2-font-size-wide;
182
- @amsterdam-heading-2-font-size-narrow: @amsterdam-typography-text-level-2-font-size-narrow;
226
+ @amsterdam-heading-1-wide-font-size: @amsterdam-typography-text-level-1-wide-font-size;
227
+ @amsterdam-heading-1-narrow-font-size: @amsterdam-typography-text-level-1-narrow-font-size;
183
228
  @amsterdam-heading-1-line-height: @amsterdam-typography-text-level-1-line-height;
184
- @amsterdam-heading-1-font-size-wide: @amsterdam-typography-text-level-1-font-size-wide;
185
- @amsterdam-heading-1-font-size-narrow: @amsterdam-typography-text-level-1-font-size-narrow;
229
+ @amsterdam-form-label-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
230
+ @amsterdam-form-label-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
186
231
  @amsterdam-form-label-line-height: @amsterdam-typography-text-level-7-line-height;
187
232
  @amsterdam-form-label-font-weight: 800;
188
- @amsterdam-form-label-font-size-wide: @amsterdam-typography-text-level-7-font-size-wide;
189
- @amsterdam-form-label-font-size-narrow: @amsterdam-typography-text-level-7-font-size-narrow;
190
233
  @amsterdam-form-label-font-family: @amsterdam-typography-font-family;
191
234
  @amsterdam-form-label-color: @amsterdam-color-primary-black;
192
- @amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px @amsterdam-color-dark-blue;
193
- @amsterdam-button-font-size-wide: @amsterdam-typography-text-level-6-font-size-wide;
194
- @amsterdam-button-font-size-narrow: @amsterdam-typography-text-level-6-font-size-narrow;
235
+ @amsterdam-footer-top-background-color: @amsterdam-color-primary-blue;
236
+ @amsterdam-checkbox-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
237
+ @amsterdam-checkbox-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
238
+ @amsterdam-checkbox-line-height: @amsterdam-typography-text-level-6-line-height;
239
+ @amsterdam-checkbox-outline-offset: @amsterdam-focus-outline-offset;
240
+ @amsterdam-checkbox-hover-color: @amsterdam-color-dark-blue;
241
+ @amsterdam-checkbox-font-weight: 400;
242
+ @amsterdam-checkbox-font-family: @amsterdam-typography-font-family;
243
+ @amsterdam-checkbox-disabled-color: @amsterdam-color-neutral-grey3;
244
+ @amsterdam-checkbox-checkmark-multiplier: @amsterdam-typography-text-level-6-line-height;
245
+ @amsterdam-checkbox-checkmark-wide-size: @amsterdam-typography-text-level-6-wide-font-size;
246
+ @amsterdam-checkbox-checkmark-narrow-size: @amsterdam-typography-text-level-6-narrow-font-size;
247
+ @amsterdam-checkbox-checkmark-indeterminate-hover-background-color: @amsterdam-color-dark-blue;
248
+ @amsterdam-checkbox-checkmark-indeterminate-background-color: @amsterdam-color-primary-blue;
249
+ @amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color: @amsterdam-color-primary-red;
250
+ @amsterdam-checkbox-checkmark-invalid-indeterminate-background-color: @amsterdam-color-primary-red;
251
+ @amsterdam-checkbox-checkmark-invalid-hover-border-color: @amsterdam-color-primary-red;
252
+ @amsterdam-checkbox-checkmark-invalid-checked-hover-background-color: @amsterdam-color-primary-red;
253
+ @amsterdam-checkbox-checkmark-invalid-checked-background-color: @amsterdam-color-primary-red;
254
+ @amsterdam-checkbox-checkmark-invalid-border-color: @amsterdam-color-primary-red;
255
+ @amsterdam-checkbox-checkmark-hover-border-color: @amsterdam-color-dark-blue;
256
+ @amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color: @amsterdam-color-neutral-grey3;
257
+ @amsterdam-checkbox-checkmark-disabled-indeterminate-background-color: @amsterdam-color-neutral-grey3;
258
+ @amsterdam-checkbox-checkmark-disabled-checked-hover-background-color: @amsterdam-color-neutral-grey3;
259
+ @amsterdam-checkbox-checkmark-disabled-checked-background-color: @amsterdam-color-neutral-grey3;
260
+ @amsterdam-checkbox-checkmark-disabled-border-color: @amsterdam-color-neutral-grey3;
261
+ @amsterdam-checkbox-checkmark-checked-hover-background-color: @amsterdam-color-dark-blue;
262
+ @amsterdam-checkbox-checkmark-checked-background-color: @amsterdam-color-primary-blue;
263
+ @amsterdam-checkbox-checkmark-border-color: @amsterdam-color-primary-blue;
264
+ @amsterdam-checkbox-color: @amsterdam-color-primary-black;
265
+ @amsterdam-button-tertiary-focus-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
266
+ @amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
267
+ @amsterdam-button-secondary-focus-color: @amsterdam-color-dark-blue;
268
+ @amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 3px @amsterdam-color-dark-blue;
269
+ @amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey2;
270
+ @amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px @amsterdam-color-dark-blue;
271
+ @amsterdam-button-secondary-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-blue;
272
+ @amsterdam-button-wide-font-size: @amsterdam-typography-text-level-6-wide-font-size;
273
+ @amsterdam-button-narrow-font-size: @amsterdam-typography-text-level-6-narrow-font-size;
274
+ @amsterdam-breadcrumb-item-link-focus-color: @amsterdam-color-dark-blue;
275
+ @amsterdam-breadcrumb-item-link-hover-box-shadow: inset 0 -2px 0 0 @amsterdam-color-dark-blue;
276
+ @amsterdam-breadcrumb-item-link-hover-color: @amsterdam-color-dark-blue;
277
+ @amsterdam-breadcrumb-item-link-outline-offset: @amsterdam-focus-outline-offset;
278
+ @amsterdam-breadcrumb-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
279
+ @amsterdam-breadcrumb-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
280
+ @amsterdam-breadcrumb-line-height: @amsterdam-typography-text-level-7-line-height;
281
+ @amsterdam-breadcrumb-font-family: @amsterdam-typography-font-family;
282
+ @amsterdam-breadcrumb-color: @amsterdam-color-primary-blue;
283
+ @amsterdam-blockquote-wide-font-size: @amsterdam-typography-text-level-3-wide-font-size;
284
+ @amsterdam-blockquote-narrow-font-size: @amsterdam-typography-text-level-3-narrow-font-size;
285
+ @amsterdam-blockquote-line-height: @amsterdam-typography-text-level-3-line-height;
286
+ @amsterdam-blockquote-inverse-color: @amsterdam-color-primary-white;
287
+ @amsterdam-blockquote-font-weight: 800;
288
+ @amsterdam-blockquote-font-family: @amsterdam-typography-font-family;
289
+ @amsterdam-blockquote-color: @amsterdam-color-primary-black;
195
290
  @amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
291
+ @amsterdam-accordion-button-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
292
+ @amsterdam-accordion-button-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
196
293
  @amsterdam-accordion-button-line-height: @amsterdam-typography-text-level-5-line-height;
197
294
  @amsterdam-accordion-button-font-weight: 800;
198
- @amsterdam-accordion-button-font-size-wide: @amsterdam-typography-text-level-5-font-size-wide;
199
- @amsterdam-accordion-button-font-size-narrow: @amsterdam-typography-text-level-5-font-size-narrow;
200
295
  @amsterdam-accordion-button-font-family: @amsterdam-typography-font-family;
201
296
  @amsterdam-accordion-button-focus-outline-offset: @amsterdam-focus-outline-offset;
202
297
  @amsterdam-accordion-button-color: @amsterdam-color-primary-blue;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.3",
2
+ "version": "0.1.4",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
@@ -28,5 +28,5 @@
28
28
  "npm-run-all": "4.1.5",
29
29
  "style-dictionary": "3.8.0"
30
30
  },
31
- "gitHead": "43a949072edf58e9f8d198a2eca9b5457f01ccc8"
31
+ "gitHead": "50bfbf67c103288ed6ba6713a6537252f0c25246"
32
32
  }
package/src/brand/amsterdam/typography.tokens.json CHANGED
@@ -8,58 +8,74 @@
8
8
  },
9
9
  "text-level": {
10
10
  "0": {
11
- "font-size": {
12
- "narrow": { "value": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)" },
13
- "wide": { "value": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)" }
11
+ "narrow": {
12
+ "font-size": { "value": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)" }
13
+ },
14
+ "wide": {
15
+ "font-size": { "value": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)" }
14
16
  },
15
17
  "line-height": { "value": "1.1" }
16
18
  },
17
19
  "1": {
18
- "font-size": {
19
- "narrow": { "value": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)" },
20
- "wide": { "value": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)" }
20
+ "narrow": {
21
+ "font-size": { "value": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)" }
22
+ },
23
+ "wide": {
24
+ "font-size": { "value": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)" }
21
25
  },
22
26
  "line-height": { "value": "1.2" }
23
27
  },
24
28
  "2": {
25
- "font-size": {
26
- "narrow": { "value": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)" },
27
- "wide": { "value": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)" }
29
+ "narrow": {
30
+ "font-size": { "value": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)" }
31
+ },
32
+ "wide": {
33
+ "font-size": { "value": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)" }
28
34
  },
29
35
  "line-height": { "value": "1.3" }
30
36
  },
31
37
  "3": {
32
- "font-size": {
33
- "narrow": { "value": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)" },
34
- "wide": { "value": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)" }
38
+ "narrow": {
39
+ "font-size": { "value": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)" }
40
+ },
41
+ "wide": {
42
+ "font-size": { "value": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)" }
35
43
  },
36
44
  "line-height": { "value": "1.4" }
37
45
  },
38
46
  "4": {
39
- "font-size": {
40
- "narrow": { "value": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)" },
41
- "wide": { "value": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)" }
47
+ "narrow": {
48
+ "font-size": { "value": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)" }
49
+ },
50
+ "wide": {
51
+ "font-size": { "value": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)" }
42
52
  },
43
53
  "line-height": { "value": "1.4" }
44
54
  },
45
55
  "5": {
46
- "font-size": {
47
- "narrow": { "value": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)" },
48
- "wide": { "value": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)" }
56
+ "narrow": {
57
+ "font-size": { "value": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)" }
58
+ },
59
+ "wide": {
60
+ "font-size": { "value": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)" }
49
61
  },
50
62
  "line-height": { "value": "1.5" }
51
63
  },
52
64
  "6": {
53
- "font-size": {
54
- "narrow": { "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)" },
55
- "wide": { "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)" }
65
+ "narrow": {
66
+ "font-size": { "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)" }
67
+ },
68
+ "wide": {
69
+ "font-size": { "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)" }
56
70
  },
57
71
  "line-height": { "value": "1.6" }
58
72
  },
59
73
  "7": {
60
- "font-size": {
61
- "narrow": { "value": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)" },
62
- "wide": { "value": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)" }
74
+ "narrow": {
75
+ "font-size": { "value": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)" }
76
+ },
77
+ "wide": {
78
+ "font-size": { "value": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)" }
63
79
  },
64
80
  "line-height": { "value": "1.6" }
65
81
  }
package/src/common/utrecht/action.tokens.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "utrecht": {
3
+ "action": {
4
+ "activate": { "cursor": { "value": "pointer" } },
5
+ "busy": { "cursor": { "value": "wait" } },
6
+ "disabled": { "cursor": { "value": "not-allowed" } },
7
+ "inert": { "cursor": { "value": "default" } },
8
+ "navigate": { "cursor": { "value": "pointer" } },
9
+ "submit": { "cursor": { "value": "pointer" } }
10
+ }
11
+ }
12
+ }
package/src/common/utrecht/focus.tokens.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "utrecht": {
3
+ "focus": {
4
+ "outline-offset": { "value": "2px" }
5
+ }
6
+ }
7
+ }
package/src/components/amsterdam/accordion.tokens.json CHANGED
@@ -7,12 +7,14 @@
7
7
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
8
8
  },
9
9
  "font-family": { "value": "{amsterdam.typography.font-family}" },
10
- "font-size": {
11
- "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
12
- "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
13
- },
14
10
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
15
11
  "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
12
+ "narrow": {
13
+ "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
14
+ },
15
+ "wide": {
16
+ "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
17
+ },
16
18
  "hover": {
17
19
  "box-shadow": {
18
20
  "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
package/src/components/amsterdam/blockquote.tokens.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "amsterdam": {
3
+ "blockquote": {
4
+ "color": { "value": "{amsterdam.color.primary-black}" },
5
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
6
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
+ "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
+ "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
9
+ "narrow": {
10
+ "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
11
+ },
12
+ "wide": {
13
+ "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
14
+ }
15
+ }
16
+ }
17
+ }
package/src/components/amsterdam/breadcrumb.tokens.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "amsterdam": {
3
+ "breadcrumb": {
4
+ "color": {
5
+ "value": "{amsterdam.color.primary-blue}"
6
+ },
7
+ "font-family": {
8
+ "value": "{amsterdam.typography.font-family}"
9
+ },
10
+ "line-height": {
11
+ "value": "{amsterdam.typography.text-level.7.line-height}"
12
+ },
13
+ "narrow": {
14
+ "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
15
+ },
16
+ "wide": {
17
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
18
+ },
19
+ "item-link": {
20
+ "outline-offset": {
21
+ "value": "{amsterdam.focus.outline-offset}"
22
+ },
23
+ "hover": {
24
+ "color": {
25
+ "value": "{amsterdam.color.dark-blue}"
26
+ },
27
+ "box-shadow": {
28
+ "value": "inset 0 -2px 0 0 {amsterdam.color.dark-blue}"
29
+ }
30
+ },
31
+ "focus": {
32
+ "color": {
33
+ "value": "{amsterdam.color.dark-blue}"
34
+ },
35
+ "text-decoration": {
36
+ "value": "underline"
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }