@amsterdam/design-system-tokens 0.9.0 → 0.10.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 (16) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/compact.css +1 -1
  3. package/dist/compact.d.ts +1 -1
  4. package/dist/compact.mjs +1 -1
  5. package/dist/compact.scss +1 -1
  6. package/dist/compact.theme.css +1 -1
  7. package/dist/index.css +36 -8
  8. package/dist/index.d.ts +53 -3
  9. package/dist/index.json +60 -10
  10. package/dist/index.mjs +39 -11
  11. package/dist/index.scss +36 -8
  12. package/dist/index.theme.css +36 -8
  13. package/package.json +1 -1
  14. package/src/brand/ams/proportion.tokens.json +3 -3
  15. package/src/components/ams/avatar.tokens.json +24 -4
  16. package/src/components/ams/table-of-contents.tokens.json +34 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.10.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.9.0...design-system-tokens-v0.10.0) (2024-06-28)
7
+
8
+
9
+ ### ⚠ BREAKING CHANGES
10
+
11
+ * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257))
12
+
13
+ ### Features
14
+
15
+ * Add Table of Contents component ([#1248](https://github.com/Amsterdam/design-system/issues/1248)) ([1f4c09a](https://github.com/Amsterdam/design-system/commit/1f4c09a08d2aa96d1c584eceb498d33c31aa52ad))
16
+ * Allow additional background colours for Avatar and remove dark blue option ([#1257](https://github.com/Amsterdam/design-system/issues/1257)) ([a1a3c8f](https://github.com/Amsterdam/design-system/commit/a1a3c8fc58f249f0cd9c7d8bd09cc46f3f48cb5c))
17
+ * Change values for tall, wide, and extra wide aspect ratios ([#1254](https://github.com/Amsterdam/design-system/issues/1254)) ([478508a](https://github.com/Amsterdam/design-system/commit/478508a758f311b89dfb8214813b25e50d875ff0))
18
+
6
19
  ## [0.9.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.8.0...design-system-tokens-v0.9.0) (2024-06-05)
7
20
 
8
21
 
package/dist/compact.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/compact.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
package/dist/compact.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export const amsSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
package/dist/compact.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ // Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
 
5
5
  $ams-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
6
6
  $ams-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
package/dist/compact.theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  .ams-theme--compact {
package/dist/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:10 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:39 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -124,11 +124,11 @@
124
124
  --ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
125
125
  --ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
126
126
  --ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
127
- --ams-proportion-2x-wide: 32 / 9;
127
+ --ams-proportion-2x-wide: 16 / 5;
128
128
  --ams-proportion-x-wide: 16 / 9;
129
- --ams-proportion-wide: 5 / 4;
129
+ --ams-proportion-wide: 4 / 3;
130
130
  --ams-proportion-square: 1 / 1;
131
- --ams-proportion-tall: 4 / 5;
131
+ --ams-proportion-tall: 3 / 4;
132
132
  --ams-proportion-x-tall: 9 / 16;
133
133
  --ams-color-neutral-grey3: #767676;
134
134
  --ams-color-neutral-grey2: #BEBEBE;
@@ -245,6 +245,21 @@
245
245
  --ams-table-font-size: var(--ams-text-level-5-font-size);
246
246
  --ams-table-font-family: var(--ams-text-font-family);
247
247
  --ams-table-color: var(--ams-color-primary-black);
248
+ --ams-table-of-contents-heading-line-height: var(--ams-text-level-4-line-height);
249
+ --ams-table-of-contents-heading-font-size: var(--ams-text-level-4-font-size);
250
+ --ams-table-of-contents-heading-font-weight: var(--ams-text-font-weight-bold);
251
+ --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-inside-lg);
252
+ --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-inside-md);
253
+ --ams-table-of-contents-list-gap: var(--ams-space-inside-md);
254
+ --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
255
+ --ams-table-of-contents-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
256
+ --ams-table-of-contents-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
257
+ --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
258
+ --ams-table-of-contents-line-height: var(--ams-text-level-5-line-height);
259
+ --ams-table-of-contents-gap: var(--ams-space-inside-md);
260
+ --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
261
+ --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
262
+ --ams-table-of-contents-font-family: var(--ams-text-font-family);
248
263
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
249
264
  --ams-switch-checked-background-color: var(--ams-color-primary-blue);
250
265
  --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
@@ -661,6 +676,8 @@
661
676
  --ams-badge-font-family: var(--ams-text-font-family);
662
677
  --ams-avatar-yellow-color: var(--ams-color-primary-black);
663
678
  --ams-avatar-yellow-background-color: var(--ams-color-yellow);
679
+ --ams-avatar-white-color: var(--ams-color-primary-black);
680
+ --ams-avatar-white-background-color: var(--ams-color-primary-white);
664
681
  --ams-avatar-red-color: var(--ams-color-primary-white);
665
682
  --ams-avatar-red-background-color: var(--ams-color-primary-red);
666
683
  --ams-avatar-purple-color: var(--ams-color-primary-white);
@@ -669,14 +686,22 @@
669
686
  --ams-avatar-orange-background-color: var(--ams-color-orange);
670
687
  --ams-avatar-magenta-color: var(--ams-color-primary-white);
671
688
  --ams-avatar-magenta-background-color: var(--ams-color-magenta);
689
+ --ams-avatar-light-blue-color: var(--ams-color-primary-black);
690
+ --ams-avatar-light-blue-background-color: var(--ams-color-blue);
691
+ --ams-avatar-grey-3-color: var(--ams-color-primary-white);
692
+ --ams-avatar-grey-3-background-color: var(--ams-color-neutral-grey3);
693
+ --ams-avatar-grey-2-color: var(--ams-color-primary-black);
694
+ --ams-avatar-grey-2-background-color: var(--ams-color-neutral-grey2);
695
+ --ams-avatar-grey-1-color: var(--ams-color-primary-black);
696
+ --ams-avatar-grey-1-background-color: var(--ams-color-neutral-grey1);
672
697
  --ams-avatar-green-color: var(--ams-color-primary-black);
673
698
  --ams-avatar-green-background-color: var(--ams-color-green);
674
699
  --ams-avatar-dark-green-color: var(--ams-color-primary-white);
675
700
  --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
676
- --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
677
- --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
678
- --ams-avatar-blue-color: var(--ams-color-primary-black);
679
- --ams-avatar-blue-background-color: var(--ams-color-blue);
701
+ --ams-avatar-blue-color: var(--ams-color-primary-white);
702
+ --ams-avatar-blue-background-color: var(--ams-color-primary-blue);
703
+ --ams-avatar-black-color: var(--ams-color-primary-white);
704
+ --ams-avatar-black-background-color: var(--ams-color-primary-black);
680
705
  --ams-avatar-line-height: var(--ams-text-level-6-line-height);
681
706
  --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
682
707
  --ams-avatar-font-size: var(--ams-text-level-6-font-size);
@@ -716,6 +741,9 @@
716
741
  --ams-link-appearance-color: var(--ams-color-primary-blue);
717
742
  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
718
743
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
744
+ --ams-table-of-contents-link-hover-color: var(--ams-link-appearance-hover-color);
745
+ --ams-table-of-contents-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
746
+ --ams-table-of-contents-link-color: var(--ams-link-appearance-color);
719
747
  --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
720
748
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
721
749
  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export default tokens;
@@ -235,11 +235,11 @@ declare const tokens: {
235
235
  "line-height": DesignToken,
236
236
  "padding-block": DesignToken,
237
237
  "padding-inline": DesignToken,
238
- "blue": {
238
+ "black": {
239
239
  "background-color": DesignToken,
240
240
  "color": DesignToken
241
241
  },
242
- "dark-blue": {
242
+ "blue": {
243
243
  "background-color": DesignToken,
244
244
  "color": DesignToken
245
245
  },
@@ -251,6 +251,22 @@ declare const tokens: {
251
251
  "background-color": DesignToken,
252
252
  "color": DesignToken
253
253
  },
254
+ "grey-1": {
255
+ "background-color": DesignToken,
256
+ "color": DesignToken
257
+ },
258
+ "grey-2": {
259
+ "background-color": DesignToken,
260
+ "color": DesignToken
261
+ },
262
+ "grey-3": {
263
+ "background-color": DesignToken,
264
+ "color": DesignToken
265
+ },
266
+ "light-blue": {
267
+ "background-color": DesignToken,
268
+ "color": DesignToken
269
+ },
254
270
  "magenta": {
255
271
  "background-color": DesignToken,
256
272
  "color": DesignToken
@@ -267,6 +283,10 @@ declare const tokens: {
267
283
  "background-color": DesignToken,
268
284
  "color": DesignToken
269
285
  },
286
+ "white": {
287
+ "background-color": DesignToken,
288
+ "color": DesignToken
289
+ },
270
290
  "yellow": {
271
291
  "background-color": DesignToken,
272
292
  "color": DesignToken
@@ -1199,6 +1219,36 @@ declare const tokens: {
1199
1219
  "background-color": DesignToken
1200
1220
  }
1201
1221
  },
1222
+ "table-of-contents": {
1223
+ "font-family": DesignToken,
1224
+ "font-size": DesignToken,
1225
+ "font-weight": DesignToken,
1226
+ "gap": DesignToken,
1227
+ "line-height": DesignToken,
1228
+ "link": {
1229
+ "color": DesignToken,
1230
+ "outline-offset": DesignToken,
1231
+ "text-decoration-line": DesignToken,
1232
+ "text-decoration-thickness": DesignToken,
1233
+ "text-underline-offset": DesignToken,
1234
+ "hover": {
1235
+ "color": DesignToken,
1236
+ "text-decoration-line": DesignToken
1237
+ }
1238
+ },
1239
+ "list": {
1240
+ "gap": DesignToken,
1241
+ "list": {
1242
+ "padding-block-start": DesignToken,
1243
+ "padding-inline-start": DesignToken
1244
+ }
1245
+ },
1246
+ "heading": {
1247
+ "font-weight": DesignToken,
1248
+ "font-size": DesignToken,
1249
+ "line-height": DesignToken
1250
+ }
1251
+ },
1202
1252
  "table": {
1203
1253
  "color": DesignToken,
1204
1254
  "font-family": DesignToken,
package/dist/index.json CHANGED
@@ -27,11 +27,11 @@
27
27
  },
28
28
  "proportion": {
29
29
  "x-tall": "9 / 16",
30
- "tall": "4 / 5",
30
+ "tall": "3 / 4",
31
31
  "square": "1 / 1",
32
- "wide": "5 / 4",
32
+ "wide": "4 / 3",
33
33
  "x-wide": "16 / 9",
34
- "2x-wide": "32 / 9"
34
+ "2x-wide": "16 / 5"
35
35
  },
36
36
  "space": {
37
37
  "grid": {
@@ -198,11 +198,11 @@
198
198
  },
199
199
  "aspect-ratio": {
200
200
  "x-tall": "9 / 16",
201
- "tall": "4 / 5",
201
+ "tall": "3 / 4",
202
202
  "square": "1 / 1",
203
- "wide": "5 / 4",
203
+ "wide": "4 / 3",
204
204
  "x-wide": "16 / 9",
205
- "2x-wide": "32 / 9"
205
+ "2x-wide": "16 / 5"
206
206
  },
207
207
  "avatar": {
208
208
  "aspect-ratio": "1 / 1",
@@ -212,11 +212,11 @@
212
212
  "line-height": "1.6",
213
213
  "padding-block": "0.25rem",
214
214
  "padding-inline": "0.25rem",
215
- "blue": {
216
- "background-color": "#009DE6",
217
- "color": "#000000"
215
+ "black": {
216
+ "background-color": "#000000",
217
+ "color": "#FFFFFF"
218
218
  },
219
- "dark-blue": {
219
+ "blue": {
220
220
  "background-color": "#004699",
221
221
  "color": "#FFFFFF"
222
222
  },
@@ -228,6 +228,22 @@
228
228
  "background-color": "#BED200",
229
229
  "color": "#000000"
230
230
  },
231
+ "grey-1": {
232
+ "background-color": "#E8E8E8",
233
+ "color": "#000000"
234
+ },
235
+ "grey-2": {
236
+ "background-color": "#BEBEBE",
237
+ "color": "#000000"
238
+ },
239
+ "grey-3": {
240
+ "background-color": "#767676",
241
+ "color": "#FFFFFF"
242
+ },
243
+ "light-blue": {
244
+ "background-color": "#009DE6",
245
+ "color": "#000000"
246
+ },
231
247
  "magenta": {
232
248
  "background-color": "#E50082",
233
249
  "color": "#FFFFFF"
@@ -244,6 +260,10 @@
244
260
  "background-color": "#EC0000",
245
261
  "color": "#FFFFFF"
246
262
  },
263
+ "white": {
264
+ "background-color": "#FFFFFF",
265
+ "color": "#000000"
266
+ },
247
267
  "yellow": {
248
268
  "background-color": "#FFE600",
249
269
  "color": "#000000"
@@ -1176,6 +1196,36 @@
1176
1196
  "background-color": "#BEBEBE"
1177
1197
  }
1178
1198
  },
1199
+ "table-of-contents": {
1200
+ "font-family": "'Amsterdam Sans', Arial, sans-serif",
1201
+ "font-size": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)",
1202
+ "font-weight": 400,
1203
+ "gap": "1rem",
1204
+ "line-height": "1.6",
1205
+ "link": {
1206
+ "color": "#004699",
1207
+ "outline-offset": "0.125rem",
1208
+ "text-decoration-line": "none",
1209
+ "text-decoration-thickness": "0.125rem",
1210
+ "text-underline-offset": "0.3333em",
1211
+ "hover": {
1212
+ "color": "#102E62",
1213
+ "text-decoration-line": "underline"
1214
+ }
1215
+ },
1216
+ "list": {
1217
+ "gap": "1rem",
1218
+ "list": {
1219
+ "padding-block-start": "1rem",
1220
+ "padding-inline-start": "1.5rem"
1221
+ }
1222
+ },
1223
+ "heading": {
1224
+ "font-weight": 800,
1225
+ "font-size": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)",
1226
+ "line-height": "1.5"
1227
+ }
1228
+ },
1179
1229
  "table": {
1180
1230
  "color": "#000000",
1181
1231
  "font-family": "'Amsterdam Sans', Arial, sans-serif",
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:10 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  export const amsBorderWidthSm = "0.0625rem";
@@ -23,11 +23,11 @@ export const amsColorNeutralGrey1 = "#E8E8E8";
23
23
  export const amsColorNeutralGrey2 = "#BEBEBE";
24
24
  export const amsColorNeutralGrey3 = "#767676";
25
25
  export const amsProportionXTall = "9 / 16";
26
- export const amsProportionTall = "4 / 5";
26
+ export const amsProportionTall = "3 / 4";
27
27
  export const amsProportionSquare = "1 / 1";
28
- export const amsProportionWide = "5 / 4";
28
+ export const amsProportionWide = "4 / 3";
29
29
  export const amsProportionXWide = "16 / 9";
30
- export const amsProportion2xWide = "32 / 9";
30
+ export const amsProportion2xWide = "16 / 5";
31
31
  export const amsSpaceGridXs = "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)";
32
32
  export const amsSpaceGridSm = "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)";
33
33
  export const amsSpaceGridMd = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
@@ -106,11 +106,11 @@ export const amsAlertWarningBorderColor = "#FF9100";
106
106
  export const amsAlertCloseFill = "#000000";
107
107
  export const amsAlertCloseHoverFill = "#004699";
108
108
  export const amsAspectRatioXTall = "9 / 16";
109
- export const amsAspectRatioTall = "4 / 5";
109
+ export const amsAspectRatioTall = "3 / 4";
110
110
  export const amsAspectRatioSquare = "1 / 1";
111
- export const amsAspectRatioWide = "5 / 4";
111
+ export const amsAspectRatioWide = "4 / 3";
112
112
  export const amsAspectRatioXWide = "16 / 9";
113
- export const amsAspectRatio2xWide = "32 / 9";
113
+ export const amsAspectRatio2xWide = "16 / 5";
114
114
  export const amsAvatarAspectRatio = "1 / 1";
115
115
  export const amsAvatarFontFamily = "'Amsterdam Sans', Arial, sans-serif";
116
116
  export const amsAvatarFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
@@ -118,14 +118,22 @@ export const amsAvatarFontWeight = 400;
118
118
  export const amsAvatarLineHeight = "1.6";
119
119
  export const amsAvatarPaddingBlock = "0.25rem";
120
120
  export const amsAvatarPaddingInline = "0.25rem";
121
- export const amsAvatarBlueBackgroundColor = "#009DE6";
122
- export const amsAvatarBlueColor = "#000000";
123
- export const amsAvatarDarkBlueBackgroundColor = "#004699";
124
- export const amsAvatarDarkBlueColor = "#FFFFFF";
121
+ export const amsAvatarBlackBackgroundColor = "#000000";
122
+ export const amsAvatarBlackColor = "#FFFFFF";
123
+ export const amsAvatarBlueBackgroundColor = "#004699";
124
+ export const amsAvatarBlueColor = "#FFFFFF";
125
125
  export const amsAvatarDarkGreenBackgroundColor = "#00A03C";
126
126
  export const amsAvatarDarkGreenColor = "#FFFFFF";
127
127
  export const amsAvatarGreenBackgroundColor = "#BED200";
128
128
  export const amsAvatarGreenColor = "#000000";
129
+ export const amsAvatarGrey1BackgroundColor = "#E8E8E8";
130
+ export const amsAvatarGrey1Color = "#000000";
131
+ export const amsAvatarGrey2BackgroundColor = "#BEBEBE";
132
+ export const amsAvatarGrey2Color = "#000000";
133
+ export const amsAvatarGrey3BackgroundColor = "#767676";
134
+ export const amsAvatarGrey3Color = "#FFFFFF";
135
+ export const amsAvatarLightBlueBackgroundColor = "#009DE6";
136
+ export const amsAvatarLightBlueColor = "#000000";
129
137
  export const amsAvatarMagentaBackgroundColor = "#E50082";
130
138
  export const amsAvatarMagentaColor = "#FFFFFF";
131
139
  export const amsAvatarOrangeBackgroundColor = "#FF9100";
@@ -134,6 +142,8 @@ export const amsAvatarPurpleBackgroundColor = "#A00078";
134
142
  export const amsAvatarPurpleColor = "#FFFFFF";
135
143
  export const amsAvatarRedBackgroundColor = "#EC0000";
136
144
  export const amsAvatarRedColor = "#FFFFFF";
145
+ export const amsAvatarWhiteBackgroundColor = "#FFFFFF";
146
+ export const amsAvatarWhiteColor = "#000000";
137
147
  export const amsAvatarYellowBackgroundColor = "#FFE600";
138
148
  export const amsAvatarYellowColor = "#000000";
139
149
  export const amsBadgeFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -633,6 +643,24 @@ export const amsSwitchThumbHoverBoxShadow = "0 0 0 0.125rem #102E62";
633
643
  export const amsSwitchThumbHoverColor = "#102E62";
634
644
  export const amsSwitchCheckedBackgroundColor = "#004699";
635
645
  export const amsSwitchDisabledBackgroundColor = "#BEBEBE";
646
+ export const amsTableOfContentsFontFamily = "'Amsterdam Sans', Arial, sans-serif";
647
+ export const amsTableOfContentsFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
648
+ export const amsTableOfContentsFontWeight = 400;
649
+ export const amsTableOfContentsGap = "1rem";
650
+ export const amsTableOfContentsLineHeight = "1.6";
651
+ export const amsTableOfContentsLinkColor = "#004699";
652
+ export const amsTableOfContentsLinkOutlineOffset = "0.125rem";
653
+ export const amsTableOfContentsLinkTextDecorationLine = "none";
654
+ export const amsTableOfContentsLinkTextDecorationThickness = "0.125rem";
655
+ export const amsTableOfContentsLinkTextUnderlineOffset = "0.3333em";
656
+ export const amsTableOfContentsLinkHoverColor = "#102E62";
657
+ export const amsTableOfContentsLinkHoverTextDecorationLine = "underline";
658
+ export const amsTableOfContentsListGap = "1rem";
659
+ export const amsTableOfContentsListListPaddingBlockStart = "1rem";
660
+ export const amsTableOfContentsListListPaddingInlineStart = "1.5rem";
661
+ export const amsTableOfContentsHeadingFontWeight = 800;
662
+ export const amsTableOfContentsHeadingFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
663
+ export const amsTableOfContentsHeadingLineHeight = "1.5";
636
664
  export const amsTableColor = "#000000";
637
665
  export const amsTableFontFamily = "'Amsterdam Sans', Arial, sans-serif";
638
666
  export const amsTableFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
package/dist/index.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 05 Jun 2024 11:22:11 GMT
3
+ // Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
 
5
5
  $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
6
6
  $ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
@@ -122,11 +122,11 @@ $ams-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
122
122
  $ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
123
123
  $ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
124
124
  $ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
125
- $ams-proportion-2x-wide: 32 / 9;
125
+ $ams-proportion-2x-wide: 16 / 5;
126
126
  $ams-proportion-x-wide: 16 / 9;
127
- $ams-proportion-wide: 5 / 4;
127
+ $ams-proportion-wide: 4 / 3;
128
128
  $ams-proportion-square: 1 / 1;
129
- $ams-proportion-tall: 4 / 5;
129
+ $ams-proportion-tall: 3 / 4;
130
130
  $ams-proportion-x-tall: 9 / 16;
131
131
  $ams-color-neutral-grey3: #767676;
132
132
  $ams-color-neutral-grey2: #BEBEBE;
@@ -243,6 +243,21 @@ $ams-table-font-weight: $ams-text-font-weight-normal;
243
243
  $ams-table-font-size: $ams-text-level-5-font-size;
244
244
  $ams-table-font-family: $ams-text-font-family;
245
245
  $ams-table-color: $ams-color-primary-black;
246
+ $ams-table-of-contents-heading-line-height: $ams-text-level-4-line-height;
247
+ $ams-table-of-contents-heading-font-size: $ams-text-level-4-font-size;
248
+ $ams-table-of-contents-heading-font-weight: $ams-text-font-weight-bold;
249
+ $ams-table-of-contents-list-list-padding-inline-start: $ams-space-inside-lg;
250
+ $ams-table-of-contents-list-list-padding-block-start: $ams-space-inside-md;
251
+ $ams-table-of-contents-list-gap: $ams-space-inside-md;
252
+ $ams-table-of-contents-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
253
+ $ams-table-of-contents-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
254
+ $ams-table-of-contents-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
255
+ $ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
256
+ $ams-table-of-contents-line-height: $ams-text-level-5-line-height;
257
+ $ams-table-of-contents-gap: $ams-space-inside-md;
258
+ $ams-table-of-contents-font-weight: $ams-text-font-weight-normal;
259
+ $ams-table-of-contents-font-size: $ams-text-level-5-font-size;
260
+ $ams-table-of-contents-font-family: $ams-text-font-family;
246
261
  $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
247
262
  $ams-switch-checked-background-color: $ams-color-primary-blue;
248
263
  $ams-switch-thumb-hover-color: $ams-color-dark-blue;
@@ -659,6 +674,8 @@ $ams-badge-font-size: $ams-text-level-5-font-size;
659
674
  $ams-badge-font-family: $ams-text-font-family;
660
675
  $ams-avatar-yellow-color: $ams-color-primary-black;
661
676
  $ams-avatar-yellow-background-color: $ams-color-yellow;
677
+ $ams-avatar-white-color: $ams-color-primary-black;
678
+ $ams-avatar-white-background-color: $ams-color-primary-white;
662
679
  $ams-avatar-red-color: $ams-color-primary-white;
663
680
  $ams-avatar-red-background-color: $ams-color-primary-red;
664
681
  $ams-avatar-purple-color: $ams-color-primary-white;
@@ -667,14 +684,22 @@ $ams-avatar-orange-color: $ams-color-primary-black;
667
684
  $ams-avatar-orange-background-color: $ams-color-orange;
668
685
  $ams-avatar-magenta-color: $ams-color-primary-white;
669
686
  $ams-avatar-magenta-background-color: $ams-color-magenta;
687
+ $ams-avatar-light-blue-color: $ams-color-primary-black;
688
+ $ams-avatar-light-blue-background-color: $ams-color-blue;
689
+ $ams-avatar-grey-3-color: $ams-color-primary-white;
690
+ $ams-avatar-grey-3-background-color: $ams-color-neutral-grey3;
691
+ $ams-avatar-grey-2-color: $ams-color-primary-black;
692
+ $ams-avatar-grey-2-background-color: $ams-color-neutral-grey2;
693
+ $ams-avatar-grey-1-color: $ams-color-primary-black;
694
+ $ams-avatar-grey-1-background-color: $ams-color-neutral-grey1;
670
695
  $ams-avatar-green-color: $ams-color-primary-black;
671
696
  $ams-avatar-green-background-color: $ams-color-green;
672
697
  $ams-avatar-dark-green-color: $ams-color-primary-white;
673
698
  $ams-avatar-dark-green-background-color: $ams-color-dark-green;
674
- $ams-avatar-dark-blue-color: $ams-color-primary-white;
675
- $ams-avatar-dark-blue-background-color: $ams-color-primary-blue;
676
- $ams-avatar-blue-color: $ams-color-primary-black;
677
- $ams-avatar-blue-background-color: $ams-color-blue;
699
+ $ams-avatar-blue-color: $ams-color-primary-white;
700
+ $ams-avatar-blue-background-color: $ams-color-primary-blue;
701
+ $ams-avatar-black-color: $ams-color-primary-white;
702
+ $ams-avatar-black-background-color: $ams-color-primary-black;
678
703
  $ams-avatar-line-height: $ams-text-level-6-line-height;
679
704
  $ams-avatar-font-weight: $ams-text-font-weight-normal;
680
705
  $ams-avatar-font-size: $ams-text-level-6-font-size;
@@ -714,6 +739,9 @@ $ams-link-appearance-text-decoration-thickness: $ams-border-width-md;
714
739
  $ams-link-appearance-color: $ams-color-primary-blue;
715
740
  $ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
716
741
  $ams-top-task-link-label-color: $ams-link-appearance-color;
742
+ $ams-table-of-contents-link-hover-color: $ams-link-appearance-hover-color;
743
+ $ams-table-of-contents-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
744
+ $ams-table-of-contents-link-color: $ams-link-appearance-color;
717
745
  $ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-color;
718
746
  $ams-pagination-button-hover-color: $ams-link-appearance-hover-color;
719
747
  $ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
package/dist/index.theme.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 05 Jun 2024 11:22:10 GMT
3
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
4
4
  */
5
5
 
6
6
  .ams-theme {
@@ -124,11 +124,11 @@
124
124
  --ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
125
125
  --ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
126
126
  --ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
127
- --ams-proportion-2x-wide: 32 / 9;
127
+ --ams-proportion-2x-wide: 16 / 5;
128
128
  --ams-proportion-x-wide: 16 / 9;
129
- --ams-proportion-wide: 5 / 4;
129
+ --ams-proportion-wide: 4 / 3;
130
130
  --ams-proportion-square: 1 / 1;
131
- --ams-proportion-tall: 4 / 5;
131
+ --ams-proportion-tall: 3 / 4;
132
132
  --ams-proportion-x-tall: 9 / 16;
133
133
  --ams-color-neutral-grey3: #767676;
134
134
  --ams-color-neutral-grey2: #BEBEBE;
@@ -245,6 +245,21 @@
245
245
  --ams-table-font-size: var(--ams-text-level-5-font-size);
246
246
  --ams-table-font-family: var(--ams-text-font-family);
247
247
  --ams-table-color: var(--ams-color-primary-black);
248
+ --ams-table-of-contents-heading-line-height: var(--ams-text-level-4-line-height);
249
+ --ams-table-of-contents-heading-font-size: var(--ams-text-level-4-font-size);
250
+ --ams-table-of-contents-heading-font-weight: var(--ams-text-font-weight-bold);
251
+ --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-inside-lg);
252
+ --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-inside-md);
253
+ --ams-table-of-contents-list-gap: var(--ams-space-inside-md);
254
+ --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
255
+ --ams-table-of-contents-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
256
+ --ams-table-of-contents-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
257
+ --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
258
+ --ams-table-of-contents-line-height: var(--ams-text-level-5-line-height);
259
+ --ams-table-of-contents-gap: var(--ams-space-inside-md);
260
+ --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
261
+ --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
262
+ --ams-table-of-contents-font-family: var(--ams-text-font-family);
248
263
  --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
249
264
  --ams-switch-checked-background-color: var(--ams-color-primary-blue);
250
265
  --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
@@ -661,6 +676,8 @@
661
676
  --ams-badge-font-family: var(--ams-text-font-family);
662
677
  --ams-avatar-yellow-color: var(--ams-color-primary-black);
663
678
  --ams-avatar-yellow-background-color: var(--ams-color-yellow);
679
+ --ams-avatar-white-color: var(--ams-color-primary-black);
680
+ --ams-avatar-white-background-color: var(--ams-color-primary-white);
664
681
  --ams-avatar-red-color: var(--ams-color-primary-white);
665
682
  --ams-avatar-red-background-color: var(--ams-color-primary-red);
666
683
  --ams-avatar-purple-color: var(--ams-color-primary-white);
@@ -669,14 +686,22 @@
669
686
  --ams-avatar-orange-background-color: var(--ams-color-orange);
670
687
  --ams-avatar-magenta-color: var(--ams-color-primary-white);
671
688
  --ams-avatar-magenta-background-color: var(--ams-color-magenta);
689
+ --ams-avatar-light-blue-color: var(--ams-color-primary-black);
690
+ --ams-avatar-light-blue-background-color: var(--ams-color-blue);
691
+ --ams-avatar-grey-3-color: var(--ams-color-primary-white);
692
+ --ams-avatar-grey-3-background-color: var(--ams-color-neutral-grey3);
693
+ --ams-avatar-grey-2-color: var(--ams-color-primary-black);
694
+ --ams-avatar-grey-2-background-color: var(--ams-color-neutral-grey2);
695
+ --ams-avatar-grey-1-color: var(--ams-color-primary-black);
696
+ --ams-avatar-grey-1-background-color: var(--ams-color-neutral-grey1);
672
697
  --ams-avatar-green-color: var(--ams-color-primary-black);
673
698
  --ams-avatar-green-background-color: var(--ams-color-green);
674
699
  --ams-avatar-dark-green-color: var(--ams-color-primary-white);
675
700
  --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
676
- --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
677
- --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
678
- --ams-avatar-blue-color: var(--ams-color-primary-black);
679
- --ams-avatar-blue-background-color: var(--ams-color-blue);
701
+ --ams-avatar-blue-color: var(--ams-color-primary-white);
702
+ --ams-avatar-blue-background-color: var(--ams-color-primary-blue);
703
+ --ams-avatar-black-color: var(--ams-color-primary-white);
704
+ --ams-avatar-black-background-color: var(--ams-color-primary-black);
680
705
  --ams-avatar-line-height: var(--ams-text-level-6-line-height);
681
706
  --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
682
707
  --ams-avatar-font-size: var(--ams-text-level-6-font-size);
@@ -716,6 +741,9 @@
716
741
  --ams-link-appearance-color: var(--ams-color-primary-blue);
717
742
  --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
718
743
  --ams-top-task-link-label-color: var(--ams-link-appearance-color);
744
+ --ams-table-of-contents-link-hover-color: var(--ams-link-appearance-hover-color);
745
+ --ams-table-of-contents-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
746
+ --ams-table-of-contents-link-color: var(--ams-link-appearance-color);
719
747
  --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
720
748
  --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
721
749
  --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.9.0",
2
+ "version": "0.10.0",
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",
package/src/brand/ams/proportion.tokens.json CHANGED
@@ -2,11 +2,11 @@
2
2
  "ams": {
3
3
  "proportion": {
4
4
  "x-tall": { "value": "9 / 16" },
5
- "tall": { "value": "4 / 5" },
5
+ "tall": { "value": "3 / 4" },
6
6
  "square": { "value": "1 / 1" },
7
- "wide": { "value": "5 / 4" },
7
+ "wide": { "value": "4 / 3" },
8
8
  "x-wide": { "value": "16 / 9" },
9
- "2x-wide": { "value": "32 / 9" }
9
+ "2x-wide": { "value": "16 / 5" }
10
10
  }
11
11
  }
12
12
  }
package/src/components/ams/avatar.tokens.json CHANGED
@@ -8,11 +8,11 @@
8
8
  "line-height": { "value": "{ams.text.level.6.line-height}" },
9
9
  "padding-block": { "value": "0.25rem" },
10
10
  "padding-inline": { "value": "0.25rem" },
11
- "blue": {
12
- "background-color": { "value": "{ams.color.blue}" },
13
- "color": { "value": "{ams.color.primary-black}" }
11
+ "black": {
12
+ "background-color": { "value": "{ams.color.primary-black}" },
13
+ "color": { "value": "{ams.color.primary-white}" }
14
14
  },
15
- "dark-blue": {
15
+ "blue": {
16
16
  "background-color": { "value": "{ams.color.primary-blue}" },
17
17
  "color": { "value": "{ams.color.primary-white}" }
18
18
  },
@@ -24,6 +24,22 @@
24
24
  "background-color": { "value": "{ams.color.green}" },
25
25
  "color": { "value": "{ams.color.primary-black}" }
26
26
  },
27
+ "grey-1": {
28
+ "background-color": { "value": "{ams.color.neutral-grey1}" },
29
+ "color": { "value": "{ams.color.primary-black}" }
30
+ },
31
+ "grey-2": {
32
+ "background-color": { "value": "{ams.color.neutral-grey2}" },
33
+ "color": { "value": "{ams.color.primary-black}" }
34
+ },
35
+ "grey-3": {
36
+ "background-color": { "value": "{ams.color.neutral-grey3}" },
37
+ "color": { "value": "{ams.color.primary-white}" }
38
+ },
39
+ "light-blue": {
40
+ "background-color": { "value": "{ams.color.blue}" },
41
+ "color": { "value": "{ams.color.primary-black}" }
42
+ },
27
43
  "magenta": {
28
44
  "background-color": { "value": "{ams.color.magenta}" },
29
45
  "color": { "value": "{ams.color.primary-white}" }
@@ -40,6 +56,10 @@
40
56
  "background-color": { "value": "{ams.color.primary-red}" },
41
57
  "color": { "value": "{ams.color.primary-white}" }
42
58
  },
59
+ "white": {
60
+ "background-color": { "value": "{ams.color.primary-white}" },
61
+ "color": { "value": "{ams.color.primary-black}" }
62
+ },
43
63
  "yellow": {
44
64
  "background-color": { "value": "{ams.color.yellow}" },
45
65
  "color": { "value": "{ams.color.primary-black}" }
package/src/components/ams/table-of-contents.tokens.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "ams": {
3
+ "table-of-contents": {
4
+ "font-family": { "value": "{ams.text.font-family}" },
5
+ "font-size": { "value": "{ams.text.level.5.font-size}" },
6
+ "font-weight": { "value": "{ams.text.font-weight.normal}" },
7
+ "gap": { "value": "{ams.space.inside.md}" },
8
+ "line-height": { "value": "{ams.text.level.5.line-height}" },
9
+ "link": {
10
+ "color": { "value": "{ams.link-appearance.color}" },
11
+ "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
+ "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
15
+ "hover": {
16
+ "color": { "value": "{ams.link-appearance.hover.color}" },
17
+ "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
18
+ }
19
+ },
20
+ "list": {
21
+ "gap": { "value": "{ams.space.inside.md}" },
22
+ "list": {
23
+ "padding-block-start": { "value": "{ams.space.inside.md}" },
24
+ "padding-inline-start": { "value": "{ams.space.inside.lg}" }
25
+ }
26
+ },
27
+ "heading": {
28
+ "font-weight": { "value": "{ams.text.font-weight.bold}" },
29
+ "font-size": { "value": "{ams.text.level.4.font-size}" },
30
+ "line-height": { "value": "{ams.text.level.4.line-height}" }
31
+ }
32
+ }
33
+ }
34
+ }