@amsterdam/design-system-tokens 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.1.0...design-system-tokens-v3.2.0) (2026-03-13)
+
+
+### Features
+
+* **Description List:** Vary spacing within and between groups, remove indentation of descriptions ([#2448](https://github.com/Amsterdam/design-system/issues/2448)) ([f8c4fa0](https://github.com/Amsterdam/design-system/commit/f8c4fa00795b4d9012e9e81f4d3311db83109cb5))
+* **Dialog:** Add design tokens for border radius and box shadow ([#2435](https://github.com/Amsterdam/design-system/issues/2435)) ([2b8b28a](https://github.com/Amsterdam/design-system/commit/2b8b28a5b163c68746924b42467904f0a281551f))
+* **Image Slider:** Allow adding captions to images ([#2436](https://github.com/Amsterdam/design-system/issues/2436)) ([a48f585](https://github.com/Amsterdam/design-system/commit/a48f5852157392f0cdcf74f8637c42a2d4ed0c77))
+* **Page Header:** Make menu button blue ([#2408](https://github.com/Amsterdam/design-system/issues/2408)) ([3915f84](https://github.com/Amsterdam/design-system/commit/3915f84f97df2f9d915704a99eae6f05f69be8f6))
+
 ## [3.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.0.0...design-system-tokens-v3.1.0) (2026-01-28)
 
 

package/README.md

@@ -162,6 +162,50 @@ At the same time, we are aware that adopting a design system can pose challenges
 If there is a good reason to (temporarily) adapt a component, do so by overriding the values of its appropriate tokens in a separate stylesheet.
 Note that redefining the value of a token is a much better approach than redeclaring styles, adding class names or even inline styles.
 
+## Token types
+
+Tokens have a type or extension that we use to generate visual previews in our documentation.
+When adding new tokens, define a type from the DTCG specification or add one of our custom extensions when needed.
+Do not add an type or extension if the token cannot be previewed.
+
+### DTCG standard types
+
+The following types come from the [Design Tokens Community Group (DTCG) specification](https://www.designtokens.org/tr/2025.10/format/):
+
+| Type         | Description               |
+| ------------ | ------------------------- |
+| `color`      | Any colour value          |
+| `dimension`  | Any dimension with a unit |
+| `fontFamily` | Font family definitions   |
+| `fontWeight` | Font weight values        |
+
+### Custom extensions
+
+#### Type
+
+For some properties, we add custom types under `$extensions.nl.amsterdam.type`:
+
+| Type          | Description                      |
+| ------------- | -------------------------------- |
+| `borderStyle` | Border style values              |
+| `borderWidth` | Border thickness values          |
+| `fontSize`    | Font size values                 |
+| `lineHeight`  | Unitless line height multipliers |
+
+Tokens without a type have values that we currently do not preview.
+
+#### Subtype
+
+We add a subtype for certain types to further specify their purpose and preview.
+
+| Subtype | For type    | Description                |
+| ------- | ----------- | -------------------------- |
+| `space` | `dimension` | Margins, paddings and gaps |
+
+#### Hint
+
+An `$extensions.nl.amsterdam.hint` indicates special handling for internal use.
+
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.
@@ -172,7 +216,7 @@ As they are already prefixed, the namespace that Sass would assign isn’t neces
 ```
 
 Import the compact tokens if needed.
-Note that Sass doesn't allow importing them alongside the default set due to naming conflicts.
+Note that Sass doesn’t allow importing them alongside the default set due to naming conflicts.
 Address these tokens through the `compact` namespace and do not use the spacious tokens they replace.
 
 ```sass

package/build.js

@@ -1,31 +1,21 @@
-import { camelCase, kebabCase } from 'change-case'
-import StyleDictionary from 'style-dictionary'
-import { transformTypes } from 'style-dictionary/enums'
-
-// Remove last key if it is 'default' when transforming to kebab-case
-// i.e. `ams.color.default` becomes `--ams-color`
-StyleDictionary.registerTransform({
-  name: 'name/customKebab',
-  transform: function (token) {
-    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 
-    return kebabCase(filteredPath.join(' '))
-  },
-  type: transformTypes.name,
-})
+import StyleDictionary from 'style-dictionary'
 
-// Remove last key if it is 'default' when transforming to camelCase
-// i.e. `ams.color.default` becomes `amsColor`
-StyleDictionary.registerTransform({
-  name: 'name/customCamel',
-  transform: function (token) {
-    const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
+import { dtcgDimension } from './style-dictionary/transforms/dtcg-dimension.js'
+import { nameCustomCamel } from './style-dictionary/transforms/name-custom-camel.js'
+import { nameCustomKebab } from './style-dictionary/transforms/name-custom-kebab.js'
+import { shadowDTCGDimensionNormalize } from './style-dictionary/transforms/shadow-dtcg-dimension-normalize.js'
 
-    return camelCase(filteredPath.join(' '))
-  },
-  type: transformTypes.name,
-})
+StyleDictionary.registerTransform(dtcgDimension)
+StyleDictionary.registerTransform(nameCustomCamel)
+StyleDictionary.registerTransform(nameCustomKebab)
+StyleDictionary.registerTransform(shadowDTCGDimensionNormalize)
 
+const commonCssTransforms = ['shadow/dtcg-dimension-normalize', 'shadow/css/shorthand', 'dtcg/dimension']
 const modes = ['compact']
 
 function generateSharedConfig(mode) {
@@ -43,8 +33,7 @@ function generateSharedConfig(mode) {
           },
         },
       ],
-      transformGroup: 'css',
-      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
+      transforms: [...commonCssTransforms, 'name/customKebab'],
     },
     cssTheme: {
       buildPath: 'dist/',
@@ -58,7 +47,7 @@ function generateSharedConfig(mode) {
           },
         },
       ],
-      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
+      transforms: [...commonCssTransforms, 'name/customKebab'],
     },
     js: {
       buildPath: 'dist/',
@@ -68,7 +57,7 @@ function generateSharedConfig(mode) {
           format: 'javascript/es6',
         },
       ],
-      transforms: ['attribute/cti', 'name/customCamel', 'color/hsl-4'],
+      transforms: [...commonCssTransforms, 'name/customCamel'],
     },
     json: {
       buildPath: 'dist/',
@@ -78,7 +67,7 @@ function generateSharedConfig(mode) {
           format: 'json/nested',
         },
       ],
-      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
+      transforms: [...commonCssTransforms, 'name/camel'],
     },
     scss: {
       buildPath: 'dist/',
@@ -91,7 +80,7 @@ function generateSharedConfig(mode) {
           },
         },
       ],
-      transforms: ['attribute/cti', 'name/customKebab', 'color/hsl-4'],
+      transforms: [...commonCssTransforms, 'name/customKebab'],
     },
     typescript: {
       buildPath: 'dist/',
@@ -101,8 +90,8 @@ function generateSharedConfig(mode) {
           format: 'typescript/module-declarations',
         },
       ],
-      transformGroup: 'js',
-      transforms: ['attribute/cti', 'name/camel', 'color/hsl-4'],
+      // Type declarations only — no CSS-specific transforms needed
+      transforms: ['name/customCamel'],
     },
   }
 }
@@ -120,10 +109,11 @@ const defaultMode = new StyleDictionary({
 
 defaultMode.buildAllPlatforms()
 
-modes.map((mode) => {
+for (const mode of modes) {
   const styleDictionary = new StyleDictionary({
     platforms: generateSharedConfig(mode),
     source: [`./src/**/*.${mode}.tokens.json`],
   })
-  return styleDictionary.buildAllPlatforms()
-})
+
+  styleDictionary.buildAllPlatforms()
+}

package/dist/compact.css

@@ -21,7 +21,7 @@
   --ams-typography-body-text-large-line-height: 1.4;
   --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
   --ams-typography-body-text-x-large-line-height: 1.3;
-  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); /** Use Heading size 1 instead. */
+  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem);
   --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
   --ams-typography-heading-1-line-height: 1.2;
   --ams-typography-heading-2-line-height: 1.3;
@@ -33,7 +33,7 @@
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
   --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
+  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
   --ams-grid-padding-inline: var(--ams-space-xl);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);

package/dist/compact.d.ts

@@ -5,9 +5,9 @@
 export default tokens;
 
 declare interface DesignToken {
-  value?: any;
-  type?: string;
-  comment?: string;
+  $value?: any;
+  $type?: string;
+  $description?: string;
   name?: string;
   themeable?: boolean;
   attributes?: Record<string, unknown>;

package/dist/compact.mjs

@@ -23,7 +23,7 @@ export const amsTypographyBodyTextXLargeFontSize =
   "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
 export const amsTypographyBodyTextXLargeLineHeight = "1.3";
 export const amsTypographyHeading_0FontSize =
-  "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)"; // Use Heading size 1 instead.
+  "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)";
 export const amsTypographyHeading_1FontSize =
   "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)";
 export const amsTypographyHeading_1LineHeight = "1.2";
@@ -37,7 +37,7 @@ export const amsTypographyHeading_4FontSize = "1rem";
 export const amsTypographyHeading_4LineHeight = "1.4";
 export const amsTypographyHeading_5FontSize = "0.875rem";
 export const amsTypographyHeading_5LineHeight = "1.4";
-export const amsTypographyHeading_6FontSize = "0.875rem"; // Use Heading size 5 instead.
+export const amsTypographyHeading_6FontSize = "0.875rem";
 export const amsGridPaddingInline =
   "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)";
 export const amsPageHeaderBrandNameFontSize =

package/dist/compact.scss

@@ -19,7 +19,7 @@ $ams-typography-body-text-large-font-size: clamp(1.125rem, 1.1071rem + 0.0893vw,
 $ams-typography-body-text-large-line-height: 1.4;
 $ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
 $ams-typography-body-text-x-large-line-height: 1.3;
-$ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); // Use Heading size 1 instead.
+$ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem);
 $ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
 $ams-typography-heading-1-line-height: 1.2;
 $ams-typography-heading-2-line-height: 1.3;
@@ -31,7 +31,7 @@ $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size
 $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
 $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
 $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
-$ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
+$ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
 $ams-grid-padding-inline: $ams-space-xl;
 $ams-page-header-brand-name-line-height: $ams-typography-heading-2-line-height;
 $ams-page-header-brand-name-font-size: $ams-typography-heading-2-font-size;

package/dist/compact.theme.css

@@ -21,7 +21,7 @@
   --ams-typography-body-text-large-line-height: 1.4;
   --ams-typography-body-text-x-large-font-size: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
   --ams-typography-body-text-x-large-line-height: 1.3;
-  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem); /** Use Heading size 1 instead. */
+  --ams-typography-heading-0-font-size: clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem);
   --ams-typography-heading-1-font-size: clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem);
   --ams-typography-heading-1-line-height: 1.2;
   --ams-typography-heading-2-line-height: 1.3;
@@ -33,7 +33,7 @@
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
   --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
+  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
   --ams-grid-padding-inline: var(--ams-space-xl);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);

package/dist/index.css

@@ -13,7 +13,7 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #202020; /** Use `currentColor` instead */
+  --ams-color-interactive-secondary: #202020;
   --ams-color-interactive-contrast: #202020;
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
@@ -49,15 +49,15 @@
   --ams-space-l: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
   --ams-space-xl: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
   --ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
-  --ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem); /** Use Heading size 1 instead. */
-  --ams-typography-heading-0-line-height: 1.1; /** Use Heading size 1 instead. */
+  --ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem);
+  --ams-typography-heading-0-line-height: 1.1;
   --ams-typography-heading-1-font-size: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
   --ams-typography-heading-1-line-height: 1.2;
   --ams-typography-heading-2-line-height: 1.3;
   --ams-typography-heading-3-line-height: 1.3;
   --ams-typography-heading-4-line-height: 1.4;
   --ams-typography-heading-5-line-height: 1.4;
-  --ams-typography-heading-6-line-height: 1.4; /** Use Heading size 5 instead. */
+  --ams-typography-heading-6-line-height: 1.4;
   --ams-typography-heading-font-weight: 800;
   --ams-typography-heading-text-wrap: balance;
   --ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
@@ -75,10 +75,10 @@
   --ams-inputs-border-color: currentColor;
   --ams-inputs-border-style: solid;
   --ams-inputs-line-height: 1.4;
-  --ams-links-text-decoration-thickness: 0.125rem; /** 2px */
-  --ams-links-text-underline-offset: 0.15625rem; /** 2.5px */
-  --ams-links-hover-text-decoration-thickness: 0.1875rem; /** 3px */
-  --ams-links-hover-text-underline-offset: 0.09375rem; /** 1.5px */
+  --ams-links-text-decoration-thickness: 0.125rem;
+  --ams-links-text-underline-offset: 0.15625rem;
+  --ams-links-hover-text-decoration-thickness: 0.1875rem;
+  --ams-links-hover-text-underline-offset: 0.09375rem;
   --ams-links-subtle-text-decoration-line: none;
   --ams-links-subtle-hover-text-decoration-line: underline;
   --ams-accordion-button-padding-inline: 0;
@@ -96,16 +96,19 @@
   --ams-button-tertiary-hover-border-color: currentColor;
   --ams-call-to-action-link-background-color: #00893c;
   --ams-call-to-action-link-hover-background-color: #10552b;
-  --ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** This token will be removed in release 6.0.0 */
-  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
-  --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
-  --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-description-list-description-padding-inline-start: 0;
   --ams-description-list-narrow-grid-template-columns: 1fr 4fr;
   --ams-description-list-medium-grid-template-columns: 1fr 2fr;
   --ams-description-list-wide-grid-template-columns: 1fr 1fr;
+  --ams-dialog-border-radius: initial;
   --ams-dialog-border-style: solid;
+  --ams-dialog-box-shadow: initial;
   --ams-dialog-max-inline-size: 48rem;
   --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
   --ams-dialog-body-padding-block: 0;
@@ -128,11 +131,11 @@
   --ams-logo-title-color: #ec0000;
   --ams-menu-wide-max-inline-size: 8rem;
   --ams-ordered-list-list-style-type: decimal;
-  --ams-ordered-list-item-margin-inline-start: 2.25rem; /** Divide your total indentation width over margin and padding to position the marker. */
-  --ams-ordered-list-item-padding-inline-start: 0.25rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
+  --ams-ordered-list-item-margin-inline-start: 2.25rem;
+  --ams-ordered-list-item-padding-inline-start: 0.25rem;
   --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
-  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /** Indent less than the parent to start-align the child’s marker with the parent text. */
-  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
+  --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem;
+  --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem;
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
   --ams-page-with-menu-max-inline-size: 120rem;
@@ -158,22 +161,22 @@
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
   --ams-time-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
-  --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
-  --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+  --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
-  --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-time-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-unordered-list-list-style-type: '\2022';
-  --ams-unordered-list-item-margin-inline-start: 1.625rem; /** Divide your total indentation width over margin and padding to position the marker. */
-  --ams-unordered-list-item-padding-inline-start: 0.875rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
+  --ams-unordered-list-item-margin-inline-start: 1.625rem;
+  --ams-unordered-list-item-padding-inline-start: 0.875rem;
   --ams-unordered-list-unordered-list-list-style-type: '\2013';
-  --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. */
-  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
+  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem;
+  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem;
   --ams-typography-heading-2-font-size: var(--ams-typography-body-text-x-large-font-size);
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-typography-heading-4-font-size: var(--ams-typography-body-text-font-size);
   --ams-typography-heading-5-font-size: var(--ams-typography-body-text-small-font-size);
-  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size); /** Use Heading size 5 instead. */
+  --ams-typography-heading-6-font-size: var(--ams-typography-body-text-small-font-size);
   --ams-inputs-background-color: var(--ams-color-background);
   --ams-inputs-border-width: var(--ams-border-width-m);
   --ams-inputs-color: var(--ams-color-text);
@@ -184,10 +187,10 @@
   --ams-inputs-padding-block: var(--ams-space-s);
   --ams-inputs-padding-inline: var(--ams-space-m);
   --ams-inputs-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-inputs-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-inputs-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor;
   --ams-inputs-invalid-border-color: var(--ams-color-interactive-invalid);
   --ams-inputs-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
-  --ams-inputs-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
+  --ams-inputs-invalid-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-inputs-placeholder-color: var(--ams-color-text-secondary);
   --ams-links-color: var(--ams-color-interactive);
   --ams-links-hover-color: var(--ams-color-interactive-hover);
@@ -314,7 +317,7 @@
   --ams-button-secondary-color: var(--ams-color-interactive);
   --ams-button-secondary-disabled-border-color: var(--ams-color-interactive-disabled);
   --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-button-secondary-hover-box-shadow: inset 0rem 0rem 0rem var(--ams-border-width-s) currentColor;
   --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
   --ams-button-tertiary-color: var(--ams-color-interactive);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
@@ -346,7 +349,7 @@
   --ams-character-count-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-character-count-line-height: var(--ams-typography-body-text-small-line-height);
   --ams-character-count-error-color: var(--ams-color-feedback-error);
-  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-m); /** Use `ams.checkbox.text-decoration-thickness` instead */
+  --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-m);
   --ams-checkbox-hover-color: var(--ams-color-interactive-hover);
   --ams-checkbox-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-checkbox-rectangle-checked-disabled-hover-fill: var(--ams-color-interactive-disabled);
@@ -392,7 +395,7 @@
   --ams-column-gap-large: var(--ams-space-l);
   --ams-column-gap-x-large: var(--ams-space-xl);
   --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-date-input-border-color: var(--ams-inputs-border-color);
   --ams-date-input-border-style: var(--ams-inputs-border-style);
   --ams-date-input-line-height: var(--ams-inputs-line-height);
@@ -405,8 +408,10 @@
   --ams-description-list-row-gap: var(--ams-space-s);
   --ams-description-list-inverse-color: var(--ams-color-text-inverse);
   --ams-description-list-term-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-description-list-term-margin-block-end: var(--ams-space-xs);
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
-  --ams-description-list-description-padding-inline-start: var(--ams-space-l);
+  --ams-description-list-description-margin-block-end: var(--ams-space-m);
+  --ams-description-list-section-margin-block-end: var(--ams-space-m);
   --ams-dialog-background-color: var(--ams-color-background);
   --ams-dialog-border-width: var(--ams-border-width-m);
   --ams-dialog-gap: var(--ams-space-m);
@@ -512,8 +517,8 @@
   --ams-icon-button-inverse-hover-color: var(--ams-color-interactive-inverse);
   --ams-icon-button-inverse-disabled-color: var(--ams-color-interactive-inverse);
   --ams-icon-button-inverse-disabled-background-color: var(--ams-color-interactive-disabled);
-  --ams-icon-heading-0-font-size: var(--ams-typography-heading-0-font-size); /** Deprecated. Use ‘heading 1’ instead. */
-  --ams-icon-heading-0-line-height: var(--ams-typography-heading-0-line-height); /** Deprecated. Use ‘heading 1’ instead. */
+  --ams-icon-heading-0-font-size: var(--ams-typography-heading-0-font-size);
+  --ams-icon-heading-0-line-height: var(--ams-typography-heading-0-line-height);
   --ams-icon-font-size: var(--ams-typography-body-text-font-size);
   --ams-icon-line-height: var(--ams-typography-body-text-line-height);
   --ams-icon-small-font-size: var(--ams-typography-body-text-small-font-size);
@@ -534,6 +539,7 @@
   --ams-image-slider-thumbnails-gap: var(--ams-space-xs);
   --ams-image-slider-thumbnails-thumbnail-cursor: var(--ams-cursor-interactive);
   --ams-image-slider-thumbnails-thumbnail-outline-offset: var(--ams-focus-outline-offset);
+  --ams-image-slider-figure-margin-block-end: var(--ams-space-m);
   --ams-image-aspect-ratio: var(--ams-aspect-ratio-16-9);
   --ams-invalid-form-alert-outline-offset: var(--ams-focus-outline-offset);
   --ams-label-color: var(--ams-color-text);
@@ -616,8 +622,13 @@
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-3-line-height);
   --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-page-header-mega-menu-padding-block: var(--ams-space-l);
+  --ams-page-header-mega-menu-button-background-color: var(--ams-color-interactive);
+  --ams-page-header-mega-menu-button-color: var(--ams-color-text-inverse);
   --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
   --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
+  --ams-page-header-mega-menu-button-padding-inline: var(--ams-space-s);
+  --ams-page-header-mega-menu-button-hover-background-color: var(--ams-color-interactive-hover);
+  --ams-page-header-mega-menu-button-hover-color: var(--ams-color-text-inverse);
   --ams-page-header-menu-column-gap: var(--ams-space-l);
   --ams-page-header-menu-row-gap: var(--ams-space-xs);
   --ams-page-header-menu-item-column-gap: var(--ams-space-xs);
@@ -774,12 +785,12 @@
   --ams-spotlight-magenta-background-color: var(--ams-color-highlight-magenta);
   --ams-spotlight-orange-background-color: var(--ams-color-highlight-orange);
   --ams-spotlight-yellow-background-color: var(--ams-color-highlight-yellow);
-  --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness); /** Use `ams.standalone-link.text-decoration-thickness` instead */
-  --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset); /** Use `ams.standalone-link.text-underline-offset` instead */
+  --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
+  --ams-standalone-link-hover-text-underline-offset: var(--ams-links-hover-text-underline-offset);
   --ams-standalone-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
-  --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line); /** Use `ams.standalone-link.text-decoration-line` instead */
-  --ams-standalone-link-with-icon-text-decoration-thickness: var(--ams-links-text-decoration-thickness); /** Use `ams.standalone-link.text-decoration-thickness` instead */
-  --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line); /** Use `ams.standalone-link.hover.text-decoration-line` instead */
+  --ams-standalone-link-with-icon-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
+  --ams-standalone-link-with-icon-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
+  --ams-standalone-link-with-icon-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-standalone-link-column-gap: var(--ams-space-s);
   --ams-standalone-link-font-family: var(--ams-typography-font-family);
   --ams-standalone-link-font-size: var(--ams-typography-body-text-font-size);
@@ -823,7 +834,7 @@
   --ams-table-cell-padding-inline: var(--ams-space-m);
   --ams-table-header-cell-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-tabs-gap: var(--ams-space-m);
-  --ams-tabs-list-box-shadow: inset 0 calc(var(--ams-border-width-m) * -1) var(--ams-color-separator);
+  --ams-tabs-list-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 0rem 0rem var(--ams-color-separator);
   --ams-tabs-button-color: var(--ams-color-interactive);
   --ams-tabs-button-cursor: var(--ams-cursor-interactive);
   --ams-tabs-button-font-family: var(--ams-typography-font-family);
@@ -833,9 +844,9 @@
   --ams-tabs-button-outline-offset: calc(var(--ams-focus-outline-offset) * -1);
   --ams-tabs-button-padding-block: var(--ams-space-s);
   --ams-tabs-button-padding-inline: var(--ams-space-m);
-  --ams-tabs-button-hover-box-shadow: inset 0 calc(var(--ams-border-width-m) * -1);
+  --ams-tabs-button-hover-box-shadow: inset 0rem calc(var(--ams-border-width-m) * -1) 0rem 0rem currentColor;
   --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
-  --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1);
+  --ams-tabs-button-selected-box-shadow: inset 0rem calc(var(--ams-border-width-xl) * -1) 0rem 0rem currentColor;
   --ams-tabs-button-selected-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-tabs-button-disabled-color: var(--ams-color-interactive-disabled);
   --ams-tabs-button-disabled-cursor: var(--ams-cursor-disabled);
@@ -849,7 +860,7 @@
   --ams-text-input-line-height: var(--ams-inputs-line-height);
   --ams-text-input-disabled-cursor: var(--ams-cursor-disabled);
   --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive); /** Use the token with ‘calendar’ spelled correctly instead */
+  --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
   --ams-time-input-border-color: var(--ams-inputs-border-color);
   --ams-time-input-border-style: var(--ams-inputs-border-style);
   --ams-time-input-line-height: var(--ams-inputs-line-height);
@@ -931,10 +942,10 @@
   --ams-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
   --ams-link-inverse-color: var(--ams-links-inverse-color);
   --ams-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
-  --ams-menu-link-contrast-color: var(--ams-links-contrast-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-inverse-color: var(--ams-links-inverse-color); /** The menu has a dark background now, so this is no longer needed. */
-  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color); /** The menu has a dark background now, so this is no longer needed. */
+  --ams-menu-link-contrast-color: var(--ams-links-contrast-color);
+  --ams-menu-link-contrast-hover-color: var(--ams-links-contrast-hover-color);
+  --ams-menu-link-inverse-color: var(--ams-links-inverse-color);
+  --ams-menu-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
   --ams-menu-link-color: var(--ams-links-inverse-color);
   --ams-menu-link-hover-color: var(--ams-links-inverse-hover-color);
   --ams-menu-wide-padding-block: calc(var(--ams-logo-block-size) + 2 * var(--ams-page-header-padding-block)) var(--ams-space-m);
@@ -943,13 +954,14 @@
   --ams-page-footer-menu-wide-padding-inline: var(--ams-grid-wide-padding-inline);
   --ams-page-footer-menu-link-color: var(--ams-links-color);
   --ams-page-footer-menu-link-hover-color: var(--ams-links-hover-color);
-  --ams-page-header-padding-inline: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Header and Grid line up */
+  --ams-page-header-padding-inline: var(--ams-grid-padding-inline);
   --ams-page-header-medium-padding-inline: var(--ams-grid-medium-padding-inline);
   --ams-page-header-wide-padding-inline: var(--ams-grid-wide-padding-inline);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
-  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
+  --ams-page-header-menu-link-color: var(--ams-links-color);
+  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline);
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-password-input-background-color: var(--ams-inputs-background-color);