@amsterdam/design-system-tokens 0.7.0 → 0.8.0

package/dist/index.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Mar 2024 14:50:53 GMT
+// Generated on Mon, 22 Apr 2024 09:30:48 GMT
 
 $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.
@@ -9,16 +9,19 @@ $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 in
 $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
 $ams-unordered-list-list-style-type: '\2022';
 $ams-unordered-list-gap: 0.75rem;
+$ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+$ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
+$ams-time-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
 $ams-text-area-padding-inline: 1rem;
 $ams-text-area-padding-block: 0.5rem;
 $ams-tabs-button-padding-inline: 1rem;
 $ams-tabs-button-padding-block: .5rem;
 $ams-tabs-button-outline-offset: -0.25rem;
-$ams-tabs-button-border: none;
-$ams-tabs-button-background-color: transparent;
 $ams-switch-thumb-height: 1.75rem;
 $ams-switch-thumb-width: 1.75rem;
 $ams-switch-width: 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;
@@ -29,8 +32,6 @@ $ams-radio-circle-disabled-checked-background-image: url("data:image/svg+xml,%3C
 $ams-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
 $ams-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
 $ams-page-menu-item-gap: 0.5rem;
-$ams-page-menu-row-gap: 0.5rem;
-$ams-page-menu-column-gap: 2.5rem;
 $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less than the parent to start-align the child’s marker with the parent text.
 $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
@@ -59,29 +60,30 @@ $ams-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) *
 $ams-dialog-form-gap: 1.5rem;
 $ams-dialog-max-inline-size: min(87.69vw, 45rem);
 $ams-dialog-border: 0;
+$ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+$ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
+$ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
 $ams-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
 $ams-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
 $ams-button-tertiary-disabled-background-color: transparent;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-gap: 1rem;
 $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
+$ams-avatar-padding-inline: 0.25rem;
+$ams-avatar-padding-block: 0.25rem;
 $ams-alert-gap: 1rem;
 $ams-alert-border-style: solid;
-$ams-alert-border-width: 4px;
+$ams-accordion-panel-padding-inline: 0;
+$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-decoration-thickness: 0.1875rem;
 $ams-link-appearance-regular-text-decoration-line: underline;
 $ams-link-appearance-text-underline-offset: 0.375rem;
-$ams-link-appearance-text-decoration-thickness: 0.125rem;
 $ams-hyphenation-overflow-wrap: break-word;
 $ams-hyphenation-hyphens: auto;
 $ams-hyphenation-hyphenate-limit-chars: 12 8 4;
 $ams-focus-outline-offset: 2px;
-$ams-border-width-lg: 3px;
-$ams-border-width-md: 2px;
-$ams-border-width-sm: 1px;
 $ams-action-submit-cursor: pointer;
 $ams-action-navigate-cursor: pointer;
 $ams-action-inert-cursor: default;
@@ -141,6 +143,10 @@ $ams-color-primary-red: #EC0000;
 $ams-color-primary-blue: #004699;
 $ams-color-primary-white: #FFFFFF;
 $ams-color-primary-black: #000000;
+$ams-border-width-xl: 0.25rem;
+$ams-border-width-lg: 0.1875rem;
+$ams-border-width-md: 0.125rem;
+$ams-border-width-sm: 0.0625rem;
 $ams-unordered-list-line-height: $ams-text-level-5-line-height;
 $ams-unordered-list-inverse-color: $ams-color-primary-white;
 $ams-unordered-list-font-weight: $ams-text-font-weight-normal;
@@ -151,7 +157,6 @@ $ams-top-task-link-outline-offset: $ams-focus-outline-offset;
 $ams-top-task-link-label-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-top-task-link-label-hover-color: $ams-color-dark-blue;
 $ams-top-task-link-label-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-top-task-link-label-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-top-task-link-label-line-height: $ams-text-level-4-line-height;
 $ams-top-task-link-label-font-weight: $ams-text-font-weight-bold;
@@ -162,38 +167,56 @@ $ams-top-task-link-description-font-weight: $ams-text-font-weight-normal;
 $ams-top-task-link-description-font-size: $ams-text-level-6-font-size;
 $ams-top-task-link-description-font-family: $ams-text-font-family;
 $ams-top-task-link-description-color: $ams-color-primary-black;
+$ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-time-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
+$ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
+$ams-time-input-disabled-color: $ams-color-neutral-grey2;
+$ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
+$ams-time-input-disabled-background-color: $ams-color-primary-white;
+$ams-time-input-padding-inline: $ams-space-inside-md;
+$ams-time-input-padding-block: $ams-space-inside-xs;
+$ams-time-input-outline-offset: $ams-focus-outline-offset;
+$ams-time-input-line-height: $ams-text-level-5-line-height;
+$ams-time-input-font-weight: $ams-text-font-weight-normal;
+$ams-time-input-font-size: $ams-text-level-5-font-size;
+$ams-time-input-font-family: $ams-text-font-family;
+$ams-time-input-color: $ams-color-primary-black;
+$ams-time-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-time-input-background-color: $ams-color-primary-white;
 $ams-text-input-placeholder-color: $ams-color-neutral-grey3;
-$ams-text-input-invalid-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-red;
-$ams-text-input-invalid-box-shadow: inset 0 0 0 1px $ams-color-primary-red;
-$ams-text-input-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
+$ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-text-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
+$ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-text-input-disabled-color: $ams-color-neutral-grey2;
-$ams-text-input-disabled-box-shadow: inset 0 0 0 1px $ams-color-neutral-grey2;
+$ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
 $ams-text-input-disabled-background-color: $ams-color-primary-white;
 $ams-text-input-padding-inline: $ams-space-inside-md;
 $ams-text-input-padding-block: $ams-space-inside-xs;
 $ams-text-input-outline-offset: $ams-focus-outline-offset;
-$ams-text-input-line-height: $ams-text-level-6-line-height;
+$ams-text-input-line-height: $ams-text-level-5-line-height;
 $ams-text-input-font-weight: $ams-text-font-weight-normal;
-$ams-text-input-font-size: $ams-text-level-6-font-size;
+$ams-text-input-font-size: $ams-text-level-5-font-size;
 $ams-text-input-font-family: $ams-text-font-family;
 $ams-text-input-color: $ams-color-primary-black;
-$ams-text-input-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
+$ams-text-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-text-input-background-color: $ams-color-primary-white;
 $ams-text-area-placeholder-color: $ams-color-neutral-grey3;
-$ams-text-area-invalid-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-red;
-$ams-text-area-invalid-box-shadow: inset 0 0 0 1px $ams-color-primary-red;
-$ams-text-area-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
+$ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-text-area-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
+$ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
 $ams-text-area-disabled-cursor: $ams-action-disabled-cursor;
 $ams-text-area-disabled-color: $ams-color-neutral-grey2;
-$ams-text-area-disabled-box-shadow: inset 0 0 0 1px $ams-color-neutral-grey2;
+$ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
 $ams-text-area-disabled-background-color: $ams-color-primary-white;
 $ams-text-area-outline-offset: $ams-focus-outline-offset;
-$ams-text-area-min-height: calc($ams-text-level-6-line-height * 1em + 2 * $ams-text-area-padding-block);
-$ams-text-area-line-height: $ams-text-level-6-line-height;
+$ams-text-area-min-height: calc($ams-text-level-5-line-height * 1em + 2 * $ams-text-area-padding-block);
+$ams-text-area-line-height: $ams-text-level-5-line-height;
 $ams-text-area-font-weight: $ams-text-font-weight-normal;
-$ams-text-area-font-size: $ams-text-level-6-font-size;
+$ams-text-area-font-size: $ams-text-level-5-font-size;
 $ams-text-area-font-family: $ams-text-font-family;
 $ams-text-area-color: $ams-color-primary-black;
-$ams-text-area-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
+$ams-text-area-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-text-area-background-color: $ams-color-primary-white;
 $ams-tabs-button-disabled-cursor: $ams-action-disabled-cursor;
 $ams-tabs-button-disabled-color: $ams-color-neutral-grey2;
 $ams-tabs-button-selected-color: $ams-color-primary-white;
@@ -201,20 +224,21 @@ $ams-tabs-button-selected-background-color: $ams-color-primary-blue;
 $ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $ams-color-dark-blue;
 $ams-tabs-button-hover-color: $ams-color-dark-blue;
 $ams-tabs-button-line-height: $ams-text-level-5-line-height;
-$ams-tabs-button-font-size: $ams-text-level-5-font-size;
 $ams-tabs-button-font-weight: $ams-text-font-weight-normal;
+$ams-tabs-button-font-size: $ams-text-level-5-font-size;
 $ams-tabs-button-font-family: $ams-text-font-family;
 $ams-tabs-button-cursor: $ams-action-activate-cursor;
 $ams-tabs-button-color: $ams-color-primary-blue;
-$ams-tabs-list-border-bottom: .125rem solid $ams-color-primary-blue;
+$ams-tabs-list-border-bottom: $ams-border-width-md solid $ams-color-primary-blue;
+$ams-tabs-list-background-color: $ams-color-primary-white;
 $ams-table-header-cell-font-weight: $ams-text-font-weight-bold;
 $ams-table-cell-padding-inline: $ams-space-inside-md;
 $ams-table-cell-padding-block: $ams-space-inside-md;
-$ams-table-cell-border-bottom: 1px solid $ams-color-neutral-grey1;
+$ams-table-cell-border-bottom: $ams-border-width-sm solid $ams-color-neutral-grey1;
 $ams-table-caption-font-weight: $ams-text-font-weight-bold;
 $ams-table-line-height: $ams-text-level-5-line-height;
-$ams-table-font-size: $ams-text-level-5-font-size;
 $ams-table-font-weight: $ams-text-font-weight-normal;
+$ams-table-font-size: $ams-text-level-5-font-size;
 $ams-table-font-family: $ams-text-font-family;
 $ams-table-color: $ams-color-primary-black;
 $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
@@ -237,42 +261,64 @@ $ams-skip-link-padding-inline: $ams-space-inside-md;
 $ams-skip-link-padding-block: $ams-space-inside-xs;
 $ams-skip-link-outline-offset: $ams-focus-outline-offset;
 $ams-skip-link-line-height: $ams-text-level-6-line-height;
-$ams-skip-link-font-size: $ams-text-level-6-font-size;
 $ams-skip-link-font-weight: $ams-text-font-weight-normal;
+$ams-skip-link-font-size: $ams-text-level-6-font-size;
 $ams-skip-link-font-family: $ams-text-font-family;
 $ams-skip-link-color: $ams-color-primary-white;
 $ams-skip-link-background-color: $ams-color-primary-blue;
+$ams-select-option-disabled-color: $ams-color-neutral-grey2;
+$ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-select-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
+$ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
+$ams-select-disabled-color: $ams-color-neutral-grey2;
+$ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
+$ams-select-padding-inline: $ams-space-inside-md calc(2 * $ams-space-inside-md + 1em);
+$ams-select-padding-block: $ams-space-inside-xs;
+$ams-select-outline-offset: $ams-focus-outline-offset;
+$ams-select-line-height: $ams-text-level-5-line-height;
+$ams-select-font-weight: $ams-text-font-weight-normal;
+$ams-select-font-size: $ams-text-level-5-font-size;
+$ams-select-font-family: $ams-text-font-family;
+$ams-select-color: $ams-color-primary-black;
+$ams-select-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-select-background-position: right $ams-space-inside-md center;
+$ams-select-background-color: $ams-color-primary-white;
 $ams-search-field-input-placeholder-color: $ams-color-neutral-grey3;
-$ams-search-field-input-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
-$ams-search-field-input-cancel-button-width: $ams-text-level-6-font-size;
-$ams-search-field-input-cancel-button-height: $ams-text-level-6-font-size;
+$ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
+$ams-search-field-input-cancel-button-width: $ams-text-level-5-font-size;
+$ams-search-field-input-cancel-button-height: $ams-text-level-5-font-size;
 $ams-search-field-input-cancel-button-color: $ams-color-primary-blue;
 $ams-search-field-input-padding-inline: $ams-space-inside-md;
 $ams-search-field-input-padding-block: $ams-space-inside-xs;
 $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
-$ams-search-field-input-line-height: $ams-text-level-6-line-height;
+$ams-search-field-input-line-height: $ams-text-level-5-line-height;
 $ams-search-field-input-font-weight: $ams-text-font-weight-normal;
-$ams-search-field-input-font-size: $ams-text-level-6-font-size;
+$ams-search-field-input-font-size: $ams-text-level-5-font-size;
 $ams-search-field-input-font-family: $ams-text-font-family;
 $ams-search-field-input-color: $ams-color-primary-black;
-$ams-search-field-input-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
+$ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-search-field-input-background-color: $ams-color-primary-white;
 $ams-search-field-button-padding-inline: $ams-space-inside-xs;
 $ams-search-field-button-padding-block: $ams-space-inside-xs;
 $ams-search-field-button-hover-background-color: $ams-color-dark-blue;
 $ams-search-field-button-outline-offset: $ams-focus-outline-offset;
 $ams-search-field-button-color: $ams-color-primary-white;
 $ams-search-field-button-background-color: $ams-color-primary-blue;
+$ams-screen-background-color: $ams-color-primary-white;
 $ams-row-gap-xl: $ams-space-stack-xl;
 $ams-row-gap-lg: $ams-space-stack-lg;
 $ams-row-gap-md: $ams-space-stack-md;
 $ams-row-gap-sm: $ams-space-stack-sm;
 $ams-row-gap-xs: $ams-space-stack-xs;
+$ams-radio-hover-text-decoration-thickness: $ams-border-width-md;
 $ams-radio-hover-color: $ams-color-dark-blue;
 $ams-radio-disabled-color: $ams-color-neutral-grey3;
 $ams-radio-circle-invalid-hover-border-color: $ams-color-primary-red;
 $ams-radio-circle-invalid-border-color: $ams-color-primary-red;
 $ams-radio-circle-hover-border-color: $ams-color-dark-blue;
+$ams-radio-circle-disabled-border-width: $ams-border-width-md;
 $ams-radio-circle-disabled-border-color: $ams-color-neutral-grey3;
+$ams-radio-circle-border-width: $ams-border-width-md;
 $ams-radio-circle-border-color: $ams-color-primary-blue;
 $ams-radio-outline-offset: $ams-focus-outline-offset;
 $ams-radio-line-height: $ams-text-level-5-line-height;
@@ -293,7 +339,6 @@ $ams-paragraph-color: $ams-color-primary-black;
 $ams-pagination-button-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-pagination-button-current-font-weight: $ams-text-font-weight-bold;
 $ams-pagination-button-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-pagination-button-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-pagination-button-padding-inline: $ams-space-inside-sm;
 $ams-pagination-button-outline-offset: $ams-focus-outline-offset;
@@ -303,13 +348,14 @@ $ams-pagination-font-size: $ams-text-level-5-font-size;
 $ams-pagination-font-family: $ams-text-font-family;
 $ams-page-menu-item-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-page-menu-item-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-page-menu-item-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-page-menu-item-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-page-menu-item-outline-offset: $ams-focus-outline-offset;
 $ams-page-menu-item-line-height: $ams-text-level-6-line-height;
 $ams-page-menu-item-font-weight: $ams-text-font-weight-normal;
 $ams-page-menu-item-font-size: $ams-text-level-6-font-size;
 $ams-page-menu-item-font-family: $ams-text-font-family;
+$ams-page-menu-row-gap: $ams-space-grid-xs;
+$ams-page-menu-column-gap: $ams-space-grid-md;
 $ams-page-heading-line-height: $ams-text-level-0-font-size;
 $ams-page-heading-inverse-color: $ams-color-primary-white;
 $ams-page-heading-font-weight: $ams-text-font-weight-bold;
@@ -334,17 +380,13 @@ $ams-logo-subsite-color: $ams-color-primary-black;
 $ams-logo-title-color: $ams-color-primary-red;
 $ams-logo-emblem-color: $ams-color-primary-red;
 $ams-link-standalone-hover-text-underline-offset: $ams-link-appearance-regular-hover-text-underline-offset;
-$ams-link-standalone-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
 $ams-link-standalone-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-link-standalone-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-standalone-text-decoration-line: $ams-link-appearance-regular-text-decoration-line;
 $ams-link-standalone-line-height: $ams-text-level-5-line-height;
 $ams-link-standalone-font-size: $ams-text-level-5-font-size;
 $ams-link-inline-visited-color: $ams-color-purple;
 $ams-link-inline-hover-text-underline-offset: $ams-link-appearance-regular-hover-text-underline-offset;
-$ams-link-inline-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
 $ams-link-inline-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-link-inline-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-inline-text-decoration-line: $ams-link-appearance-regular-text-decoration-line;
 $ams-link-outline-offset: $ams-focus-outline-offset;
 $ams-link-font-weight: $ams-text-font-weight-normal;
@@ -357,11 +399,15 @@ $ams-link-list-link-medium-font-size: $ams-text-level-5-font-size;
 $ams-link-list-link-small-line-height: $ams-text-level-6-line-height;
 $ams-link-list-link-small-font-size: $ams-text-level-6-font-size;
 $ams-link-list-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-link-list-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-list-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
 $ams-link-list-link-font-weight: $ams-text-font-weight-normal;
 $ams-link-list-link-font-family: $ams-text-font-family;
+$ams-label-line-height: $ams-text-level-4-line-height;
+$ams-label-font-weight: $ams-text-font-weight-bold;
+$ams-label-font-size: $ams-text-level-4-font-size;
+$ams-label-font-family: $ams-text-font-family;
+$ams-label-color: $ams-color-primary-black;
 $ams-icon-size-6-line-height: $ams-text-level-6-line-height;
 $ams-icon-size-6-font-size: $ams-text-level-6-font-size;
 $ams-icon-size-5-line-height: $ams-text-level-5-line-height;
@@ -415,27 +461,50 @@ $ams-gap-lg: $ams-space-grid-lg;
 $ams-gap-md: $ams-space-grid-md;
 $ams-gap-sm: $ams-space-grid-sm;
 $ams-gap-xs: $ams-space-grid-xs;
-$ams-form-label-line-height: $ams-text-level-4-line-height;
-$ams-form-label-font-weight: $ams-text-font-weight-bold;
-$ams-form-label-font-size: $ams-text-level-4-font-size;
-$ams-form-label-font-family: $ams-text-font-family;
-$ams-form-label-color: $ams-color-primary-black;
+$ams-form-field-character-counter-error-color: $ams-color-primary-red;
+$ams-form-field-character-counter-line-height: $ams-text-level-6-line-height;
+$ams-form-field-character-counter-font-weight: $ams-text-font-weight-normal;
+$ams-form-field-character-counter-font-size: $ams-text-level-6-font-size;
+$ams-form-field-character-counter-font-family: $ams-text-font-family;
+$ams-form-field-character-counter-color: $ams-color-primary-black;
 $ams-fieldset-legend-line-height: $ams-text-level-4-line-height;
 $ams-fieldset-legend-font-weight: $ams-text-font-weight-bold;
 $ams-fieldset-legend-font-size: $ams-text-level-4-font-size;
 $ams-fieldset-legend-font-family: $ams-text-font-family;
 $ams-fieldset-legend-color: $ams-color-primary-black;
-$ams-dialog-title-line-height: $ams-text-level-5-line-height;
-$ams-dialog-title-font-weight: $ams-text-font-weight-bold;
-$ams-dialog-title-font-size: $ams-text-level-5-font-size;
-$ams-dialog-title-font-family: $ams-text-font-family;
-$ams-dialog-title-color: $ams-color-primary-black;
 $ams-dialog-background-color: $ams-color-primary-white;
+$ams-description-list-details-padding-inline-start: $ams-space-inside-xl;
+$ams-description-list-details-font-weight: $ams-text-font-weight-bold;
+$ams-description-list-row-gap: $ams-space-stack-md;
+$ams-description-list-line-height: $ams-text-level-5-line-height;
+$ams-description-list-inverse-color: $ams-color-primary-white;
+$ams-description-list-gap: $ams-space-stack-md;
+$ams-description-list-font-weight: $ams-text-font-weight-normal;
+$ams-description-list-font-size: $ams-text-level-5-font-size;
+$ams-description-list-font-family: $ams-text-font-family;
+$ams-description-list-color: $ams-color-primary-black;
+$ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-date-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
+$ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
+$ams-date-input-disabled-color: $ams-color-neutral-grey2;
+$ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
+$ams-date-input-disabled-background-color: $ams-color-primary-white;
+$ams-date-input-padding-inline: $ams-space-inside-lg;
+$ams-date-input-padding-block: $ams-space-inside-xs;
+$ams-date-input-outline-offset: $ams-focus-outline-offset;
+$ams-date-input-line-height: $ams-text-level-5-line-height;
+$ams-date-input-font-weight: $ams-text-font-weight-normal;
+$ams-date-input-font-size: $ams-text-level-5-font-size;
+$ams-date-input-font-family: $ams-text-font-family;
+$ams-date-input-color: $ams-color-primary-black;
+$ams-date-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
+$ams-date-input-background-color: $ams-color-primary-white;
 $ams-column-gap-xl: $ams-space-grid-xl;
 $ams-column-gap-lg: $ams-space-grid-lg;
 $ams-column-gap-md: $ams-space-grid-md;
 $ams-column-gap-sm: $ams-space-grid-sm;
 $ams-column-gap-xs: $ams-space-grid-xs;
+$ams-checkbox-hover-text-decoration-thickness: $ams-border-width-md;
 $ams-checkbox-hover-color: $ams-color-dark-blue;
 $ams-checkbox-disabled-color: $ams-color-neutral-grey3;
 $ams-checkbox-checkmark-indeterminate-hover-background-color: $ams-color-dark-blue;
@@ -446,14 +515,17 @@ $ams-checkbox-checkmark-invalid-hover-border-color: $ams-color-primary-red;
 $ams-checkbox-checkmark-invalid-checked-hover-background-color: $ams-color-primary-red;
 $ams-checkbox-checkmark-invalid-checked-background-color: $ams-color-primary-red;
 $ams-checkbox-checkmark-invalid-border-color: $ams-color-primary-red;
+$ams-checkbox-checkmark-hover-border-width: $ams-border-width-lg;
 $ams-checkbox-checkmark-hover-border-color: $ams-color-dark-blue;
 $ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: $ams-color-neutral-grey3;
 $ams-checkbox-checkmark-disabled-indeterminate-background-color: $ams-color-neutral-grey3;
 $ams-checkbox-checkmark-disabled-checked-hover-background-color: $ams-color-neutral-grey3;
 $ams-checkbox-checkmark-disabled-checked-background-color: $ams-color-neutral-grey3;
+$ams-checkbox-checkmark-disabled-border-width: $ams-border-width-md;
 $ams-checkbox-checkmark-disabled-border-color: $ams-color-neutral-grey3;
 $ams-checkbox-checkmark-checked-hover-background-color: $ams-color-dark-blue;
 $ams-checkbox-checkmark-checked-background-color: $ams-color-primary-blue;
+$ams-checkbox-checkmark-border-width: $ams-border-width-md;
 $ams-checkbox-checkmark-border-color: $ams-color-primary-blue;
 $ams-checkbox-outline-offset: $ams-focus-outline-offset;
 $ams-checkbox-line-height: $ams-text-level-5-line-height;
@@ -464,28 +536,28 @@ $ams-checkbox-color: $ams-color-primary-black;
 $ams-card-outline-offset: $ams-focus-outline-offset;
 $ams-card-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-card-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-card-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-card-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-button-tertiary-disabled-color: $ams-color-neutral-grey2;
 $ams-button-tertiary-hover-color: $ams-color-dark-blue;
-$ams-button-tertiary-hover-box-shadow: inset 0 0 0 2px $ams-color-dark-blue;
+$ams-button-tertiary-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-dark-blue;
 $ams-button-tertiary-color: $ams-color-primary-blue;
-$ams-button-secondary-focus-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
+$ams-button-secondary-focus-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
 $ams-button-secondary-disabled-color: $ams-color-neutral-grey2;
-$ams-button-secondary-disabled-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey2;
+$ams-button-secondary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
 $ams-button-secondary-disabled-background-color: $ams-color-primary-white;
 $ams-button-secondary-hover-color: $ams-color-dark-blue;
-$ams-button-secondary-hover-box-shadow: inset 0 0 0 3px $ams-color-dark-blue;
-$ams-button-secondary-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
+$ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
+$ams-button-secondary-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
 $ams-button-secondary-color: $ams-color-primary-blue;
 $ams-button-secondary-background-color: $ams-color-primary-white;
-$ams-button-primary-hover-box-shadow: inset 0 0 0 2px $ams-color-dark-blue;
+$ams-button-primary-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-dark-blue;
 $ams-button-primary-hover-background-color: $ams-color-dark-blue;
-$ams-button-primary-disabled-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey2;
+$ams-button-primary-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
 $ams-button-primary-disabled-background-color: $ams-color-neutral-grey2;
 $ams-button-primary-color: $ams-color-primary-white;
-$ams-button-primary-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
+$ams-button-primary-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
 $ams-button-primary-background-color: $ams-color-primary-blue;
+$ams-button-forced-color-mode-border: $ams-border-width-md solid;
 $ams-button-disabled-cursor: $ams-action-disabled-cursor;
 $ams-button-outline-offset: $ams-focus-outline-offset;
 $ams-button-padding-inline: $ams-space-inside-md;
@@ -497,7 +569,6 @@ $ams-button-cursor: $ams-action-activate-cursor;
 $ams-breadcrumb-item-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-breadcrumb-item-link-hover-color: $ams-color-dark-blue;
 $ams-breadcrumb-item-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
-$ams-breadcrumb-item-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-breadcrumb-item-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-breadcrumb-item-link-outline-offset: $ams-focus-outline-offset;
 $ams-breadcrumb-line-height: $ams-text-level-6-line-height;
@@ -531,6 +602,29 @@ $ams-badge-line-height: $ams-text-level-5-line-height;
 $ams-badge-font-weight: $ams-text-font-weight-bold;
 $ams-badge-font-size: $ams-text-level-5-font-size;
 $ams-badge-font-family: $ams-text-font-family;
+$ams-avatar-yellow-color: $ams-color-primary-black;
+$ams-avatar-yellow-background-color: $ams-color-yellow;
+$ams-avatar-red-color: $ams-color-primary-white;
+$ams-avatar-red-background-color: $ams-color-primary-red;
+$ams-avatar-purple-color: $ams-color-primary-white;
+$ams-avatar-purple-background-color: $ams-color-purple;
+$ams-avatar-orange-color: $ams-color-primary-black;
+$ams-avatar-orange-background-color: $ams-color-orange;
+$ams-avatar-magenta-color: $ams-color-primary-white;
+$ams-avatar-magenta-background-color: $ams-color-magenta;
+$ams-avatar-green-color: $ams-color-primary-black;
+$ams-avatar-green-background-color: $ams-color-green;
+$ams-avatar-dark-green-color: $ams-color-primary-white;
+$ams-avatar-dark-green-background-color: $ams-color-dark-green;
+$ams-avatar-dark-blue-color: $ams-color-primary-white;
+$ams-avatar-dark-blue-background-color: $ams-color-primary-blue;
+$ams-avatar-blue-color: $ams-color-primary-black;
+$ams-avatar-blue-background-color: $ams-color-blue;
+$ams-avatar-line-height: $ams-text-level-6-line-height;
+$ams-avatar-font-weight: $ams-text-font-weight-normal;
+$ams-avatar-font-size: $ams-text-level-6-font-size;
+$ams-avatar-font-family: $ams-text-font-family;
+$ams-avatar-aspect-ratio: $ams-proportion-square;
 $ams-aspect-ratio-2x-wide: $ams-proportion-2x-wide;
 $ams-aspect-ratio-x-wide: $ams-proportion-x-wide;
 $ams-aspect-ratio-wide: $ams-proportion-wide;
@@ -545,25 +639,31 @@ $ams-alert-info-border-color: $ams-color-primary-blue;
 $ams-alert-error-border-color: $ams-color-primary-red;
 $ams-alert-padding-inline: $ams-space-inside-lg;
 $ams-alert-padding-block: $ams-space-inside-md;
-$ams-accordion-panel-padding-inline: $ams-space-inside-md;
-$ams-accordion-panel-padding-block: $ams-space-inside-md;
-$ams-accordion-button-hover-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey3;
+$ams-alert-border-width: $ams-border-width-xl;
+$ams-accordion-panel-padding-block: 0 $ams-space-inside-md;
+$ams-accordion-button-hover-color: $ams-color-dark-blue;
 $ams-accordion-button-focus-outline-offset: $ams-focus-outline-offset;
-$ams-accordion-button-padding-inline: $ams-space-inside-md;
 $ams-accordion-button-padding-block: $ams-space-inside-sm;
 $ams-accordion-button-line-height: $ams-text-level-5-line-height;
+$ams-accordion-button-gap: $ams-space-inside-md;
 $ams-accordion-button-font-weight: $ams-text-font-weight-bold;
 $ams-accordion-button-font-size: $ams-text-level-5-font-size;
 $ams-accordion-button-font-family: $ams-text-font-family;
 $ams-accordion-button-color: $ams-color-primary-blue;
+$ams-accordion-gap: $ams-space-inside-xs;
+$ams-link-appearance-regular-hover-text-decoration-thickness: $ams-border-width-lg;
 $ams-link-appearance-on-background-light-color: $ams-color-primary-black;
 $ams-link-appearance-on-background-dark-color: $ams-color-primary-white;
 $ams-link-appearance-hover-color: $ams-color-dark-blue;
+$ams-link-appearance-text-decoration-thickness: $ams-border-width-md;
 $ams-link-appearance-color: $ams-color-primary-blue;
+$ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-top-task-link-label-color: $ams-link-appearance-color;
 $ams-pagination-button-hover-color: $ams-link-appearance-hover-color;
+$ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-pagination-color: $ams-link-appearance-color;
 $ams-page-menu-item-hover-color: $ams-link-appearance-hover-color;
+$ams-page-menu-item-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-page-menu-item-color: $ams-link-appearance-color;
 $ams-link-on-background-light-visited-color: $ams-link-appearance-on-background-light-color;
 $ams-link-on-background-light-hover-color: $ams-link-appearance-on-background-light-color;
@@ -571,6 +671,10 @@ $ams-link-on-background-light-color: $ams-link-appearance-on-background-light-co
 $ams-link-on-background-dark-visited-color: $ams-link-appearance-on-background-dark-color;
 $ams-link-on-background-dark-hover-color: $ams-link-appearance-on-background-dark-color;
 $ams-link-on-background-dark-color: $ams-link-appearance-on-background-dark-color;
+$ams-link-standalone-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
+$ams-link-standalone-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
+$ams-link-inline-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
+$ams-link-inline-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-hover-color: $ams-link-appearance-hover-color;
 $ams-link-color: $ams-link-appearance-color;
 $ams-link-list-link-on-background-light-hover-color: $ams-link-appearance-on-background-light-color;
@@ -578,7 +682,10 @@ $ams-link-list-link-on-background-light-color: $ams-link-appearance-on-backgroun
 $ams-link-list-link-on-background-dark-hover-color: $ams-link-appearance-on-background-dark-color;
 $ams-link-list-link-on-background-dark-color: $ams-link-appearance-on-background-dark-color;
 $ams-link-list-link-hover-color: $ams-link-appearance-hover-color;
+$ams-link-list-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-link-list-link-color: $ams-link-appearance-color;
 $ams-card-link-hover-color: $ams-link-appearance-hover-color;
+$ams-card-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-card-link-color: $ams-link-appearance-color;
+$ams-breadcrumb-item-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
 $ams-breadcrumb-item-link-color: $ams-link-appearance-color;