@amsterdam/design-system-tokens 0.16.0 → 1.0.0

package/dist/index.theme.css

@@ -39,7 +39,7 @@
   --ams-color-text-secondary: #767676;
   --ams-cursor-disabled: not-allowed;
   --ams-cursor-interactive: pointer;
-  --ams-focus-outline-offset: 0.125rem;
+  --ams-focus-outline-offset: 0.25rem;
   --ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
   --ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
   --ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
@@ -77,22 +77,32 @@
   --ams-accordion-button-padding-inline: 0;
   --ams-accordion-panel-padding-block: 0;
   --ams-accordion-panel-padding-inline: 0;
+  --ams-alert-border-style: solid;
+  --ams-avatar-border-style: solid;
   --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-breadcrumb-separator-block-size: 1ex;
   --ams-breadcrumb-separator-inline-size: 1ex;
+  --ams-button-border-style: solid;
   --ams-button-tertiary-background-color: transparent;
-  --ams-button-tertiary-disabled-background-color: transparent;
-  --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-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-button-tertiary-border-color: transparent;
+  --ams-button-tertiary-hover-border-color: currentColor;
+  --ams-checkbox-icon-container-inline-size: 1.5rem;
+  --ams-date-input-border-color: currentColor;
+  --ams-date-input-border-style: solid;
   --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-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-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='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+  --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='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-description-list-narrow-grid-template-columns: 1fr 4fr;
   --ams-description-list-medium-grid-template-columns: 1fr 2fr;
   --ams-description-list-wide-grid-template-columns: 1fr 1fr;
+  --ams-dialog-border-style: solid;
   --ams-dialog-max-inline-size: 48rem;
   --ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
   --ams-dialog-body-padding-block: 0;
+  --ams-file-input-border-color: currentColor;
+  --ams-file-input-border-style: dashed;
+  --ams-file-input-file-selector-button-border-color: currentColor;
+  --ams-file-input-file-selector-button-border-style: solid;
   --ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
   --ams-grid-column-count: 4;
   --ams-grid-medium-column-count: 8;
@@ -110,35 +120,45 @@
   --ams-logo-emblem-color: #ec0000;
   --ams-logo-title-color: #ec0000;
   --ams-ordered-list-list-style-type: decimal;
-  --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-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-item-padding-inline-start: 0.25rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
   --ams-ordered-list-ordered-list-list-style-type: lower-alpha;
   --ams-ordered-list-ordered-list-padding-block-end: 0;
-  --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-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-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 100rem;
-  --ams-radio-hover-indicator-stroke-width: 3px;
-  --ams-radio-circle-stroke-width: 2px;
+  --ams-password-input-border-color: currentColor;
+  --ams-password-input-border-style: solid;
   --ams-radio-icon-container-inline-size: 1.5rem;
+  --ams-search-field-input-border-color: currentColor;
+  --ams-search-field-input-border-style: solid;
   --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-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-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-border-color: currentColor;
+  --ams-select-border-style: solid;
+  --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='%23767676' 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-hover-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-switch-background-color: #767676;
   --ams-switch-inline-size: 3.5rem;
-  --ams-switch-thumb-inline-size: 1.75rem;
   --ams-switch-thumb-block-size: 1.75rem;
-  --ams-tabs-button-outline-offset: -0.25rem;
+  --ams-switch-thumb-inline-size: 1.75rem;
+  --ams-text-area-border-color: currentColor;
+  --ams-text-area-border-style: solid;
+  --ams-text-input-border-color: currentColor;
+  --ams-text-input-border-style: solid;
+  --ams-time-input-border-color: currentColor;
+  --ams-time-input-border-style: solid;
   --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-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-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='%23767676'><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-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='%23003677'><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-unordered-list-list-style-type: '\2022';
-  --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-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-item-padding-inline-start: 0.875rem; /** The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem. */
   --ams-unordered-list-unordered-list-list-style-type: '\2013';
   --ams-unordered-list-unordered-list-padding-block-end: 0;
-  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; /* Indent less than the parent to start-align the child’s marker with the parent text. */
-  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /* The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
+  --ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; /** Indent less than the parent to start-align the child’s marker with the parent text. */
+  --ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-typography-heading-3-font-size: var(--ams-typography-body-text-x-large-font-size);
   --ams-typography-heading-4-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-typography-heading-5-font-size: var(--ams-typography-body-text-font-size);
@@ -164,22 +184,24 @@
   --ams-accordion-button-hover-color: var(--ams-color-interactive-hover);
   --ams-action-group-gap: var(--ams-space-m);
   --ams-alert-background-color: var(--ams-color-background);
-  --ams-alert-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-info);
-  --ams-alert-forced-colors-border-width: var(--ams-border-width-xl);
+  --ams-alert-border-color: var(--ams-color-feedback-info);
+  --ams-alert-border-width: var(--ams-border-width-xl);
   --ams-alert-severity-indicator-background-color: var(--ams-color-feedback-info);
   --ams-alert-severity-indicator-padding-block: var(--ams-space-m);
   --ams-alert-severity-indicator-padding-inline: var(--ams-space-s);
   --ams-alert-content-gap: var(--ams-space-s);
   --ams-alert-content-padding-block: var(--ams-space-m);
   --ams-alert-content-padding-inline: var(--ams-space-m);
-  --ams-alert-error-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-error);
+  --ams-alert-error-border-color: var(--ams-color-feedback-error);
   --ams-alert-error-severity-indicator-background-color: var(--ams-color-feedback-error);
-  --ams-alert-success-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-success);
+  --ams-alert-success-border-color: var(--ams-color-feedback-success);
   --ams-alert-success-severity-indicator-background-color: var(--ams-color-feedback-success);
-  --ams-alert-warning-box-shadow: inset 0 0 0 var(--ams-border-width-xl) var(--ams-color-feedback-warning);
+  --ams-alert-warning-border-color: var(--ams-color-feedback-warning);
   --ams-alert-warning-severity-indicator-background-color: var(--ams-color-feedback-warning);
   --ams-avatar-aspect-ratio: var(--ams-aspect-ratio-1-1);
   --ams-avatar-background-color: var(--ams-color-highlight-purple);
+  --ams-avatar-border-color: var(--ams-color-highlight-purple);
+  --ams-avatar-border-width: var(--ams-border-width-m);
   --ams-avatar-color: var(--ams-color-text-inverse);
   --ams-avatar-font-family: var(--ams-typography-font-family);
   --ams-avatar-font-size: var(--ams-typography-body-text-small-font-size);
@@ -189,16 +211,22 @@
   --ams-avatar-padding-inline: var(--ams-space-xs);
   --ams-avatar-forced-colors-border-width: var(--ams-border-width-m);
   --ams-avatar-azure-background-color: var(--ams-color-highlight-azure);
+  --ams-avatar-azure-border-color: var(--ams-color-highlight-azure);
   --ams-avatar-azure-color: var(--ams-color-text-inverse);
   --ams-avatar-green-background-color: var(--ams-color-highlight-green);
+  --ams-avatar-green-border-color: var(--ams-color-highlight-green);
   --ams-avatar-green-color: var(--ams-color-text-inverse);
   --ams-avatar-lime-background-color: var(--ams-color-highlight-lime);
+  --ams-avatar-lime-border-color: var(--ams-color-highlight-lime);
   --ams-avatar-lime-color: var(--ams-color-text);
   --ams-avatar-magenta-background-color: var(--ams-color-highlight-magenta);
+  --ams-avatar-magenta-border-color: var(--ams-color-highlight-magenta);
   --ams-avatar-magenta-color: var(--ams-color-text-inverse);
   --ams-avatar-orange-background-color: var(--ams-color-highlight-orange);
+  --ams-avatar-orange-border-color: var(--ams-color-highlight-orange);
   --ams-avatar-orange-color: var(--ams-color-text);
   --ams-avatar-yellow-background-color: var(--ams-color-highlight-yellow);
+  --ams-avatar-yellow-border-color: var(--ams-color-highlight-yellow);
   --ams-avatar-yellow-color: var(--ams-color-text);
   --ams-badge-background-color: var(--ams-color-feedback-success);
   --ams-badge-color: var(--ams-color-text-inverse);
@@ -236,6 +264,7 @@
   --ams-breadcrumb-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-breadcrumb-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-breadcrumb-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
+  --ams-button-border-width: var(--ams-border-width-m);
   --ams-button-cursor: var(--ams-cursor-interactive);
   --ams-button-font-family: var(--ams-typography-font-family);
   --ams-button-font-size: var(--ams-typography-body-text-font-size);
@@ -246,24 +275,19 @@
   --ams-button-padding-block: var(--ams-space-s);
   --ams-button-padding-inline: var(--ams-space-m);
   --ams-button-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-button-forced-color-mode-border: var(--ams-border-width-m) solid;
   --ams-button-primary-background-color: var(--ams-color-interactive);
-  --ams-button-primary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
+  --ams-button-primary-border-color: var(--ams-color-interactive);
   --ams-button-primary-color: var(--ams-color-text-inverse);
   --ams-button-primary-disabled-background-color: var(--ams-color-interactive-disabled);
-  --ams-button-primary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
+  --ams-button-primary-disabled-border-color: var(--ams-color-interactive-disabled);
   --ams-button-primary-hover-background-color: var(--ams-color-interactive-hover);
-  --ams-button-primary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
+  --ams-button-primary-hover-border-color: var(--ams-color-interactive-hover);
   --ams-button-secondary-background-color: var(--ams-color-background);
   --ams-button-secondary-color: var(--ams-color-interactive);
-  --ams-button-secondary-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
-  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
+  --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
   --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
-  --ams-button-secondary-disabled-background-color: var(--ams-color-background);
-  --ams-button-secondary-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
   --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-tertiary-color: var(--ams-color-interactive);
-  --ams-button-tertiary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-hover);
   --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-icon-only-padding-block: var(--ams-space-s);
@@ -290,26 +314,31 @@
   --ams-checkbox-gap: var(--ams-space-s);
   --ams-checkbox-line-height: var(--ams-typography-body-text-line-height);
   --ams-checkbox-outline-offset: var(--ams-focus-outline-offset);
-  --ams-checkbox-checkmark-border-color: var(--ams-color-interactive);
-  --ams-checkbox-checkmark-border-width: var(--ams-border-width-m);
-  --ams-checkbox-checkmark-checked-background-color: var(--ams-color-interactive);
-  --ams-checkbox-checkmark-checked-hover-background-color: var(--ams-color-interactive-hover);
-  --ams-checkbox-checkmark-disabled-border-color: var(--ams-color-interactive-disabled);
-  --ams-checkbox-checkmark-disabled-border-width: var(--ams-border-width-m);
-  --ams-checkbox-checkmark-disabled-checked-background-color: var(--ams-color-interactive-disabled);
-  --ams-checkbox-checkmark-disabled-checked-hover-background-color: var(--ams-color-interactive-disabled);
-  --ams-checkbox-checkmark-disabled-indeterminate-background-color: var(--ams-color-interactive-disabled);
-  --ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: var(--ams-color-interactive-disabled);
-  --ams-checkbox-checkmark-hover-border-color: var(--ams-color-interactive-hover);
-  --ams-checkbox-checkmark-hover-border-width: var(--ams-border-width-l);
-  --ams-checkbox-checkmark-invalid-border-color: var(--ams-color-interactive-invalid);
-  --ams-checkbox-checkmark-invalid-checked-background-color: var(--ams-color-interactive-invalid);
-  --ams-checkbox-checkmark-invalid-checked-hover-background-color: var(--ams-color-interactive-invalid-hover);
-  --ams-checkbox-checkmark-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
-  --ams-checkbox-checkmark-invalid-indeterminate-background-color: var(--ams-color-interactive-invalid);
-  --ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: var(--ams-color-interactive-invalid-hover);
-  --ams-checkbox-checkmark-indeterminate-background-color: var(--ams-color-interactive);
-  --ams-checkbox-checkmark-indeterminate-hover-background-color: var(--ams-color-interactive-hover);
+  --ams-checkbox-checked-indicator-stroke: var(--ams-color-interactive-inverse);
+  --ams-checkbox-indeterminate-indicator-stroke: var(--ams-color-interactive-inverse);
+  --ams-checkbox-hover-indicator-hover-stroke: var(--ams-color-interactive-hover);
+  --ams-checkbox-hover-indicator-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
+  --ams-checkbox-rectangle-fill: var(--ams-color-background);
+  --ams-checkbox-rectangle-stroke: var(--ams-color-interactive);
+  --ams-checkbox-rectangle-checked-fill: var(--ams-color-interactive);
+  --ams-checkbox-rectangle-checked-disabled-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-checked-disabled-hover-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-checked-hover-fill: var(--ams-color-interactive-hover);
+  --ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-checked-invalid-fill: var(--ams-color-interactive-invalid);
+  --ams-checkbox-rectangle-checked-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
+  --ams-checkbox-rectangle-disabled-stroke: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-hover-stroke: var(--ams-color-interactive-hover);
+  --ams-checkbox-rectangle-hover-disabled-invalid-stroke: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-indeterminate-fill: var(--ams-color-interactive);
+  --ams-checkbox-rectangle-indeterminate-disabled-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-indeterminate-disabled-hover-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-indeterminate-hover-fill: var(--ams-color-interactive-hover);
+  --ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: var(--ams-color-interactive-disabled);
+  --ams-checkbox-rectangle-indeterminate-invalid-fill: var(--ams-color-interactive-invalid);
+  --ams-checkbox-rectangle-indeterminate-invalid-hover-fill: var(--ams-color-interactive-invalid-hover);
+  --ams-checkbox-rectangle-invalid-stroke: var(--ams-color-interactive-invalid);
+  --ams-checkbox-rectangle-invalid-hover-stroke: var(--ams-color-interactive-invalid-hover);
   --ams-checkbox-disabled-cursor: var(--ams-cursor-disabled);
   --ams-checkbox-disabled-color: var(--ams-color-interactive-disabled);
   --ams-checkbox-hover-color: var(--ams-color-interactive-hover);
@@ -320,7 +349,7 @@
   --ams-column-gap-large: var(--ams-space-l);
   --ams-column-gap-x-large: var(--ams-space-xl);
   --ams-date-input-background-color: var(--ams-color-background);
-  --ams-date-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-date-input-border-width: var(--ams-border-width-m);
   --ams-date-input-color: var(--ams-color-text);
   --ams-date-input-font-family: var(--ams-typography-font-family);
   --ams-date-input-font-size: var(--ams-typography-body-text-font-size);
@@ -330,13 +359,12 @@
   --ams-date-input-padding-block: var(--ams-space-s);
   --ams-date-input-padding-inline: var(--ams-space-m);
   --ams-date-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
-  --ams-date-input-disabled-background-color: var(--ams-color-background);
-  --ams-date-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-date-input-disabled-color: var(--ams-color-interactive-disabled);
   --ams-date-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-date-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-date-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-date-input-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-date-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-date-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-description-list-color: var(--ams-color-text);
   --ams-description-list-column-gap: var(--ams-space-l);
   --ams-description-list-font-family: var(--ams-typography-font-family);
@@ -348,7 +376,7 @@
   --ams-description-list-description-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-description-list-description-padding-inline-start: var(--ams-space-l);
   --ams-dialog-background-color: var(--ams-color-background);
-  --ams-dialog-border: var(--ams-border-width-m) solid var(--ams-dialog-background-color);
+  --ams-dialog-border-width: var(--ams-border-width-m);
   --ams-dialog-gap: var(--ams-space-m);
   --ams-dialog-inline-size: calc(100% - 2 * var(--ams-space-l));
   --ams-dialog-max-block-size: calc(100dvh - 2 * var(--ams-space-l));
@@ -390,31 +418,29 @@
   --ams-figure-caption-line-height: var(--ams-typography-body-text-small-line-height);
   --ams-figure-caption-inverse-color: var(--ams-color-text-inverse);
   --ams-file-input-background-color: var(--ams-color-background);
-  --ams-file-input-border: var(--ams-border-width-s) dashed var(--ams-color-interactive-secondary);
+  --ams-file-input-border-width: var(--ams-border-width-m);
   --ams-file-input-color: var(--ams-color-text);
   --ams-file-input-cursor: var(--ams-cursor-interactive);
   --ams-file-input-font-family: var(--ams-typography-font-family);
   --ams-file-input-font-size: var(--ams-typography-body-text-font-size);
   --ams-file-input-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-file-input-line-height: var(--ams-typography-body-text-line-height);
-  --ams-file-input-outline-offset: calc(var(--ams-focus-outline-offset) * 2); /* Compensate for the dashed border */
+  --ams-file-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-file-input-padding-block: var(--ams-space-m);
   --ams-file-input-padding-inline: var(--ams-space-m);
   --ams-file-input-disabled-color: var(--ams-color-interactive-disabled);
   --ams-file-input-disabled-cursor: var(--ams-cursor-disabled);
   --ams-file-input-file-selector-button-background-color: var(--ams-color-background);
-  --ams-file-input-file-selector-button-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive);
+  --ams-file-input-file-selector-button-border-width: var(--ams-border-width-m);
   --ams-file-input-file-selector-button-color: var(--ams-color-interactive);
   --ams-file-input-file-selector-button-cursor: var(--ams-cursor-interactive);
   --ams-file-input-file-selector-button-margin-inline-end: var(--ams-space-m);
   --ams-file-input-file-selector-button-padding-block: var(--ams-space-s);
   --ams-file-input-file-selector-button-padding-inline: var(--ams-space-m);
-  --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-l) var(--ams-color-interactive-hover);
+  --ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
   --ams-file-input-file-selector-button-hover-color: var(--ams-color-interactive-hover);
-  --ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-disabled);
   --ams-file-input-file-selector-button-disabled-color: var(--ams-color-interactive-disabled);
   --ams-file-input-file-selector-button-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-file-input-file-selector-button-forced-color-mode-border: var(--ams-border-width-m) solid;
   --ams-file-list-gap: var(--ams-space-m);
   --ams-file-list-padding-block: var(--ams-space-m);
   --ams-file-list-file-font-family: var(--ams-typography-font-family);
@@ -446,7 +472,7 @@
   --ams-heading-font-weight: var(--ams-typography-heading-font-weight);
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
-  --ams-hint-color: var(--ams-color-text-secondary);
+  --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -535,6 +561,7 @@
   --ams-page-header-logo-link-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-header-brand-name-color: var(--ams-color-text);
   --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
+  --ams-page-header-brand-name-line-height: var(--ams-typography-heading-4-line-height);
   --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
   --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
@@ -582,7 +609,7 @@
   --ams-paragraph-large-font-size: var(--ams-typography-body-text-large-font-size);
   --ams-paragraph-large-line-height: var(--ams-typography-body-text-large-line-height);
   --ams-password-input-background-color: var(--ams-color-background);
-  --ams-password-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-password-input-border-width: var(--ams-border-width-m);
   --ams-password-input-color: var(--ams-color-text);
   --ams-password-input-font-family: var(--ams-typography-font-family);
   --ams-password-input-font-size: var(--ams-typography-body-text-font-size);
@@ -591,13 +618,12 @@
   --ams-password-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-password-input-padding-block: var(--ams-space-s);
   --ams-password-input-padding-inline: var(--ams-space-m);
-  --ams-password-input-disabled-background-color: var(--ams-color-background);
-  --ams-password-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-password-input-disabled-color: var(--ams-color-interactive-disabled);
   --ams-password-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-password-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-password-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-password-input-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-password-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-password-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-password-input-placeholder-color: var(--ams-color-text-secondary);
   --ams-radio-color: var(--ams-color-text);
   --ams-radio-cursor: var(--ams-cursor-interactive);
@@ -635,7 +661,7 @@
   --ams-row-gap-large: var(--ams-space-l);
   --ams-row-gap-x-large: var(--ams-space-xl);
   --ams-search-field-input-background-color: var(--ams-color-background);
-  --ams-search-field-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-search-field-input-border-width: var(--ams-border-width-m);
   --ams-search-field-input-color: var(--ams-color-text);
   --ams-search-field-input-font-family: var(--ams-typography-font-family);
   --ams-search-field-input-font-size: var(--ams-typography-body-text-font-size);
@@ -648,13 +674,14 @@
   --ams-search-field-input-cancel-button-color: var(--ams-color-interactive);
   --ams-search-field-input-cancel-button-cursor: var(--ams-cursor-interactive);
   --ams-search-field-input-cancel-button-inline-size: var(--ams-typography-body-text-font-size);
-  --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-search-field-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-search-field-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-search-field-input-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-search-field-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-search-field-input-placeholder-color: var(--ams-color-text-secondary);
   --ams-select-background-color: var(--ams-color-background);
   --ams-select-background-position: right var(--ams-space-m) center;
-  --ams-select-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-select-border-width: var(--ams-border-width-m);
   --ams-select-color: var(--ams-color-text);
   --ams-select-font-family: var(--ams-typography-font-family);
   --ams-select-font-size: var(--ams-typography-body-text-font-size);
@@ -663,12 +690,12 @@
   --ams-select-outline-offset: var(--ams-focus-outline-offset);
   --ams-select-padding-block: var(--ams-space-s);
   --ams-select-padding-inline: var(--ams-space-m) calc(2 * var(--ams-space-m) + 1em);
-  --ams-select-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-select-disabled-color: var(--ams-color-interactive-disabled);
   --ams-select-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-select-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-select-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-select-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-select-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-select-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-select-option-disabled-color: var(--ams-color-interactive-disabled);
   --ams-skip-link-background-color: var(--ams-color-interactive);
   --ams-skip-link-color: var(--ams-color-text-inverse);
@@ -701,6 +728,7 @@
   --ams-switch-outline-offset: var(--ams-focus-outline-offset);
   --ams-switch-thumb-background-color: var(--ams-color-background);
   --ams-switch-thumb-hover-color: var(--ams-color-interactive-hover);
+  --ams-switch-thumb-hover-box-shadow: 0 0 0 var(--ams-border-width-m) var(--ams-switch-thumb-hover-color);
   --ams-switch-checked-background-color: var(--ams-color-interactive);
   --ams-switch-disabled-background-color: var(--ams-color-interactive-disabled);
   --ams-switch-disabled-cursor: var(--ams-cursor-disabled);
@@ -736,16 +764,17 @@
   --ams-tabs-button-font-size: var(--ams-typography-body-text-font-size);
   --ams-tabs-button-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-tabs-button-line-height: var(--ams-typography-body-text-line-height);
+  --ams-tabs-button-outline-offset: calc(var(--ams-focus-outline-offset) * -1);
   --ams-tabs-button-padding-block: var(--ams-space-s);
   --ams-tabs-button-padding-inline: var(--ams-space-m);
-  --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
   --ams-tabs-button-hover-box-shadow: inset 0 calc(var(--ams-border-width-m) * -1);
+  --ams-tabs-button-hover-color: var(--ams-color-interactive-hover);
   --ams-tabs-button-selected-box-shadow: inset 0 calc(var(--ams-border-width-xl) * -1);
   --ams-tabs-button-selected-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-tabs-button-disabled-color: var(--ams-color-interactive-disabled);
   --ams-tabs-button-disabled-cursor: var(--ams-cursor-disabled);
   --ams-text-area-background-color: var(--ams-color-background);
-  --ams-text-area-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-text-area-border-width: var(--ams-border-width-m);
   --ams-text-area-color: var(--ams-color-text);
   --ams-text-area-font-family: var(--ams-typography-font-family);
   --ams-text-area-font-size: var(--ams-typography-body-text-font-size);
@@ -755,16 +784,15 @@
   --ams-text-area-outline-offset: var(--ams-focus-outline-offset);
   --ams-text-area-padding-block: var(--ams-space-s);
   --ams-text-area-padding-inline: var(--ams-space-m);
-  --ams-text-area-disabled-background-color: var(--ams-color-background);
-  --ams-text-area-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-text-area-disabled-color: var(--ams-color-interactive-disabled);
   --ams-text-area-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-text-area-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-text-area-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-text-area-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-text-area-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-text-area-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-text-area-placeholder-color: var(--ams-color-text-secondary);
   --ams-text-input-background-color: var(--ams-color-background);
-  --ams-text-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-text-input-border-width: var(--ams-border-width-m);
   --ams-text-input-color: var(--ams-color-text);
   --ams-text-input-font-family: var(--ams-typography-font-family);
   --ams-text-input-font-size: var(--ams-typography-body-text-font-size);
@@ -773,16 +801,15 @@
   --ams-text-input-outline-offset: var(--ams-focus-outline-offset);
   --ams-text-input-padding-block: var(--ams-space-s);
   --ams-text-input-padding-inline: var(--ams-space-m);
-  --ams-text-input-disabled-background-color: var(--ams-color-background);
-  --ams-text-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-text-input-disabled-color: var(--ams-color-interactive-disabled);
   --ams-text-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-text-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-text-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-text-input-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-text-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-text-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-text-input-placeholder-color: var(--ams-color-text-secondary);
   --ams-time-input-background-color: var(--ams-color-background);
-  --ams-time-input-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-secondary);
+  --ams-time-input-border-width: var(--ams-border-width-m);
   --ams-time-input-color: var(--ams-color-text);
   --ams-time-input-font-family: var(--ams-typography-font-family);
   --ams-time-input-font-size: var(--ams-typography-body-text-font-size);
@@ -792,13 +819,12 @@
   --ams-time-input-padding-block: var(--ams-space-s);
   --ams-time-input-padding-inline: var(--ams-space-m);
   --ams-time-input-calender-picker-indicator-cursor: var(--ams-cursor-interactive);
-  --ams-time-input-disabled-background-color: var(--ams-color-background);
-  --ams-time-input-disabled-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-disabled);
   --ams-time-input-disabled-color: var(--ams-color-interactive-disabled);
   --ams-time-input-disabled-cursor: var(--ams-cursor-disabled);
-  --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-secondary);
-  --ams-time-input-invalid-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid);
-  --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-m) var(--ams-color-interactive-invalid-hover);
+  --ams-time-input-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
+  --ams-time-input-invalid-border-color: var(--ams-color-interactive-invalid);
+  --ams-time-input-invalid-hover-border-color: var(--ams-color-interactive-invalid-hover);
+  --ams-time-input-invalid-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s) var(--ams-color-interactive-invalid-hover);
   --ams-unordered-list-color: var(--ams-color-text);
   --ams-unordered-list-font-family: var(--ams-typography-font-family);
   --ams-unordered-list-font-size: var(--ams-typography-body-text-font-size);
@@ -817,6 +843,8 @@
   --ams-card-link-color: var(--ams-links-color);
   --ams-card-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-card-link-hover-color: var(--ams-links-hover-color);
+  --ams-checkbox-icon-container-block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
+  --ams-dialog-border-color: var(--ams-dialog-background-color);
   --ams-field-set-legend-font-size: var(--ams-typography-heading-4-font-size);
   --ams-heading-3-font-size: var(--ams-typography-heading-3-font-size);
   --ams-heading-4-font-size: var(--ams-typography-heading-4-font-size);
@@ -848,7 +876,7 @@
   --ams-page-footer-menu-link-color: var(--ams-links-color);
   --ams-page-footer-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-footer-menu-link-hover-color: var(--ams-links-hover-color);
-  --ams-page-header-padding-inline: var(--ams-grid-padding-inline); /* Must be the Grid inline padding, to make sure Header and Grid line up */
+  --ams-page-header-padding-inline: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Header and Grid line up */
   --ams-page-header-medium-padding-inline: var(--ams-grid-medium-padding-inline);
   --ams-page-header-wide-padding-inline: var(--ams-grid-wide-padding-inline);
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-4-font-size);
@@ -868,7 +896,6 @@
   --ams-standalone-link-hover-text-decoration-thickness: var(--ams-links-hover-text-decoration-thickness);
   --ams-standalone-link-inverse-color: var(--ams-links-inverse-color);
   --ams-standalone-link-inverse-hover-color: var(--ams-links-inverse-hover-color);
-  --ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem var(--ams-switch-thumb-hover-color);
   --ams-table-of-contents-link-color: var(--ams-links-color);
   --ams-table-of-contents-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-table-of-contents-link-hover-color: var(--ams-links-hover-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.0",
+  "version": "1.0.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -26,7 +26,7 @@
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
     "npm-run-all": "4.1.5",
-    "style-dictionary": "4.3.3"
+    "style-dictionary": "4.4.0"
   },
   "scripts": {
     "clean": "rimraf dist/",

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

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

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

@@ -21,7 +21,8 @@
           "font-size": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" }
+          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" },
+          "line-height": { "value": "1.2133" }
         },
         "3": {
           "font-size": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" }

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

@@ -2,10 +2,9 @@
   "ams": {
     "alert": {
       "background-color": { "value": "{ams.color.background}" },
-      "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.info}" },
-      "forced-colors": {
-        "border-width": { "value": "{ams.border.width.xl}" }
-      },
+      "border-color": { "value": "{ams.color.feedback.info}" },
+      "border-style": { "value": "solid" },
+      "border-width": { "value": "{ams.border.width.xl}" },
       "severity-indicator": {
         "background-color": { "value": "{ams.color.feedback.info}" },
         "padding-block": { "value": "{ams.space.m}" },
@@ -17,19 +16,19 @@
         "padding-inline": { "value": "{ams.space.m}" }
       },
       "error": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.error}" },
+        "border-color": { "value": "{ams.color.feedback.error}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.error}" }
         }
       },
       "success": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.success}" },
+        "border-color": { "value": "{ams.color.feedback.success}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.success}" }
         }
       },
       "warning": {
-        "box-shadow": { "value": "inset 0 0 0 {ams.border.width.xl} {ams.color.feedback.warning}" },
+        "border-color": { "value": "{ams.color.feedback.warning}" },
         "severity-indicator": {
           "background-color": { "value": "{ams.color.feedback.warning}" }
         }