@amsterdam/design-system-tokens 2.1.0 → 3.0.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.2.0...design-system-tokens-v3.0.0) (2026-01-09)
+
+
+### Deprecations
+
+The following tokens will be removed in release 5.0.0:
+
+- `ams.field-set.legend.margin-block-end`
+-  `ams.field.gap`
+
+### Features
+
+* Change our shade of black to improve contrast ([#2346](https://github.com/Amsterdam/design-system/issues/2346)) ([3ad6b78](https://github.com/Amsterdam/design-system/commit/3ad6b78b52d97c739a0847d212aa6715caa7b2e0))
+* Change our shades of green to improve contrast ([#2347](https://github.com/Amsterdam/design-system/issues/2347)) ([c3f6157](https://github.com/Amsterdam/design-system/commit/c3f61573f5821bf63ffa1500f9722ac70210f8cc))
+* **Field, Field Set:** Change spacing between elements ([#2358](https://github.com/Amsterdam/design-system/issues/2358)) ([6bcace7](https://github.com/Amsterdam/design-system/commit/6bcace7930b1e1247601380a4e5bff1c318bbbcf))
+* **Page Header:** Add vertical space to Mega Menu in Spacious Mode ([#2298](https://github.com/Amsterdam/design-system/issues/2298)) ([3ae1729](https://github.com/Amsterdam/design-system/commit/3ae17299853fc6f35e639dfc8d9f7f97476bdbac))
+* **Paragraph:** Balance line lengths of lead paragraphs ([#2309](https://github.com/Amsterdam/design-system/issues/2309)) ([afeab6e](https://github.com/Amsterdam/design-system/commit/afeab6ebe7da883fb984e23cd9d0661f3524bb60))
+
+## [2.2.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.1.0...design-system-tokens-v2.2.0) (2025-11-21)
+
+
+### Features
+
+* **Label, Field Set:** Add a lighter variant to Label and Legend to clarify form hierarchy in nested Field Sets ([#2291](https://github.com/Amsterdam/design-system/issues/2291)) ([3bcc039](https://github.com/Amsterdam/design-system/commit/3bcc03901cbe1b37183d774b26367a914e3bda79))
+* **Page Header:** Allow adding an icon to a menu item ([#2285](https://github.com/Amsterdam/design-system/issues/2285)) ([15a830b](https://github.com/Amsterdam/design-system/commit/15a830b6068bb98c405da0013e90ac6697b20f5b))
+* **Page:** Add support for a layout with a Menu ([#2263](https://github.com/Amsterdam/design-system/issues/2263)) ([51a289f](https://github.com/Amsterdam/design-system/commit/51a289fe3012981fff1bfc223a0689b9be3760a7))
+
 ## [2.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.0.0...design-system-tokens-v2.1.0) (2025-10-31)
 
 

package/README.md

@@ -3,7 +3,7 @@
 # Amsterdam Design System: Tokens
 
 This package provides all design tokens from the [Amsterdam Design System](https://designsystem.amsterdam).
-Use it to apply its visual design to your website or application.
+Use it to apply its visual design to your websites.
 The tokens are exported in multiple formats, including CSS custom properties and JSON, making them compatible with most, if not all, technology stacks.
 
 **Note** that the values of the tokens in this package implement the branding of the City of Amsterdam.
@@ -57,11 +57,12 @@ import "@amsterdam/design-system-tokens/dist/index.theme.css"
 </body>
 ```
 
-### Compact mode
+### Compact overrides
 
-Our branding is rather spacious for websites.
-The main stylesheet implements this ‘spacious mode’ as the default.
-A compact stylesheet is available for applications that require less white space and smaller text.
+Our visual style is quite spacious.
+This works well for public websites.
+The main stylesheet implements this ‘Spacious Mode’ as the default.
+A compact stylesheet is available for internal websites that require a high-density layout with reduced white space and smaller text.
 
 Note that the compact stylesheet is not independent – it only contains overrides.
 Import it after the main stylesheet for the correct result.
@@ -154,8 +155,8 @@ Find the [list of component tokens](https://github.com/Amsterdam/design-system/t
 This package allows the creation of a theme to reuse our components for a different brand.
 This is a key feature of [NL Design System](https://nldesignsystem.nl/) of which we are part.
 
-However, websites and applications for the City of Amsterdam must follow the design system as closely as possible.
-We repeat: websites and applications for the City of Amsterdam must follow the design system as closely as possible.
+However, websites for the City of Amsterdam must follow the design system as closely as possible.
+We repeat: websites for the City of Amsterdam must follow the design system as closely as possible.
 
 At the same time, we are aware that adopting a design system can pose challenges in practice.
 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.

package/dist/compact.css

@@ -28,6 +28,7 @@
   --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-page-header-mega-menu-padding-block: 0;
   --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);

package/dist/compact.d.ts

@@ -86,6 +86,9 @@ declare const tokens: {
         "font-size": DesignToken;
         "line-height": DesignToken;
       };
+      "mega-menu": {
+        "padding-block": DesignToken;
+      };
     };
   };
 };

package/dist/compact.json

@@ -69,6 +69,9 @@
       "brand-name": {
         "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
         "line-height": "1.3"
+      },
+      "mega-menu": {
+        "padding-block": "0"
       }
     }
   }

package/dist/compact.mjs

@@ -43,3 +43,4 @@ export const amsGridPaddingInline =
 export const amsPageHeaderBrandNameFontSize =
   "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)";
 export const amsPageHeaderBrandNameLineHeight = "1.3";
+export const amsPageHeaderMegaMenuPaddingBlock = "0";

package/dist/compact.scss

@@ -26,6 +26,7 @@ $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-page-header-mega-menu-padding-block: 0;
 $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;

package/dist/compact.theme.css

@@ -28,6 +28,7 @@
   --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-page-header-mega-menu-padding-block: 0;
   --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);

package/dist/index.css

@@ -13,8 +13,8 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #181818; /** Use `currentColor` instead */
-  --ams-color-interactive-contrast: #181818;
+  --ams-color-interactive-secondary: #202020; /** Use `currentColor` instead */
+  --ams-color-interactive-contrast: #202020;
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
   --ams-color-interactive-hover: #003677;
@@ -24,17 +24,17 @@
   --ams-color-background: #ffffff;
   --ams-color-feedback-error: #ec0000;
   --ams-color-feedback-info: #009de6;
-  --ams-color-feedback-success: #00a03c;
+  --ams-color-feedback-success: #00893c;
   --ams-color-feedback-warning: #ff9100;
   --ams-color-highlight-azure: #009de6;
-  --ams-color-highlight-green: #00a03c;
+  --ams-color-highlight-green: #00893c;
   --ams-color-highlight-lime: #bed200;
   --ams-color-highlight-magenta: #e50082;
   --ams-color-highlight-orange: #ff9100;
   --ams-color-highlight-purple: #a00078;
   --ams-color-highlight-yellow: #ffe600;
   --ams-color-separator: #d1d1d1;
-  --ams-color-text: #181818;
+  --ams-color-text: #202020;
   --ams-color-text-inverse: #ffffff;
   --ams-color-text-secondary: #767676;
   --ams-cursor-disabled: not-allowed;
@@ -91,8 +91,8 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
-  --ams-call-to-action-link-background-color: #00a03c;
-  --ams-call-to-action-link-hover-background-color: #007c2e;
+  --ams-call-to-action-link-background-color: #00893c;
+  --ams-call-to-action-link-hover-background-color: #10552b;
   --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-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-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 */
@@ -132,6 +132,8 @@
   --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-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
+  --ams-page-with-menu-max-inline-size: 120rem;
+  --ams-paragraph-large-text-wrap: balance;
   --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
   --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -413,15 +415,22 @@
   --ams-error-message-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-typography-body-text-line-height);
-  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
-  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
+  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-color: var(--ams-color-text);
   --ams-field-set-legend-font-family: var(--ams-typography-font-family);
   --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
-  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-field-set-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-set-child-before-error-message-margin-block-end: var(--ams-space-s);
+  --ams-field-set-child-before-field-or-field-set-margin-block-end: var(--ams-space-m);
+  --ams-field-set-child-between-fields-and-field-sets-margin-block-end: var(--ams-space-l);
+  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
+  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
   --ams-field-gap: var(--ams-space-s);
+  --ams-field-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-child-before-error-message-margin-block-end: var(--ams-space-s);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
   --ams-figure-gap: var(--ams-space-s);
@@ -471,6 +480,7 @@
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-hint-in-fieldset-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -515,6 +525,7 @@
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-3-line-height);
   --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-label-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-link-list-gap: var(--ams-space-s);
   --ams-link-list-link-font-family: var(--ams-typography-font-family);
   --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -588,6 +599,7 @@
   --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
   --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-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-menu-column-gap: var(--ams-space-l);
@@ -599,12 +611,13 @@
   --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
   --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-page-header-menu-link-gap: var(--ams-space-xs);
   --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
-  --ams-page-header-navigation-row-gap: var(--ams-space-s);
+  --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-heading-color: var(--ams-color-text);
   --ams-page-heading-font-family: var(--ams-typography-font-family);
   --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
@@ -880,6 +893,7 @@
   --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-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);

package/dist/index.d.ts

@@ -719,22 +719,43 @@ declare const tokens: {
       "line-height": DesignToken;
     };
     "field-set": {
-      invalid: {
-        "border-inline-start": DesignToken;
-        "padding-inline-start": DesignToken;
-      };
       legend: {
+        "margin-block-end": DesignToken;
         color: DesignToken;
         "font-family": DesignToken;
         "font-size": DesignToken;
         "font-weight": DesignToken;
         "line-height": DesignToken;
-        "margin-block-end": DesignToken;
         "text-wrap": DesignToken;
+        "in-fieldset": {
+          "font-weight": DesignToken;
+        };
+      };
+      child: {
+        "margin-block-end": DesignToken;
+        "before-error-message": {
+          "margin-block-end": DesignToken;
+        };
+        "before-field-or-field-set": {
+          "margin-block-end": DesignToken;
+        };
+        "between-fields-and-field-sets": {
+          "margin-block-end": DesignToken;
+        };
+      };
+      invalid: {
+        "border-inline-start": DesignToken;
+        "padding-inline-start": DesignToken;
       };
     };
     field: {
       gap: DesignToken;
+      child: {
+        "margin-block-end": DesignToken;
+        "before-error-message": {
+          "margin-block-end": DesignToken;
+        };
+      };
       invalid: {
         "border-inline-start": DesignToken;
         "padding-inline-start": DesignToken;
@@ -867,6 +888,9 @@ declare const tokens: {
     };
     hint: {
       "font-weight": DesignToken;
+      "in-fieldset": {
+        color: DesignToken;
+      };
     };
     "icon-button": {
       color: DesignToken;
@@ -981,6 +1005,9 @@ declare const tokens: {
       "font-weight": DesignToken;
       "line-height": DesignToken;
       "text-wrap": DesignToken;
+      "in-fieldset": {
+        "font-weight": DesignToken;
+      };
     };
     "link-list": {
       gap: DesignToken;
@@ -1193,6 +1220,7 @@ declare const tokens: {
         "text-wrap": DesignToken;
       };
       "mega-menu": {
+        "padding-block": DesignToken;
         button: {
           cursor: DesignToken;
           label: {
@@ -1219,6 +1247,7 @@ declare const tokens: {
           };
         };
         link: {
+          gap: DesignToken;
           "text-decoration-line": DesignToken;
           "text-decoration-thickness": DesignToken;
           "text-underline-offset": DesignToken;
@@ -1246,6 +1275,12 @@ declare const tokens: {
     page: {
       "background-color": DesignToken;
       "max-inline-size": DesignToken;
+      "with-menu": {
+        "max-inline-size": DesignToken;
+        "area-skip-link": {
+          "margin-inline-end": DesignToken;
+        };
+      };
     };
     pagination: {
       "font-family": DesignToken;
@@ -1285,6 +1320,7 @@ declare const tokens: {
       large: {
         "font-size": DesignToken;
         "line-height": DesignToken;
+        "text-wrap": DesignToken;
       };
     };
     "password-input": {