@amsterdam/design-system-tokens 0.1.4 → 0.1.6

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.
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 08 Sep 2023 12:12:55 GMT
3
+ // Generated on Tue, 10 Oct 2023 11:59:10 GMT
4
4
 
5
5
  @utrecht-button-subtle-disabled-background-color: transparent;
6
6
  @utrecht-button-subtle-background-color: transparent;
@@ -18,6 +18,7 @@
18
18
  @amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
19
19
  @amsterdam-unordered-list-list-style-type: '\2022';
20
20
  @amsterdam-unordered-list-gap: 0.75rem;
21
+ @amsterdam-page-menu-item-hover-text-decoration: underline;
21
22
  @amsterdam-page-menu-item-text-decoration: none;
22
23
  @amsterdam-page-menu-item-gap: 0.5rem;
23
24
  @amsterdam-page-menu-row-gap: 0.5rem;
@@ -49,6 +50,8 @@
49
50
  @amsterdam-link-inline-focus-text-underline-offset: 3px;
50
51
  @amsterdam-link-inline-focus-text-decoration: underline;
51
52
  @amsterdam-breadcrumb-item-link-focus-text-decoration: underline;
53
+ @amsterdam-alert-close-background-color: transparent;
54
+ @amsterdam-alert-gap: 1rem;
52
55
  @amsterdam-spacing-inset-xl: 2.5rem;
53
56
  @amsterdam-spacing-inset-lg: 1.5rem;
54
57
  @amsterdam-spacing-inset-md: 1rem;
@@ -58,32 +61,37 @@
58
61
  @amsterdam-border-width-md: 2px;
59
62
  @amsterdam-border-width-sm: 1px;
60
63
  @amsterdam-typography-text-level-7-line-height: 1.6;
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);
64
+ @amsterdam-typography-text-level-7-wide-font-size: clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem);
65
+ @amsterdam-typography-text-level-7-narrow-font-size: clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem);
63
66
  @amsterdam-typography-text-level-6-line-height: 1.6;
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);
67
+ @amsterdam-typography-text-level-6-wide-font-size: clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem);
68
+ @amsterdam-typography-text-level-6-narrow-font-size: clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem);
66
69
  @amsterdam-typography-text-level-5-line-height: 1.5;
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);
70
+ @amsterdam-typography-text-level-5-wide-font-size: clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem);
71
+ @amsterdam-typography-text-level-5-narrow-font-size: clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem);
69
72
  @amsterdam-typography-text-level-4-line-height: 1.4;
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);
73
+ @amsterdam-typography-text-level-4-wide-font-size: clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem);
74
+ @amsterdam-typography-text-level-4-narrow-font-size: clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem);
72
75
  @amsterdam-typography-text-level-3-line-height: 1.4;
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);
76
+ @amsterdam-typography-text-level-3-wide-font-size: clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem);
77
+ @amsterdam-typography-text-level-3-narrow-font-size: clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem);
75
78
  @amsterdam-typography-text-level-2-line-height: 1.3;
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);
79
+ @amsterdam-typography-text-level-2-wide-font-size: clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem);
80
+ @amsterdam-typography-text-level-2-narrow-font-size: clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem);
78
81
  @amsterdam-typography-text-level-1-line-height: 1.2;
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);
82
+ @amsterdam-typography-text-level-1-wide-font-size: clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem);
83
+ @amsterdam-typography-text-level-1-narrow-font-size: clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem);
81
84
  @amsterdam-typography-text-level-0-line-height: 1.1;
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);
85
+ @amsterdam-typography-text-level-0-wide-font-size: clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem);
86
+ @amsterdam-typography-text-level-0-narrow-font-size: clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem);
84
87
  @amsterdam-typography-font-weight-bold: 800;
85
88
  @amsterdam-typography-font-weight-normal: 400;
86
89
  @amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
90
+ @amsterdam-proportion-extra-wide: 16 / 9;
91
+ @amsterdam-proportion-wide: 5 / 4;
92
+ @amsterdam-proportion-square: 1 / 1;
93
+ @amsterdam-proportion-tall: 4 / 5;
94
+ @amsterdam-proportion-extra-tall: 9 / 16;
87
95
  @amsterdam-color-neutral-grey4: #323232;
88
96
  @amsterdam-color-neutral-grey3: #767676;
89
97
  @amsterdam-color-neutral-grey2: #B4B4B4;
@@ -157,7 +165,7 @@
157
165
  @amsterdam-paragraph-font-weight: 400;
158
166
  @amsterdam-paragraph-font-family: @amsterdam-typography-font-family;
159
167
  @amsterdam-paragraph-color: @amsterdam-color-primary-black;
160
- @amsterdam-page-menu-item-hover-color: @amsterdam-color-dark-blue;
168
+ @amsterdam-page-menu-item-hover-color: @amsterdam-color-primary-black;
161
169
  @amsterdam-page-menu-item-wide-font-size: @amsterdam-typography-text-level-7-wide-font-size;
162
170
  @amsterdam-page-menu-item-narrow-font-size: @amsterdam-typography-text-level-7-narrow-font-size;
163
171
  @amsterdam-page-menu-item-line-height: @amsterdam-typography-text-level-7-line-height;
@@ -287,6 +295,29 @@
287
295
  @amsterdam-blockquote-font-weight: 800;
288
296
  @amsterdam-blockquote-font-family: @amsterdam-typography-font-family;
289
297
  @amsterdam-blockquote-color: @amsterdam-color-primary-black;
298
+ @amsterdam-aspect-ratio-extra-wide: @amsterdam-proportion-extra-wide;
299
+ @amsterdam-aspect-ratio-wide: @amsterdam-proportion-wide;
300
+ @amsterdam-aspect-ratio-square: @amsterdam-proportion-square;
301
+ @amsterdam-aspect-ratio-tall: @amsterdam-proportion-tall;
302
+ @amsterdam-aspect-ratio-extra-tall: @amsterdam-proportion-extra-tall;
303
+ @amsterdam-alert-close-hover-fill: @amsterdam-color-primary-blue;
304
+ @amsterdam-alert-close-fill: @amsterdam-color-primary-black;
305
+ @amsterdam-alert-success-border-color: @amsterdam-color-dark-green;
306
+ @amsterdam-alert-success-background-color: @amsterdam-color-primary-white;
307
+ @amsterdam-alert-error-border-color: @amsterdam-color-primary-red;
308
+ @amsterdam-alert-error-background-color: @amsterdam-color-primary-white;
309
+ @amsterdam-alert-title-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
310
+ @amsterdam-alert-title-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
311
+ @amsterdam-alert-title-line-height: @amsterdam-typography-text-level-5-line-height;
312
+ @amsterdam-alert-title-font-weight: 800;
313
+ @amsterdam-alert-title-font-family: @amsterdam-typography-font-family;
314
+ @amsterdam-alert-title-color: @amsterdam-color-primary-black;
315
+ @amsterdam-alert-padding-inline-end: @amsterdam-spacing-inset-lg;
316
+ @amsterdam-alert-padding-inline-start: @amsterdam-spacing-inset-lg;
317
+ @amsterdam-alert-padding-block-end: @amsterdam-spacing-inset-md;
318
+ @amsterdam-alert-padding-block-start: @amsterdam-spacing-inset-md;
319
+ @amsterdam-alert-border: 4px solid @amsterdam-color-yellow;
320
+ @amsterdam-alert-background-color: @amsterdam-color-yellow;
290
321
  @amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
291
322
  @amsterdam-accordion-button-wide-font-size: @amsterdam-typography-text-level-5-wide-font-size;
292
323
  @amsterdam-accordion-button-narrow-font-size: @amsterdam-typography-text-level-5-narrow-font-size;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.1.4",
2
+ "version": "0.1.6",
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": "50bfbf67c103288ed6ba6713a6537252f0c25246"
31
+ "gitHead": "936054ca8c9f8f685c9a9bda9db3157608817886"
32
32
  }
@@ -0,0 +1,11 @@
1
+ {
2
+ "amsterdam": {
3
+ "proportion": {
4
+ "extra-tall": { "value": "9 / 16" },
5
+ "tall": { "value": "4 / 5" },
6
+ "square": { "value": "1 / 1" },
7
+ "wide": { "value": "5 / 4" },
8
+ "extra-wide": { "value": "16 / 9" }
9
+ }
10
+ }
11
+ }
@@ -9,73 +9,85 @@
9
9
  "text-level": {
10
10
  "0": {
11
11
  "narrow": {
12
- "font-size": { "value": "clamp(2rem, 2rem + (2 * (100vw - 20rem)) / 33.3125, 4rem)" }
12
+ "font-size": { "value": "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)" }
13
13
  },
14
14
  "wide": {
15
- "font-size": { "value": "clamp(4rem, 4rem + (1 * (100vw - 53.375rem)) / 36.625, 5rem)" }
15
+ "font-size": { "value": "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)" }
16
16
  },
17
17
  "line-height": { "value": "1.1" }
18
18
  },
19
19
  "1": {
20
20
  "narrow": {
21
- "font-size": { "value": "clamp(2rem, 2rem + (1 * (100vw - 20rem)) / 33.3125, 3rem)" }
21
+ "font-size": { "value": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)" }
22
22
  },
23
23
  "wide": {
24
- "font-size": { "value": "clamp(3rem, 3rem + (0.5 * (100vw - 53.375rem)) / 36.625, 3.5rem)" }
24
+ "font-size": { "value": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)" }
25
25
  },
26
26
  "line-height": { "value": "1.2" }
27
27
  },
28
28
  "2": {
29
29
  "narrow": {
30
- "font-size": { "value": "clamp(1.75rem, 1.75rem + (0.5 * (100vw - 20rem)) / 33.3125, 2.25rem)" }
30
+ "font-size": { "value": "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)" }
31
31
  },
32
32
  "wide": {
33
- "font-size": { "value": "clamp(2.25rem, 2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625, 2.5rem)" }
33
+ "font-size": { "value": "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)" }
34
34
  },
35
35
  "line-height": { "value": "1.3" }
36
36
  },
37
37
  "3": {
38
38
  "narrow": {
39
- "font-size": { "value": "clamp(1.5rem, 1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125, 1.8125rem)" }
39
+ "font-size": { "value": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)" }
40
40
  },
41
41
  "wide": {
42
- "font-size": { "value": "clamp(1.8125rem, 1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625, 2rem)" }
42
+ "font-size": {
43
+ "value": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)"
44
+ }
43
45
  },
44
46
  "line-height": { "value": "1.4" }
45
47
  },
46
48
  "4": {
47
49
  "narrow": {
48
- "font-size": { "value": "clamp(1.25rem, 1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.4375rem)" }
50
+ "font-size": { "value": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)" }
49
51
  },
50
52
  "wide": {
51
- "font-size": { "value": "clamp(1.4375rem, 1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.5625rem)" }
53
+ "font-size": {
54
+ "value": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)"
55
+ }
52
56
  },
53
57
  "line-height": { "value": "1.4" }
54
58
  },
55
59
  "5": {
56
60
  "narrow": {
57
- "font-size": { "value": "clamp(1.375rem, 1.375rem + (0.25 * (100vw - 20rem)) / 33.3125, 1.625rem)" }
61
+ "font-size": { "value": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)" }
58
62
  },
59
63
  "wide": {
60
- "font-size": { "value": "clamp(1.625rem, 1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625, 1.75rem)" }
64
+ "font-size": {
65
+ "value": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
66
+ }
61
67
  },
62
68
  "line-height": { "value": "1.5" }
63
69
  },
64
70
  "6": {
65
71
  "narrow": {
66
- "font-size": { "value": "clamp(1.125rem, 1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125, 1.3125rem)" }
72
+ "font-size": {
73
+ "value": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
74
+ }
67
75
  },
68
76
  "wide": {
69
- "font-size": { "value": "clamp(1.3125rem, 1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.375rem)" }
77
+ "font-size": {
78
+ "value": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
79
+ }
70
80
  },
71
81
  "line-height": { "value": "1.6" }
72
82
  },
73
83
  "7": {
74
84
  "narrow": {
75
- "font-size": { "value": "clamp(1rem, 1rem + (0.0625 * (100vw - 20rem)) / 33.3125, 1.0625rem)" }
85
+ "font-size": { "value": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)" }
76
86
  },
77
87
  "wide": {
78
- "font-size": { "value": "clamp(1.0625rem, 1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625, 1.125rem)" }
88
+ "font-size": {
89
+ "value": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
90
+ }
79
91
  },
80
92
  "line-height": { "value": "1.6" }
81
93
  }
@@ -0,0 +1,40 @@
1
+ {
2
+ "amsterdam": {
3
+ "alert": {
4
+ "background-color": { "value": "{amsterdam.color.yellow}" },
5
+ "border": { "value": "4px solid {amsterdam.color.yellow}" },
6
+ "gap": { "value": "1rem" },
7
+ "padding-block-start": { "value": "{amsterdam.spacing.inset.md}" },
8
+ "padding-block-end": { "value": "{amsterdam.spacing.inset.md}" },
9
+ "padding-inline-start": { "value": "{amsterdam.spacing.inset.lg}" },
10
+ "padding-inline-end": { "value": "{amsterdam.spacing.inset.lg}" },
11
+ "title": {
12
+ "color": { "value": "{amsterdam.color.primary-black}" },
13
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
14
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
15
+ "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
16
+ "narrow": {
17
+ "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
18
+ },
19
+ "wide": {
20
+ "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
21
+ }
22
+ },
23
+ "error": {
24
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
25
+ "border-color": { "value": "{amsterdam.color.primary-red}" }
26
+ },
27
+ "success": {
28
+ "background-color": { "value": "{amsterdam.color.primary-white}" },
29
+ "border-color": { "value": "{amsterdam.color.dark-green}" }
30
+ },
31
+ "close": {
32
+ "background-color": { "value": "transparent" },
33
+ "fill": { "value": "{amsterdam.color.primary-black}" },
34
+ "hover": {
35
+ "fill": { "value": "{amsterdam.color.primary-blue}" }
36
+ }
37
+ }
38
+ }
39
+ }
40
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "amsterdam": {
3
+ "aspect-ratio": {
4
+ "extra-tall": { "value": "{amsterdam.proportion.extra-tall}" },
5
+ "tall": { "value": "{amsterdam.proportion.tall}" },
6
+ "square": { "value": "{amsterdam.proportion.square}" },
7
+ "wide": { "value": "{amsterdam.proportion.wide}" },
8
+ "extra-wide": { "value": "{amsterdam.proportion.extra-wide}" }
9
+ }
10
+ }
11
+ }
@@ -17,7 +17,8 @@
17
17
  "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
18
18
  },
19
19
  "hover": {
20
- "color": { "value": "{amsterdam.color.dark-blue}" }
20
+ "color": { "value": "{amsterdam.color.primary-black}" },
21
+ "text-decoration": { "value": "underline" }
21
22
  }
22
23
  }
23
24
  }