@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.
@@ -18,8 +18,585 @@
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.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
59
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
60
+ },
61
+ "line-height": "1.4"
62
+ },
63
+ "5": {
64
+ "font-size": {
65
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
66
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
67
+ },
68
+ "line-height": "1.5"
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
+ "accordion": {
103
+ "button": {
104
+ "color": "#004699",
105
+ "focus": {
106
+ "outline-offset": "2px"
107
+ },
108
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
109
+ "font-size": {
110
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
111
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
112
+ },
113
+ "font-weight": 800,
114
+ "line-height": "1.5",
115
+ "hover": {
116
+ "box-shadow": "inset 0 0 0 2px #767676"
117
+ }
118
+ }
119
+ },
120
+ "button": {
121
+ "font-size": {
122
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
123
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
124
+ },
125
+ "secondary": {
126
+ "hover": {
127
+ "box-shadow": "0 0 0 1px #00387A"
128
+ }
129
+ }
130
+ },
131
+ "form-label": {
132
+ "color": "#000000",
133
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
134
+ "font-size": {
135
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
136
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
137
+ },
138
+ "font-weight": 800,
139
+ "line-height": "1.6"
140
+ },
141
+ "heading": {
142
+ "1": {
143
+ "font-size": {
144
+ "narrow": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)",
145
+ "wide": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)"
146
+ },
147
+ "line-height": "1.2"
148
+ },
149
+ "2": {
150
+ "font-size": {
151
+ "narrow": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)",
152
+ "wide": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)"
153
+ },
154
+ "line-height": "1.3"
155
+ },
156
+ "3": {
157
+ "font-size": {
158
+ "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
159
+ "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
160
+ },
161
+ "line-height": "1.4"
162
+ },
163
+ "4": {
164
+ "font-size": {
165
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
166
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
167
+ },
168
+ "line-height": "1.4"
169
+ },
170
+ "color": "#000000",
171
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
172
+ "font-weight": 800
173
+ },
174
+ "icon": {
175
+ "size-3": {
176
+ "icon-size": {
177
+ "narrow": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)",
178
+ "wide": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)"
179
+ },
180
+ "container-multiplier": "1.4"
181
+ },
182
+ "size-4": {
183
+ "icon-size": {
184
+ "narrow": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)",
185
+ "wide": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)"
186
+ },
187
+ "container-multiplier": "1.4"
188
+ },
189
+ "size-5": {
190
+ "icon-size": {
191
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
192
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
193
+ },
194
+ "container-multiplier": "1.5"
195
+ },
196
+ "size-6": {
197
+ "icon-size": {
198
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
199
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
200
+ },
201
+ "container-multiplier": "1.6"
202
+ },
203
+ "size-7": {
204
+ "icon-size": {
205
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
206
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
207
+ },
208
+ "container-multiplier": "1.6"
209
+ }
210
+ },
211
+ "link": {
212
+ "color": "#004699",
213
+ "outline-offset": "2px",
214
+ "text-decoration": "none",
215
+ "text-underline-offset": "9px",
216
+ "text-decoration-thickness": "2px",
217
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
218
+ "font-size": {
219
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
220
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
221
+ },
222
+ "font-weight": 400,
223
+ "focus": {
224
+ "color": "#00387A",
225
+ "text-decoration": "underline"
226
+ },
227
+ "hover": {
228
+ "color": "#00387A",
229
+ "text-decoration": "underline",
230
+ "text-decoration-thickness": "2px"
231
+ },
232
+ "line-height": "1.6",
233
+ "visited": {
234
+ "color": "#004699"
235
+ },
236
+ "standalone-bold": {
237
+ "font-weight": 800
238
+ },
239
+ "inline": {
240
+ "text-underline-offset": "3px",
241
+ "font-family": "inherit",
242
+ "font-size": "inherit",
243
+ "visited": {
244
+ "color": "#A00078"
245
+ }
246
+ },
247
+ "in-list": {
248
+ "gap": "0.5em",
249
+ "text-underline-offset": "0.3em",
250
+ "font-size": {
251
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
252
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
253
+ },
254
+ "line-height": "1.6"
255
+ },
256
+ "on-background-dark": {
257
+ "color": "#ffffff",
258
+ "text-decoration": "underline",
259
+ "focus": {
260
+ "color": "#ffffff",
261
+ "text-decoration": "underline"
262
+ },
263
+ "hover": {
264
+ "color": "#ffffff",
265
+ "text-decoration": "none"
266
+ },
267
+ "visited": {
268
+ "color": "#ffffff"
269
+ }
270
+ },
271
+ "on-background-light": {
272
+ "color": "#000000",
273
+ "text-decoration": "underline",
274
+ "text-decoration-thickness": "2px",
275
+ "text-underline-offset": "9px",
276
+ "active": {
277
+ "color": "#000000"
278
+ },
279
+ "font-size": {
280
+ "narrow": {
281
+ "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
282
+ "filePath": "./src/brand/amsterdam/typography.tokens.json",
283
+ "isSource": true,
284
+ "original": {
285
+ "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)"
286
+ },
287
+ "name": "amsterdamTypographyTextLevel6FontSizeNarrow",
288
+ "attributes": {
289
+ "category": "amsterdam",
290
+ "type": "typography",
291
+ "item": "text-level",
292
+ "subitem": "6",
293
+ "state": "font-size"
294
+ },
295
+ "path": [
296
+ "amsterdam",
297
+ "typography",
298
+ "text-level",
299
+ "6",
300
+ "font-size",
301
+ "narrow"
302
+ ]
303
+ },
304
+ "wide": {
305
+ "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)",
306
+ "filePath": "./src/brand/amsterdam/typography.tokens.json",
307
+ "isSource": true,
308
+ "original": {
309
+ "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
310
+ },
311
+ "name": "amsterdamTypographyTextLevel6FontSizeWide",
312
+ "attributes": {
313
+ "category": "amsterdam",
314
+ "type": "typography",
315
+ "item": "text-level",
316
+ "subitem": "6",
317
+ "state": "font-size"
318
+ },
319
+ "path": [
320
+ "amsterdam",
321
+ "typography",
322
+ "text-level",
323
+ "6",
324
+ "font-size",
325
+ "wide"
326
+ ]
327
+ }
328
+ },
329
+ "focus": {
330
+ "color": "#000000",
331
+ "text-decoration": "underline"
332
+ },
333
+ "hover": {
334
+ "color": "#000000",
335
+ "text-decoration": "none"
336
+ },
337
+ "visited": {
338
+ "color": "#000000"
339
+ }
340
+ }
341
+ },
342
+ "paragraph": {
343
+ "color": "#000000",
344
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
345
+ "font-size": {
346
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
347
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
348
+ },
349
+ "font-weight": 400,
350
+ "line-height": "1.6",
351
+ "small": {
352
+ "font-size": {
353
+ "narrow": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)",
354
+ "wide": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)"
355
+ },
356
+ "line-height": "1.6"
357
+ },
358
+ "large": {
359
+ "font-size": {
360
+ "narrow": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)",
361
+ "wide": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)"
362
+ },
363
+ "line-height": "1.5"
364
+ }
365
+ },
366
+ "unordered-list": {
367
+ "color": "#000000",
368
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
369
+ "font-size": {
370
+ "narrow": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)",
371
+ "wide": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)"
372
+ },
373
+ "font-weight": 400,
374
+ "gap": "0.5rem",
375
+ "line-height": "1.6",
376
+ "list-style": "square",
377
+ "item": {
378
+ "padding-inline": "3px 0"
379
+ },
380
+ "unordered-list": {
381
+ "padding-block": "4px 0",
382
+ "padding-inline": "14px 0",
383
+ "list-style-type": "'–'",
384
+ "item": {
385
+ "padding-inline": "11px 0"
386
+ }
387
+ }
388
+ }
389
+ },
390
+ "utrecht": {
391
+ "button": {
392
+ "background-color": "#004699",
393
+ "border-color": {},
394
+ "border-radius": {},
395
+ "border-width": {},
396
+ "color": "#ffffff",
397
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
398
+ "font-size": {},
399
+ "line-height": "1.6",
400
+ "padding-inline-start": "1rem",
401
+ "padding-inline-end": "1rem",
402
+ "padding-block-start": "0.5rem",
403
+ "padding-block-end": "0.5rem",
404
+ "margin-inline-start": {},
405
+ "margin-inline-end": {},
406
+ "margin-block-start": {},
407
+ "margin-block-end": {},
408
+ "icon": {
409
+ "gap": {}
410
+ },
411
+ "disabled": {
412
+ "background-color": "#B4B4B4",
413
+ "color": "#ffffff",
414
+ "border-color": "transparent"
415
+ },
416
+ "hover": {
417
+ "background-color": "#00387A"
418
+ },
419
+ "focus": {
420
+ "scale": {}
421
+ },
422
+ "primary-action": {
423
+ "background-color": "#004699",
424
+ "border-color": {},
425
+ "border-width": {},
426
+ "color": "#ffffff",
427
+ "disabled": {
428
+ "background-color": "#B4B4B4",
429
+ "color": {},
430
+ "border-color": {}
431
+ },
432
+ "hover": {
433
+ "background-color": "#00387A",
434
+ "border-color": {},
435
+ "color": {}
436
+ },
437
+ "focus": {
438
+ "background-color": {},
439
+ "border-color": {},
440
+ "border-width": {}
441
+ },
442
+ "ready": {
443
+ "background-color": {},
444
+ "border-color": {},
445
+ "color": {},
446
+ "disabled": {
447
+ "border-color": {}
448
+ },
449
+ "hover": {
450
+ "background-color": {},
451
+ "border-color": {},
452
+ "color": {}
453
+ },
454
+ "focus": {
455
+ "background-color": {},
456
+ "border-color": {}
457
+ }
458
+ },
459
+ "warning": {
460
+ "background-color": {},
461
+ "border-color": {},
462
+ "color": {},
463
+ "disabled": {
464
+ "border-color": {}
465
+ },
466
+ "hover": {
467
+ "background-color": {},
468
+ "border-color": {},
469
+ "color": {}
470
+ },
471
+ "focus": {
472
+ "background-color": {},
473
+ "border-color": {}
474
+ }
475
+ },
476
+ "danger": {
477
+ "background-color": {},
478
+ "border-color": {},
479
+ "color": {},
480
+ "disabled": {
481
+ "border-color": {}
482
+ },
483
+ "hover": {
484
+ "background-color": {},
485
+ "border-color": {},
486
+ "color": {}
487
+ },
488
+ "focus": {
489
+ "background-color": {},
490
+ "border-color": {}
491
+ }
492
+ }
493
+ },
494
+ "secondary-action": {
495
+ "background-color": "#ffffff",
496
+ "color": "#004699",
497
+ "border-color": "#004699",
498
+ "border-width": "2px",
499
+ "hover": {
500
+ "background-color": {},
501
+ "color": "#00387A",
502
+ "border-color": "#00387A"
503
+ },
504
+ "disabled": {
505
+ "background-color": "#ffffff",
506
+ "color": "#B4B4B4",
507
+ "border-color": "#B4B4B4"
508
+ },
509
+ "danger": {
510
+ "background-color": {},
511
+ "border-color": {},
512
+ "color": {},
513
+ "disabled": {
514
+ "border-color": {}
515
+ },
516
+ "hover": {
517
+ "background-color": {},
518
+ "border-color": {},
519
+ "color": {}
520
+ },
521
+ "focus": {
522
+ "background-color": {},
523
+ "border-color": {}
524
+ }
525
+ },
526
+ "warning": {
527
+ "background-color": {},
528
+ "border-color": {},
529
+ "color": {},
530
+ "disabled": {
531
+ "border-color": {}
532
+ },
533
+ "hover": {
534
+ "background-color": {},
535
+ "border-color": {},
536
+ "color": {}
537
+ },
538
+ "focus": {
539
+ "background-color": {},
540
+ "border-color": {}
541
+ }
542
+ },
543
+ "ready": {
544
+ "background-color": {},
545
+ "border-color": {},
546
+ "color": {},
547
+ "disabled": {
548
+ "border-color": {}
549
+ },
550
+ "hover": {
551
+ "background-color": {},
552
+ "border-color": {},
553
+ "color": {}
554
+ },
555
+ "focus": {
556
+ "background-color": {},
557
+ "border-color": {}
558
+ }
559
+ }
560
+ },
561
+ "subtle": {
562
+ "background-color": "transparent",
563
+ "border-color": {},
564
+ "border-width": "2px",
565
+ "color": "#004699",
566
+ "font-weight": {},
567
+ "hover": {
568
+ "background-color": {},
569
+ "color": {},
570
+ "border-color": "#767676"
571
+ },
572
+ "focus": {
573
+ "background-color": {},
574
+ "color": {},
575
+ "border-color": {}
576
+ },
577
+ "disabled": {
578
+ "background-color": "transparent",
579
+ "color": "#B4B4B4"
580
+ },
581
+ "danger": {
582
+ "color": {},
583
+ "hover": {
584
+ "color": {}
585
+ },
586
+ "focus": {
587
+ "color": {}
588
+ }
589
+ },
590
+ "ready": {
591
+ "color": {},
592
+ "hover": {
593
+ "color": {}
594
+ },
595
+ "focus": {
596
+ "color": {}
597
+ }
598
+ }
599
+ }
23
600
  }
24
601
  }
25
- }
602
+ }