@amsterdam/design-system-tokens 0.2.0 → 0.3.0

package/dist/variables.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 01 Dec 2023 15:48:43 GMT
+// Generated on Fri, 22 Dec 2023 12:50:01 GMT
 
 @utrecht-button-subtle-disabled-background-color: transparent;
 @utrecht-button-subtle-background-color: transparent;
@@ -21,6 +21,7 @@
 @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-page-menu-item-gap: 0.5rem;
@@ -33,6 +34,7 @@
 @amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
 @amsterdam-ordered-list-list-style-type: decimal;
 @amsterdam-ordered-list-gap: 0.75rem;
+@amsterdam-mark-background-color: var(--amsterdam-color-yellow);
 @amsterdam-logo-height: 2.5rem;
 @amsterdam-link-in-list-gap: 0.5em;
 @amsterdam-link-inline-line-height: inherit;
@@ -57,6 +59,7 @@
 @amsterdam-dialog-backdrop-background: #0006;
 @amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
 @amsterdam-dialog-border: 0;
+@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-alert-close-background-color: transparent;
 @amsterdam-alert-gap: 1rem;
 @amsterdam-spacing-inset-xl: 2.5rem;
@@ -74,37 +77,33 @@
 @amsterdam-border-width-lg: 3px;
 @amsterdam-border-width-md: 2px;
 @amsterdam-border-width-sm: 1px;
-@amsterdam-typography-compact-text-level-7-line-height: 1.6;
-@amsterdam-typography-compact-text-level-7-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
 @amsterdam-typography-compact-text-level-6-line-height: 1.6;
-@amsterdam-typography-compact-text-level-6-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
-@amsterdam-typography-compact-text-level-5-line-height: 1.5;
-@amsterdam-typography-compact-text-level-5-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-@amsterdam-typography-compact-text-level-4-line-height: 1.4;
+@amsterdam-typography-compact-text-level-6-font-size: clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem);
+@amsterdam-typography-compact-text-level-5-line-height: 1.6;
+@amsterdam-typography-compact-text-level-5-font-size: clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem);
+@amsterdam-typography-compact-text-level-4-line-height: 1.5;
 @amsterdam-typography-compact-text-level-4-font-size: clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem);
-@amsterdam-typography-compact-text-level-3-line-height: 1.4;
+@amsterdam-typography-compact-text-level-3-line-height: 1.3;
 @amsterdam-typography-compact-text-level-3-font-size: clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem);
-@amsterdam-typography-compact-text-level-2-line-height: 1.3;
+@amsterdam-typography-compact-text-level-2-line-height: 1.25;
 @amsterdam-typography-compact-text-level-2-font-size: clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem);
 @amsterdam-typography-compact-text-level-1-line-height: 1.2;
 @amsterdam-typography-compact-text-level-1-font-size: clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem);
-@amsterdam-typography-compact-text-level-0-line-height: 1.1;
+@amsterdam-typography-compact-text-level-0-line-height: 1.15;
 @amsterdam-typography-compact-text-level-0-font-size: clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem);
-@amsterdam-typography-spacious-text-level-7-line-height: 1.6;
-@amsterdam-typography-spacious-text-level-7-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
 @amsterdam-typography-spacious-text-level-6-line-height: 1.6;
-@amsterdam-typography-spacious-text-level-6-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
-@amsterdam-typography-spacious-text-level-5-line-height: 1.5;
-@amsterdam-typography-spacious-text-level-5-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
-@amsterdam-typography-spacious-text-level-4-line-height: 1.4;
+@amsterdam-typography-spacious-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
+@amsterdam-typography-spacious-text-level-5-line-height: 1.6;
+@amsterdam-typography-spacious-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
+@amsterdam-typography-spacious-text-level-4-line-height: 1.5;
 @amsterdam-typography-spacious-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
-@amsterdam-typography-spacious-text-level-3-line-height: 1.4;
+@amsterdam-typography-spacious-text-level-3-line-height: 1.3;
 @amsterdam-typography-spacious-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
-@amsterdam-typography-spacious-text-level-2-line-height: 1.3;
+@amsterdam-typography-spacious-text-level-2-line-height: 1.25;
 @amsterdam-typography-spacious-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
 @amsterdam-typography-spacious-text-level-1-line-height: 1.2;
 @amsterdam-typography-spacious-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
-@amsterdam-typography-spacious-text-level-0-line-height: 1.1;
+@amsterdam-typography-spacious-text-level-0-line-height: 1.15;
 @amsterdam-typography-spacious-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
 @amsterdam-typography-font-weight-bold: 800;
 @amsterdam-typography-font-weight-normal: 400;
@@ -153,10 +152,10 @@
 @utrecht-button-font-family: @amsterdam-typography-font-family;
 @utrecht-button-color: @amsterdam-color-primary-white;
 @utrecht-button-background-color: @amsterdam-color-primary-blue;
-@amsterdam-unordered-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-unordered-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-unordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-unordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-unordered-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-unordered-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-unordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-unordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-unordered-list-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-unordered-list-font-family: @amsterdam-typography-font-family;
 @amsterdam-unordered-list-color: @amsterdam-color-primary-black;
@@ -172,13 +171,29 @@
 @amsterdam-top-task-link-label-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
 @amsterdam-top-task-link-label-font-weight: @amsterdam-typography-font-weight-bold;
 @amsterdam-top-task-link-label-font-family: @amsterdam-typography-font-family;
-@amsterdam-top-task-link-description-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-top-task-link-description-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
-@amsterdam-top-task-link-description-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-top-task-link-description-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
+@amsterdam-top-task-link-description-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-top-task-link-description-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-top-task-link-description-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-top-task-link-description-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
 @amsterdam-top-task-link-description-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-top-task-link-description-font-family: @amsterdam-typography-font-family;
 @amsterdam-top-task-link-description-color: @amsterdam-color-primary-black;
+@amsterdam-text-input-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-text-input-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-text-input-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-text-input-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-text-input-placeholder-color: @amsterdam-color-neutral-grey3;
+@amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-red;
+@amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-red;
+@amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-black;
+@amsterdam-text-input-disabled-color: @amsterdam-color-neutral-grey2;
+@amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px @amsterdam-color-neutral-grey2;
+@amsterdam-text-input-disabled-background-color: @amsterdam-color-primary-white;
+@amsterdam-text-input-outline-offset: @amsterdam-focus-outline-offset;
+@amsterdam-text-input-font-weight: @amsterdam-typography-font-weight-normal;
+@amsterdam-text-input-font-family: @amsterdam-typography-font-family;
+@amsterdam-text-input-color: @amsterdam-color-primary-black;
+@amsterdam-text-input-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-black;
 @amsterdam-switch-disabled-background-color: @amsterdam-color-neutral-grey2;
 @amsterdam-switch-outline-offset: @amsterdam-focus-outline-offset;
 @amsterdam-switch-checked-background-color: @amsterdam-color-primary-blue;
@@ -186,18 +201,54 @@
 @amsterdam-switch-thumb-background-color: @amsterdam-color-primary-white;
 @amsterdam-switch-background-color: @amsterdam-color-neutral-grey3;
 @amsterdam-switch-font-family: @amsterdam-typography-font-family;
-@amsterdam-paragraph-compact-large-line-height: @amsterdam-typography-compact-text-level-5-line-height;
-@amsterdam-paragraph-compact-large-font-size: @amsterdam-typography-compact-text-level-5-font-size;
-@amsterdam-paragraph-compact-medium-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-paragraph-compact-medium-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-paragraph-compact-small-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-paragraph-compact-small-font-size: @amsterdam-typography-compact-text-level-7-font-size;
-@amsterdam-paragraph-spacious-large-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
-@amsterdam-paragraph-spacious-large-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
-@amsterdam-paragraph-spacious-medium-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-paragraph-spacious-medium-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
-@amsterdam-paragraph-spacious-small-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-paragraph-spacious-small-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
+@amsterdam-spotlight-yellow-background-color: @amsterdam-color-yellow;
+@amsterdam-spotlight-purple-background-color: @amsterdam-color-purple;
+@amsterdam-spotlight-orange-background-color: @amsterdam-color-orange;
+@amsterdam-spotlight-magenta-background-color: @amsterdam-color-magenta;
+@amsterdam-spotlight-light-blue-background-color: @amsterdam-color-blue;
+@amsterdam-spotlight-green-background-color: @amsterdam-color-green;
+@amsterdam-spotlight-dark-green-background-color: @amsterdam-color-dark-green;
+@amsterdam-spotlight-blue-background-color: @amsterdam-color-primary-blue;
+@amsterdam-skip-link-hover-background-color: @amsterdam-color-dark-blue;
+@amsterdam-skip-link-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-skip-link-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-skip-link-outline-offset: @amsterdam-focus-outline-offset;
+@amsterdam-skip-link-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-skip-link-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-skip-link-font-weight: @amsterdam-typography-font-weight-normal;
+@amsterdam-skip-link-font-family: @amsterdam-typography-font-family;
+@amsterdam-skip-link-color: @amsterdam-color-primary-white;
+@amsterdam-skip-link-background-color: @amsterdam-color-primary-blue;
+@amsterdam-search-field-input-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-search-field-input-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-search-field-input-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-search-field-input-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-search-field-input-placeholder-color: @amsterdam-color-neutral-grey3;
+@amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-black;
+@amsterdam-search-field-input-cancel-button-width: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-search-field-input-cancel-button-height: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-search-field-input-cancel-button-color: @amsterdam-color-primary-blue;
+@amsterdam-search-field-input-outline-offset: @amsterdam-focus-outline-offset;
+@amsterdam-search-field-input-font-weight: @amsterdam-typography-font-weight-normal;
+@amsterdam-search-field-input-font-family: @amsterdam-typography-font-family;
+@amsterdam-search-field-input-color: @amsterdam-color-primary-black;
+@amsterdam-search-field-input-box-shadow: inset 0 0 0 1px @amsterdam-color-primary-black;
+@amsterdam-search-field-button-hover-background-color: @amsterdam-color-dark-blue;
+@amsterdam-search-field-button-outline-offset: @amsterdam-focus-outline-offset;
+@amsterdam-search-field-button-color: @amsterdam-color-primary-white;
+@amsterdam-search-field-button-background-color: @amsterdam-color-primary-blue;
+@amsterdam-paragraph-compact-large-line-height: @amsterdam-typography-compact-text-level-4-line-height;
+@amsterdam-paragraph-compact-large-font-size: @amsterdam-typography-compact-text-level-4-font-size;
+@amsterdam-paragraph-compact-medium-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-paragraph-compact-medium-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-paragraph-compact-small-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-paragraph-compact-small-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-paragraph-spacious-large-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
+@amsterdam-paragraph-spacious-large-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
+@amsterdam-paragraph-spacious-medium-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-paragraph-spacious-medium-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
+@amsterdam-paragraph-spacious-small-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-paragraph-spacious-small-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
 @amsterdam-paragraph-inverse-color: @amsterdam-color-primary-white;
 @amsterdam-paragraph-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-paragraph-font-family: @amsterdam-typography-font-family;
@@ -208,17 +259,17 @@
 @amsterdam-pagination-button-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
 @amsterdam-pagination-button-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
 @amsterdam-pagination-button-outline-offset: @amsterdam-focus-outline-offset;
-@amsterdam-pagination-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-pagination-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-pagination-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-pagination-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-pagination-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-pagination-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-pagination-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-pagination-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-pagination-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-pagination-font-family: @amsterdam-typography-font-family;
 @amsterdam-page-menu-item-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
-@amsterdam-page-menu-item-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-page-menu-item-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
-@amsterdam-page-menu-item-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-page-menu-item-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
+@amsterdam-page-menu-item-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-page-menu-item-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-page-menu-item-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-page-menu-item-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
 @amsterdam-page-menu-item-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
 @amsterdam-page-menu-item-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
 @amsterdam-page-menu-item-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
@@ -233,29 +284,29 @@
 @amsterdam-page-heading-font-weight: @amsterdam-typography-font-weight-bold;
 @amsterdam-page-heading-font-family: @amsterdam-typography-font-family;
 @amsterdam-page-heading-color: @amsterdam-color-primary-black;
-@amsterdam-ordered-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-ordered-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-ordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-ordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-ordered-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-ordered-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-ordered-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-ordered-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-ordered-list-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-ordered-list-font-family: @amsterdam-typography-font-family;
 @amsterdam-ordered-list-color: @amsterdam-color-primary-black;
 @amsterdam-logo-subsite-color: @amsterdam-color-primary-black;
 @amsterdam-logo-title-color: @amsterdam-color-primary-red;
 @amsterdam-logo-emblem-color: @amsterdam-color-primary-red;
-@amsterdam-link-standalone-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-link-standalone-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-link-standalone-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-link-standalone-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-link-standalone-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-link-standalone-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-link-standalone-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-link-standalone-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-link-standalone-hover-text-underline-offset: @amsterdam-link-appearance-regular-hover-text-underline-offset;
 @amsterdam-link-standalone-hover-text-decoration-thickness: @amsterdam-link-appearance-regular-hover-text-decoration-thickness;
 @amsterdam-link-standalone-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
 @amsterdam-link-standalone-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
 @amsterdam-link-standalone-text-decoration-line: @amsterdam-link-appearance-regular-text-decoration-line;
-@amsterdam-link-in-list-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-link-in-list-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-link-in-list-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-link-in-list-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-link-in-list-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-link-in-list-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-link-in-list-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-link-in-list-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-link-in-list-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
 @amsterdam-link-in-list-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
 @amsterdam-link-in-list-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
@@ -269,8 +320,6 @@
 @amsterdam-link-outline-offset: @amsterdam-focus-outline-offset;
 @amsterdam-link-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-link-font-family: @amsterdam-typography-font-family;
-@amsterdam-icon-compact-size-7-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-icon-compact-size-7-font-size: @amsterdam-typography-compact-text-level-7-font-size;
 @amsterdam-icon-compact-size-6-line-height: @amsterdam-typography-compact-text-level-6-line-height;
 @amsterdam-icon-compact-size-6-font-size: @amsterdam-typography-compact-text-level-6-font-size;
 @amsterdam-icon-compact-size-5-line-height: @amsterdam-typography-compact-text-level-5-line-height;
@@ -279,8 +328,6 @@
 @amsterdam-icon-compact-size-4-font-size: @amsterdam-typography-compact-text-level-4-font-size;
 @amsterdam-icon-compact-size-3-line-height: @amsterdam-typography-compact-text-level-3-line-height;
 @amsterdam-icon-compact-size-3-font-size: @amsterdam-typography-compact-text-level-3-font-size;
-@amsterdam-icon-spacious-size-7-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-icon-spacious-size-7-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
 @amsterdam-icon-spacious-size-6-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
 @amsterdam-icon-spacious-size-6-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
 @amsterdam-icon-spacious-size-5-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
@@ -289,14 +336,10 @@
 @amsterdam-icon-spacious-size-4-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
 @amsterdam-icon-spacious-size-3-line-height: @amsterdam-typography-spacious-text-level-3-line-height;
 @amsterdam-icon-spacious-size-3-font-size: @amsterdam-typography-spacious-text-level-3-font-size;
-@amsterdam-highlight-yellow-background-color: @amsterdam-color-yellow;
-@amsterdam-highlight-purple-background-color: @amsterdam-color-purple;
-@amsterdam-highlight-orange-background-color: @amsterdam-color-orange;
-@amsterdam-highlight-magenta-background-color: @amsterdam-color-magenta;
-@amsterdam-highlight-light-blue-background-color: @amsterdam-color-blue;
-@amsterdam-highlight-green-background-color: @amsterdam-color-green;
-@amsterdam-highlight-dark-green-background-color: @amsterdam-color-dark-green;
-@amsterdam-highlight-blue-background-color: @amsterdam-color-primary-blue;
+@amsterdam-heading-compact-level-6-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-heading-compact-level-6-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-heading-compact-level-5-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-heading-compact-level-5-line-height: @amsterdam-typography-compact-text-level-5-line-height;
 @amsterdam-heading-compact-level-4-font-size: @amsterdam-typography-compact-text-level-4-font-size;
 @amsterdam-heading-compact-level-4-line-height: @amsterdam-typography-compact-text-level-4-line-height;
 @amsterdam-heading-compact-level-3-font-size: @amsterdam-typography-compact-text-level-3-font-size;
@@ -305,6 +348,10 @@
 @amsterdam-heading-compact-level-2-line-height: @amsterdam-typography-compact-text-level-2-line-height;
 @amsterdam-heading-compact-level-1-font-size: @amsterdam-typography-compact-text-level-1-font-size;
 @amsterdam-heading-compact-level-1-line-height: @amsterdam-typography-compact-text-level-1-line-height;
+@amsterdam-heading-spacious-level-6-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-heading-spacious-level-6-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-heading-spacious-level-5-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
+@amsterdam-heading-spacious-level-5-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
 @amsterdam-heading-spacious-level-4-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
 @amsterdam-heading-spacious-level-4-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
 @amsterdam-heading-spacious-level-3-font-size: @amsterdam-typography-spacious-text-level-3-font-size;
@@ -317,10 +364,11 @@
 @amsterdam-heading-font-weight: @amsterdam-typography-font-weight-bold;
 @amsterdam-heading-font-family: @amsterdam-typography-font-family;
 @amsterdam-heading-color: @amsterdam-color-primary-black;
-@amsterdam-form-label-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-form-label-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
-@amsterdam-form-label-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-form-label-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
+@amsterdam-header-column-gap: @amsterdam-grid-spacious-gap;
+@amsterdam-form-label-compact-line-height: @amsterdam-typography-compact-text-level-4-line-height;
+@amsterdam-form-label-compact-font-size: @amsterdam-typography-compact-text-level-4-font-size;
+@amsterdam-form-label-spacious-line-height: @amsterdam-typography-spacious-text-level-4-line-height;
+@amsterdam-form-label-spacious-font-size: @amsterdam-typography-spacious-text-level-4-font-size;
 @amsterdam-form-label-font-weight: @amsterdam-typography-font-weight-bold;
 @amsterdam-form-label-font-family: @amsterdam-typography-font-family;
 @amsterdam-form-label-color: @amsterdam-color-primary-black;
@@ -334,10 +382,10 @@
 @amsterdam-dialog-title-font-family: @amsterdam-typography-font-family;
 @amsterdam-dialog-title-color: @amsterdam-color-primary-black;
 @amsterdam-dialog-background-color: @amsterdam-color-primary-white;
-@amsterdam-checkbox-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-checkbox-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-checkbox-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-checkbox-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
+@amsterdam-checkbox-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-checkbox-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-checkbox-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-checkbox-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
 @amsterdam-checkbox-outline-offset: @amsterdam-focus-outline-offset;
 @amsterdam-checkbox-hover-color: @amsterdam-color-dark-blue;
 @amsterdam-checkbox-font-weight: @amsterdam-typography-font-weight-normal;
@@ -366,26 +414,25 @@
 @amsterdam-card-link-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
 @amsterdam-card-link-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
 @amsterdam-card-link-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
-@amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey3;
+@amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px @amsterdam-color-dark-blue;
 @amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-blue;
 @amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px @amsterdam-color-neutral-grey2;
 @amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px @amsterdam-color-dark-blue;
 @amsterdam-button-secondary-box-shadow: inset 0 0 0 2px @amsterdam-color-primary-blue;
-@amsterdam-button-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
-@amsterdam-button-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
-@amsterdam-button-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
-@amsterdam-button-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
-@amsterdam-breadcrumb-compact-line-height: @amsterdam-typography-compact-text-level-7-line-height;
-@amsterdam-breadcrumb-compact-font-size: @amsterdam-typography-compact-text-level-7-font-size;
-@amsterdam-breadcrumb-spacious-line-height: @amsterdam-typography-spacious-text-level-7-line-height;
-@amsterdam-breadcrumb-spacious-font-size: @amsterdam-typography-spacious-text-level-7-font-size;
+@amsterdam-button-compact-line-height: @amsterdam-typography-compact-text-level-5-line-height;
+@amsterdam-button-compact-font-size: @amsterdam-typography-compact-text-level-5-font-size;
+@amsterdam-button-spacious-line-height: @amsterdam-typography-spacious-text-level-5-line-height;
+@amsterdam-button-spacious-font-size: @amsterdam-typography-spacious-text-level-5-font-size;
+@amsterdam-breadcrumb-compact-line-height: @amsterdam-typography-compact-text-level-6-line-height;
+@amsterdam-breadcrumb-compact-font-size: @amsterdam-typography-compact-text-level-6-font-size;
+@amsterdam-breadcrumb-spacious-line-height: @amsterdam-typography-spacious-text-level-6-line-height;
+@amsterdam-breadcrumb-spacious-font-size: @amsterdam-typography-spacious-text-level-6-font-size;
 @amsterdam-breadcrumb-item-link-hover-text-decoration-line: @amsterdam-link-appearance-subtle-hover-text-decoration-line;
 @amsterdam-breadcrumb-item-link-hover-color: @amsterdam-color-dark-blue;
 @amsterdam-breadcrumb-item-link-text-underline-offset: @amsterdam-link-appearance-text-underline-offset;
 @amsterdam-breadcrumb-item-link-text-decoration-thickness: @amsterdam-link-appearance-text-decoration-thickness;
 @amsterdam-breadcrumb-item-link-text-decoration-line: @amsterdam-link-appearance-subtle-text-decoration-line;
 @amsterdam-breadcrumb-item-link-outline-offset: @amsterdam-focus-outline-offset;
-@amsterdam-breadcrumb-separator-background-color: @amsterdam-color-primary-blue;
 @amsterdam-breadcrumb-font-weight: @amsterdam-typography-font-weight-normal;
 @amsterdam-breadcrumb-font-family: @amsterdam-typography-font-family;
 @amsterdam-blockquote-compact-line-height: @amsterdam-typography-compact-text-level-3-line-height;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.3.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",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "3.9.0"
+    "style-dictionary": "3.9.1"
   },
-  "gitHead": "de071558a849af9c0f7b1a442b255a1a42d78f2f"
+  "gitHead": "0201bd289e2eec2297f23d93959718f7235d76c4"
 }

package/src/brand/amsterdam/typography.tokens.json

@@ -10,7 +10,7 @@
         "text-level": {
           "0": {
             "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
-            "line-height": { "value": "1.1" }
+            "line-height": { "value": "1.15" }
           },
           "1": {
             "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
@@ -18,25 +18,21 @@
           },
           "2": {
             "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
-            "line-height": { "value": "1.3" }
+            "line-height": { "value": "1.25" }
           },
           "3": {
             "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
-            "line-height": { "value": "1.4" }
+            "line-height": { "value": "1.3" }
           },
           "4": {
-            "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
-            "line-height": { "value": "1.4" }
-          },
-          "5": {
             "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
             "line-height": { "value": "1.5" }
           },
-          "6": {
+          "5": {
             "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
             "line-height": { "value": "1.6" }
           },
-          "7": {
+          "6": {
             "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
             "line-height": { "value": "1.6" }
           }
@@ -46,7 +42,7 @@
         "text-level": {
           "0": {
             "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
-            "line-height": { "value": "1.1" }
+            "line-height": { "value": "1.15" }
           },
           "1": {
             "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
@@ -54,25 +50,21 @@
           },
           "2": {
             "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
-            "line-height": { "value": "1.3" }
+            "line-height": { "value": "1.25" }
           },
           "3": {
             "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
-            "line-height": { "value": "1.4" }
+            "line-height": { "value": "1.3" }
           },
           "4": {
-            "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
-            "line-height": { "value": "1.4" }
-          },
-          "5": {
             "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
             "line-height": { "value": "1.5" }
           },
-          "6": {
+          "5": {
             "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
             "line-height": { "value": "1.6" }
           },
-          "7": {
+          "6": {
             "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
             "line-height": { "value": "1.6" }
           }

package/src/common/amsterdam/border.tokens.json

@@ -1,15 +1,9 @@
 {
   "amsterdam": {
     "border-width": {
-      "sm": {
-        "value": "1px"
-      },
-      "md": {
-        "value": "2px"
-      },
-      "lg": {
-        "value": "3px"
-      }
+      "sm": { "value": "1px" },
+      "md": { "value": "2px" },
+      "lg": { "value": "3px" }
     }
   }
 }

package/src/common/amsterdam/spacing.tokens.json

@@ -2,18 +2,10 @@
   "amsterdam": {
     "spacing": {
       "inset": {
-        "sm": {
-          "value": "0.5rem"
-        },
-        "md": {
-          "value": "1rem"
-        },
-        "lg": {
-          "value": "1.5rem"
-        },
-        "xl": {
-          "value": "2.5rem"
-        }
+        "sm": { "value": "0.5rem" },
+        "md": { "value": "1rem" },
+        "lg": { "value": "1.5rem" },
+        "xl": { "value": "2.5rem" }
       }
     }
   }

package/src/components/amsterdam/accordion.tokens.json

@@ -9,9 +9,7 @@
         "font-family": { "value": "{amsterdam.typography.font-family}" },
         "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
         "hover": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
-          }
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}" }
         },
         "spacious": {
           "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },

package/src/components/amsterdam/breadcrumb.tokens.json

@@ -4,7 +4,9 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
       "separator": {
-        "background-color": { "value": "{amsterdam.color.primary-blue}" }
+        "background-image": {
+          "value": "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>\")"
+        }
       },
       "item-link": {
         "color": { "value": "{amsterdam.link-appearance.color}" },
@@ -18,12 +20,12 @@
         }
       },
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
       }
     }
   }

package/src/components/amsterdam/button.tokens.json

@@ -2,38 +2,28 @@
   "amsterdam": {
     "button": {
       "spacious": {
-        "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
       },
       "compact": {
-        "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
-        "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
+        "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
+        "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
       },
       "secondary": {
-        "box-shadow": {
-          "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
-        },
+        "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
         "hover": {
-          "box-shadow": {
-            "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}"
-          }
+          "box-shadow": { "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}" }
         },
         "disabled": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}"
-          }
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}" }
         },
         "focus": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
-          }
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" }
         }
       },
       "tertiary": {
         "hover": {
-          "box-shadow": {
-            "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
-          }
+          "box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.dark-blue}" }
         }
       }
     }