@amsterdam/design-system-tokens 3.0.0 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 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)
+
+
+### Features
+
+* **Badge:** Add option to include an icon ([#2385](https://github.com/Amsterdam/design-system/issues/2385)) ([698c776](https://github.com/Amsterdam/design-system/commit/698c7762f9bc0c844598e71c45165f472d03c185))
+* Introduce Progress List component ([#2373](https://github.com/Amsterdam/design-system/issues/2373)) ([7309159](https://github.com/Amsterdam/design-system/commit/730915911eb28dff40137ff15063cf33c21f26fc))
+
+
+### Bug Fixes
+
+* **DateInput, TimeInput:** Prevent focus on picker icon when input is disabled ([#2378](https://github.com/Amsterdam/design-system/issues/2378)) ([e3fff0f](https://github.com/Amsterdam/design-system/commit/e3fff0fcf7fea144663342493a83afd4e73da7e8))
+* Relax hyphenation settings ([#2384](https://github.com/Amsterdam/design-system/issues/2384)) ([c8d3ea5](https://github.com/Amsterdam/design-system/commit/c8d3ea5439f710c85977ad2c05c7614f28c47c59))
+
 ## [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)
 
 

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);