@amsterdam/design-system-tokens 3.4.0 → 4.0.1

package/AGENTS.md

@@ -0,0 +1,71 @@
+<!-- @license CC0-1.0 -->
+
+# Tokens Package — Agent Instructions
+
+These instructions are additive to the root [AGENTS.md](../../AGENTS.md). Read that first.
+
+See [README.md](README.md) for full token usage and design guidance; this file focuses on agent-specific rules for editing token source files.
+
+## Overview
+
+This package defines design tokens using the [Design Tokens Community Group (DTCG)](https://tr.designtokens.org/format/) format and builds them into CSS custom properties, JSON, and Sass variables via [Style Dictionary](https://styledictionary.com/).
+
+## Token structure
+
+Tokens are organized into three layers:
+
+| Directory          | Purpose                                           |
+| ------------------ | ------------------------------------------------- |
+| `src/brand/ams/`   | Brand-level values (colors, typography, spacing)  |
+| `src/common/ams/`  | Shared patterns across components (inputs, links) |
+| `src/components/ams/` | Component-specific tokens                      |
+
+## Token file format
+
+Token files use the `.tokens.json` extension and follow the DTCG format:
+
+```json
+{
+  "ams": {
+    "<component-name>": {
+      "<property>": {
+        "$value": "{ams.<reference>}",
+        "$type": "<dtcg-type>"
+      }
+    }
+  }
+}
+```
+
+- Always reference existing brand or common tokens where possible — do not hardcode raw values.
+- Valid `$type` values used in this project: `color`, `dimension`, `fontFamily`, `fontWeight`, `shadow`. Do not invent other `$type` values.
+- Use the `$extensions` field for Amsterdam-specific metadata (e.g. `nl.amsterdam.type`, `nl.amsterdam.subtype`). Common `$extensions` types include `fontSize`, `lineHeight`, and `space` (via `nl.amsterdam.subtype`). See existing component tokens for examples.
+- Variant tokens are nested under the component (e.g. `ams.badge.azure.background-color`).
+
+## Compact mode
+
+Some token categories have `.compact.tokens.json` variants (e.g. `space.compact.tokens.json`, `typography.compact.tokens.json`). These provide denser values for compact layouts.
+
+## Build
+
+- Build command: `pnpm build` (runs `node build.js`)
+- Watch mode: `pnpm build:watch`
+- Output: `dist/` — never edit generated output directly.
+- Build config: `build.js` with custom Style Dictionary logic in `style-dictionary/` (includes `transforms/` and `dimensionToString.js`).
+
+## File locations
+
+- Component tokens: `src/components/ams/<name>.tokens.json`
+- Brand tokens: `src/brand/ams/`
+- Common tokens: `src/common/ams/`
+- Build script: `build.js`
+- Custom transforms: `style-dictionary/transforms/`
+
+## Key rules
+
+- Every token must have a `$value`. Type information is provided through either `$type` (DTCG standard) or `$extensions` with `nl.amsterdam.type` / `nl.amsterdam.subtype`. Some tokens (e.g. cursors, aspect ratios) have no type annotation — follow the existing pattern for the token category you are editing.
+- Token names use kebab-case and mirror CSS property names where applicable.
+- No unused tokens — every defined token must be consumed by CSS or another token.
+- No hardcoded design values in CSS or React — if a value is missing, add a token here first.
+- Changes to brand-level tokens in `src/brand/ams/` have wide impact; do not change them unless the task explicitly calls for brand updates.
+- When adding new component tokens, wire them into CSS (and React where applicable) in the same change so they are immediately used.

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.0.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v4.0.0...design-system-tokens-v4.0.1) (2026-04-24)
+
+
+### Bug Fixes
+
+* **Grid:** Set correct horizontal padding in Compact Mode ([#2582](https://github.com/Amsterdam/design-system/issues/2582)) ([049fa6c](https://github.com/Amsterdam/design-system/commit/049fa6c205e2a73f3a4eac66642e000e90aa8369))
+
+## [4.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.4.0...design-system-tokens-v4.0.0) (2026-04-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* Remove deprecated tokens, classes and components for v4.0.0 ([#2549](https://github.com/Amsterdam/design-system/issues/2549))
+* **Grid, Page:** Make Page grey and Grid Cell white in Compact Mode ([#2398](https://github.com/Amsterdam/design-system/issues/2398))
+
+### Features
+
+* **Grid, Page:** Make Page grey and Grid Cell white in Compact Mode ([#2398](https://github.com/Amsterdam/design-system/issues/2398)) ([6b5bb5b](https://github.com/Amsterdam/design-system/commit/6b5bb5b2f7c273d35e25e18e29cfa6557d20c38f))
+* Introduce Tab Navigation component ([#2552](https://github.com/Amsterdam/design-system/issues/2552)) ([1d6e0a3](https://github.com/Amsterdam/design-system/commit/1d6e0a32e856775e6d42879c71902d0aa5ddace8))
+* **Table:** Add whitespace below Caption ([#2515](https://github.com/Amsterdam/design-system/issues/2515)) ([092c0ff](https://github.com/Amsterdam/design-system/commit/092c0fff4ebfd9e395caee721cb55732e57d7cc5))
+* **tokens:** Introduce `vi-` prefix for viewport-dependent component tokens ([#2502](https://github.com/Amsterdam/design-system/issues/2502)) ([90c19da](https://github.com/Amsterdam/design-system/commit/90c19da8f309eedb926bbd3f65f52990b880b661))
+
+### Deprecations
+
+The following deprecated tokens have been removed:
+
+- `ams.accordion.button.font-family`, `ams.accordion.button.font-size`, `ams.accordion.button.font-weight`, `ams.accordion.button.line-height`, `ams.accordion.button.text-wrap`, `ams.accordion.panel.padding-block`, and `ams.accordion.panel.padding-inline`.
+- `ams.checkbox.hover.text-decoration-thickness`, `ams.checkbox.rectangle.checked.disabled.hover.*`, `ams.checkbox.rectangle.checked.hover.disabled-invalid.*`, `ams.checkbox.rectangle.hover.disabled-invalid.*`, `ams.checkbox.rectangle.indeterminate.disabled.hover.*`, and `ams.checkbox.rectangle.indeterminate.hover.disabled-invalid.*`.
+- `ams.color.link.secondary`.
+- `ams.date-input.calender-picker-indicator.*`, `ams.date-input.disabled.calender-picker-indicator.*`, and `ams.date-input.hover.calender-picker-indicator.*`.
+- `ams.heading.6.*`.
+- `ams.icon.heading-0.*` and `ams.icon.heading-6.*`.
+- `ams.menu.link.contrast.*` and `ams.menu.link.inverse.*`.
+- `ams.page-heading.*`.
+- `ams.standalone-link.hover.text-decoration-thickness`, `ams.standalone-link.hover.text-underline-offset`, and `ams.standalone-link.with-icon.*`.
+- `ams.table-of-contents.heading.*`.
+- `ams.time-input.calender-picker-indicator.*`, `ams.time-input.disabled.calender-picker-indicator.*`, and `ams.time-input.hover.calender-picker-indicator.*`.
+- `ams.typography.heading.0.*` and `ams.typography.heading.6.*`.
+
+The following tokens have been deprecated and will be removed on or after 2026-10-20:
+
+- `ams.description-list.column-gap`, `ams.description-list.row-gap`, `ams.description-list.narrow.grid-template-columns`,
+  `ams.description-list.medium.grid-template-columns`, and `ams.description-list.wide.grid-template-columns`
+- `ams.dialog.medium.inline-size`, `ams.dialog.medium.max-block-size`,
+  `ams.dialog.header.medium.padding-block`, `ams.dialog.header.medium.padding-inline`, `ams.dialog.body.medium.padding-inline`,
+  `ams.dialog.footer.medium.padding-block`, `ams.dialog.footer.medium.padding-inline`
+- `ams.grid.medium.column-count`, `ams.grid.medium.padding-inline`, `ams.grid.wide.column-count`, and `ams.grid.wide.padding-inline`
+- `ams.menu.wide.max-inline-size`, `ams.menu.wide.padding-block`, `ams.menu.wide.padding-inline`, and `ams.menu-link.wide.gap`
+- `ams.page-footer.menu.medium.padding-inline`, `ams.page-footer.menu.wide.padding-inline`
+- `ams.page-header.medium.padding-inline`, `ams.page-header.wide.padding-inline`
+- `ams.progress-list.step.medium.gap` and `ams.progress-list.substeps.step.indicator.medium.margin-inline-end`
+
+For tokens containing `*.medium.*` and `*.wide.*`, replace them with `*.vi-medium.*` and `*.vi-wide.*`.
+
 ## [3.4.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v3.3.0...design-system-tokens-v3.4.0) (2026-04-03)
 
 
@@ -50,7 +104,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Deprecations
 
-The following tokens will be removed in release 5.0.0:
+The following tokens will be removed on or after 2026-07-09:
 
 - `ams.field-set.legend.margin-block-end`
 -  `ams.field.gap`
@@ -77,7 +131,7 @@ The following tokens will be removed in release 5.0.0:
 
 ### Deprecations
 
-The following tokens will be removed in release 4.0.0. If you use them in your code, please delete them.
+The following tokens have been removed in release 4.0.0.
 
 - `ams.menu.link.contrast.color`, `ams.menu.link.contrast.hover.color`, `ams.menu.link.inverse.color`, `ams.menu.link.inverse.hover.color`.
 - `ams.date-input.disabled.calender-picker-indicator.background-image`, `ams.date-input.hover.calender-picker-indicator.background-image`, `ams.date-input.calender-picker-indicator.background-image`, `ams.date-input.calender-picker-indicator.cursor`.
@@ -101,7 +155,7 @@ The following tokens will be removed in release 4.0.0. If you use them in your c
 
 ### Deprecations
 
-The following tokens will be removed in release 4.0.0. If you use them in your code, please delete them.
+The following tokens have been removed in release 4.0.0.
 
 * `ams.accordion.panel.*` and some tokens in `ams.accordion.button`
 * `ams.checkbox.hover.text-decoration-thickness` and `ams.checkbox.rectangle.*`

package/CONTRIBUTING.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Contributing to the tokens package
+
+See the [repository-wide contributing guidelines](../../CONTRIBUTING.md) for general instructions.
+The notes below apply specifically to design tokens.
+
+## Compact Mode and responsive overrides
+
+Components may expose separate tokens for responsive variants, such as `vi-medium` and `vi-wide` for the Grid.
+These are applied at breakpoints in the component stylesheet and override the base token.
+
+When you add or change a token in a `*.compact.tokens.json` file, check whether the component stylesheet also applies a responsive variant of that token at larger breakpoints.
+If it does, override every responsive variant in the compact file as well.
+Otherwise, the compact value only applies below the first breakpoint, and the component silently reverts to the default token at larger viewports.
+
+For example, the Grid mixin sets `padding-inline` from `--ams-grid-padding-inline`, then overrides it with `--ams-grid-vi-medium-padding-inline` and `--ams-grid-vi-wide-padding-inline` at the medium and wide breakpoints.
+Compact Mode must override all three, not just the base.

package/README.md

@@ -150,6 +150,18 @@ We follow [the NL Design System token naming guidelines](https://nldesignsystem.
 
 Find the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/component/ams) on GitHub.
 
+#### Logical viewport inline size tokens
+
+Some component tokens vary by viewport breakpoint and follow [CSS logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_properties) naming:
+
+- `vi` means _viewport inline size_.
+- Breakpoint-specific variants use `vi-medium` and `vi-wide`, for example:
+  - `ams.menu.vi-wide.padding-inline`
+  - `ams.dialog.vi-medium.inline-size`
+  - `ams.grid.vi-medium.column-count`
+
+Components can also use `narrow`, `medium` or `wide` keys without the `vi` prefix when the dimension is intrinsic to the component and not tied to the active viewport breakpoint.
+
 ### Overriding tokens
 
 This package allows the creation of a theme to reuse our components for a different brand.
@@ -162,50 +174,147 @@ 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.
 
+## Deprecating tokens
+
+We deprecate tokens using the DTCG `$deprecated` field. The [official definition](https://www.designtokens.org/tr/drafts/format/#deprecated) allows `$deprecated` to be `true`, `false` or a string explanation.
+
+In ADS, `$deprecated` should be a string so consumers always get a reason + migration path.
+
+### Deprecation message format
+
+- Always include a removal date: `Will be removed on or after YYYY-MM-DD.`
+- If there is a direct replacement, start with: ``Use `<replacement-token>` instead.``
+
+### Simple deprecation (no fallback)
+
+If a deprecated token is still used directly, keep its existing `$value` until removal.
+Also add a deprecation comment next to the token usage in the consuming CSS.
+
+Token JSON:
+
+```jsonc
+"row-gap": {
+  "$deprecated": "Whitespace is now applied through the `ams.description-list.*.margin-block-end` tokens. Will be removed on or after 2026-10-20.",
+  "$value": "0"
+}
+```
+
+Component CSS:
+
+```css
+row-gap: var(--ams-description-list-row-gap); /* This token is @deprecated. Will be removed on or after 2026-10-20. */
+```
+
+### Renames that use `var()` fallback
+
+When a token is renamed but we still want (downstream) overrides of the old token to keep working, we implement the rename through CSS `var()` fallback.
+
+Always add an inline deprecation comment next to the deprecated custom property inside the `var()` call.
+
+1. Update the component CSS to reference the deprecated token first, and the replacement token as the fallback:
+
+```css
+padding-inline: var(
+  --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
+  var(--ams-grid-vi-medium-padding-inline)
+);
+```
+
+2. In the token JSON, mark the old token as deprecated and set its `$value` to the CSS-wide keyword `initial`:
+
+```jsonc
+"medium": {
+  "padding-inline": {
+    "$deprecated": "Use `ams.grid.vi-medium.padding-inline` instead. Will be removed on or after 2026-10-20.",
+    "$value": "initial"
+  }
+}
+```
+
+Why `initial`? Per CSS `var()` rules, when a custom property is [not set or is set to a CSS-wide keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var#syntax) like `initial`, the fallback value is used. This makes the replacement token the default while keeping the deprecated token visible and overrideable.
+
+Only apply this `initial` rule when the deprecated token is used in a `var(--deprecated, <fallback>)` pattern.
+
+### Deprecations without a 1:1 replacement
+
+If there is no 1:1 replacement (design/behavior changed), keep the existing `$value` until removal and update the consuming CSS/markup before deleting the token.
+
 ## 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.
+Tokens may define their type using a DTCG `$type`, or, when no standard DTCG type applies, using our Amsterdam-specific `$extensions.nl.amsterdam.type`.
+References inherit the type of the token they refer to.
+
+We also use group-level inheritance where all tokens in a group share the same DTCG type.
+A `$type` set on a group applies to all its descendants, so individual tokens do not need to repeat it.
 
 ### 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        |
+| Type         | Description                            |
+| ------------ | -------------------------------------- |
+| `color`      | Any colour value                       |
+| `dimension`  | Any dimension with a unit              |
+| `duration`   | A length of time                       |
+| `fontFamily` | Font family definitions (string array) |
+| `fontWeight` | Font weight values                     |
+| `number`     | Unitless numeric values                |
+| `shadow`     | Box shadow definitions                 |
 
 ### 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.
+We add a custom type under `$extensions.nl.amsterdam.type` for:
+
+1. tokens that refer to another token
+2. properties that the DTCG specification does not cover
+3. values that do not conform to a standard type
+
+We use these types to help decide which preview to render in the Design Tokens Table on each component’s documentation page.
+
+| Type                       | Description                         |
+| -------------------------- | ----------------------------------- |
+| `aspectRatio`              | Aspect ratio values                 |
+| `backgroundImage`          | Background image values (e.g. SVGs) |
+| `backgroundPosition`       | Background position values          |
+| `border`                   | Border shorthand values             |
+| `borderRadius`             | Border radius values                |
+| `borderStyle`              | Border style values                 |
+| `borderWidth`              | Border thickness values             |
+| `cursor`                   | Cursor values                       |
+| `dimension`                | Responsive dimensions               |
+| `fontSize`                 | Font size values                    |
+| `gridTemplateColumns`      | Grid track definitions              |
+| `hyphenateLimitChars`      | Hyphenation limit values            |
+| `listStyleType`            | List marker styles                  |
+| `opacity`                  | Opacity values                      |
+| `textDecorationLine`       | Text decoration line values         |
+| `textWrap`                 | Text wrapping values                |
+| `transitionTimingFunction` | Transition timing function values   |
+
+Note that `dimension` appears both as a standard `$type` and as a custom extension type.
+The standard type is for values that conform to the DTCG dimension format (an object with a `value` and `unit`).
+The extension type is for responsive dimensions that use `clamp()` expressions, which are not valid DTCG dimensions.
 
 #### 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 |
+| Subtype      | For type    | Description                |
+| ------------ | ----------- | -------------------------- |
+| `lineHeight` | `number`    | Line height multipliers    |
+| `space`      | `dimension` | Margins, paddings and gaps |
 
 #### Hint
 
 An `$extensions.nl.amsterdam.hint` indicates special handling for internal use.
 
+### Descriptions
+
+Brand and common tokens use the DTCG `$description` property to explain the purpose of a token or group when the name alone is not sufficient.
+Add a `$description` when a token has a non-obvious value (e.g. `currentColor`), when similar tokens need to be distinguished (e.g. `background.body` vs `background.default`), or when the value encodes design rationale worth preserving (e.g. pixel equivalents for responsive `clamp()` values).
+
 ## Usage in Sass
 
 The tokens can be imported as Sass variables as well.

package/build.js

@@ -6,16 +6,23 @@
 import StyleDictionary from 'style-dictionary'
 
 import { dtcgDimension } from './style-dictionary/transforms/dtcg-dimension.js'
+import { dtcgFontFamily } from './style-dictionary/transforms/dtcg-font-family.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'
 
 StyleDictionary.registerTransform(dtcgDimension)
+StyleDictionary.registerTransform(dtcgFontFamily)
 StyleDictionary.registerTransform(nameCustomCamel)
 StyleDictionary.registerTransform(nameCustomKebab)
 StyleDictionary.registerTransform(shadowDTCGDimensionNormalize)
 
-const commonCssTransforms = ['shadow/dtcg-dimension-normalize', 'shadow/css/shorthand', 'dtcg/dimension']
+const commonCssTransforms = [
+  'shadow/dtcg-dimension-normalize',
+  'shadow/css/shorthand',
+  'dtcg/dimension',
+  'dtcg/fontFamily',
+]
 const modes = ['compact']
 
 function generateSharedConfig(mode) {
@@ -111,6 +118,9 @@ defaultMode.buildAllPlatforms()
 
 for (const mode of modes) {
   const styleDictionary = new StyleDictionary({
+    log: {
+      verbosity: 'verbose',
+    },
     platforms: generateSharedConfig(mode),
     source: [`./src/**/*.${mode}.tokens.json`],
   })

package/dist/compact.css

@@ -9,6 +9,8 @@
   --ams-border-width-xl: 0.1875rem;
   --ams-border-width-negative-m: -0.0625rem;
   --ams-border-width-negative-xl: -0.1875rem;
+  --ams-color-background-body: #e8e8e8;
+  --ams-color-background: #ffffff;
   --ams-space-xs: 0.25rem;
   --ams-space-s: 0.5rem;
   --ams-space-m: clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem);
@@ -23,7 +25,6 @@
   --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);
   --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;
@@ -35,8 +36,14 @@
   --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);
-  --ams-grid-padding-inline: var(--ams-space-xl);
+  --ams-body-background-color: var(--ams-color-background-body);
+  --ams-grid-padding-inline: var(--ams-space-m);
+  --ams-grid-vi-medium-padding-inline: var(--ams-space-l);
+  --ams-grid-vi-wide-padding-inline: var(--ams-space-xl);
+  --ams-grid-cell-background-color: var(--ams-color-background);
+  --ams-grid-cell-padding-block: var(--ams-space-m);
+  --ams-grid-cell-padding-inline: var(--ams-space-m);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
+  --ams-page-background-color: var(--ams-color-background-body);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
 }

package/dist/compact.d.ts

@@ -28,6 +28,12 @@ declare const tokens: {
         };
       };
     };
+    color: {
+      background: {
+        body: DesignToken;
+        default: DesignToken;
+      };
+    };
     space: {
       xs: DesignToken;
       s: DesignToken;
@@ -54,9 +60,6 @@ declare const tokens: {
         };
       };
       heading: {
-        "0": {
-          "font-size": DesignToken;
-        };
         "1": {
           "font-size": DesignToken;
           "line-height": DesignToken;
@@ -77,13 +80,24 @@ declare const tokens: {
           "font-size": DesignToken;
           "line-height": DesignToken;
         };
-        "6": {
-          "font-size": DesignToken;
-        };
       };
     };
+    body: {
+      "background-color": DesignToken;
+    };
     grid: {
       "padding-inline": DesignToken;
+      "vi-medium": {
+        "padding-inline": DesignToken;
+      };
+      "vi-wide": {
+        "padding-inline": DesignToken;
+      };
+      cell: {
+        "background-color": DesignToken;
+        "padding-block": DesignToken;
+        "padding-inline": DesignToken;
+      };
     };
     "page-header": {
       "brand-name": {
@@ -94,5 +108,8 @@ declare const tokens: {
         "padding-block": DesignToken;
       };
     };
+    page: {
+      "background-color": DesignToken;
+    };
   };
 };

package/dist/compact.json

@@ -12,6 +12,12 @@
         }
       }
     },
+    "color": {
+      "background": {
+        "body": "#e8e8e8",
+        "default": "#ffffff"
+      }
+    },
     "space": {
       "xs": "0.25rem",
       "s": "0.5rem",
@@ -23,60 +29,71 @@
     "typography": {
       "body-text": {
         "font-size": "1rem",
-        "line-height": "1.5",
+        "line-height": 1.5,
         "small": {
           "font-size": "0.875rem",
-          "line-height": "1.4"
+          "line-height": 1.4
         },
         "large": {
           "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
-          "line-height": "1.4"
+          "line-height": 1.4
         },
         "x-large": {
           "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
-          "line-height": "1.3"
+          "line-height": 1.3
         }
       },
       "heading": {
-        "0": {
-          "font-size": "clamp(2.1645rem, 2.072rem + 0.4626vw, 2.4883rem)"
-        },
         "1": {
           "font-size": "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)",
-          "line-height": "1.2"
+          "line-height": 1.2
         },
         "2": {
           "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
-          "line-height": "1.3"
+          "line-height": 1.3
         },
         "3": {
           "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
-          "line-height": "1.3"
+          "line-height": 1.3
         },
         "4": {
           "font-size": "1rem",
-          "line-height": "1.4"
+          "line-height": 1.4
         },
         "5": {
           "font-size": "0.875rem",
-          "line-height": "1.4"
-        },
-        "6": {
-          "font-size": "0.875rem"
+          "line-height": 1.4
         }
       }
     },
+    "body": {
+      "background-color": "#e8e8e8"
+    },
     "grid": {
-      "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+      "padding-inline": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
+      "vi-medium": {
+        "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
+      },
+      "vi-wide": {
+        "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+      },
+      "cell": {
+        "background-color": "#ffffff",
+        "padding-block": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
+        "padding-inline": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)"
+      }
     },
     "page-header": {
       "brand-name": {
         "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
-        "line-height": "1.3"
+        "line-height": 1.3
       },
       "mega-menu": {
         "padding-block": "0"
       }
+    },
+    "page": {
+      "background-color": "#e8e8e8"
     }
   }
 }