@nd-storybook/storybook 0.3.0

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 (29) hide show
  1. package/README.md +71 -0
  2. package/dist/css/badge.css +20 -0
  3. package/dist/css/button.css +0 -0
  4. package/dist/css/components/.DS_Store +0 -0
  5. package/dist/css/components/modal.css +133 -0
  6. package/dist/css/components/portal/accordion.css +39 -0
  7. package/dist/css/components/portal/accordionItem.css +102 -0
  8. package/dist/css/components/portal/alert.css +71 -0
  9. package/dist/css/components/portal/dataFrame.css +450 -0
  10. package/dist/css/components/portal/description-list.css +37 -0
  11. package/dist/css/components/portal/menuItem.css +93 -0
  12. package/dist/css/components/portal/navigationCard.css +86 -0
  13. package/dist/css/components/portal/portal-navigation.css +45 -0
  14. package/dist/css/components/portal/tabs.css +220 -0
  15. package/dist/css/experimental/collapsed-card.css +16 -0
  16. package/dist/css/molecules/form.css +28 -0
  17. package/dist/css/tailwind.css +21 -0
  18. package/dist/css/tokens.css +511 -0
  19. package/dist/css/typography.css +359 -0
  20. package/dist/index.cjs.js +107 -0
  21. package/dist/index.d.ts +396 -0
  22. package/dist/index.es.js +6369 -0
  23. package/dist/tailwind.config.js +96 -0
  24. package/dist/tailwind.tokens.js +452 -0
  25. package/dist/tokens.utilities.js +1042 -0
  26. package/package.json +83 -0
  27. package/tailwind.config.js +86 -0
  28. package/tailwind.tokens.js +252 -0
  29. package/tokens.utilities.js +870 -0
package/dist/tailwind.config.js ADDED
@@ -0,0 +1,96 @@
1
+ import {
2
+ primitiveColors,
3
+ semanticColors,
4
+ componentColors,
5
+ spacing,
6
+ fontFamilies,
7
+ fontWeights,
8
+ fontSizes,
9
+ lineHeights,
10
+ letterSpacings,
11
+ primitiveFontFamilies,
12
+ primitiveFontSizes,
13
+ primitiveFontWeights,
14
+ primitiveLetterSpacings, primitiveBorderRadius, primitiveBorderWidths, semanticBorderRadius,
15
+ primitiveBoxShadows
16
+ } from './tailwind.tokens.js';
17
+
18
+ import tokenUtilities from './tokens.utilities.js';
19
+
20
+ // No longer needed as we're using CSS classes directly
21
+
22
+ /** @type {import('tailwindcss').Config} */
23
+ export default {
24
+ content: [
25
+ "./index.html",
26
+ "./src/**/*.{vue,js,ts,jsx,tsx,stories.js}",
27
+ "./storybook/**/*.{mdx,vue,js,ts,jsx,tsx,stories.js}",
28
+ ],
29
+ darkMode: 'class',
30
+ theme: {
31
+ extend: {
32
+ colors: {
33
+ ...primitiveColors,
34
+ ...semanticColors,
35
+ ...componentColors
36
+ },
37
+
38
+ spacing: {
39
+ ...spacing,
40
+ // 'xs': 'var(--spacing-inset-spacing-inset-xs)',
41
+ // 's': 'var(--spacing-inset-spacing-inset-s)',
42
+ // 'm': 'var(--spacing-inset-spacing-inset-m)',
43
+ // 'l': 'var(--spacing-inset-spacing-inset-l)',
44
+ // 'xl': 'var(--spacing-inset-spacing-inset-xl)',
45
+ },
46
+
47
+ fontFamily: {
48
+ ...fontFamilies,
49
+ ...primitiveFontFamilies
50
+ },
51
+ fontWeight: {
52
+ ...fontWeights,
53
+ ...primitiveFontWeights
54
+ },
55
+ fontSize: {
56
+ ...fontSizes,
57
+ ...primitiveFontSizes,
58
+ 'heading-xs': 'var(--font-size-heading-xs)',
59
+ 'heading-s': 'var(--font-size-heading-s)',
60
+ 'heading-m': 'var(--font-size-heading-m)',
61
+ 'heading-l': 'var(--font-size-heading-l)',
62
+ 'heading-xl': 'var(--font-size-heading-xl)',
63
+ 'body-xs': 'var(--font-size-body-xs)',
64
+ 'body-s': 'var(--font-size-body-s)',
65
+ 'body-m': 'var(--font-size-body-m)',
66
+ 'body-l': 'var(--font-size-body-l)',
67
+ 'body-xl': 'var(--font-size-body-xl)',
68
+ 'body-xxl': 'var(--font-size-body-xxl)',
69
+ 'body-drop-cap': 'var(--font-size-body-drop-cap)',
70
+ 'meta': 'var(--font-size-meta)'
71
+ },
72
+ lineHeight: lineHeights,
73
+ letterSpacing: {
74
+ ...letterSpacings,
75
+ ...primitiveLetterSpacings,
76
+ '0': 'var(--typography-letter-spacing-0)',
77
+ 's': 'var(--typography-letter-spacing-s)',
78
+ 'm': 'var(--typography-letter-spacing-m)',
79
+ 'l': 'var(--typography-letter-spacing-l)'
80
+ },
81
+ borderWidth: {
82
+ ...primitiveBorderWidths
83
+ },
84
+ borderRadius: {
85
+ ...primitiveBorderRadius,
86
+ ...semanticBorderRadius,
87
+ },
88
+ boxShadow: {
89
+ ...primitiveBoxShadows
90
+ }
91
+ },
92
+ },
93
+ plugins: [
94
+ tokenUtilities
95
+ ],
96
+ }
package/dist/tailwind.tokens.js ADDED
@@ -0,0 +1,452 @@
1
+ // Generated from design tokens - DO NOT EDIT DIRECTLY
2
+ // Last generated: 2025-08-25T13:26:41.756Z
3
+
4
+ export const primitiveColors = {
5
+ "blue-400": "var(--color-blue-400)",
6
+ "blue-500": "var(--color-blue-500)",
7
+ "blue-900": "var(--color-blue-900)",
8
+ "blue-500-10": "var(--color-blue-500-10)",
9
+ "pink-200": "var(--color-pink-200)",
10
+ "pink-400": "var(--color-pink-400)",
11
+ "pink-600": "var(--color-pink-600)",
12
+ "pink-700": "var(--color-pink-700)",
13
+ "brown-500": "var(--color-brown-500)",
14
+ "brown-800": "var(--color-brown-800)",
15
+ "brown-900": "var(--color-brown-900)",
16
+ "neutral-100": "var(--color-neutral-100)",
17
+ "neutral-200": "var(--color-neutral-200)",
18
+ "neutral-300": "var(--color-neutral-300)",
19
+ "neutral-400": "var(--color-neutral-400)",
20
+ "neutral-500": "var(--color-neutral-500)",
21
+ "neutral-600": "var(--color-neutral-600)",
22
+ "neutral-700": "var(--color-neutral-700)",
23
+ "neutral-800": "var(--color-neutral-800)",
24
+ "neutral-900": "var(--color-neutral-900)",
25
+ "neutral-black": "var(--color-neutral-black)",
26
+ "neutral-black-10": "var(--color-neutral-black-10)",
27
+ "neutral-white": "var(--color-neutral-white)",
28
+ "neutral-white-30": "var(--color-neutral-white-30)"
29
+ };
30
+ export const semanticColors = {
31
+ "border-default": "var(--color-border-default)",
32
+ "border-brand": "var(--color-border-brand)",
33
+ "border-accent-gray": "var(--color-border-accent-gray)",
34
+ "border-accent-gray-subtle": "var(--color-border-accent-gray-subtle)",
35
+ "border-disabled": "var(--color-border-disabled)",
36
+ "border-warning": "var(--color-border-warning)",
37
+ "text-default": "var(--color-text-default)",
38
+ "text-subtle": "var(--color-text-subtle)",
39
+ "text-brand": "var(--color-text-brand)",
40
+ "text-brand-subtle": "var(--color-text-brand-subtle)",
41
+ "text-accent-brown": "var(--color-text-accent-brown)",
42
+ "text-accent-brown-subtle": "var(--color-text-accent-brown-subtle)",
43
+ "text-accent-pink": "var(--color-text-accent-pink)",
44
+ "text-disabled": "var(--color-text-disabled)",
45
+ "text-inverse": "var(--color-text-inverse)",
46
+ "text-warning": "var(--color-text-warning)",
47
+ "text-warning-inverse": "var(--color-text-warning-inverse)",
48
+ "background-default": "var(--color-background-default)",
49
+ "background-dark": "var(--color-background-dark)",
50
+ "background-dark-subtle": "var(--color-background-dark-subtle)",
51
+ "background-brand": "var(--color-background-brand)",
52
+ "background-brand-subtle": "var(--color-background-brand-subtle)",
53
+ "background-brand-subtlest": "var(--color-background-brand-subtlest)",
54
+ "background-accent-gray": "var(--color-background-accent-gray)",
55
+ "background-accent-gray-subtle": "var(--color-background-accent-gray-subtle)",
56
+ "background-accent-brown": "var(--color-background-accent-brown)",
57
+ "background-accent-pink": "var(--color-background-accent-pink)",
58
+ "background-accent-pink-subtle": "var(--color-background-accent-pink-subtle)",
59
+ "background-accent-pink-subtlest": "var(--color-background-accent-pink-subtlest)",
60
+ "background-disabled": "var(--color-background-disabled)",
61
+ "icons-default": "var(--color-icons-default)",
62
+ "icons-gray": "var(--color-icons-gray)",
63
+ "icons-brand": "var(--color-icons-brand)",
64
+ "icons-warning": "var(--color-icons-warning)",
65
+ "icons-inverse": "var(--color-icons-inverse)",
66
+ "shadow-default": "var(--color-shadow-default)"
67
+ };
68
+ export const componentColors = {
69
+ "form-background-input-field": "var(--color-form-background-input-field-default)",
70
+ "form-background-checkbox": "var(--color-form-background-checkbox-default)",
71
+ "form-border-input-field": "var(--color-form-border-input-field-default)",
72
+ "form-border-checkbox": "var(--color-form-border-checkbox-default)",
73
+ "button-background-primary": "var(--color-button-background-primary-default)",
74
+ "button-background-dark": "var(--color-button-background-dark-default)",
75
+ "button-background-secondary": "var(--color-button-background-secondary-default)",
76
+ "button-background-pill": "var(--color-button-background-pill-default)",
77
+ "button-border-secondary": "var(--color-button-border-secondary-default)",
78
+ "button-border-pill": "var(--color-button-border-pill-default)",
79
+ "button-icon-primary": "var(--color-button-icon-primary-default)",
80
+ "button-icon-secondary": "var(--color-button-icon-secondary-default)",
81
+ "button-icon-pill": "var(--color-button-icon-pill-default)",
82
+ "button-text-primary": "var(--color-button-text-primary-default)",
83
+ "button-text-dark": "var(--color-button-text-dark-default)",
84
+ "button-text-secondary": "var(--color-button-text-secondary-default)",
85
+ "button-text-ghost": "var(--color-button-text-ghost-default)",
86
+ "button-text-pill": "var(--color-button-text-pill-default)",
87
+ "link-text-default": "var(--color-link-text-default-default)",
88
+ "link-text-brown": "var(--color-link-text-brown-default)",
89
+ "form-background-input-field-hover": "var(--color-form-background-input-field-hover)",
90
+ "form-background-checkbox-hover": "var(--color-form-background-checkbox-hover)",
91
+ "form-border-input-field-hover": "var(--color-form-border-input-field-hover)",
92
+ "form-border-checkbox-hover": "var(--color-form-border-checkbox-hover)",
93
+ "button-background-primary-hover": "var(--color-button-background-primary-hover)",
94
+ "button-background-dark-hover": "var(--color-button-background-dark-hover)",
95
+ "button-background-secondary-hover": "var(--color-button-background-secondary-hover)",
96
+ "button-background-pill-hover": "var(--color-button-background-pill-hover)",
97
+ "button-border-secondary-hover": "var(--color-button-border-secondary-hover)",
98
+ "button-border-pill-hover": "var(--color-button-border-pill-hover)",
99
+ "button-icon-primary-hover": "var(--color-button-icon-primary-hover)",
100
+ "button-icon-secondary-hover": "var(--color-button-icon-secondary-hover)",
101
+ "button-icon-pill-hover": "var(--color-button-icon-pill-hover)",
102
+ "button-text-primary-hover": "var(--color-button-text-primary-hover)",
103
+ "button-text-dark-hover": "var(--color-button-text-dark-hover)",
104
+ "button-text-secondary-hover": "var(--color-button-text-secondary-hover)",
105
+ "button-text-ghost-hover": "var(--color-button-text-ghost-hover)",
106
+ "button-text-pill-hover": "var(--color-button-text-pill-hover)",
107
+ "link-text-default-hover": "var(--color-link-text-default-hover)",
108
+ "link-text-brown-hover": "var(--color-link-text-brown-hover)",
109
+ "form-background-input-field-active": "var(--color-form-background-input-field-active)",
110
+ "form-background-checkbox-active": "var(--color-form-background-checkbox-active)",
111
+ "form-border-input-field-active": "var(--color-form-border-input-field-active)",
112
+ "form-border-checkbox-active": "var(--color-form-border-checkbox-active)",
113
+ "button-background-primary-active": "var(--color-button-background-primary-active)",
114
+ "button-background-dark-active": "var(--color-button-background-dark-active)",
115
+ "button-background-secondary-active": "var(--color-button-background-secondary-active)",
116
+ "button-background-pill-active": "var(--color-button-background-pill-active)",
117
+ "button-border-secondary-active": "var(--color-button-border-secondary-active)",
118
+ "button-border-pill-active": "var(--color-button-border-pill-active)",
119
+ "button-icon-primary-active": "var(--color-button-icon-primary-active)",
120
+ "button-icon-secondary-active": "var(--color-button-icon-secondary-active)",
121
+ "button-icon-pill-active": "var(--color-button-icon-pill-active)",
122
+ "button-text-primary-active": "var(--color-button-text-primary-active)",
123
+ "button-text-dark-active": "var(--color-button-text-dark-active)",
124
+ "button-text-secondary-active": "var(--color-button-text-secondary-active)",
125
+ "button-text-ghost-active": "var(--color-button-text-ghost-active)",
126
+ "button-text-pill-active": "var(--color-button-text-pill-active)",
127
+ "link-text-default-active": "var(--color-link-text-default-active)",
128
+ "link-text-brown-active": "var(--color-link-text-brown-active)",
129
+ "form-background-input-field-disabled": "var(--color-form-background-input-field-disabled)",
130
+ "form-background-checkbox-disabled": "var(--color-form-background-checkbox-disabled)",
131
+ "form-border-input-field-disabled": "var(--color-form-border-input-field-disabled)",
132
+ "form-border-checkbox-disabled": "var(--color-form-border-checkbox-disabled)",
133
+ "button-background-primary-disabled": "var(--color-button-background-primary-disabled)",
134
+ "button-background-dark-disabled": "var(--color-button-background-dark-disabled)",
135
+ "button-background-secondary-disabled": "var(--color-button-background-secondary-disabled)",
136
+ "button-background-pill-disabled": "var(--color-button-background-pill-disabled)",
137
+ "button-border-secondary-disabled": "var(--color-button-border-secondary-disabled)",
138
+ "button-border-pill-disabled": "var(--color-button-border-pill-disabled)",
139
+ "button-icon-primary-disabled": "var(--color-button-icon-primary-disabled)",
140
+ "button-icon-secondary-disabled": "var(--color-button-icon-secondary-disabled)",
141
+ "button-icon-pill-disabled": "var(--color-button-icon-pill-disabled)",
142
+ "button-text-primary-disabled": "var(--color-button-text-primary-disabled)",
143
+ "button-text-dark-disabled": "var(--color-button-text-dark-disabled)",
144
+ "button-text-secondary-disabled": "var(--color-button-text-secondary-disabled)",
145
+ "button-text-ghost-disabled": "var(--color-button-text-ghost-disabled)",
146
+ "button-text-pill-disabled": "var(--color-button-text-pill-disabled)",
147
+ "link-text-default-disabled": "var(--color-link-text-default-disabled)",
148
+ "link-text-brown-disabled": "var(--color-link-text-brown-disabled)"
149
+ };
150
+ export const spacing = {
151
+ "0": "var(--spacing-0)",
152
+ "spacing-layout-breakpoints": "var(--spacing-layout-breakpoints)",
153
+ "spacing-layout-columns": "var(--spacing-layout-columns)",
154
+ "spacing-layout-padding": "var(--spacing-layout-padding)",
155
+ "spacing-layout-gutter": "var(--spacing-layout-gutter)",
156
+ "xxs": "var(--spacing-xxs)",
157
+ "xs": "var(--spacing-xs)",
158
+ "s": "var(--spacing-s)",
159
+ "m": "var(--spacing-m)",
160
+ "l": "var(--spacing-l)",
161
+ "xl": "var(--spacing-xl)",
162
+ "xxl": "var(--spacing-xxl)"
163
+ };
164
+ export const typographyStyles = {
165
+ "article-heading": "var(--article-heading)",
166
+ "article-heading-light": "var(--article-heading-light)",
167
+ "article-heading-alternate": "var(--article-heading-alternate)",
168
+ "article-heading-2": "var(--article-heading-2)",
169
+ "article-heading-2-light": "var(--article-heading-2-light)",
170
+ "article-heading-2-alternate": "var(--article-heading-2-alternate)",
171
+ "article-body": "var(--article-body)",
172
+ "article-type": "var(--article-type)",
173
+ "article-intro": "var(--article-intro)",
174
+ "article-city": "var(--article-city)",
175
+ "article-quote": "var(--article-quote)",
176
+ "article-question": "var(--article-question)",
177
+ "article-drop-cap": "var(--article-drop-cap)",
178
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate)",
179
+ "body-light": "var(--body-light)",
180
+ "body-regular": "var(--body-regular)",
181
+ "body-bold": "var(--body-bold)",
182
+ "body-uppercase": "var(--body-uppercase)",
183
+ "body-uppercase-bold": "var(--body-uppercase-bold)",
184
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small)",
185
+ "heading-2": "var(--heading-2)",
186
+ "heading-3": "var(--heading-3)",
187
+ "heading-page": "var(--heading-page)",
188
+ "heading-subheading": "var(--heading-subheading)",
189
+ "heading-uppercase": "var(--heading-uppercase)",
190
+ "meta-light": "var(--meta-light)",
191
+ "meta-regular": "var(--meta-regular)",
192
+ "meta-bold": "var(--meta-bold)",
193
+ "menu-menu-primary": "var(--menu-menu-primary)",
194
+ "menu-menu-secondary": "var(--menu-menu-secondary)",
195
+ "menu-menu-submenu": "var(--menu-menu-submenu)",
196
+ "menu-menu-tabbar": "var(--menu-menu-tabbar)",
197
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active)",
198
+ "menu-menu-tab-item": "var(--menu-menu-tab-item)",
199
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active)",
200
+ "mijn-nd-heading": "var(--mijn-nd-heading)",
201
+ "mijn-nd-description": "var(--mijn-nd-description)"
202
+ };
203
+ export const fontFamilies = {
204
+ "article-heading": "var(--article-heading-fontFamily)",
205
+ "article-heading-light": "var(--article-heading-light-fontFamily)",
206
+ "article-heading-alternate": "var(--article-heading-alternate-fontFamily)",
207
+ "article-heading-2": "var(--article-heading-2-fontFamily)",
208
+ "article-heading-2-light": "var(--article-heading-2-light-fontFamily)",
209
+ "article-heading-2-alternate": "var(--article-heading-2-alternate-fontFamily)",
210
+ "article-body": "var(--article-body-fontFamily)",
211
+ "article-type": "var(--article-type-fontFamily)",
212
+ "article-intro": "var(--article-intro-fontFamily)",
213
+ "article-city": "var(--article-city-fontFamily)",
214
+ "article-quote": "var(--article-quote-fontFamily)",
215
+ "article-question": "var(--article-question-fontFamily)",
216
+ "article-drop-cap": "var(--article-drop-cap-fontFamily)",
217
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate-fontFamily)",
218
+ "body-light": "var(--body-light-fontFamily)",
219
+ "body-regular": "var(--body-regular-fontFamily)",
220
+ "body-bold": "var(--body-bold-fontFamily)",
221
+ "body-uppercase": "var(--body-uppercase-fontFamily)",
222
+ "body-uppercase-bold": "var(--body-uppercase-bold-fontFamily)",
223
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small-fontFamily)",
224
+ "heading-2": "var(--heading-2-fontFamily)",
225
+ "heading-3": "var(--heading-3-fontFamily)",
226
+ "heading-page": "var(--heading-page-fontFamily)",
227
+ "heading-subheading": "var(--heading-subheading-fontFamily)",
228
+ "heading-uppercase": "var(--heading-uppercase-fontFamily)",
229
+ "meta-light": "var(--meta-light-fontFamily)",
230
+ "meta-regular": "var(--meta-regular-fontFamily)",
231
+ "meta-bold": "var(--meta-bold-fontFamily)",
232
+ "menu-menu-primary": "var(--menu-menu-primary-fontFamily)",
233
+ "menu-menu-secondary": "var(--menu-menu-secondary-fontFamily)",
234
+ "menu-menu-submenu": "var(--menu-menu-submenu-fontFamily)",
235
+ "menu-menu-tabbar": "var(--menu-menu-tabbar-fontFamily)",
236
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active-fontFamily)",
237
+ "menu-menu-tab-item": "var(--menu-menu-tab-item-fontFamily)",
238
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active-fontFamily)",
239
+ "mijn-nd-heading": "var(--mijn-nd-heading-fontFamily)",
240
+ "mijn-nd-description": "var(--mijn-nd-description-fontFamily)"
241
+ };
242
+ export const fontWeights = {
243
+ "article-heading": "var(--article-heading-fontWeight)",
244
+ "article-heading-light": "var(--article-heading-light-fontWeight)",
245
+ "article-heading-alternate": "var(--article-heading-alternate-fontWeight)",
246
+ "article-heading-2": "var(--article-heading-2-fontWeight)",
247
+ "article-heading-2-light": "var(--article-heading-2-light-fontWeight)",
248
+ "article-heading-2-alternate": "var(--article-heading-2-alternate-fontWeight)",
249
+ "article-body": "var(--article-body-fontWeight)",
250
+ "article-type": "var(--article-type-fontWeight)",
251
+ "article-intro": "var(--article-intro-fontWeight)",
252
+ "article-city": "var(--article-city-fontWeight)",
253
+ "article-quote": "var(--article-quote-fontWeight)",
254
+ "article-question": "var(--article-question-fontWeight)",
255
+ "article-drop-cap": "var(--article-drop-cap-fontWeight)",
256
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate-fontWeight)",
257
+ "body-light": "var(--body-light-fontWeight)",
258
+ "body-regular": "var(--body-regular-fontWeight)",
259
+ "body-bold": "var(--body-bold-fontWeight)",
260
+ "body-uppercase": "var(--body-uppercase-fontWeight)",
261
+ "body-uppercase-bold": "var(--body-uppercase-bold-fontWeight)",
262
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small-fontWeight)",
263
+ "heading-2": "var(--heading-2-fontWeight)",
264
+ "heading-3": "var(--heading-3-fontWeight)",
265
+ "heading-page": "var(--heading-page-fontWeight)",
266
+ "heading-subheading": "var(--heading-subheading-fontWeight)",
267
+ "heading-uppercase": "var(--heading-uppercase-fontWeight)",
268
+ "meta-light": "var(--meta-light-fontWeight)",
269
+ "meta-regular": "var(--meta-regular-fontWeight)",
270
+ "meta-bold": "var(--meta-bold-fontWeight)",
271
+ "menu-menu-primary": "var(--menu-menu-primary-fontWeight)",
272
+ "menu-menu-secondary": "var(--menu-menu-secondary-fontWeight)",
273
+ "menu-menu-submenu": "var(--menu-menu-submenu-fontWeight)",
274
+ "menu-menu-tabbar": "var(--menu-menu-tabbar-fontWeight)",
275
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active-fontWeight)",
276
+ "menu-menu-tab-item": "var(--menu-menu-tab-item-fontWeight)",
277
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active-fontWeight)",
278
+ "mijn-nd-heading": "var(--mijn-nd-heading-fontWeight)",
279
+ "mijn-nd-description": "var(--mijn-nd-description-fontWeight)"
280
+ };
281
+ export const fontSizes = {
282
+ "article-heading": "var(--article-heading-fontSize)",
283
+ "article-heading-light": "var(--article-heading-light-fontSize)",
284
+ "article-heading-alternate": "var(--article-heading-alternate-fontSize)",
285
+ "article-heading-2": "var(--article-heading-2-fontSize)",
286
+ "article-heading-2-light": "var(--article-heading-2-light-fontSize)",
287
+ "article-heading-2-alternate": "var(--article-heading-2-alternate-fontSize)",
288
+ "article-body": "var(--article-body-fontSize)",
289
+ "article-type": "var(--article-type-fontSize)",
290
+ "article-intro": "var(--article-intro-fontSize)",
291
+ "article-city": "var(--article-city-fontSize)",
292
+ "article-quote": "var(--article-quote-fontSize)",
293
+ "article-question": "var(--article-question-fontSize)",
294
+ "article-drop-cap": "var(--article-drop-cap-fontSize)",
295
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate-fontSize)",
296
+ "body-light": "var(--body-light-fontSize)",
297
+ "body-regular": "var(--body-regular-fontSize)",
298
+ "body-bold": "var(--body-bold-fontSize)",
299
+ "body-uppercase": "var(--body-uppercase-fontSize)",
300
+ "body-uppercase-bold": "var(--body-uppercase-bold-fontSize)",
301
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small-fontSize)",
302
+ "heading-2": "var(--heading-2-fontSize)",
303
+ "heading-3": "var(--heading-3-fontSize)",
304
+ "heading-page": "var(--heading-page-fontSize)",
305
+ "heading-subheading": "var(--heading-subheading-fontSize)",
306
+ "heading-uppercase": "var(--heading-uppercase-fontSize)",
307
+ "meta-light": "var(--meta-light-fontSize)",
308
+ "meta-regular": "var(--meta-regular-fontSize)",
309
+ "meta-bold": "var(--meta-bold-fontSize)",
310
+ "menu-menu-primary": "var(--menu-menu-primary-fontSize)",
311
+ "menu-menu-secondary": "var(--menu-menu-secondary-fontSize)",
312
+ "menu-menu-submenu": "var(--menu-menu-submenu-fontSize)",
313
+ "menu-menu-tabbar": "var(--menu-menu-tabbar-fontSize)",
314
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active-fontSize)",
315
+ "menu-menu-tab-item": "var(--menu-menu-tab-item-fontSize)",
316
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active-fontSize)",
317
+ "mijn-nd-heading": "var(--mijn-nd-heading-fontSize)",
318
+ "mijn-nd-description": "var(--mijn-nd-description-fontSize)"
319
+ };
320
+ export const lineHeights = {
321
+ "article-heading": "var(--article-heading-lineHeight)",
322
+ "article-heading-light": "var(--article-heading-light-lineHeight)",
323
+ "article-heading-alternate": "var(--article-heading-alternate-lineHeight)",
324
+ "article-heading-2": "var(--article-heading-2-lineHeight)",
325
+ "article-heading-2-light": "var(--article-heading-2-light-lineHeight)",
326
+ "article-heading-2-alternate": "var(--article-heading-2-alternate-lineHeight)",
327
+ "article-body": "var(--article-body-lineHeight)",
328
+ "article-type": "var(--article-type-lineHeight)",
329
+ "article-intro": "var(--article-intro-lineHeight)",
330
+ "article-city": "var(--article-city-lineHeight)",
331
+ "article-quote": "var(--article-quote-lineHeight)",
332
+ "article-question": "var(--article-question-lineHeight)",
333
+ "article-drop-cap": "var(--article-drop-cap-lineHeight)",
334
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate-lineHeight)",
335
+ "body-light": "var(--body-light-lineHeight)",
336
+ "body-regular": "var(--body-regular-lineHeight)",
337
+ "body-bold": "var(--body-bold-lineHeight)",
338
+ "body-uppercase": "var(--body-uppercase-lineHeight)",
339
+ "body-uppercase-bold": "var(--body-uppercase-bold-lineHeight)",
340
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small-lineHeight)",
341
+ "heading-2": "var(--heading-2-lineHeight)",
342
+ "heading-3": "var(--heading-3-lineHeight)",
343
+ "heading-page": "var(--heading-page-lineHeight)",
344
+ "heading-subheading": "var(--heading-subheading-lineHeight)",
345
+ "heading-uppercase": "var(--heading-uppercase-lineHeight)",
346
+ "meta-light": "var(--meta-light-lineHeight)",
347
+ "meta-regular": "var(--meta-regular-lineHeight)",
348
+ "meta-bold": "var(--meta-bold-lineHeight)",
349
+ "menu-menu-primary": "var(--menu-menu-primary-lineHeight)",
350
+ "menu-menu-secondary": "var(--menu-menu-secondary-lineHeight)",
351
+ "menu-menu-submenu": "var(--menu-menu-submenu-lineHeight)",
352
+ "menu-menu-tabbar": "var(--menu-menu-tabbar-lineHeight)",
353
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active-lineHeight)",
354
+ "menu-menu-tab-item": "var(--menu-menu-tab-item-lineHeight)",
355
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active-lineHeight)",
356
+ "mijn-nd-heading": "var(--mijn-nd-heading-lineHeight)",
357
+ "mijn-nd-description": "var(--mijn-nd-description-lineHeight)"
358
+ };
359
+ export const letterSpacings = {
360
+ "article-heading": "var(--article-heading-letterSpacing)",
361
+ "article-heading-light": "var(--article-heading-light-letterSpacing)",
362
+ "article-heading-alternate": "var(--article-heading-alternate-letterSpacing)",
363
+ "article-heading-2": "var(--article-heading-2-letterSpacing)",
364
+ "article-heading-2-light": "var(--article-heading-2-light-letterSpacing)",
365
+ "article-heading-2-alternate": "var(--article-heading-2-alternate-letterSpacing)",
366
+ "article-body": "var(--article-body-letterSpacing)",
367
+ "article-type": "var(--article-type-letterSpacing)",
368
+ "article-intro": "var(--article-intro-letterSpacing)",
369
+ "article-city": "var(--article-city-letterSpacing)",
370
+ "article-quote": "var(--article-quote-letterSpacing)",
371
+ "article-question": "var(--article-question-letterSpacing)",
372
+ "article-drop-cap": "var(--article-drop-cap-letterSpacing)",
373
+ "article-drop-cap-alternate": "var(--article-drop-cap-alternate-letterSpacing)",
374
+ "body-light": "var(--body-light-letterSpacing)",
375
+ "body-regular": "var(--body-regular-letterSpacing)",
376
+ "body-bold": "var(--body-bold-letterSpacing)",
377
+ "body-uppercase": "var(--body-uppercase-letterSpacing)",
378
+ "body-uppercase-bold": "var(--body-uppercase-bold-letterSpacing)",
379
+ "body-uppercase-bold-small": "var(--body-uppercase-bold-small-letterSpacing)",
380
+ "heading-2": "var(--heading-2-letterSpacing)",
381
+ "heading-3": "var(--heading-3-letterSpacing)",
382
+ "heading-page": "var(--heading-page-letterSpacing)",
383
+ "heading-subheading": "var(--heading-subheading-letterSpacing)",
384
+ "heading-uppercase": "var(--heading-uppercase-letterSpacing)",
385
+ "meta-light": "var(--meta-light-letterSpacing)",
386
+ "meta-regular": "var(--meta-regular-letterSpacing)",
387
+ "meta-bold": "var(--meta-bold-letterSpacing)",
388
+ "menu-menu-primary": "var(--menu-menu-primary-letterSpacing)",
389
+ "menu-menu-secondary": "var(--menu-menu-secondary-letterSpacing)",
390
+ "menu-menu-submenu": "var(--menu-menu-submenu-letterSpacing)",
391
+ "menu-menu-tabbar": "var(--menu-menu-tabbar-letterSpacing)",
392
+ "menu-menu-tabbar-active": "var(--menu-menu-tabbar-active-letterSpacing)",
393
+ "menu-menu-tab-item": "var(--menu-menu-tab-item-letterSpacing)",
394
+ "menu-menu-tab-item-active": "var(--menu-menu-tab-item-active-letterSpacing)",
395
+ "mijn-nd-heading": "var(--mijn-nd-heading-letterSpacing)",
396
+ "mijn-nd-description": "var(--mijn-nd-description-letterSpacing)"
397
+ };
398
+ export const primitiveFontFamilies = {
399
+ "gulliver": "var(--font-family-gulliver)",
400
+ "fira-sans": "var(--font-family-fira-sans)",
401
+ "montserrat": "var(--font-family-montserrat)",
402
+ "abril-fatface": "var(--font-family-abril-fatface)",
403
+ "gulliver-semibold": "var(--font-family-gulliver-semibold)"
404
+ };
405
+ export const primitiveFontSizes = {
406
+ "12": "var(--font-size-12)",
407
+ "14": "var(--font-size-14)",
408
+ "15": "var(--font-size-15)",
409
+ "16": "var(--font-size-16)",
410
+ "17": "var(--font-size-17)",
411
+ "18": "var(--font-size-18)",
412
+ "20": "var(--font-size-20)",
413
+ "22": "var(--font-size-22)",
414
+ "24": "var(--font-size-24)",
415
+ "26": "var(--font-size-26)",
416
+ "28": "var(--font-size-28)",
417
+ "30": "var(--font-size-30)",
418
+ "32": "var(--font-size-32)",
419
+ "36": "var(--font-size-36)",
420
+ "40": "var(--font-size-40)",
421
+ "48": "var(--font-size-48)",
422
+ "88": "var(--font-size-88)",
423
+ "96": "var(--font-size-96)"
424
+ };
425
+ export const primitiveFontWeights = {
426
+ "bold": "var(--font-weight-bold)",
427
+ "semibold": "var(--font-weight-semibold)",
428
+ "regular": "var(--font-weight-regular)",
429
+ "light": "var(--font-weight-light)"
430
+ };
431
+ export const primitiveLetterSpacings = {
432
+ "0": "var(--letter-spacing-0)",
433
+ "s": "var(--letter-spacing-s)",
434
+ "m": "var(--letter-spacing-m)",
435
+ "l": "var(--letter-spacing-l)"
436
+ };
437
+ export const primitiveBorderWidths = {
438
+ "0": "var(--border-width-0)",
439
+ "s": "var(--border-width-s)"
440
+ };
441
+ export const primitiveBorderRadius = {
442
+ "0": "var(--border-radius-0)",
443
+ "xl": "var(--border-radius-xl)"
444
+ };
445
+ export const semanticBorderRadius = {
446
+ "pill": "var(--border-radius-pill)"
447
+ };
448
+ export const primitiveBoxShadows = {
449
+ "s": "var(--box-shadow-s)",
450
+ "m": "var(--box-shadow-m)",
451
+ "l": "var(--box-shadow-l)"
452
+ };