@amsterdam/design-system-tokens 0.10.0 → 0.11.0

package/dist/index.theme.css

@@ -1,6 +1,5 @@
 /**
- * Do not edit directly
- * Generated on Fri, 28 Jun 2024 12:13:40 GMT
+ * Do not edit directly, this file was auto-generated.
  */
 
 .ams-theme {
@@ -10,14 +9,9 @@
   --ams-unordered-list-item-padding-inline-start: 0.875rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
   --ams-unordered-list-item-margin-inline-start: 1.625rem; /* Divide your total indentation width over margin and padding to position the marker. */
   --ams-unordered-list-list-style-type: '\2022';
-  --ams-unordered-list-gap: 0.75rem;
   --ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
   --ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
-  --ams-text-area-padding-inline: 1rem;
-  --ams-text-area-padding-block: 0.5rem;
-  --ams-tabs-button-padding-inline: 1rem;
-  --ams-tabs-button-padding-block: .5rem;
   --ams-tabs-button-outline-offset: -0.25rem;
   --ams-switch-thumb-block-size: 1.75rem;
   --ams-switch-thumb-inline-size: 1.75rem;
@@ -27,55 +21,45 @@
   --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-screen-x-wide-max-inline-size: 132rem;
   --ams-screen-wide-max-inline-size: 100rem;
+  --ams-row-gap-no: 0;
   --ams-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");
   --ams-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");
   --ams-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");
   --ams-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");
   --ams-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");
   --ams-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");
-  --ams-page-menu-item-gap: 0.5rem;
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
   --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
   --ams-ordered-list-item-padding-inline-start: 0.25rem; /* The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
   --ams-ordered-list-item-margin-inline-start: 2.25rem; /* Divide your total indentation width over margin and padding to position the marker. */
   --ams-ordered-list-list-style-type: decimal;
-  --ams-ordered-list-gap: 0.75rem;
-  --ams-mega-menu-list-category-padding-block-start: 1rem;
   --ams-mega-menu-list-category-column-width: 20rem;
   --ams-logo-block-size: 2.5rem;
   --ams-link-inline-line-height: inherit;
   --ams-link-inline-font-size: inherit;
   --ams-link-inline-font-family: inherit;
-  --ams-link-list-link-gap: 0.5em;
-  --ams-link-list-gap: 0.5em;
   --ams-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
   --ams-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
   --ams-grid-wide-column-count: 12;
   --ams-grid-medium-column-count: 8;
   --ams-grid-column-count: 4;
-  --ams-dialog-footer-gap: 1rem;
-  --ams-dialog-header-gap: 1rem;
-  --ams-dialog-form-max-block-size: 75vh;
-  --ams-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
-  --ams-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
-  --ams-dialog-form-gap: 1.5rem;
-  --ams-dialog-max-inline-size: min(87.69vw, 45rem);
+  --ams-dialog-max-inline-size: 48rem;
   --ams-dialog-border: 0;
   --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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --ams-column-gap-no: 0;
   --ams-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");
   --ams-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");
   --ams-button-tertiary-disabled-background-color: transparent;
   --ams-button-tertiary-background-color: transparent;
-  --ams-button-gap: 1rem;
+  --ams-breadcrumb-separator-inline-size: 1ex;
+  --ams-breadcrumb-separator-block-size: 1ex;
   --ams-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>");
-  --ams-avatar-padding-inline: 0.25rem;
-  --ams-avatar-padding-block: 0.25rem;
-  --ams-alert-gap: 1rem;
   --ams-alert-border-style: solid;
   --ams-accordion-panel-padding-inline: 0;
+  --ams-accordion-panel-padding-block: 0;
   --ams-accordion-button-padding-inline: 0;
   --ams-link-appearance-subtle-hover-text-decoration-line: underline;
   --ams-link-appearance-subtle-text-decoration-line: none;
@@ -93,37 +77,32 @@
   --ams-action-busy-cursor: wait;
   --ams-action-activate-cursor: pointer;
   --ams-text-level-6-line-height: 1.6;
-  --ams-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
+  --ams-text-level-6-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
   --ams-text-level-5-line-height: 1.6;
-  --ams-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
+  --ams-text-level-5-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
   --ams-text-level-4-line-height: 1.5;
-  --ams-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
+  --ams-text-level-4-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
   --ams-text-level-3-line-height: 1.3;
-  --ams-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
+  --ams-text-level-3-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
   --ams-text-level-2-line-height: 1.25;
-  --ams-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
+  --ams-text-level-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
   --ams-text-level-1-line-height: 1.2;
-  --ams-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
+  --ams-text-level-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
   --ams-text-level-0-line-height: 1.15;
-  --ams-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
+  --ams-text-level-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
   --ams-text-font-weight-bold: 800;
   --ams-text-font-weight-normal: 400;
   --ams-text-font-family: 'Amsterdam Sans', Arial, sans-serif;
-  --ams-space-stack-xl: 2rem;
-  --ams-space-stack-lg: 1.5rem;
-  --ams-space-stack-md: 1rem;
-  --ams-space-stack-sm: .75rem;
-  --ams-space-stack-xs: .5rem;
-  --ams-space-inside-xl: 2rem;
-  --ams-space-inside-lg: 1.5rem;
-  --ams-space-inside-md: 1rem;
-  --ams-space-inside-sm: .75rem;
-  --ams-space-inside-xs: .5rem;
-  --ams-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
-  --ams-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
-  --ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
-  --ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
-  --ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
+  --ams-space-grid-xl: clamp(2rem, calc(0.75rem + 6.25vw), 7rem);
+  --ams-space-grid-lg: clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem);
+  --ams-space-grid-md: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem); /* Grows from 16px at 320px wide to 56px at 1600px wide. */
+  --ams-space-grid-sm: clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem);
+  --ams-space-grid-xs: clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem);
+  --ams-space-xl: clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem);
+  --ams-space-lg: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
+  --ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
+  --ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
+  --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
   --ams-proportion-2x-wide: 16 / 5;
   --ams-proportion-x-wide: 16 / 9;
   --ams-proportion-wide: 4 / 3;
@@ -153,6 +132,7 @@
   --ams-unordered-list-small-font-size: var(--ams-text-level-6-font-size);
   --ams-unordered-list-line-height: var(--ams-text-level-5-line-height);
   --ams-unordered-list-inverse-color: var(--ams-color-primary-white);
+  --ams-unordered-list-gap: var(--ams-space-sm);
   --ams-unordered-list-font-weight: var(--ams-text-font-weight-normal);
   --ams-unordered-list-font-size: var(--ams-text-level-5-font-size);
   --ams-unordered-list-font-family: var(--ams-text-font-family);
@@ -171,14 +151,15 @@
   --ams-top-task-link-description-font-size: var(--ams-text-level-6-font-size);
   --ams-top-task-link-description-font-family: var(--ams-text-font-family);
   --ams-top-task-link-description-color: var(--ams-color-primary-black);
+  --ams-top-task-link-gap: var(--ams-space-sm);
   --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
   --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-time-input-disabled-color: var(--ams-color-neutral-grey2);
   --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-time-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-time-input-padding-inline: var(--ams-space-inside-md);
-  --ams-time-input-padding-block: var(--ams-space-inside-xs);
+  --ams-time-input-padding-inline: var(--ams-space-md);
+  --ams-time-input-padding-block: var(--ams-space-sm);
   --ams-time-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-time-input-line-height: var(--ams-text-level-5-line-height);
   --ams-time-input-font-weight: var(--ams-text-font-weight-normal);
@@ -194,8 +175,8 @@
   --ams-text-input-disabled-color: var(--ams-color-neutral-grey2);
   --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-text-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-text-input-padding-inline: var(--ams-space-inside-md);
-  --ams-text-input-padding-block: var(--ams-space-inside-xs);
+  --ams-text-input-padding-inline: var(--ams-space-md);
+  --ams-text-input-padding-block: var(--ams-space-sm);
   --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-text-input-line-height: var(--ams-text-level-5-line-height);
   --ams-text-input-font-weight: var(--ams-text-font-weight-normal);
@@ -212,6 +193,8 @@
   --ams-text-area-disabled-color: var(--ams-color-neutral-grey2);
   --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-text-area-disabled-background-color: var(--ams-color-primary-white);
+  --ams-text-area-padding-inline: var(--ams-space-md);
+  --ams-text-area-padding-block: var(--ams-space-sm);
   --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
   --ams-text-area-min-block-size: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
   --ams-text-area-line-height: var(--ams-text-level-5-line-height);
@@ -227,6 +210,8 @@
   --ams-tabs-button-selected-background-color: var(--ams-color-primary-blue);
   --ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 var(--ams-color-dark-blue);
   --ams-tabs-button-hover-color: var(--ams-color-dark-blue);
+  --ams-tabs-button-padding-inline: var(--ams-space-md);
+  --ams-tabs-button-padding-block: var(--ams-space-sm);
   --ams-tabs-button-line-height: var(--ams-text-level-5-line-height);
   --ams-tabs-button-font-weight: var(--ams-text-font-weight-normal);
   --ams-tabs-button-font-size: var(--ams-text-level-5-font-size);
@@ -235,9 +220,10 @@
   --ams-tabs-button-color: var(--ams-color-primary-blue);
   --ams-tabs-list-border-block-end: var(--ams-border-width-md) solid var(--ams-color-primary-blue);
   --ams-tabs-list-background-color: var(--ams-color-primary-white);
+  --ams-tabs-gap: var(--ams-space-md);
   --ams-table-header-cell-font-weight: var(--ams-text-font-weight-bold);
-  --ams-table-cell-padding-inline: var(--ams-space-inside-md);
-  --ams-table-cell-padding-block: var(--ams-space-inside-md);
+  --ams-table-cell-padding-inline: var(--ams-space-md);
+  --ams-table-cell-padding-block: var(--ams-space-sm);
   --ams-table-cell-border-block-end: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
   --ams-table-caption-font-weight: var(--ams-text-font-weight-bold);
   --ams-table-line-height: var(--ams-text-level-5-line-height);
@@ -248,15 +234,15 @@
   --ams-table-of-contents-heading-line-height: var(--ams-text-level-4-line-height);
   --ams-table-of-contents-heading-font-size: var(--ams-text-level-4-font-size);
   --ams-table-of-contents-heading-font-weight: var(--ams-text-font-weight-bold);
-  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-inside-lg);
-  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-inside-md);
-  --ams-table-of-contents-list-gap: var(--ams-space-inside-md);
+  --ams-table-of-contents-list-list-padding-inline-start: var(--ams-space-lg);
+  --ams-table-of-contents-list-list-padding-block-start: var(--ams-space-sm);
+  --ams-table-of-contents-list-gap: var(--ams-space-sm);
   --ams-table-of-contents-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-table-of-contents-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-table-of-contents-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-table-of-contents-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-table-of-contents-line-height: var(--ams-text-level-5-line-height);
-  --ams-table-of-contents-gap: var(--ams-space-inside-md);
+  --ams-table-of-contents-gap: var(--ams-space-md);
   --ams-table-of-contents-font-weight: var(--ams-text-font-weight-normal);
   --ams-table-of-contents-font-size: var(--ams-text-level-5-font-size);
   --ams-table-of-contents-font-family: var(--ams-text-font-family);
@@ -276,8 +262,8 @@
   --ams-spotlight-dark-blue-background-color: var(--ams-color-primary-blue);
   --ams-spotlight-blue-background-color: var(--ams-color-blue);
   --ams-skip-link-hover-background-color: var(--ams-color-dark-blue);
-  --ams-skip-link-padding-inline: var(--ams-space-inside-md);
-  --ams-skip-link-padding-block: var(--ams-space-inside-xs);
+  --ams-skip-link-padding-inline: var(--ams-space-md);
+  --ams-skip-link-padding-block: var(--ams-space-sm);
   --ams-skip-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-skip-link-line-height: var(--ams-text-level-6-line-height);
   --ams-skip-link-font-weight: var(--ams-text-font-weight-normal);
@@ -291,8 +277,8 @@
   --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
   --ams-select-disabled-color: var(--ams-color-neutral-grey2);
   --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
-  --ams-select-padding-inline: var(--ams-space-inside-md) calc(2 * var(--ams-space-inside-md) + 1em);
-  --ams-select-padding-block: var(--ams-space-inside-xs);
+  --ams-select-padding-inline: var(--ams-space-md) calc(2 * var(--ams-space-md) + 1em);
+  --ams-select-padding-block: var(--ams-space-sm);
   --ams-select-outline-offset: var(--ams-focus-outline-offset);
   --ams-select-line-height: var(--ams-text-level-5-line-height);
   --ams-select-font-weight: var(--ams-text-font-weight-normal);
@@ -300,7 +286,7 @@
   --ams-select-font-family: var(--ams-text-font-family);
   --ams-select-color: var(--ams-color-primary-black);
   --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
-  --ams-select-background-position: right var(--ams-space-inside-md) center;
+  --ams-select-background-position: right var(--ams-space-md) center;
   --ams-select-background-color: var(--ams-color-primary-white);
   --ams-search-field-input-placeholder-color: var(--ams-color-neutral-grey3);
   --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-red);
@@ -309,8 +295,8 @@
   --ams-search-field-input-cancel-button-inline-size: var(--ams-text-level-5-font-size);
   --ams-search-field-input-cancel-button-color: var(--ams-color-primary-blue);
   --ams-search-field-input-cancel-button-block-size: var(--ams-text-level-5-font-size);
-  --ams-search-field-input-padding-inline: var(--ams-space-inside-md);
-  --ams-search-field-input-padding-block: var(--ams-space-inside-xs);
+  --ams-search-field-input-padding-inline: var(--ams-space-md);
+  --ams-search-field-input-padding-block: var(--ams-space-sm);
   --ams-search-field-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-search-field-input-line-height: var(--ams-text-level-5-line-height);
   --ams-search-field-input-font-weight: var(--ams-text-font-weight-normal);
@@ -320,17 +306,17 @@
   --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
   --ams-search-field-input-background-color: var(--ams-color-primary-white);
   --ams-search-field-button-hover-background-color: var(--ams-color-dark-blue);
-  --ams-search-field-button-padding-inline: var(--ams-space-inside-xs);
-  --ams-search-field-button-padding-block: var(--ams-space-inside-xs);
+  --ams-search-field-button-padding-inline: var(--ams-space-sm);
+  --ams-search-field-button-padding-block: var(--ams-space-sm);
   --ams-search-field-button-outline-offset: var(--ams-focus-outline-offset);
   --ams-search-field-button-color: var(--ams-color-primary-white);
   --ams-search-field-button-background-color: var(--ams-color-primary-blue);
   --ams-screen-background-color: var(--ams-color-primary-white);
-  --ams-row-gap-xl: var(--ams-space-stack-xl);
-  --ams-row-gap-lg: var(--ams-space-stack-lg);
-  --ams-row-gap-md: var(--ams-space-stack-md);
-  --ams-row-gap-sm: var(--ams-space-stack-sm);
-  --ams-row-gap-xs: var(--ams-space-stack-xs);
+  --ams-row-gap-xl: var(--ams-space-xl);
+  --ams-row-gap-lg: var(--ams-space-lg);
+  --ams-row-gap-md: var(--ams-space-md);
+  --ams-row-gap-sm: var(--ams-space-sm);
+  --ams-row-gap-xs: var(--ams-space-xs);
   --ams-radio-hover-text-decoration-thickness: var(--ams-border-width-md);
   --ams-radio-hover-color: var(--ams-color-dark-blue);
   --ams-radio-disabled-color: var(--ams-color-neutral-grey3);
@@ -343,6 +329,7 @@
   --ams-radio-circle-border-color: var(--ams-color-primary-blue);
   --ams-radio-outline-offset: var(--ams-focus-outline-offset);
   --ams-radio-line-height: var(--ams-text-level-5-line-height);
+  --ams-radio-gap: var(--ams-space-sm);
   --ams-radio-font-weight: var(--ams-text-font-weight-normal);
   --ams-radio-font-size: var(--ams-text-level-5-font-size);
   --ams-radio-font-family: var(--ams-text-font-family);
@@ -361,8 +348,9 @@
   --ams-pagination-button-current-font-weight: var(--ams-text-font-weight-bold);
   --ams-pagination-button-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-pagination-button-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
-  --ams-pagination-button-padding-inline: var(--ams-space-inside-sm);
+  --ams-pagination-button-padding-inline: var(--ams-space-sm);
   --ams-pagination-button-outline-offset: var(--ams-focus-outline-offset);
+  --ams-pagination-button-gap: var(--ams-space-xs);
   --ams-pagination-line-height: var(--ams-text-level-5-line-height);
   --ams-pagination-font-weight: var(--ams-text-font-weight-normal);
   --ams-pagination-font-size: var(--ams-text-level-5-font-size);
@@ -372,6 +360,7 @@
   --ams-page-menu-item-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-page-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-menu-item-line-height: var(--ams-text-level-6-line-height);
+  --ams-page-menu-item-gap: var(--ams-space-sm);
   --ams-page-menu-item-font-weight: var(--ams-text-font-weight-normal);
   --ams-page-menu-item-font-size: var(--ams-text-level-6-font-size);
   --ams-page-menu-item-font-family: var(--ams-text-font-family);
@@ -387,11 +376,13 @@
   --ams-ordered-list-small-font-size: var(--ams-text-level-6-font-size);
   --ams-ordered-list-line-height: var(--ams-text-level-5-line-height);
   --ams-ordered-list-inverse-color: var(--ams-color-primary-white);
+  --ams-ordered-list-gap: var(--ams-space-sm);
   --ams-ordered-list-font-weight: var(--ams-text-font-weight-normal);
   --ams-ordered-list-font-size: var(--ams-text-level-5-font-size);
   --ams-ordered-list-font-family: var(--ams-text-font-family);
   --ams-ordered-list-color: var(--ams-color-primary-black);
   --ams-mega-menu-list-category-padding-block-end: var(--ams-space-grid-md); /* Must have the same value as `ams.grid.row-gap.md`. */
+  --ams-mega-menu-list-category-padding-block-start: var(--ams-space-md);
   --ams-mega-menu-list-category-column-gap: var(--ams-space-grid-md); /* Must have the same value as `ams.grid.column-gap`. */
   --ams-mark-background-color: var(--ams-color-yellow);
   --ams-margin-xl: var(--ams-space-grid-xl);
@@ -423,9 +414,11 @@
   --ams-link-list-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-link-list-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-link-list-link-line-height: var(--ams-text-level-5-line-height);
+  --ams-link-list-link-gap: var(--ams-space-sm);
   --ams-link-list-link-font-weight: var(--ams-text-font-weight-normal);
   --ams-link-list-link-font-size: var(--ams-text-level-5-font-size);
   --ams-link-list-link-font-family: var(--ams-text-font-family);
+  --ams-link-list-gap: var(--ams-space-sm);
   --ams-label-line-height: var(--ams-text-level-4-line-height);
   --ams-label-font-weight: var(--ams-text-font-weight-bold);
   --ams-label-font-size: var(--ams-text-level-4-font-size);
@@ -469,7 +462,7 @@
   --ams-heading-font-family: var(--ams-text-font-family);
   --ams-heading-color: var(--ams-color-primary-black);
   --ams-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
-  --ams-header-padding-block: var(--ams-space-inside-md);
+  --ams-header-padding-block: var(--ams-space-md);
   --ams-header-column-gap: var(--ams-space-grid-md); /* Must have the same value as `ams.grid.column-gap`. */
   --ams-grid-row-gap-lg: var(--ams-space-grid-lg);
   --ams-grid-row-gap-md: var(--ams-space-grid-md);
@@ -484,29 +477,24 @@
   --ams-gap-md: var(--ams-space-grid-md);
   --ams-gap-sm: var(--ams-space-grid-sm);
   --ams-gap-xs: var(--ams-space-grid-xs);
-  --ams-form-field-character-counter-error-color: var(--ams-color-primary-red);
-  --ams-form-field-character-counter-line-height: var(--ams-text-level-6-line-height);
-  --ams-form-field-character-counter-font-weight: var(--ams-text-font-weight-normal);
-  --ams-form-field-character-counter-font-size: var(--ams-text-level-6-font-size);
-  --ams-form-field-character-counter-font-family: var(--ams-text-font-family);
-  --ams-form-field-character-counter-color: var(--ams-color-primary-black);
+  --ams-form-error-list-outline-offset: var(--ams-focus-outline-offset);
   --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-md) solid;
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-file-selector-button-disabled-color: var(--ams-color-neutral-grey2);
   --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-neutral-grey2);
   --ams-file-input-file-selector-button-hover-color: var(--ams-color-dark-blue);
   --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-lg) var(--ams-color-dark-blue);
-  --ams-file-input-file-selector-button-padding-inline: var(--ams-space-inside-md);
-  --ams-file-input-file-selector-button-padding-block: var(--ams-space-inside-xs);
-  --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-inside-md);
+  --ams-file-input-file-selector-button-padding-inline: var(--ams-space-md);
+  --ams-file-input-file-selector-button-padding-block: var(--ams-space-sm);
+  --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-md);
   --ams-file-input-file-selector-button-cursor: var(--ams-action-activate-cursor);
   --ams-file-input-file-selector-button-color: var(--ams-color-primary-blue);
   --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-blue);
   --ams-file-input-file-selector-button-background-color: var(--ams-color-primary-white);
   --ams-file-input-disabled-cursor: var(--ams-action-disabled-cursor);
   --ams-file-input-disabled-color: var(--ams-color-neutral-grey2);
-  --ams-file-input-padding-inline: var(--ams-space-inside-md);
-  --ams-file-input-padding-block: var(--ams-space-inside-md);
+  --ams-file-input-padding-inline: var(--ams-space-md);
+  --ams-file-input-padding-block: var(--ams-space-md);
   --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-file-input-line-height: var(--ams-text-level-5-line-height);
   --ams-file-input-font-weight: var(--ams-text-font-weight-normal);
@@ -516,29 +504,36 @@
   --ams-file-input-color: var(--ams-color-primary-black);
   --ams-file-input-border: var(--ams-border-width-sm) dashed var(--ams-color-neutral-grey3);
   --ams-file-input-background-color: var(--ams-color-primary-white);
-  --ams-field-invalid-padding-inline-start: var(--ams-space-inside-md);
+  --ams-field-invalid-padding-inline-start: var(--ams-space-md);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
-  --ams-field-gap: var(--ams-space-stack-sm);
-  --ams-field-set-legend-margin-block-end: var(--ams-space-inside-md);
+  --ams-field-gap: var(--ams-space-sm);
+  --ams-field-set-legend-margin-block-end: var(--ams-space-md);
   --ams-field-set-legend-line-height: var(--ams-text-level-4-line-height);
   --ams-field-set-legend-font-weight: var(--ams-text-font-weight-bold);
   --ams-field-set-legend-font-size: var(--ams-text-level-4-font-size);
   --ams-field-set-legend-font-family: var(--ams-text-font-family);
   --ams-field-set-legend-color: var(--ams-color-primary-black);
-  --ams-field-set-invalid-padding-inline-start: var(--ams-space-inside-md);
+  --ams-field-set-invalid-padding-inline-start: var(--ams-space-md);
   --ams-field-set-invalid-border-inline-start: var(--ams-border-width-lg) solid var(--ams-color-primary-red);
   --ams-error-message-line-height: var(--ams-text-level-6-line-height);
   --ams-error-message-font-weight: var(--ams-text-font-weight-normal);
   --ams-error-message-font-size: var(--ams-text-level-6-font-size);
   --ams-error-message-font-family: var(--ams-text-font-family);
   --ams-error-message-color: var(--ams-color-primary-red);
+  --ams-dialog-footer-gap: var(--ams-space-md);
+  --ams-dialog-header-gap: var(--ams-space-md);
+  --ams-dialog-form-padding-inline: var(--ams-space-grid-lg);
+  --ams-dialog-form-padding-block: var(--ams-space-grid-md);
+  --ams-dialog-form-gap: var(--ams-space-md);
+  --ams-dialog-max-block-size: calc(100% - 2 * var(--ams-space-grid-md));
+  --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-grid-md));
   --ams-dialog-background-color: var(--ams-color-primary-white);
-  --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
+  --ams-description-list-details-padding-inline-start: var(--ams-space-lg);
   --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
-  --ams-description-list-row-gap: var(--ams-space-stack-md);
+  --ams-description-list-row-gap: var(--ams-space-sm);
   --ams-description-list-line-height: var(--ams-text-level-5-line-height);
   --ams-description-list-inverse-color: var(--ams-color-primary-white);
-  --ams-description-list-gap: var(--ams-space-stack-md);
+  --ams-description-list-gap: var(--ams-space-sm);
   --ams-description-list-font-weight: var(--ams-text-font-weight-normal);
   --ams-description-list-font-size: var(--ams-text-level-5-font-size);
   --ams-description-list-font-family: var(--ams-text-font-family);
@@ -549,8 +544,8 @@
   --ams-date-input-disabled-color: var(--ams-color-neutral-grey2);
   --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-neutral-grey2);
   --ams-date-input-disabled-background-color: var(--ams-color-primary-white);
-  --ams-date-input-padding-inline: var(--ams-space-inside-lg);
-  --ams-date-input-padding-block: var(--ams-space-inside-xs);
+  --ams-date-input-padding-inline: var(--ams-space-md);
+  --ams-date-input-padding-block: var(--ams-space-sm);
   --ams-date-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-date-input-line-height: var(--ams-text-level-5-line-height);
   --ams-date-input-font-weight: var(--ams-text-font-weight-normal);
@@ -559,11 +554,11 @@
   --ams-date-input-color: var(--ams-color-primary-black);
   --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-black);
   --ams-date-input-background-color: var(--ams-color-primary-white);
-  --ams-column-gap-xl: var(--ams-space-grid-xl);
-  --ams-column-gap-lg: var(--ams-space-grid-lg);
-  --ams-column-gap-md: var(--ams-space-grid-md);
-  --ams-column-gap-sm: var(--ams-space-grid-sm);
-  --ams-column-gap-xs: var(--ams-space-grid-xs);
+  --ams-column-gap-xl: var(--ams-space-xl);
+  --ams-column-gap-lg: var(--ams-space-lg);
+  --ams-column-gap-md: var(--ams-space-md);
+  --ams-column-gap-sm: var(--ams-space-sm);
+  --ams-column-gap-xs: var(--ams-space-xs);
   --ams-checkbox-hover-text-decoration-thickness: var(--ams-border-width-md);
   --ams-checkbox-hover-color: var(--ams-color-dark-blue);
   --ams-checkbox-disabled-color: var(--ams-color-neutral-grey3);
@@ -589,14 +584,23 @@
   --ams-checkbox-checkmark-border-color: var(--ams-color-primary-blue);
   --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
   --ams-checkbox-line-height: var(--ams-text-level-5-line-height);
+  --ams-checkbox-gap: var(--ams-space-sm);
   --ams-checkbox-font-weight: var(--ams-text-font-weight-normal);
   --ams-checkbox-font-size: var(--ams-text-level-5-font-size);
   --ams-checkbox-font-family: var(--ams-text-font-family);
   --ams-checkbox-color: var(--ams-color-primary-black);
+  --ams-character-count-error-color: var(--ams-color-primary-red);
+  --ams-character-count-line-height: var(--ams-text-level-6-line-height);
+  --ams-character-count-font-weight: var(--ams-text-font-weight-normal);
+  --ams-character-count-font-size: var(--ams-text-level-6-font-size);
+  --ams-character-count-font-family: var(--ams-text-font-family);
+  --ams-character-count-color: var(--ams-color-primary-black);
   --ams-card-outline-offset: var(--ams-focus-outline-offset);
   --ams-card-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-card-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-card-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
+  --ams-card-heading-group-gap: var(--ams-space-sm);
+  --ams-card-gap: var(--ams-space-sm);
   --ams-button-tertiary-disabled-color: var(--ams-color-neutral-grey2);
   --ams-button-tertiary-hover-color: var(--ams-color-dark-blue);
   --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-dark-blue);
@@ -619,9 +623,10 @@
   --ams-button-primary-background-color: var(--ams-color-primary-blue);
   --ams-button-forced-color-mode-border: var(--ams-border-width-md) solid;
   --ams-button-disabled-cursor: var(--ams-action-disabled-cursor);
+  --ams-button-padding-inline: var(--ams-space-md);
+  --ams-button-padding-block: var(--ams-space-sm);
   --ams-button-outline-offset: var(--ams-focus-outline-offset);
-  --ams-button-padding-inline: var(--ams-space-inside-md);
-  --ams-button-padding-block: var(--ams-space-inside-xs);
+  --ams-button-gap: var(--ams-space-sm);
   --ams-button-line-height: var(--ams-text-level-5-line-height);
   --ams-button-font-size: var(--ams-text-level-5-font-size);
   --ams-button-font-family: var(--ams-text-font-family);
@@ -631,6 +636,7 @@
   --ams-breadcrumb-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --ams-breadcrumb-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
   --ams-breadcrumb-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-breadcrumb-separator-margin-inline: var(--ams-space-xs);
   --ams-breadcrumb-line-height: var(--ams-text-level-6-line-height);
   --ams-breadcrumb-font-weight: var(--ams-text-font-weight-normal);
   --ams-breadcrumb-font-size: var(--ams-text-level-6-font-size);
@@ -669,7 +675,7 @@
   --ams-badge-blue-background-color: var(--ams-color-primary-blue);
   --ams-badge-black-color: var(--ams-color-primary-white);
   --ams-badge-black-background-color: var(--ams-color-primary-black);
-  --ams-badge-padding-inline: var(--ams-space-inside-xs);
+  --ams-badge-padding-inline: var(--ams-space-xs);
   --ams-badge-line-height: var(--ams-text-level-5-line-height);
   --ams-badge-font-weight: var(--ams-text-font-weight-bold);
   --ams-badge-font-size: var(--ams-text-level-5-font-size);
@@ -702,6 +708,8 @@
   --ams-avatar-blue-background-color: var(--ams-color-primary-blue);
   --ams-avatar-black-color: var(--ams-color-primary-white);
   --ams-avatar-black-background-color: var(--ams-color-primary-black);
+  --ams-avatar-padding-inline: var(--ams-space-xs);
+  --ams-avatar-padding-block: var(--ams-space-xs);
   --ams-avatar-line-height: var(--ams-text-level-6-line-height);
   --ams-avatar-font-weight: var(--ams-text-font-weight-normal);
   --ams-avatar-font-size: var(--ams-text-level-6-font-size);
@@ -713,26 +721,27 @@
   --ams-aspect-ratio-square: var(--ams-proportion-square);
   --ams-aspect-ratio-tall: var(--ams-proportion-tall);
   --ams-aspect-ratio-x-tall: var(--ams-proportion-x-tall);
+  --ams-alert-content-gap: var(--ams-space-sm);
   --ams-alert-close-hover-fill: var(--ams-color-primary-blue);
   --ams-alert-close-fill: var(--ams-color-primary-black);
   --ams-alert-warning-border-color: var(--ams-color-orange);
   --ams-alert-success-border-color: var(--ams-color-dark-green);
   --ams-alert-info-border-color: var(--ams-color-primary-blue);
   --ams-alert-error-border-color: var(--ams-color-primary-red);
-  --ams-alert-padding-inline: var(--ams-space-inside-lg);
-  --ams-alert-padding-block: var(--ams-space-inside-md);
+  --ams-alert-padding-inline: var(--ams-space-lg);
+  --ams-alert-padding-block: var(--ams-space-md);
+  --ams-alert-gap: var(--ams-space-sm);
   --ams-alert-border-width: var(--ams-border-width-xl);
-  --ams-accordion-panel-padding-block: 0 var(--ams-space-inside-md);
   --ams-accordion-button-hover-color: var(--ams-color-dark-blue);
   --ams-accordion-button-focus-outline-offset: var(--ams-focus-outline-offset);
-  --ams-accordion-button-padding-block: var(--ams-space-inside-sm);
+  --ams-accordion-button-padding-block: var(--ams-space-sm);
   --ams-accordion-button-line-height: var(--ams-text-level-5-line-height);
-  --ams-accordion-button-gap: var(--ams-space-inside-md);
+  --ams-accordion-button-gap: var(--ams-space-sm);
   --ams-accordion-button-font-weight: var(--ams-text-font-weight-bold);
   --ams-accordion-button-font-size: var(--ams-text-level-5-font-size);
   --ams-accordion-button-font-family: var(--ams-text-font-family);
   --ams-accordion-button-color: var(--ams-color-primary-blue);
-  --ams-accordion-gap: var(--ams-space-inside-xs);
+  --ams-accordion-gap: var(--ams-space-md);
   --ams-link-appearance-regular-hover-text-decoration-thickness: var(--ams-border-width-lg);
   --ams-link-appearance-on-background-light-color: var(--ams-color-primary-black);
   --ams-link-appearance-on-background-dark-color: var(--ams-color-primary-white);

package/package.json

@@ -1,9 +1,10 @@
 {
-  "version": "0.10.0",
+  "version": "0.11.0",
   "author": "Community for NL Design System",
   "description": "Design tokens for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "SEE LICENSE IN LICENSE.md",
   "name": "@amsterdam/design-system-tokens",
+  "type": "module",
   "keywords": [
     "nl-design-system"
   ],
@@ -19,7 +20,7 @@
   "devDependencies": {
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "3.9.2"
+    "style-dictionary": "4.0.1"
   },
   "scripts": {
     "clean": "rimraf dist/",

package/src/brand/ams/space.compact.tokens.json

@@ -1,6 +1,11 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "0.25rem" },
+      "sm": { "value": "0.5rem" },
+      "md": { "value": "1rem" },
+      "lg": { "value": "1.5rem" },
+      "xl": { "value": "2rem" },
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
         "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },

package/src/brand/ams/space.tokens.json

@@ -1,29 +1,20 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)" },
+      "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)" },
+      "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)" },
+      "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)" },
+      "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)" },
       "grid": {
-        "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
-        "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
+        "xs": { "value": "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)" },
+        "sm": { "value": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)" },
         "md": {
-          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+          "value": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
           "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
         },
-        "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
-        "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
-      },
-      "inside": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
-      },
-      "stack": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
+        "lg": { "value": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)" },
+        "xl": { "value": "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)" }
       }
     }
   }