@amsterdam/design-system-tokens 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -3,19 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.1...design-system-tokens-v0.6.0) (2024-03-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108))
+* Group design tokens for Grid Space ([#1098](https://github.com/Amsterdam/design-system/issues/1098))
+* Merge tokens for start and end padding ([#1112](https://github.com/Amsterdam/design-system/issues/1112))
+* Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089))
+* Remove whitespace at the right end of dialog content ([#1091](https://github.com/Amsterdam/design-system/issues/1091))
+* Delete inset spacing tokens ([#1090](https://github.com/Amsterdam/design-system/issues/1090))
+
+### Features
+
+* Add and use tokens for inside space ([#1093](https://github.com/Amsterdam/design-system/issues/1093)) ([81c9f7a](https://github.com/Amsterdam/design-system/commit/81c9f7acece4f6747150416a3db9f1258c2f6b3d))
+* Add Column component and Gap and Margin utilities for vertical spacing ([#1083](https://github.com/Amsterdam/design-system/issues/1083)) ([d092cb3](https://github.com/Amsterdam/design-system/commit/d092cb30e865f712b91b9b197803db7443e2c8cc))
+* Add Fieldset component ([#1081](https://github.com/Amsterdam/design-system/issues/1081)) ([e9683c7](https://github.com/Amsterdam/design-system/commit/e9683c7a603fcfd031d6f24769789cc0d63b3c3d))
+* Add Radio, update Checkbox and Switch ([#1100](https://github.com/Amsterdam/design-system/issues/1100)) ([79224e3](https://github.com/Amsterdam/design-system/commit/79224e3d97389ec1a5ae1a36fb4012de10109d66))
+* Add Tabs component ([#1068](https://github.com/Amsterdam/design-system/issues/1068)) ([4eec887](https://github.com/Amsterdam/design-system/commit/4eec887c579f478b552126e684aba28d037bf9cb))
+* Add TextArea Component ([#1095](https://github.com/Amsterdam/design-system/issues/1095)) ([2a50130](https://github.com/Amsterdam/design-system/commit/2a5013025823e32435ed6a7fe9bcbd138deaf511))
+* Allow lists to appear in white on a dark background ([#1074](https://github.com/Amsterdam/design-system/issues/1074)) ([14132ed](https://github.com/Amsterdam/design-system/commit/14132edeb96f96c65f0f73cc17a8462afd32d108))
+* Delete inset spacing tokens ([#1090](https://github.com/Amsterdam/design-system/issues/1090)) ([b1bdf7e](https://github.com/Amsterdam/design-system/commit/b1bdf7efd303d0e1244c14d584c79d7f5a775616))
+* Group design tokens for Grid Space ([#1098](https://github.com/Amsterdam/design-system/issues/1098)) ([7d6f333](https://github.com/Amsterdam/design-system/commit/7d6f333258d49ad3914e5dc88e01e49b58b04902))
+* Introduce tokens for stack spacing and Row component ([#1113](https://github.com/Amsterdam/design-system/issues/1113)) ([f5dba78](https://github.com/Amsterdam/design-system/commit/f5dba78a27610e717b3c10e5babd4ee7059f07f5))
+* Merge tokens for start and end padding ([#1112](https://github.com/Amsterdam/design-system/issues/1112)) ([20f46ba](https://github.com/Amsterdam/design-system/commit/20f46babe51c087198bf58c7d3e506a3fd3c70a8))
+* Rename ‘header logo’ to ‘header logo link’ and add missing token for outline offset ([#1108](https://github.com/Amsterdam/design-system/issues/1108)) ([f87e834](https://github.com/Amsterdam/design-system/commit/f87e8345ec900ab08941d5d7ab40f8abd16a569a))
+* Use spacing tokens in Grid component ([#1089](https://github.com/Amsterdam/design-system/issues/1089)) ([b55f0a3](https://github.com/Amsterdam/design-system/commit/b55f0a3b64dcfb660a878ade75033a1dd835ac2d))
+
+
+### Bug Fixes
+
+* Remove whitespace at the right end of dialog content ([#1091](https://github.com/Amsterdam/design-system/issues/1091)) ([23e1253](https://github.com/Amsterdam/design-system/commit/23e1253e38bba8ac85ebbd696af37742d1c1a02d))
+
+## [0.5.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.5.0...design-system-tokens-v0.5.1) (2024-02-13)
+
+
+### Features
+
+* Create unique token classes ([#1071](https://github.com/Amsterdam/design-system/issues/1071)) ([d53d0a9](https://github.com/Amsterdam/design-system/commit/d53d0a93f18238759d85bd897a7b6ee537cc78b0))
+
 ## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.4.0...design-system-tokens-v0.5.0) (2024-02-09)
 
 
 ### ⚠ BREAKING CHANGES
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
-* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+* Remove spacious and compact tokens from component level tokens ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated `inList` variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
 
 ### Features
 
 * Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Remove spacious and compact tokens from component level tokens ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
 * Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
-* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+* Remove deprecated `inList` variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
 
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/design-system-tokens@0.3.0...@amsterdam/design-system-tokens@0.4.0) (2024-01-31)
 

package/build.js

@@ -3,7 +3,7 @@ const StyleDictionary = require('style-dictionary')
 const modes = ['compact']
 
 function generateSharedConfig(mode) {
-  const name = mode ? `${mode}` : 'index'
+  const name = mode || 'index'
 
   return {
     css: {
@@ -28,7 +28,7 @@ function generateSharedConfig(mode) {
           destination: `${name}.theme.css`,
           format: 'css/variables',
           options: {
-            selector: '.amsterdam-theme',
+            selector: `.amsterdam-theme${name === 'index' ? '' : `--${name}`}`,
             outputReferences: true,
           },
         },

package/dist/compact.css

@@ -1,11 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ * Generated on Fri, 08 Mar 2024 13:00:06 GMT
  */
 
 :root {
-  --amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
-  --amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
   --amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
   --amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
   --amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
@@ -13,4 +11,10 @@
   --amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
   --amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
   --amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
+  --amsterdam-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+  --amsterdam-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+  --amsterdam-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --amsterdam-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+  --amsterdam-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+  --amsterdam-grid-padding-inline: var(--amsterdam-space-grid-md);
 }

package/dist/compact.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ * Generated on Fri, 08 Mar 2024 13:00:06 GMT
  */
 
 export default tokens;
@@ -23,6 +23,15 @@ declare interface DesignToken {
 
 declare const tokens: {
   "amsterdam": {
+    "space": {
+      "grid": {
+        "xs": DesignToken,
+        "sm": DesignToken,
+        "md": DesignToken,
+        "lg": DesignToken,
+        "xl": DesignToken
+      }
+    },
     "typography": {
       "text-level": {
         "0": {
@@ -49,7 +58,6 @@ declare const tokens: {
       }
     },
     "grid": {
-      "gap": DesignToken,
       "padding-inline": DesignToken
     }
   }

package/dist/compact.json

@@ -1,5 +1,14 @@
 {
   "amsterdam": {
+    "space": {
+      "grid": {
+        "xs": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)",
+        "sm": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)",
+        "md": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "lg": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)",
+        "xl": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)"
+      }
+    },
     "typography": {
       "text-level": {
         "0": {
@@ -26,7 +35,6 @@
       }
     },
     "grid": {
-      "gap": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
       "padding-inline": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"
     }
   }

package/dist/compact.mjs

@@ -1,8 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ * Generated on Fri, 08 Mar 2024 13:00:06 GMT
  */
 
+export const amsterdamSpaceGridXs = "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)";
+export const amsterdamSpaceGridSm = "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)";
+export const amsterdamSpaceGridMd = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
+export const amsterdamSpaceGridLg = "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)";
+export const amsterdamSpaceGridXl = "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)";
 export const amsterdamTypographyTextLevel0FontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
 export const amsterdamTypographyTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
 export const amsterdamTypographyTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
@@ -10,5 +15,4 @@ export const amsterdamTypographyTextLevel3FontSize = "clamp(1.191rem, calc(0.709
 export const amsterdamTypographyTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
 export const amsterdamTypographyTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
 export const amsterdamTypographyTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
-export const amsterdamGridGap = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
-export const amsterdamGridPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
+export const amsterdamGridPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)";

package/dist/compact.scss

@@ -1,9 +1,7 @@
 
 // Do not edit directly
-// Generated on Fri, 09 Feb 2024 16:26:11 GMT
+// Generated on Fri, 08 Mar 2024 13:00:06 GMT
 
-$amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Equals the gap.
-$amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
 $amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
 $amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
 $amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
@@ -11,3 +9,9 @@ $amsterdam-typography-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.0
 $amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
 $amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
 $amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
+$amsterdam-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+$amsterdam-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+$amsterdam-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); // Grows from 16px at 1088px wide to 40px at 2624px wide.
+$amsterdam-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+$amsterdam-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+$amsterdam-grid-padding-inline: $amsterdam-space-grid-md;

package/dist/compact.theme.css

@@ -1,11 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ * Generated on Fri, 08 Mar 2024 13:00:06 GMT
  */
 
-.amsterdam-theme {
-  --amsterdam-grid-padding-inline: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Equals the gap. */
-  --amsterdam-grid-gap: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+.amsterdam-theme--compact {
   --amsterdam-typography-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
   --amsterdam-typography-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
   --amsterdam-typography-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
@@ -13,4 +11,10 @@
   --amsterdam-typography-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
   --amsterdam-typography-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
   --amsterdam-typography-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
+  --amsterdam-space-grid-xl: clamp(2rem, calc(3.125vw - 0.125rem), 5rem);
+  --amsterdam-space-grid-lg: clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem);
+  --amsterdam-space-grid-md: clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem); /* Grows from 16px at 1088px wide to 40px at 2624px wide. */
+  --amsterdam-space-grid-sm: clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem);
+  --amsterdam-space-grid-xs: clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem);
+  --amsterdam-grid-padding-inline: var(--amsterdam-space-grid-md);
 }

package/dist/index.css

@@ -1,18 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Fri, 09 Feb 2024 16:26:11 GMT
+ * Generated on Fri, 08 Mar 2024 13:00:06 GMT
  */
 
 :root {
-  --utrecht-button-subtle-disabled-background-color: transparent;
-  --utrecht-button-subtle-background-color: transparent;
-  --utrecht-focus-outline-offset: 2px;
-  --utrecht-action-submit-cursor: pointer;
-  --utrecht-action-navigate-cursor: pointer;
-  --utrecht-action-inert-cursor: default;
-  --utrecht-action-disabled-cursor: not-allowed;
-  --utrecht-action-busy-cursor: wait;
-  --utrecht-action-activate-cursor: pointer;
   --amsterdam-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --amsterdam-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. */
   --amsterdam-unordered-list-unordered-list-list-style-type: '\2013';
@@ -20,12 +11,25 @@
   --amsterdam-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
   --amsterdam-unordered-list-list-style-type: '\2022';
   --amsterdam-unordered-list-gap: 0.75rem;
+  --amsterdam-text-area-padding-inline: 1rem;
+  --amsterdam-text-area-padding-block: 0.5rem;
+  --amsterdam-tabs-button-padding-inline: 1rem;
+  --amsterdam-tabs-button-padding-block: .5rem;
+  --amsterdam-tabs-button-outline-offset: -0.25rem;
+  --amsterdam-tabs-button-border: none;
+  --amsterdam-tabs-button-background-color: transparent;
   --amsterdam-switch-thumb-height: 1.75rem;
   --amsterdam-switch-thumb-width: 1.75rem;
   --amsterdam-switch-width: 3.5rem;
   --amsterdam-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>");
   --amsterdam-screen-x-wide-max-width: 132rem;
   --amsterdam-screen-wide-max-width: 100rem;
+  --amsterdam-radio-circle-invalid-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
+  --amsterdam-radio-circle-invalid-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
+  --amsterdam-radio-circle-disabled-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
+  --amsterdam-radio-circle-disabled-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
+  --amsterdam-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
+  --amsterdam-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
   --amsterdam-page-menu-item-gap: 0.5rem;
   --amsterdam-page-menu-row-gap: 0.5rem;
   --amsterdam-page-menu-column-gap: 2.5rem;
@@ -38,7 +42,6 @@
   --amsterdam-ordered-list-gap: 0.75rem;
   --amsterdam-mega-menu-list-category-padding-block-start: 1rem;
   --amsterdam-mega-menu-list-category-column-width: 20rem;
-  --amsterdam-mark-background-color: var(--amsterdam-color-yellow);
   --amsterdam-logo-height: 2.5rem;
   --amsterdam-link-inline-line-height: inherit;
   --amsterdam-link-inline-font-size: inherit;
@@ -49,29 +52,24 @@
   --amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
   --amsterdam-grid-wide-column-count: 12;
   --amsterdam-grid-medium-column-count: 8;
-  --amsterdam-grid-padding-inline: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem); /* Equals 1.5 times the gap. */
-  --amsterdam-grid-gap: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
   --amsterdam-grid-column-count: 4;
-  --amsterdam-dialog-footer-padding-block: 1.5rem 0;
   --amsterdam-dialog-footer-gap: 1rem;
   --amsterdam-dialog-header-gap: 1rem;
-  --amsterdam-dialog-article-padding-inline-end: 1.5rem;
   --amsterdam-dialog-form-max-block-size: 75vh;
   --amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
   --amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
   --amsterdam-dialog-form-gap: 1.5rem;
-  --amsterdam-dialog-backdrop-background: #0006;
   --amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
   --amsterdam-dialog-border: 0;
+  --amsterdam-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
+  --amsterdam-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
+  --amsterdam-button-tertiary-disabled-background-color: transparent;
+  --amsterdam-button-tertiary-background-color: transparent;
+  --amsterdam-button-gap: 1rem;
   --amsterdam-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
-  --amsterdam-badge-padding-inline: 0.5rem;
   --amsterdam-alert-gap: 1rem;
   --amsterdam-alert-border-style: solid;
   --amsterdam-alert-border-width: 4px;
-  --amsterdam-spacing-inset-xl: 2.5rem;
-  --amsterdam-spacing-inset-lg: 1.5rem;
-  --amsterdam-spacing-inset-md: 1rem;
-  --amsterdam-spacing-inset-sm: 0.5rem;
   --amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
   --amsterdam-link-appearance-subtle-text-decoration-line: none;
   --amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
@@ -86,6 +84,12 @@
   --amsterdam-border-width-lg: 3px;
   --amsterdam-border-width-md: 2px;
   --amsterdam-border-width-sm: 1px;
+  --amsterdam-action-submit-cursor: pointer;
+  --amsterdam-action-navigate-cursor: pointer;
+  --amsterdam-action-inert-cursor: default;
+  --amsterdam-action-disabled-cursor: not-allowed;
+  --amsterdam-action-busy-cursor: wait;
+  --amsterdam-action-activate-cursor: pointer;
   --amsterdam-typography-text-level-6-line-height: 1.6;
   --amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
   --amsterdam-typography-text-level-5-line-height: 1.6;
@@ -103,6 +107,21 @@
   --amsterdam-typography-font-weight-bold: 800;
   --amsterdam-typography-font-weight-normal: 400;
   --amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
+  --amsterdam-space-stack-xl: 2rem;
+  --amsterdam-space-stack-lg: 1.5rem;
+  --amsterdam-space-stack-md: 1rem;
+  --amsterdam-space-stack-sm: .5rem;
+  --amsterdam-space-stack-xs: .25rem;
+  --amsterdam-space-inside-xl: 2rem;
+  --amsterdam-space-inside-lg: 1.5rem;
+  --amsterdam-space-inside-md: 1rem;
+  --amsterdam-space-inside-sm: .5rem;
+  --amsterdam-space-inside-xs: .25rem;
+  --amsterdam-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
+  --amsterdam-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
+  --amsterdam-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
+  --amsterdam-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
+  --amsterdam-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
   --amsterdam-proportion-2x-wide: 32 / 9;
   --amsterdam-proportion-x-wide: 16 / 9;
   --amsterdam-proportion-wide: 5 / 4;
@@ -124,29 +143,8 @@
   --amsterdam-color-primary-blue: #004699;
   --amsterdam-color-primary-white: #FFFFFF;
   --amsterdam-color-primary-black: #000000;
-  --utrecht-button-subtle-disabled-color: var(--amsterdam-color-neutral-grey2);
-  --utrecht-button-subtle-focus-color: var(--amsterdam-color-dark-blue);
-  --utrecht-button-subtle-hover-color: var(--amsterdam-color-dark-blue);
-  --utrecht-button-subtle-color: var(--amsterdam-color-primary-blue);
-  --utrecht-button-secondary-action-disabled-color: var(--amsterdam-color-neutral-grey2);
-  --utrecht-button-secondary-action-disabled-background-color: var(--amsterdam-color-primary-white);
-  --utrecht-button-secondary-action-hover-color: var(--amsterdam-color-dark-blue);
-  --utrecht-button-secondary-action-color: var(--amsterdam-color-primary-blue);
-  --utrecht-button-secondary-action-background-color: var(--amsterdam-color-primary-white);
-  --utrecht-button-primary-action-hover-background-color: var(--amsterdam-color-dark-blue);
-  --utrecht-button-primary-action-disabled-background-color: var(--amsterdam-color-neutral-grey2);
-  --utrecht-button-primary-action-color: var(--amsterdam-color-primary-white);
-  --utrecht-button-primary-action-background-color: var(--amsterdam-color-primary-blue);
-  --utrecht-button-disabled-color: var(--amsterdam-color-primary-white);
-  --utrecht-button-disabled-background-color: var(--amsterdam-color-neutral-grey2);
-  --utrecht-button-padding-block-end: var(--amsterdam-spacing-inset-sm);
-  --utrecht-button-padding-block-start: var(--amsterdam-spacing-inset-sm);
-  --utrecht-button-padding-inline-end: var(--amsterdam-spacing-inset-md);
-  --utrecht-button-padding-inline-start: var(--amsterdam-spacing-inset-md);
-  --utrecht-button-font-family: var(--amsterdam-typography-font-family);
-  --utrecht-button-color: var(--amsterdam-color-primary-white);
-  --utrecht-button-background-color: var(--amsterdam-color-primary-blue);
   --amsterdam-unordered-list-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-unordered-list-inverse-color: var(--amsterdam-color-primary-white);
   --amsterdam-unordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
   --amsterdam-unordered-list-font-size: var(--amsterdam-typography-text-level-5-font-size);
   --amsterdam-unordered-list-font-family: var(--amsterdam-typography-font-family);
@@ -173,6 +171,8 @@
   --amsterdam-text-input-disabled-color: var(--amsterdam-color-neutral-grey2);
   --amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px var(--amsterdam-color-neutral-grey2);
   --amsterdam-text-input-disabled-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-text-input-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-text-input-padding-block: var(--amsterdam-space-inside-xs);
   --amsterdam-text-input-outline-offset: var(--amsterdam-focus-outline-offset);
   --amsterdam-text-input-line-height: var(--amsterdam-typography-text-level-6-line-height);
   --amsterdam-text-input-font-weight: var(--amsterdam-typography-font-weight-normal);
@@ -180,7 +180,38 @@
   --amsterdam-text-input-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-text-input-color: var(--amsterdam-color-primary-black);
   --amsterdam-text-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
+  --amsterdam-text-area-placeholder-color: var(--amsterdam-color-neutral-grey3);
+  --amsterdam-text-area-invalid-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-red);
+  --amsterdam-text-area-invalid-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-red);
+  --amsterdam-text-area-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-black);
+  --amsterdam-text-area-disabled-cursor: var(--amsterdam-action-disabled-cursor);
+  --amsterdam-text-area-disabled-color: var(--amsterdam-color-neutral-grey2);
+  --amsterdam-text-area-disabled-box-shadow: inset 0 0 0 1px var(--amsterdam-color-neutral-grey2);
+  --amsterdam-text-area-disabled-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-text-area-outline-offset: var(--amsterdam-focus-outline-offset);
+  --amsterdam-text-area-min-height: calc(var(--amsterdam-typography-text-level-6-line-height) * 1em + 2 * var(--amsterdam-text-area-padding-block));
+  --amsterdam-text-area-line-height: var(--amsterdam-typography-text-level-6-line-height);
+  --amsterdam-text-area-font-weight: var(--amsterdam-typography-font-weight-normal);
+  --amsterdam-text-area-font-size: var(--amsterdam-typography-text-level-6-font-size);
+  --amsterdam-text-area-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-text-area-color: var(--amsterdam-color-primary-black);
+  --amsterdam-text-area-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
+  --amsterdam-tabs-button-disabled-cursor: var(--amsterdam-action-disabled-cursor);
+  --amsterdam-tabs-button-disabled-color: var(--amsterdam-color-neutral-grey2);
+  --amsterdam-tabs-button-selected-color: var(--amsterdam-color-primary-white);
+  --amsterdam-tabs-button-selected-background-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--amsterdam-color-dark-blue);
+  --amsterdam-tabs-button-hover-color: var(--amsterdam-color-dark-blue);
+  --amsterdam-tabs-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-tabs-button-font-size: var(--amsterdam-typography-text-level-5-font-size);
+  --amsterdam-tabs-button-font-weight: var(--amsterdam-typography-font-weight-normal);
+  --amsterdam-tabs-button-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-tabs-button-cursor: var(--amsterdam-action-activate-cursor);
+  --amsterdam-tabs-button-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-tabs-list-border-bottom: .125rem solid var(--amsterdam-color-primary-blue);
   --amsterdam-table-header-cell-font-weight: var(--amsterdam-typography-font-weight-bold);
+  --amsterdam-table-cell-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-table-cell-padding-block: var(--amsterdam-space-inside-md);
   --amsterdam-table-cell-border-bottom: 1px solid var(--amsterdam-color-neutral-grey1);
   --amsterdam-table-caption-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-table-line-height: var(--amsterdam-typography-text-level-5-line-height);
@@ -204,6 +235,8 @@
   --amsterdam-spotlight-dark-blue-background-color: var(--amsterdam-color-primary-blue);
   --amsterdam-spotlight-blue-background-color: var(--amsterdam-color-blue);
   --amsterdam-skip-link-hover-background-color: var(--amsterdam-color-dark-blue);
+  --amsterdam-skip-link-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-skip-link-padding-block: var(--amsterdam-space-inside-xs);
   --amsterdam-skip-link-outline-offset: var(--amsterdam-focus-outline-offset);
   --amsterdam-skip-link-line-height: var(--amsterdam-typography-text-level-6-line-height);
   --amsterdam-skip-link-font-size: var(--amsterdam-typography-text-level-6-font-size);
@@ -216,6 +249,8 @@
   --amsterdam-search-field-input-cancel-button-width: var(--amsterdam-typography-text-level-6-font-size);
   --amsterdam-search-field-input-cancel-button-height: var(--amsterdam-typography-text-level-6-font-size);
   --amsterdam-search-field-input-cancel-button-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-search-field-input-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-search-field-input-padding-block: var(--amsterdam-space-inside-xs);
   --amsterdam-search-field-input-outline-offset: var(--amsterdam-focus-outline-offset);
   --amsterdam-search-field-input-line-height: var(--amsterdam-typography-text-level-6-line-height);
   --amsterdam-search-field-input-font-weight: var(--amsterdam-typography-font-weight-normal);
@@ -223,10 +258,30 @@
   --amsterdam-search-field-input-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-search-field-input-color: var(--amsterdam-color-primary-black);
   --amsterdam-search-field-input-box-shadow: inset 0 0 0 1px var(--amsterdam-color-primary-black);
+  --amsterdam-search-field-button-padding-inline: var(--amsterdam-space-inside-xs);
+  --amsterdam-search-field-button-padding-block: var(--amsterdam-space-inside-xs);
   --amsterdam-search-field-button-hover-background-color: var(--amsterdam-color-dark-blue);
   --amsterdam-search-field-button-outline-offset: var(--amsterdam-focus-outline-offset);
   --amsterdam-search-field-button-color: var(--amsterdam-color-primary-white);
   --amsterdam-search-field-button-background-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-row-gap-xl: var(--amsterdam-space-stack-xl);
+  --amsterdam-row-gap-lg: var(--amsterdam-space-stack-lg);
+  --amsterdam-row-gap-md: var(--amsterdam-space-stack-md);
+  --amsterdam-row-gap-sm: var(--amsterdam-space-stack-sm);
+  --amsterdam-row-gap-xs: var(--amsterdam-space-stack-xs);
+  --amsterdam-radio-hover-color: var(--amsterdam-color-dark-blue);
+  --amsterdam-radio-disabled-color: var(--amsterdam-color-neutral-grey3);
+  --amsterdam-radio-circle-invalid-hover-border-color: var(--amsterdam-color-primary-red);
+  --amsterdam-radio-circle-invalid-border-color: var(--amsterdam-color-primary-red);
+  --amsterdam-radio-circle-hover-border-color: var(--amsterdam-color-dark-blue);
+  --amsterdam-radio-circle-disabled-border-color: var(--amsterdam-color-neutral-grey3);
+  --amsterdam-radio-circle-border-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-radio-outline-offset: var(--amsterdam-focus-outline-offset);
+  --amsterdam-radio-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-radio-font-weight: var(--amsterdam-typography-font-weight-normal);
+  --amsterdam-radio-font-size: var(--amsterdam-typography-text-level-5-font-size);
+  --amsterdam-radio-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-radio-color: var(--amsterdam-color-primary-black);
   --amsterdam-paragraph-large-line-height: var(--amsterdam-typography-text-level-4-line-height);
   --amsterdam-paragraph-large-font-size: var(--amsterdam-typography-text-level-4-font-size);
   --amsterdam-paragraph-medium-line-height: var(--amsterdam-typography-text-level-5-line-height);
@@ -242,6 +297,7 @@
   --amsterdam-pagination-button-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
   --amsterdam-pagination-button-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
   --amsterdam-pagination-button-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
+  --amsterdam-pagination-button-padding-inline: var(--amsterdam-space-inside-sm);
   --amsterdam-pagination-button-outline-offset: var(--amsterdam-focus-outline-offset);
   --amsterdam-pagination-line-height: var(--amsterdam-typography-text-level-5-line-height);
   --amsterdam-pagination-font-weight: var(--amsterdam-typography-font-weight-normal);
@@ -263,12 +319,19 @@
   --amsterdam-page-heading-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-page-heading-color: var(--amsterdam-color-primary-black);
   --amsterdam-ordered-list-line-height: var(--amsterdam-typography-text-level-5-line-height);
+  --amsterdam-ordered-list-inverse-color: var(--amsterdam-color-primary-white);
   --amsterdam-ordered-list-font-weight: var(--amsterdam-typography-font-weight-normal);
   --amsterdam-ordered-list-font-size: var(--amsterdam-typography-text-level-5-font-size);
   --amsterdam-ordered-list-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-ordered-list-color: var(--amsterdam-color-primary-black);
-  --amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-grid-gap);
-  --amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-grid-gap);
+  --amsterdam-mega-menu-list-category-padding-block-end: var(--amsterdam-space-grid-md); /* Must have the same value as `amsterdam.grid.row-gap.md`. */
+  --amsterdam-mega-menu-list-category-column-gap: var(--amsterdam-space-grid-md); /* Must have the same value as `amsterdam.grid.column-gap`. */
+  --amsterdam-mark-background-color: var(--amsterdam-color-yellow);
+  --amsterdam-margin-xl: var(--amsterdam-space-grid-xl);
+  --amsterdam-margin-lg: var(--amsterdam-space-grid-lg);
+  --amsterdam-margin-md: var(--amsterdam-space-grid-md);
+  --amsterdam-margin-sm: var(--amsterdam-space-grid-sm);
+  --amsterdam-margin-xs: var(--amsterdam-space-grid-xs);
   --amsterdam-logo-subsite-color: var(--amsterdam-color-primary-black);
   --amsterdam-logo-title-color: var(--amsterdam-color-primary-red);
   --amsterdam-logo-emblem-color: var(--amsterdam-color-primary-red);
@@ -338,18 +401,43 @@
   --amsterdam-heading-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-heading-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-heading-color: var(--amsterdam-color-primary-black);
-  --amsterdam-header-column-gap: var(--amsterdam-grid-gap);
+  --amsterdam-header-logo-link-outline-offset: var(--amsterdam-focus-outline-offset);
+  --amsterdam-header-padding-block: var(--amsterdam-space-inside-md);
+  --amsterdam-header-column-gap: var(--amsterdam-space-grid-md); /* Must have the same value as `amsterdam.grid.column-gap`. */
+  --amsterdam-grid-row-gap-lg: var(--amsterdam-space-grid-lg);
+  --amsterdam-grid-row-gap-md: var(--amsterdam-space-grid-md);
+  --amsterdam-grid-row-gap-sm: var(--amsterdam-space-grid-sm);
+  --amsterdam-grid-padding-inline: var(--amsterdam-space-grid-lg);
+  --amsterdam-grid-padding-block-lg: var(--amsterdam-space-grid-lg);
+  --amsterdam-grid-padding-block-md: var(--amsterdam-space-grid-md);
+  --amsterdam-grid-padding-block-sm: var(--amsterdam-space-grid-sm);
+  --amsterdam-grid-column-gap: var(--amsterdam-space-grid-md);
+  --amsterdam-gap-xl: var(--amsterdam-space-grid-xl);
+  --amsterdam-gap-lg: var(--amsterdam-space-grid-lg);
+  --amsterdam-gap-md: var(--amsterdam-space-grid-md);
+  --amsterdam-gap-sm: var(--amsterdam-space-grid-sm);
+  --amsterdam-gap-xs: var(--amsterdam-space-grid-xs);
   --amsterdam-form-label-line-height: var(--amsterdam-typography-text-level-4-line-height);
   --amsterdam-form-label-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-form-label-font-size: var(--amsterdam-typography-text-level-4-font-size);
   --amsterdam-form-label-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-form-label-color: var(--amsterdam-color-primary-black);
+  --amsterdam-fieldset-legend-line-height: var(--amsterdam-typography-text-level-4-line-height);
+  --amsterdam-fieldset-legend-font-weight: var(--amsterdam-typography-font-weight-bold);
+  --amsterdam-fieldset-legend-font-size: var(--amsterdam-typography-text-level-4-font-size);
+  --amsterdam-fieldset-legend-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-fieldset-legend-color: var(--amsterdam-color-primary-black);
   --amsterdam-dialog-title-line-height: var(--amsterdam-typography-text-level-5-line-height);
   --amsterdam-dialog-title-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-dialog-title-font-size: var(--amsterdam-typography-text-level-5-font-size);
   --amsterdam-dialog-title-font-family: var(--amsterdam-typography-font-family);
   --amsterdam-dialog-title-color: var(--amsterdam-color-primary-black);
   --amsterdam-dialog-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-column-gap-xl: var(--amsterdam-space-grid-xl);
+  --amsterdam-column-gap-lg: var(--amsterdam-space-grid-lg);
+  --amsterdam-column-gap-md: var(--amsterdam-space-grid-md);
+  --amsterdam-column-gap-sm: var(--amsterdam-space-grid-sm);
+  --amsterdam-column-gap-xs: var(--amsterdam-space-grid-xs);
   --amsterdam-checkbox-hover-color: var(--amsterdam-color-dark-blue);
   --amsterdam-checkbox-disabled-color: var(--amsterdam-color-neutral-grey3);
   --amsterdam-checkbox-checkmark-indeterminate-hover-background-color: var(--amsterdam-color-dark-blue);
@@ -380,13 +468,35 @@
   --amsterdam-card-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
   --amsterdam-card-link-text-decoration-thickness: var(--amsterdam-link-appearance-text-decoration-thickness);
   --amsterdam-card-link-text-decoration-line: var(--amsterdam-link-appearance-subtle-text-decoration-line);
+  --amsterdam-button-tertiary-disabled-color: var(--amsterdam-color-neutral-grey2);
+  --amsterdam-button-tertiary-hover-color: var(--amsterdam-color-dark-blue);
   --amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-dark-blue);
+  --amsterdam-button-tertiary-color: var(--amsterdam-color-primary-blue);
   --amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
+  --amsterdam-button-secondary-disabled-color: var(--amsterdam-color-neutral-grey2);
   --amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
+  --amsterdam-button-secondary-disabled-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-button-secondary-hover-color: var(--amsterdam-color-dark-blue);
   --amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px var(--amsterdam-color-dark-blue);
   --amsterdam-button-secondary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
+  --amsterdam-button-secondary-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-button-secondary-background-color: var(--amsterdam-color-primary-white);
+  --amsterdam-button-primary-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-dark-blue);
+  --amsterdam-button-primary-hover-background-color: var(--amsterdam-color-dark-blue);
+  --amsterdam-button-primary-disabled-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey2);
+  --amsterdam-button-primary-disabled-background-color: var(--amsterdam-color-neutral-grey2);
+  --amsterdam-button-primary-color: var(--amsterdam-color-primary-white);
+  --amsterdam-button-primary-box-shadow: inset 0 0 0 2px var(--amsterdam-color-primary-blue);
+  --amsterdam-button-primary-background-color: var(--amsterdam-color-primary-blue);
+  --amsterdam-button-disabled-cursor: var(--amsterdam-action-disabled-cursor);
+  --amsterdam-button-busy-cursor: var(--amsterdam-action-busy-cursor);
+  --amsterdam-button-outline-offset: var(--amsterdam-focus-outline-offset);
+  --amsterdam-button-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-button-padding-block: var(--amsterdam-space-inside-xs);
   --amsterdam-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
   --amsterdam-button-font-size: var(--amsterdam-typography-text-level-5-font-size);
+  --amsterdam-button-font-family: var(--amsterdam-typography-font-family);
+  --amsterdam-button-cursor: var(--amsterdam-action-activate-cursor);
   --amsterdam-breadcrumb-item-link-hover-text-decoration-line: var(--amsterdam-link-appearance-subtle-hover-text-decoration-line);
   --amsterdam-breadcrumb-item-link-hover-color: var(--amsterdam-color-dark-blue);
   --amsterdam-breadcrumb-item-link-text-underline-offset: var(--amsterdam-link-appearance-text-underline-offset);
@@ -419,6 +529,7 @@
   --amsterdam-badge-dark-blue-background-color: var(--amsterdam-color-primary-blue);
   --amsterdam-badge-blue-color: var(--amsterdam-color-primary-black);
   --amsterdam-badge-blue-background-color: var(--amsterdam-color-blue);
+  --amsterdam-badge-padding-inline: var(--amsterdam-space-inside-xs);
   --amsterdam-badge-line-height: var(--amsterdam-typography-text-level-5-line-height);
   --amsterdam-badge-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-badge-font-size: var(--amsterdam-typography-text-level-5-font-size);
@@ -435,12 +546,14 @@
   --amsterdam-alert-success-border-color: var(--amsterdam-color-dark-green);
   --amsterdam-alert-info-border-color: var(--amsterdam-color-primary-blue);
   --amsterdam-alert-error-border-color: var(--amsterdam-color-primary-red);
-  --amsterdam-alert-padding-inline-end: var(--amsterdam-spacing-inset-lg);
-  --amsterdam-alert-padding-inline-start: var(--amsterdam-spacing-inset-lg);
-  --amsterdam-alert-padding-block-end: var(--amsterdam-spacing-inset-md);
-  --amsterdam-alert-padding-block-start: var(--amsterdam-spacing-inset-md);
+  --amsterdam-alert-padding-inline: var(--amsterdam-space-inside-lg);
+  --amsterdam-alert-padding-block: var(--amsterdam-space-inside-md);
+  --amsterdam-accordion-panel-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-accordion-panel-padding-block: var(--amsterdam-space-inside-md);
   --amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px var(--amsterdam-color-neutral-grey3);
   --amsterdam-accordion-button-focus-outline-offset: var(--amsterdam-focus-outline-offset);
+  --amsterdam-accordion-button-padding-inline: var(--amsterdam-space-inside-md);
+  --amsterdam-accordion-button-padding-block: var(--amsterdam-space-inside-sm);
   --amsterdam-accordion-button-line-height: var(--amsterdam-typography-text-level-5-line-height);
   --amsterdam-accordion-button-font-weight: var(--amsterdam-typography-font-weight-bold);
   --amsterdam-accordion-button-font-size: var(--amsterdam-typography-text-level-5-font-size);