@amsterdam/design-system-tokens 0.1.1 → 0.1.3

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 (24) hide show
  1. package/LICENSE.md +3 -3
  2. package/dist/_variables.scss +183 -2
  3. package/dist/index.css +182 -1
  4. package/dist/index.d.ts +183 -2
  5. package/dist/index.js +183 -2
  6. package/dist/index.json +183 -2
  7. package/dist/index.tokens.json +578 -1
  8. package/dist/root.css +182 -1
  9. package/dist/tokens.d.ts +530 -2
  10. package/dist/tokens.js +4293 -2
  11. package/dist/variables.less +183 -2
  12. package/package.json +6 -7
  13. package/src/brand/amsterdam/typography.tokens.json +69 -0
  14. package/src/common/amsterdam/border.tokens.json +15 -0
  15. package/src/common/amsterdam/spacing.tokens.json +20 -0
  16. package/src/components/amsterdam/accordion.tokens.json +24 -0
  17. package/src/components/amsterdam/button.tokens.json +17 -0
  18. package/src/components/amsterdam/form-label.tokens.json +14 -0
  19. package/src/components/amsterdam/heading.tokens.json +37 -0
  20. package/src/components/amsterdam/icon.tokens.json +41 -0
  21. package/src/components/amsterdam/link.tokens.json +98 -0
  22. package/src/components/amsterdam/paragraph.tokens.json +28 -0
  23. package/src/components/amsterdam/unordered-list.tokens.json +27 -0
  24. package/src/components/utrecht/button.tokens.json +276 -0
package/dist/root.css CHANGED
@@ -1,10 +1,73 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 10 Feb 2023 14:37:30 GMT
3
+ * Generated on Wed, 12 Jul 2023 11:08:54 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --utrecht-button-subtle-disabled-background-color: transparent;
8
+ --utrecht-button-subtle-background-color: transparent;
9
+ --utrecht-button-disabled-border-color: transparent;
10
+ --amsterdam-unordered-list-unordered-list-item-padding-inline: 11px 0;
11
+ --amsterdam-unordered-list-unordered-list-list-style-type: '–';
12
+ --amsterdam-unordered-list-unordered-list-padding-inline: 14px 0;
13
+ --amsterdam-unordered-list-unordered-list-padding-block: 4px 0;
14
+ --amsterdam-unordered-list-item-padding-inline: 3px 0;
15
+ --amsterdam-unordered-list-list-style: square;
16
+ --amsterdam-unordered-list-gap: 0.5rem;
17
+ --amsterdam-link-on-background-light-hover-text-decoration: none;
18
+ --amsterdam-link-on-background-light-focus-text-decoration: underline;
19
+ --amsterdam-link-on-background-light-text-underline-offset: 9px;
20
+ --amsterdam-link-on-background-light-text-decoration-thickness: 2px;
21
+ --amsterdam-link-on-background-light-text-decoration: underline;
22
+ --amsterdam-link-on-background-dark-hover-text-decoration: none;
23
+ --amsterdam-link-on-background-dark-focus-text-decoration: underline;
24
+ --amsterdam-link-on-background-dark-text-decoration: underline;
25
+ --amsterdam-link-in-list-text-underline-offset: 0.3em;
26
+ --amsterdam-link-in-list-gap: 0.5em;
27
+ --amsterdam-link-inline-font-size: inherit;
28
+ --amsterdam-link-inline-font-family: inherit;
29
+ --amsterdam-link-inline-text-underline-offset: 3px;
30
+ --amsterdam-link-hover-text-decoration-thickness: 2px;
31
+ --amsterdam-link-hover-text-decoration: underline;
32
+ --amsterdam-link-focus-text-decoration: underline;
33
+ --amsterdam-link-text-decoration-thickness: 2px;
34
+ --amsterdam-link-text-underline-offset: 9px;
35
+ --amsterdam-link-text-decoration: none;
36
+ --amsterdam-spacing-inset-xl: 2.5rem;
37
+ --amsterdam-spacing-inset-lg: 1.5rem;
38
+ --amsterdam-spacing-inset-md: 1rem;
39
+ --amsterdam-spacing-inset-sm: 0.5rem;
7
40
  --amsterdam-focus-outline-offset: 2px;
41
+ --amsterdam-border-width-lg: 3px;
42
+ --amsterdam-border-width-md: 2px;
43
+ --amsterdam-border-width-sm: 1px;
44
+ --amsterdam-typography-text-level-7-line-height: 1.6;
45
+ --amsterdam-typography-text-level-7-font-size-wide: clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem);
46
+ --amsterdam-typography-text-level-7-font-size-narrow: clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem);
47
+ --amsterdam-typography-text-level-6-line-height: 1.6;
48
+ --amsterdam-typography-text-level-6-font-size-wide: clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem);
49
+ --amsterdam-typography-text-level-6-font-size-narrow: clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem);
50
+ --amsterdam-typography-text-level-5-line-height: 1.5;
51
+ --amsterdam-typography-text-level-5-font-size-wide: clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem);
52
+ --amsterdam-typography-text-level-5-font-size-narrow: clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem);
53
+ --amsterdam-typography-text-level-4-line-height: 1.4;
54
+ --amsterdam-typography-text-level-4-font-size-wide: clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem);
55
+ --amsterdam-typography-text-level-4-font-size-narrow: clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem);
56
+ --amsterdam-typography-text-level-3-line-height: 1.4;
57
+ --amsterdam-typography-text-level-3-font-size-wide: clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem);
58
+ --amsterdam-typography-text-level-3-font-size-narrow: clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem);
59
+ --amsterdam-typography-text-level-2-line-height: 1.3;
60
+ --amsterdam-typography-text-level-2-font-size-wide: clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem);
61
+ --amsterdam-typography-text-level-2-font-size-narrow: clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem);
62
+ --amsterdam-typography-text-level-1-line-height: 1.2;
63
+ --amsterdam-typography-text-level-1-font-size-wide: clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem);
64
+ --amsterdam-typography-text-level-1-font-size-narrow: clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem);
65
+ --amsterdam-typography-text-level-0-line-height: 1.1;
66
+ --amsterdam-typography-text-level-0-font-size-wide: clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem);
67
+ --amsterdam-typography-text-level-0-font-size-narrow: clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem);
68
+ --amsterdam-typography-font-weight-bold: 800;
69
+ --amsterdam-typography-font-weight-normal: 400;
70
+ --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
8
71
  --amsterdam-color-neutral-grey4: #323232;
9
72
  --amsterdam-color-neutral-grey3: #767676;
10
73
  --amsterdam-color-neutral-grey2: #B4B4B4;
@@ -21,4 +84,122 @@
21
84
  --amsterdam-color-primary-blue: #004699;
22
85
  --amsterdam-color-primary-white: #ffffff;
23
86
  --amsterdam-color-primary-black: #000000;
87
+ --utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2);
88
+ --utrecht-button-subtle-hover-border-color: var(--amsterdam-color-neutral-grey3);
89
+ --utrecht-button-subtle-color: var(--amsterdam-color-primary-blue);
90
+ --utrecht-button-subtle-border-width: var(--amsterdam-border-width-md);
91
+ --utrecht-button-secondary-action-disabled-border-color: var(--amsterdam-color-neutral-grey2);
92
+ --utrecht-button-secondary-action-disabled-color: var(--amsterdam-color-neutral-grey2);
93
+ --utrecht-button-secondary-action-disabled-background-color: var(--amsterdam-color-primary-white);
94
+ --utrecht-button-secondary-action-hover-border-color: var(--amsterdam-color-dark-blue);
95
+ --utrecht-button-secondary-action-hover-color: var(--amsterdam-color-dark-blue);
96
+ --utrecht-button-secondary-action-border-width: var(--amsterdam-border-width-md);
97
+ --utrecht-button-secondary-action-border-color: var(--amsterdam-color-primary-blue);
98
+ --utrecht-button-secondary-action-color: var(--amsterdam-color-primary-blue);
99
+ --utrecht-button-secondary-action-background-color: var(--amsterdam-color-primary-white);
100
+ --utrecht-button-primary-action-hover-background-color: var(--amsterdam-color-dark-blue);
101
+ --utrecht-button-primary-action-disabled-background-color: var(--amsterdam-color-neutral-grey2);
102
+ --utrecht-button-primary-action-color: var(--amsterdam-color-primary-white);
103
+ --utrecht-button-primary-action-background-color: var(--amsterdam-color-primary-blue);
104
+ --utrecht-button-hover-background-color: var(--amsterdam-color-dark-blue);
105
+ --utrecht-button-disabled-color: var(--amsterdam-color-primary-white);
106
+ --utrecht-button-disabled-background-color: var(--amsterdam-color-neutral-grey2);
107
+ --utrecht-button-padding-block-end: var(--amsterdam-spacing-inset-sm);
108
+ --utrecht-button-padding-block-start: var(--amsterdam-spacing-inset-sm);
109
+ --utrecht-button-padding-inline-end: var(--amsterdam-spacing-inset-md);
110
+ --utrecht-button-padding-inline-start: var(--amsterdam-spacing-inset-md);
111
+ --utrecht-button-line-height: var(--amsterdam-typography-text-level-6-line-height);
112
+ --utrecht-button-font-family: var(--amsterdam-typography-font-family);
113
+ --utrecht-button-color: var(--amsterdam-color-primary-white);
114
+ --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
115
+ --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-6-line-height);
116
+ --amsterdam-unordered-list-font-weight: 400;
117
+ --amsterdam-unordered-list-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
118
+ --amsterdam-unordered-list-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
119
+ --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
120
+ --amsterdam-unordered-list-color: var(--amsterdam-color-primary-black);
121
+ --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-5-line-height);
122
+ --amsterdam-paragraph-large-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
123
+ --amsterdam-paragraph-large-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
124
+ --amsterdam-paragraph-small-line-height: var(--amsterdam-typography-text-level-7-line-height);
125
+ --amsterdam-paragraph-small-font-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
126
+ --amsterdam-paragraph-small-font-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
127
+ --amsterdam-paragraph-line-height: var(--amsterdam-typography-text-level-6-line-height);
128
+ --amsterdam-paragraph-font-weight: 400;
129
+ --amsterdam-paragraph-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
130
+ --amsterdam-paragraph-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
131
+ --amsterdam-paragraph-font-family: var(--amsterdam-typography-font-family);
132
+ --amsterdam-paragraph-color: var(--amsterdam-color-primary-black);
133
+ --amsterdam-link-on-background-light-visited-color: var(--amsterdam-color-primary-black);
134
+ --amsterdam-link-on-background-light-hover-color: var(--amsterdam-color-primary-black);
135
+ --amsterdam-link-on-background-light-focus-color: var(--amsterdam-color-primary-black);
136
+ --amsterdam-link-on-background-light-font-size: [object Object];
137
+ --amsterdam-link-on-background-light-active-color: var(--amsterdam-color-primary-black);
138
+ --amsterdam-link-on-background-light-color: var(--amsterdam-color-primary-black);
139
+ --amsterdam-link-on-background-dark-visited-color: var(--amsterdam-color-primary-white);
140
+ --amsterdam-link-on-background-dark-hover-color: var(--amsterdam-color-primary-white);
141
+ --amsterdam-link-on-background-dark-focus-color: var(--amsterdam-color-primary-white);
142
+ --amsterdam-link-on-background-dark-color: var(--amsterdam-color-primary-white);
143
+ --amsterdam-link-in-list-line-height: var(--amsterdam-typography-text-level-7-line-height);
144
+ --amsterdam-link-in-list-font-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
145
+ --amsterdam-link-in-list-font-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
146
+ --amsterdam-link-inline-visited-color: var(--amsterdam-color-purple);
147
+ --amsterdam-link-standalone-bold-font-weight: 800;
148
+ --amsterdam-link-visited-color: var(--amsterdam-color-primary-blue);
149
+ --amsterdam-link-line-height: var(--amsterdam-typography-text-level-6-line-height);
150
+ --amsterdam-link-hover-color: var(--amsterdam-color-dark-blue);
151
+ --amsterdam-link-focus-color: var(--amsterdam-color-dark-blue);
152
+ --amsterdam-link-font-weight: 400;
153
+ --amsterdam-link-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
154
+ --amsterdam-link-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
155
+ --amsterdam-link-font-family: var(--amsterdam-typography-font-family);
156
+ --amsterdam-link-outline-offset: var(--amsterdam-focus-outline-offset);
157
+ --amsterdam-link-color: var(--amsterdam-color-primary-blue);
158
+ --amsterdam-icon-size-7-container-multiplier: var(--amsterdam-typography-text-level-7-line-height);
159
+ --amsterdam-icon-size-7-icon-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
160
+ --amsterdam-icon-size-7-icon-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
161
+ --amsterdam-icon-size-6-container-multiplier: var(--amsterdam-typography-text-level-6-line-height);
162
+ --amsterdam-icon-size-6-icon-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
163
+ --amsterdam-icon-size-6-icon-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
164
+ --amsterdam-icon-size-5-container-multiplier: var(--amsterdam-typography-text-level-5-line-height);
165
+ --amsterdam-icon-size-5-icon-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
166
+ --amsterdam-icon-size-5-icon-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
167
+ --amsterdam-icon-size-4-container-multiplier: var(--amsterdam-typography-text-level-4-line-height);
168
+ --amsterdam-icon-size-4-icon-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
169
+ --amsterdam-icon-size-4-icon-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
170
+ --amsterdam-icon-size-3-container-multiplier: var(--amsterdam-typography-text-level-3-line-height);
171
+ --amsterdam-icon-size-3-icon-size-wide: var(--amsterdam-typography-text-level-3-font-size-wide);
172
+ --amsterdam-icon-size-3-icon-size-narrow: var(--amsterdam-typography-text-level-3-font-size-narrow);
173
+ --amsterdam-heading-font-weight: 800;
174
+ --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
175
+ --amsterdam-heading-color: var(--amsterdam-color-primary-black);
176
+ --amsterdam-heading-4-line-height: var(--amsterdam-typography-text-level-4-line-height);
177
+ --amsterdam-heading-4-font-size-wide: var(--amsterdam-typography-text-level-4-font-size-wide);
178
+ --amsterdam-heading-4-font-size-narrow: var(--amsterdam-typography-text-level-4-font-size-narrow);
179
+ --amsterdam-heading-3-line-height: var(--amsterdam-typography-text-level-3-line-height);
180
+ --amsterdam-heading-3-font-size-wide: var(--amsterdam-typography-text-level-3-font-size-wide);
181
+ --amsterdam-heading-3-font-size-narrow: var(--amsterdam-typography-text-level-3-font-size-narrow);
182
+ --amsterdam-heading-2-line-height: var(--amsterdam-typography-text-level-2-line-height);
183
+ --amsterdam-heading-2-font-size-wide: var(--amsterdam-typography-text-level-2-font-size-wide);
184
+ --amsterdam-heading-2-font-size-narrow: var(--amsterdam-typography-text-level-2-font-size-narrow);
185
+ --amsterdam-heading-1-line-height: var(--amsterdam-typography-text-level-1-line-height);
186
+ --amsterdam-heading-1-font-size-wide: var(--amsterdam-typography-text-level-1-font-size-wide);
187
+ --amsterdam-heading-1-font-size-narrow: var(--amsterdam-typography-text-level-1-font-size-narrow);
188
+ --amsterdam-form-label-line-height: var(--amsterdam-typography-text-level-7-line-height);
189
+ --amsterdam-form-label-font-weight: 800;
190
+ --amsterdam-form-label-font-size-wide: var(--amsterdam-typography-text-level-7-font-size-wide);
191
+ --amsterdam-form-label-font-size-narrow: var(--amsterdam-typography-text-level-7-font-size-narrow);
192
+ --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
193
+ --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
194
+ --amsterdam-button-secondary-hover-box-shadow: 0 0 0 1px var(--amsterdam-color-dark-blue);
195
+ --amsterdam-button-font-size-wide: var(--amsterdam-typography-text-level-6-font-size-wide);
196
+ --amsterdam-button-font-size-narrow: var(--amsterdam-typography-text-level-6-font-size-narrow);
197
+ --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
198
+ --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
199
+ --amsterdam-accordion-button-font-weight: 800;
200
+ --amsterdam-accordion-button-font-size-wide: var(--amsterdam-typography-text-level-5-font-size-wide);
201
+ --amsterdam-accordion-button-font-size-narrow: var(--amsterdam-typography-text-level-5-font-size-narrow);
202
+ --amsterdam-accordion-button-font-family: var(--amsterdam-typography-font-family);
203
+ --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
204
+ --amsterdam-accordion-button-color: var(--amsterdam-color-primary-blue);
24
205
  }