@amsterdam/design-system-tokens 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,8 +18,544 @@
18
18
  "neutral-grey3": "#767676",
19
19
  "neutral-grey4": "#323232"
20
20
  },
21
+ "typography": {
22
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
23
+ "font-weight": {
24
+ "normal": 400,
25
+ "bold": 800
26
+ },
27
+ "text-level": {
28
+ "0": {
29
+ "font-size": {
30
+ "narrow": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)",
31
+ "wide": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)"
32
+ },
33
+ "line-height": "1.1"
34
+ },
35
+ "1": {
36
+ "font-size": {
37
+ "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
38
+ "wide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
39
+ },
40
+ "line-height": "1.2"
41
+ },
42
+ "2": {
43
+ "font-size": {
44
+ "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
45
+ "wide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
46
+ },
47
+ "line-height": "1.3"
48
+ },
49
+ "3": {
50
+ "font-size": {
51
+ "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
52
+ "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
53
+ },
54
+ "line-height": "1.4"
55
+ },
56
+ "4": {
57
+ "font-size": {
58
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
59
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
60
+ },
61
+ "line-height": "1.5"
62
+ },
63
+ "5": {
64
+ "font-size": {
65
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
66
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
67
+ },
68
+ "line-height": "1.4"
69
+ },
70
+ "6": {
71
+ "font-size": {
72
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
73
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
74
+ },
75
+ "line-height": "1.6"
76
+ },
77
+ "7": {
78
+ "font-size": {
79
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
80
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
81
+ },
82
+ "line-height": "1.6"
83
+ }
84
+ }
85
+ },
86
+ "border-width": {
87
+ "sm": "1px",
88
+ "md": "2px",
89
+ "lg": "3px"
90
+ },
21
91
  "focus": {
22
92
  "outline-offset": "2px"
93
+ },
94
+ "spacing": {
95
+ "inset": {
96
+ "sm": "0.5rem",
97
+ "md": "1rem",
98
+ "lg": "1.5rem",
99
+ "xl": "2.5rem"
100
+ }
101
+ },
102
+ "button": {
103
+ "font-size": {
104
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
105
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
106
+ },
107
+ "secondary": {
108
+ "hover": {
109
+ "box-shadow": "0 0 0 1px #00387A"
110
+ }
111
+ }
112
+ },
113
+ "form-label": {
114
+ "color": "#000000",
115
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
116
+ "font-size": {
117
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
118
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
119
+ },
120
+ "font-weight": 800,
121
+ "line-height": "1.6"
122
+ },
123
+ "heading": {
124
+ "1": {
125
+ "font-size": {
126
+ "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
127
+ "wide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
128
+ },
129
+ "line-height": "1.2"
130
+ },
131
+ "2": {
132
+ "font-size": {
133
+ "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
134
+ "wide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
135
+ },
136
+ "line-height": "1.3"
137
+ },
138
+ "3": {
139
+ "font-size": {
140
+ "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
141
+ "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
142
+ },
143
+ "line-height": "1.4"
144
+ },
145
+ "4": {
146
+ "font-size": {
147
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
148
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
149
+ },
150
+ "line-height": "1.4"
151
+ },
152
+ "color": "#000000",
153
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
154
+ "font-weight": 800
155
+ },
156
+ "icon": {
157
+ "size-3": {
158
+ "icon-size": {
159
+ "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
160
+ "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
161
+ },
162
+ "container-multiplier": "1.4"
163
+ },
164
+ "size-4": {
165
+ "icon-size": {
166
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
167
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
168
+ },
169
+ "container-multiplier": "1.5"
170
+ },
171
+ "size-5": {
172
+ "icon-size": {
173
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
174
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
175
+ },
176
+ "container-multiplier": "1.4"
177
+ },
178
+ "size-6": {
179
+ "icon-size": {
180
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
181
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
182
+ },
183
+ "container-multiplier": "1.6"
184
+ },
185
+ "size-7": {
186
+ "icon-size": {
187
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
188
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
189
+ },
190
+ "container-multiplier": "1.6"
191
+ }
192
+ },
193
+ "link": {
194
+ "color": "#004699",
195
+ "outline-offset": "2px",
196
+ "text-decoration": "none",
197
+ "text-underline-offset": "9px",
198
+ "text-decoration-thickness": "2px",
199
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
200
+ "font-size": {
201
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
202
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
203
+ },
204
+ "font-weight": 400,
205
+ "focus": {
206
+ "color": "#00387A",
207
+ "text-decoration": "underline"
208
+ },
209
+ "hover": {
210
+ "color": "#00387A",
211
+ "text-decoration": "underline",
212
+ "text-decoration-thickness": "2px"
213
+ },
214
+ "line-height": "1.6",
215
+ "visited": {
216
+ "color": "#004699"
217
+ },
218
+ "standalone-bold": {
219
+ "font-weight": 800
220
+ },
221
+ "inline": {
222
+ "text-underline-offset": "3px",
223
+ "font-family": "inherit",
224
+ "font-size": "inherit",
225
+ "visited": {
226
+ "color": "#A00078"
227
+ }
228
+ },
229
+ "in-list": {
230
+ "gap": "0.5em",
231
+ "text-underline-offset": "0.3em",
232
+ "font-size": {
233
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
234
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
235
+ },
236
+ "line-height": "1.6"
237
+ },
238
+ "on-background-dark": {
239
+ "color": "#ffffff",
240
+ "text-decoration": "underline",
241
+ "focus": {
242
+ "color": "#ffffff",
243
+ "text-decoration": "underline"
244
+ },
245
+ "hover": {
246
+ "color": "#ffffff",
247
+ "text-decoration": "none"
248
+ },
249
+ "visited": {
250
+ "color": "#ffffff"
251
+ }
252
+ },
253
+ "on-background-light": {
254
+ "color": "#000000",
255
+ "text-decoration": "underline",
256
+ "text-decoration-thickness": "2px",
257
+ "text-underline-offset": "9px",
258
+ "active": {
259
+ "color": "#000000"
260
+ },
261
+ "font-size": {
262
+ "narrow": {
263
+ "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
264
+ "filePath": "./src/brand/amsterdam/typography.tokens.json",
265
+ "isSource": true,
266
+ "original": {
267
+ "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
268
+ },
269
+ "name": "amsterdamTypographyTextLevel6FontSizeNarrow",
270
+ "attributes": {
271
+ "category": "amsterdam",
272
+ "type": "typography",
273
+ "item": "text-level",
274
+ "subitem": "6",
275
+ "state": "font-size"
276
+ },
277
+ "path": [
278
+ "amsterdam",
279
+ "typography",
280
+ "text-level",
281
+ "6",
282
+ "font-size",
283
+ "narrow"
284
+ ]
285
+ },
286
+ "wide": {
287
+ "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
288
+ "filePath": "./src/brand/amsterdam/typography.tokens.json",
289
+ "isSource": true,
290
+ "original": {
291
+ "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
292
+ },
293
+ "name": "amsterdamTypographyTextLevel6FontSizeWide",
294
+ "attributes": {
295
+ "category": "amsterdam",
296
+ "type": "typography",
297
+ "item": "text-level",
298
+ "subitem": "6",
299
+ "state": "font-size"
300
+ },
301
+ "path": [
302
+ "amsterdam",
303
+ "typography",
304
+ "text-level",
305
+ "6",
306
+ "font-size",
307
+ "wide"
308
+ ]
309
+ }
310
+ },
311
+ "focus": {
312
+ "color": "#000000",
313
+ "text-decoration": "underline"
314
+ },
315
+ "hover": {
316
+ "color": "#000000",
317
+ "text-decoration": "none"
318
+ },
319
+ "visited": {
320
+ "color": "#000000"
321
+ }
322
+ }
323
+ },
324
+ "paragraph": {
325
+ "color": "#000000",
326
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
327
+ "font-size": {
328
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
329
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
330
+ },
331
+ "font-weight": 400,
332
+ "line-height": "1.6",
333
+ "small": {
334
+ "font-size": {
335
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
336
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
337
+ },
338
+ "line-height": "1.6"
339
+ },
340
+ "large": {
341
+ "font-size": {
342
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
343
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
344
+ },
345
+ "line-height": "1.5"
346
+ }
347
+ }
348
+ },
349
+ "utrecht": {
350
+ "button": {
351
+ "background-color": "#004699",
352
+ "border-color": {},
353
+ "border-radius": {},
354
+ "border-width": {},
355
+ "color": "#ffffff",
356
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
357
+ "font-size": {},
358
+ "line-height": "1.6",
359
+ "padding-inline-start": "1rem",
360
+ "padding-inline-end": "1rem",
361
+ "padding-block-start": "0.5rem",
362
+ "padding-block-end": "0.5rem",
363
+ "margin-inline-start": {},
364
+ "margin-inline-end": {},
365
+ "margin-block-start": {},
366
+ "margin-block-end": {},
367
+ "icon": {
368
+ "gap": {}
369
+ },
370
+ "disabled": {
371
+ "background-color": "#B4B4B4",
372
+ "color": "#ffffff",
373
+ "border-color": "transparent"
374
+ },
375
+ "hover": {
376
+ "background-color": "#00387A"
377
+ },
378
+ "focus": {
379
+ "scale": {}
380
+ },
381
+ "primary-action": {
382
+ "background-color": "#004699",
383
+ "border-color": {},
384
+ "border-width": {},
385
+ "color": "#ffffff",
386
+ "disabled": {
387
+ "background-color": "#B4B4B4",
388
+ "color": {},
389
+ "border-color": {}
390
+ },
391
+ "hover": {
392
+ "background-color": "#00387A",
393
+ "border-color": {},
394
+ "color": {}
395
+ },
396
+ "focus": {
397
+ "background-color": {},
398
+ "border-color": {},
399
+ "border-width": {}
400
+ },
401
+ "ready": {
402
+ "background-color": {},
403
+ "border-color": {},
404
+ "color": {},
405
+ "disabled": {
406
+ "border-color": {}
407
+ },
408
+ "hover": {
409
+ "background-color": {},
410
+ "border-color": {},
411
+ "color": {}
412
+ },
413
+ "focus": {
414
+ "background-color": {},
415
+ "border-color": {}
416
+ }
417
+ },
418
+ "warning": {
419
+ "background-color": {},
420
+ "border-color": {},
421
+ "color": {},
422
+ "disabled": {
423
+ "border-color": {}
424
+ },
425
+ "hover": {
426
+ "background-color": {},
427
+ "border-color": {},
428
+ "color": {}
429
+ },
430
+ "focus": {
431
+ "background-color": {},
432
+ "border-color": {}
433
+ }
434
+ },
435
+ "danger": {
436
+ "background-color": {},
437
+ "border-color": {},
438
+ "color": {},
439
+ "disabled": {
440
+ "border-color": {}
441
+ },
442
+ "hover": {
443
+ "background-color": {},
444
+ "border-color": {},
445
+ "color": {}
446
+ },
447
+ "focus": {
448
+ "background-color": {},
449
+ "border-color": {}
450
+ }
451
+ }
452
+ },
453
+ "secondary-action": {
454
+ "background-color": "#ffffff",
455
+ "color": "#004699",
456
+ "border-color": "#004699",
457
+ "border-width": "2px",
458
+ "hover": {
459
+ "background-color": {},
460
+ "color": "#00387A",
461
+ "border-color": "#00387A"
462
+ },
463
+ "disabled": {
464
+ "background-color": "#ffffff",
465
+ "color": "#B4B4B4",
466
+ "border-color": "#B4B4B4"
467
+ },
468
+ "danger": {
469
+ "background-color": {},
470
+ "border-color": {},
471
+ "color": {},
472
+ "disabled": {
473
+ "border-color": {}
474
+ },
475
+ "hover": {
476
+ "background-color": {},
477
+ "border-color": {},
478
+ "color": {}
479
+ },
480
+ "focus": {
481
+ "background-color": {},
482
+ "border-color": {}
483
+ }
484
+ },
485
+ "warning": {
486
+ "background-color": {},
487
+ "border-color": {},
488
+ "color": {},
489
+ "disabled": {
490
+ "border-color": {}
491
+ },
492
+ "hover": {
493
+ "background-color": {},
494
+ "border-color": {},
495
+ "color": {}
496
+ },
497
+ "focus": {
498
+ "background-color": {},
499
+ "border-color": {}
500
+ }
501
+ },
502
+ "ready": {
503
+ "background-color": {},
504
+ "border-color": {},
505
+ "color": {},
506
+ "disabled": {
507
+ "border-color": {}
508
+ },
509
+ "hover": {
510
+ "background-color": {},
511
+ "border-color": {},
512
+ "color": {}
513
+ },
514
+ "focus": {
515
+ "background-color": {},
516
+ "border-color": {}
517
+ }
518
+ }
519
+ },
520
+ "subtle": {
521
+ "background-color": "transparent",
522
+ "border-color": {},
523
+ "border-width": "2px",
524
+ "color": "#004699",
525
+ "font-weight": {},
526
+ "hover": {
527
+ "background-color": {},
528
+ "color": {},
529
+ "border-color": "#767676"
530
+ },
531
+ "focus": {
532
+ "background-color": {},
533
+ "color": {},
534
+ "border-color": {}
535
+ },
536
+ "disabled": {
537
+ "background-color": "transparent",
538
+ "color": "#B4B4B4"
539
+ },
540
+ "danger": {
541
+ "color": {},
542
+ "hover": {
543
+ "color": {}
544
+ },
545
+ "focus": {
546
+ "color": {}
547
+ }
548
+ },
549
+ "ready": {
550
+ "color": {},
551
+ "hover": {
552
+ "color": {}
553
+ },
554
+ "focus": {
555
+ "color": {}
556
+ }
557
+ }
558
+ }
23
559
  }
24
560
  }
25
- }
561
+ }