@amsterdam/design-system-tokens 0.8.0 → 0.10.0

package/dist/index.theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 22 Apr 2024 09:30:48 GMT
+ * Generated on Fri, 28 Jun 2024 12:13:40 GMT
  */
 
 .ams-theme {
@@ -19,14 +19,14 @@
   --ams-tabs-button-padding-inline: 1rem;
   --ams-tabs-button-padding-block: .5rem;
   --ams-tabs-button-outline-offset: -0.25rem;
-  --ams-switch-thumb-height: 1.75rem;
-  --ams-switch-thumb-width: 1.75rem;
-  --ams-switch-width: 3.5rem;
+  --ams-switch-thumb-block-size: 1.75rem;
+  --ams-switch-thumb-inline-size: 1.75rem;
+  --ams-switch-inline-size: 3.5rem;
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --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-width: 132rem;
-  --ams-screen-wide-max-width: 100rem;
+  --ams-screen-x-wide-max-inline-size: 132rem;
+  --ams-screen-wide-max-inline-size: 100rem;
   --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");
@@ -43,7 +43,7 @@
   --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-height: 2.5rem;
+  --ams-logo-block-size: 2.5rem;
   --ams-link-inline-line-height: inherit;
   --ams-link-inline-font-size: inherit;
   --ams-link-inline-font-family: inherit;
@@ -79,13 +79,13 @@
   --ams-accordion-button-padding-inline: 0;
   --ams-link-appearance-subtle-hover-text-decoration-line: underline;
   --ams-link-appearance-subtle-text-decoration-line: none;
-  --ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
+  --ams-link-appearance-regular-hover-text-underline-offset: 0.2778em;
   --ams-link-appearance-regular-text-decoration-line: underline;
-  --ams-link-appearance-text-underline-offset: 0.375rem;
+  --ams-link-appearance-text-underline-offset: 0.3333em;
   --ams-hyphenation-overflow-wrap: break-word;
   --ams-hyphenation-hyphens: auto;
   --ams-hyphenation-hyphenate-limit-chars: 12 8 4;
-  --ams-focus-outline-offset: 2px;
+  --ams-focus-outline-offset: 0.125rem;
   --ams-action-submit-cursor: pointer;
   --ams-action-navigate-cursor: pointer;
   --ams-action-inert-cursor: default;
@@ -124,11 +124,11 @@
   --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-proportion-2x-wide: 32 / 9;
+  --ams-proportion-2x-wide: 16 / 5;
   --ams-proportion-x-wide: 16 / 9;
-  --ams-proportion-wide: 5 / 4;
+  --ams-proportion-wide: 4 / 3;
   --ams-proportion-square: 1 / 1;
-  --ams-proportion-tall: 4 / 5;
+  --ams-proportion-tall: 3 / 4;
   --ams-proportion-x-tall: 9 / 16;
   --ams-color-neutral-grey3: #767676;
   --ams-color-neutral-grey2: #BEBEBE;
@@ -149,6 +149,8 @@
   --ams-border-width-lg: 0.1875rem;
   --ams-border-width-md: 0.125rem;
   --ams-border-width-sm: 0.0625rem;
+  --ams-unordered-list-small-line-height: var(--ams-text-level-6-line-height);
+  --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-font-weight: var(--ams-text-font-weight-normal);
@@ -211,7 +213,7 @@
   --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-outline-offset: var(--ams-focus-outline-offset);
-  --ams-text-area-min-height: calc(var(--ams-text-level-5-line-height) * 1em + 2 * var(--ams-text-area-padding-block));
+  --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);
   --ams-text-area-font-weight: var(--ams-text-font-weight-normal);
   --ams-text-area-font-size: var(--ams-text-level-5-font-size);
@@ -231,25 +233,40 @@
   --ams-tabs-button-font-family: var(--ams-text-font-family);
   --ams-tabs-button-cursor: var(--ams-action-activate-cursor);
   --ams-tabs-button-color: var(--ams-color-primary-blue);
-  --ams-tabs-list-border-bottom: var(--ams-border-width-md) solid 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-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-border-bottom: var(--ams-border-width-sm) solid var(--ams-color-neutral-grey1);
+  --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);
   --ams-table-font-weight: var(--ams-text-font-weight-normal);
   --ams-table-font-size: var(--ams-text-level-5-font-size);
   --ams-table-font-family: var(--ams-text-font-family);
   --ams-table-color: var(--ams-color-primary-black);
+  --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-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-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);
   --ams-switch-disabled-background-color: var(--ams-color-neutral-grey2);
-  --ams-switch-outline-offset: var(--ams-focus-outline-offset);
   --ams-switch-checked-background-color: var(--ams-color-primary-blue);
   --ams-switch-thumb-hover-color: var(--ams-color-dark-blue);
   --ams-switch-thumb-background-color: var(--ams-color-primary-white);
-  --ams-switch-background-color: var(--ams-color-neutral-grey3);
+  --ams-switch-outline-offset: var(--ams-focus-outline-offset);
   --ams-switch-font-family: var(--ams-text-font-family);
+  --ams-switch-background-color: var(--ams-color-neutral-grey3);
   --ams-spotlight-yellow-background-color: var(--ams-color-yellow);
   --ams-spotlight-purple-background-color: var(--ams-color-purple);
   --ams-spotlight-orange-background-color: var(--ams-color-orange);
@@ -286,10 +303,12 @@
   --ams-select-background-position: right var(--ams-space-inside-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);
+  --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-sm) var(--ams-color-primary-red);
   --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-md) var(--ams-color-primary-black);
-  --ams-search-field-input-cancel-button-width: var(--ams-text-level-5-font-size);
-  --ams-search-field-input-cancel-button-height: var(--ams-text-level-5-font-size);
+  --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-outline-offset: var(--ams-focus-outline-offset);
@@ -300,9 +319,9 @@
   --ams-search-field-input-color: var(--ams-color-primary-black);
   --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-hover-background-color: var(--ams-color-dark-blue);
   --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);
@@ -330,12 +349,12 @@
   --ams-radio-color: var(--ams-color-primary-black);
   --ams-paragraph-large-line-height: var(--ams-text-level-4-line-height);
   --ams-paragraph-large-font-size: var(--ams-text-level-4-font-size);
-  --ams-paragraph-medium-line-height: var(--ams-text-level-5-line-height);
-  --ams-paragraph-medium-font-size: var(--ams-text-level-5-font-size);
   --ams-paragraph-small-line-height: var(--ams-text-level-6-line-height);
   --ams-paragraph-small-font-size: var(--ams-text-level-6-font-size);
   --ams-paragraph-inverse-color: var(--ams-color-primary-white);
+  --ams-paragraph-line-height: var(--ams-text-level-5-line-height);
   --ams-paragraph-font-weight: var(--ams-text-font-weight-normal);
+  --ams-paragraph-font-size: var(--ams-text-level-5-font-size);
   --ams-paragraph-font-family: var(--ams-text-font-family);
   --ams-paragraph-color: var(--ams-color-primary-black);
   --ams-pagination-button-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
@@ -364,6 +383,8 @@
   --ams-page-heading-font-size: var(--ams-text-level-0-font-size);
   --ams-page-heading-font-family: var(--ams-text-font-family);
   --ams-page-heading-color: var(--ams-color-primary-black);
+  --ams-ordered-list-small-line-height: var(--ams-text-level-6-line-height);
+  --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-font-weight: var(--ams-text-font-weight-normal);
@@ -396,14 +417,14 @@
   --ams-link-list-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
   --ams-link-list-link-large-line-height: var(--ams-text-level-4-line-height);
   --ams-link-list-link-large-font-size: var(--ams-text-level-4-font-size);
-  --ams-link-list-link-medium-line-height: var(--ams-text-level-5-line-height);
-  --ams-link-list-link-medium-font-size: var(--ams-text-level-5-font-size);
   --ams-link-list-link-small-line-height: var(--ams-text-level-6-line-height);
   --ams-link-list-link-small-font-size: var(--ams-text-level-6-font-size);
   --ams-link-list-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
   --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-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-label-line-height: var(--ams-text-level-4-line-height);
   --ams-label-font-weight: var(--ams-text-font-weight-bold);
@@ -469,11 +490,48 @@
   --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-fieldset-legend-line-height: var(--ams-text-level-4-line-height);
-  --ams-fieldset-legend-font-weight: var(--ams-text-font-weight-bold);
-  --ams-fieldset-legend-font-size: var(--ams-text-level-4-font-size);
-  --ams-fieldset-legend-font-family: var(--ams-text-font-family);
-  --ams-fieldset-legend-color: var(--ams-color-primary-black);
+  --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-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-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);
+  --ams-file-input-font-size: var(--ams-text-level-5-font-size);
+  --ams-file-input-font-family: var(--ams-text-font-family);
+  --ams-file-input-cursor: var(--ams-action-activate-cursor);
+  --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-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-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-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-background-color: var(--ams-color-primary-white);
   --ams-description-list-details-padding-inline-start: var(--ams-space-inside-xl);
   --ams-description-list-details-font-weight: var(--ams-text-font-weight-bold);
@@ -568,11 +626,11 @@
   --ams-button-font-size: var(--ams-text-level-5-font-size);
   --ams-button-font-family: var(--ams-text-font-family);
   --ams-button-cursor: var(--ams-action-activate-cursor);
-  --ams-breadcrumb-item-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
-  --ams-breadcrumb-item-link-hover-color: var(--ams-color-dark-blue);
-  --ams-breadcrumb-item-link-text-underline-offset: var(--ams-link-appearance-text-underline-offset);
-  --ams-breadcrumb-item-link-text-decoration-line: var(--ams-link-appearance-subtle-text-decoration-line);
-  --ams-breadcrumb-item-link-outline-offset: var(--ams-focus-outline-offset);
+  --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-link-appearance-subtle-hover-text-decoration-line);
+  --ams-breadcrumb-link-hover-color: var(--ams-color-dark-blue);
+  --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-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);
@@ -585,20 +643,32 @@
   --ams-blockquote-color: var(--ams-color-primary-black);
   --ams-badge-yellow-color: var(--ams-color-primary-black);
   --ams-badge-yellow-background-color: var(--ams-color-yellow);
+  --ams-badge-white-color: var(--ams-color-primary-black);
+  --ams-badge-white-background-color: var(--ams-color-primary-white);
+  --ams-badge-red-color: var(--ams-color-primary-white);
+  --ams-badge-red-background-color: var(--ams-color-primary-red);
   --ams-badge-purple-color: var(--ams-color-primary-white);
   --ams-badge-purple-background-color: var(--ams-color-purple);
   --ams-badge-orange-color: var(--ams-color-primary-black);
   --ams-badge-orange-background-color: var(--ams-color-orange);
   --ams-badge-magenta-color: var(--ams-color-primary-white);
   --ams-badge-magenta-background-color: var(--ams-color-magenta);
+  --ams-badge-light-blue-color: var(--ams-color-primary-black);
+  --ams-badge-light-blue-background-color: var(--ams-color-blue);
+  --ams-badge-grey-3-color: var(--ams-color-primary-white);
+  --ams-badge-grey-3-background-color: var(--ams-color-neutral-grey3);
+  --ams-badge-grey-2-color: var(--ams-color-primary-black);
+  --ams-badge-grey-2-background-color: var(--ams-color-neutral-grey2);
+  --ams-badge-grey-1-color: var(--ams-color-primary-black);
+  --ams-badge-grey-1-background-color: var(--ams-color-neutral-grey1);
   --ams-badge-green-color: var(--ams-color-primary-black);
   --ams-badge-green-background-color: var(--ams-color-green);
   --ams-badge-dark-green-color: var(--ams-color-primary-white);
   --ams-badge-dark-green-background-color: var(--ams-color-dark-green);
-  --ams-badge-dark-blue-color: var(--ams-color-primary-white);
-  --ams-badge-dark-blue-background-color: var(--ams-color-primary-blue);
-  --ams-badge-blue-color: var(--ams-color-primary-black);
-  --ams-badge-blue-background-color: var(--ams-color-blue);
+  --ams-badge-blue-color: var(--ams-color-primary-white);
+  --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-line-height: var(--ams-text-level-5-line-height);
   --ams-badge-font-weight: var(--ams-text-font-weight-bold);
@@ -606,6 +676,8 @@
   --ams-badge-font-family: var(--ams-text-font-family);
   --ams-avatar-yellow-color: var(--ams-color-primary-black);
   --ams-avatar-yellow-background-color: var(--ams-color-yellow);
+  --ams-avatar-white-color: var(--ams-color-primary-black);
+  --ams-avatar-white-background-color: var(--ams-color-primary-white);
   --ams-avatar-red-color: var(--ams-color-primary-white);
   --ams-avatar-red-background-color: var(--ams-color-primary-red);
   --ams-avatar-purple-color: var(--ams-color-primary-white);
@@ -614,14 +686,22 @@
   --ams-avatar-orange-background-color: var(--ams-color-orange);
   --ams-avatar-magenta-color: var(--ams-color-primary-white);
   --ams-avatar-magenta-background-color: var(--ams-color-magenta);
+  --ams-avatar-light-blue-color: var(--ams-color-primary-black);
+  --ams-avatar-light-blue-background-color: var(--ams-color-blue);
+  --ams-avatar-grey-3-color: var(--ams-color-primary-white);
+  --ams-avatar-grey-3-background-color: var(--ams-color-neutral-grey3);
+  --ams-avatar-grey-2-color: var(--ams-color-primary-black);
+  --ams-avatar-grey-2-background-color: var(--ams-color-neutral-grey2);
+  --ams-avatar-grey-1-color: var(--ams-color-primary-black);
+  --ams-avatar-grey-1-background-color: var(--ams-color-neutral-grey1);
   --ams-avatar-green-color: var(--ams-color-primary-black);
   --ams-avatar-green-background-color: var(--ams-color-green);
   --ams-avatar-dark-green-color: var(--ams-color-primary-white);
   --ams-avatar-dark-green-background-color: var(--ams-color-dark-green);
-  --ams-avatar-dark-blue-color: var(--ams-color-primary-white);
-  --ams-avatar-dark-blue-background-color: var(--ams-color-primary-blue);
-  --ams-avatar-blue-color: var(--ams-color-primary-black);
-  --ams-avatar-blue-background-color: var(--ams-color-blue);
+  --ams-avatar-blue-color: var(--ams-color-primary-white);
+  --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-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);
@@ -661,6 +741,10 @@
   --ams-link-appearance-color: var(--ams-color-primary-blue);
   --ams-top-task-link-label-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-top-task-link-label-color: var(--ams-link-appearance-color);
+  --ams-table-of-contents-link-hover-color: var(--ams-link-appearance-hover-color);
+  --ams-table-of-contents-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
+  --ams-table-of-contents-link-color: var(--ams-link-appearance-color);
+  --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
   --ams-pagination-button-hover-color: var(--ams-link-appearance-hover-color);
   --ams-pagination-button-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-pagination-color: var(--ams-link-appearance-color);
@@ -689,6 +773,6 @@
   --ams-card-link-hover-color: var(--ams-link-appearance-hover-color);
   --ams-card-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
   --ams-card-link-color: var(--ams-link-appearance-color);
-  --ams-breadcrumb-item-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
-  --ams-breadcrumb-item-link-color: var(--ams-link-appearance-color);
+  --ams-breadcrumb-link-text-decoration-thickness: var(--ams-link-appearance-text-decoration-thickness);
+  --ams-breadcrumb-link-color: var(--ams-link-appearance-color);
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.0",
+  "version": "0.10.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",

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

@@ -2,11 +2,11 @@
   "ams": {
     "proportion": {
       "x-tall": { "value": "9 / 16" },
-      "tall": { "value": "4 / 5" },
+      "tall": { "value": "3 / 4" },
       "square": { "value": "1 / 1" },
-      "wide": { "value": "5 / 4" },
+      "wide": { "value": "4 / 3" },
       "x-wide": { "value": "16 / 9" },
-      "2x-wide": { "value": "32 / 9" }
+      "2x-wide": { "value": "16 / 5" }
     }
   }
 }

package/src/common/ams/focus.tokens.json

@@ -1,7 +1,7 @@
 {
   "ams": {
     "focus": {
-      "outline-offset": { "value": "2px" }
+      "outline-offset": { "value": "0.125rem" }
     }
   }
 }

package/src/common/ams/link-appearance.tokens.json

@@ -3,7 +3,7 @@
     "link-appearance": {
       "color": { "value": "{ams.color.primary-blue}" },
       "text-decoration-thickness": { "value": "{ams.border.width.md}" },
-      "text-underline-offset": { "value": "0.375rem" },
+      "text-underline-offset": { "value": "0.3333em" },
       "hover": {
         "color": { "value": "{ams.color.dark-blue}" }
       },
@@ -17,7 +17,7 @@
         "text-decoration-line": { "value": "underline" },
         "hover": {
           "text-decoration-thickness": { "value": "{ams.border.width.lg}" },
-          "text-underline-offset": { "value": "0.3125rem" }
+          "text-underline-offset": { "value": "0.2778em" }
         }
       },
       "subtle": {

package/src/components/ams/avatar.tokens.json

@@ -8,11 +8,11 @@
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "padding-block": { "value": "0.25rem" },
       "padding-inline": { "value": "0.25rem" },
-      "blue": {
-        "background-color": { "value": "{ams.color.blue}" },
-        "color": { "value": "{ams.color.primary-black}" }
+      "black": {
+        "background-color": { "value": "{ams.color.primary-black}" },
+        "color": { "value": "{ams.color.primary-white}" }
       },
-      "dark-blue": {
+      "blue": {
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
@@ -24,6 +24,22 @@
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }
       },
+      "grey-1": {
+        "background-color": { "value": "{ams.color.neutral-grey1}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-2": {
+        "background-color": { "value": "{ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-3": {
+        "background-color": { "value": "{ams.color.neutral-grey3}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "light-blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "magenta": {
         "background-color": { "value": "{ams.color.magenta}" },
         "color": { "value": "{ams.color.primary-white}" }
@@ -40,6 +56,10 @@
         "background-color": { "value": "{ams.color.primary-red}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "white": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "yellow": {
         "background-color": { "value": "{ams.color.yellow}" },
         "color": { "value": "{ams.color.primary-black}" }

package/src/components/ams/badge.tokens.json

@@ -6,11 +6,11 @@
       "font-weight": { "value": "{ams.text.font-weight.bold}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "padding-inline": { "value": "{ams.space.inside.xs}" },
-      "blue": {
-        "background-color": { "value": "{ams.color.blue}" },
-        "color": { "value": "{ams.color.primary-black}" }
+      "black": {
+        "background-color": { "value": "{ams.color.primary-black}" },
+        "color": { "value": "{ams.color.primary-white}" }
       },
-      "dark-blue": {
+      "blue": {
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
@@ -22,6 +22,22 @@
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }
       },
+      "grey-1": {
+        "background-color": { "value": "{ams.color.neutral-grey1}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-2": {
+        "background-color": { "value": "{ams.color.neutral-grey2}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
+      "grey-3": {
+        "background-color": { "value": "{ams.color.neutral-grey3}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "light-blue": {
+        "background-color": { "value": "{ams.color.blue}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "magenta": {
         "background-color": { "value": "{ams.color.magenta}" },
         "color": { "value": "{ams.color.primary-white}" }
@@ -34,6 +50,14 @@
         "background-color": { "value": "{ams.color.purple}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "red": {
+        "background-color": { "value": "{ams.color.primary-red}" },
+        "color": { "value": "{ams.color.primary-white}" }
+      },
+      "white": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "color": { "value": "{ams.color.primary-black}" }
+      },
       "yellow": {
         "background-color": { "value": "{ams.color.yellow}" },
         "color": { "value": "{ams.color.primary-black}" }

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

@@ -10,7 +10,7 @@
           "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": {
+      "link": {
         "color": { "value": "{ams.link-appearance.color}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },

package/src/components/ams/error-message.tokens.json

@@ -0,0 +1,11 @@
+{
+  "ams": {
+    "error-message": {
+      "color": { "value": "{ams.color.primary-red}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.6.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.6.line-height}" }
+    }
+  }
+}

package/src/components/ams/{fieldset.tokens.json → field-set.tokens.json}

@@ -1,12 +1,21 @@
 {
   "ams": {
-    "fieldset": {
+    "field-set": {
+      "invalid": {
+        "border-inline-start": {
+          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
+        },
+        "padding-inline-start": {
+          "value": "{ams.space.inside.md}"
+        }
+      },
       "legend": {
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.4.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "line-height": { "value": "{ams.text.level.4.line-height}" }
+        "line-height": { "value": "{ams.text.level.4.line-height}" },
+        "margin-block-end": { "value": "{ams.space.inside.md}" }
       }
     }
   }

package/src/components/ams/field.tokens.json

@@ -0,0 +1,17 @@
+{
+  "ams": {
+    "field": {
+      "gap": {
+        "value": "{ams.space.stack.sm}"
+      },
+      "invalid": {
+        "border-inline-start": {
+          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
+        },
+        "padding-inline-start": {
+          "value": "{ams.space.inside.md}"
+        }
+      }
+    }
+  }
+}

package/src/components/ams/file-input.tokens.json

@@ -0,0 +1,42 @@
+{
+  "ams": {
+    "file-input": {
+      "background-color": { "value": "{ams.color.primary-white}" },
+      "border": { "value": "{ams.border.width.sm} dashed {ams.color.neutral-grey3}" },
+      "color": { "value": "{ams.color.primary-black}" },
+      "cursor": { "value": "{ams.action.activate.cursor}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "disabled": {
+        "color": { "value": "{ams.color.neutral-grey2}" },
+        "cursor": { "value": "{ams.action.disabled.cursor}" }
+      },
+      "file-selector-button": {
+        "background-color": { "value": "{ams.color.primary-white}" },
+        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
+        "color": { "value": "{ams.color.primary-blue}" },
+        "cursor": { "value": "{ams.action.activate.cursor}" },
+        "margin-inline-end": { "value": "{ams.space.inside.md}" },
+        "padding-block": { "value": "{ams.space.inside.xs}" },
+        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "hover": {
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
+          "color": { "value": "{ams.color.dark-blue}" }
+        },
+        "disabled": {
+          "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
+          "color": { "value": "{ams.color.neutral-grey2}" },
+          "cursor": { "value": "{ams.action.disabled.cursor}" }
+        },
+        "forced-color-mode": {
+          "border": { "value": "{ams.border.width.md} solid" }
+        }
+      }
+    }
+  }
+}