@amsterdam/design-system-tokens 0.8.0 → 0.10.0

package/dist/index.scss

@@ -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-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.
@@ -17,14 +17,14 @@ $ams-text-area-padding-block: 0.5rem;
 $ams-tabs-button-padding-inline: 1rem;
 $ams-tabs-button-padding-block: .5rem;
 $ams-tabs-button-outline-offset: -0.25rem;
-$ams-switch-thumb-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");
@@ -41,7 +41,7 @@ $ams-ordered-list-list-style-type: decimal;
 $ams-ordered-list-gap: 0.75rem;
 $ams-mega-menu-list-category-padding-block-start: 1rem;
 $ams-mega-menu-list-category-column-width: 20rem;
-$ams-logo-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;
@@ -77,13 +77,13 @@ $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-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;
@@ -122,11 +122,11 @@ $ams-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
 $ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
 $ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
 $ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
-$ams-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;
@@ -147,6 +147,8 @@ $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-small-line-height: $ams-text-level-6-line-height;
+$ams-unordered-list-small-font-size: $ams-text-level-6-font-size;
 $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;
@@ -209,7 +211,7 @@ $ams-text-area-disabled-color: $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-5-line-height * 1em + 2 * $ams-text-area-padding-block);
+$ams-text-area-min-block-size: 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-5-font-size;
@@ -229,25 +231,40 @@ $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: $ams-border-width-md solid $ams-color-primary-blue;
+$ams-tabs-list-border-block-end: $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: $ams-border-width-sm solid $ams-color-neutral-grey1;
+$ams-table-cell-border-block-end: $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-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-table-of-contents-heading-line-height: $ams-text-level-4-line-height;
+$ams-table-of-contents-heading-font-size: $ams-text-level-4-font-size;
+$ams-table-of-contents-heading-font-weight: $ams-text-font-weight-bold;
+$ams-table-of-contents-list-list-padding-inline-start: $ams-space-inside-lg;
+$ams-table-of-contents-list-list-padding-block-start: $ams-space-inside-md;
+$ams-table-of-contents-list-gap: $ams-space-inside-md;
+$ams-table-of-contents-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
+$ams-table-of-contents-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
+$ams-table-of-contents-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
+$ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
+$ams-table-of-contents-line-height: $ams-text-level-5-line-height;
+$ams-table-of-contents-gap: $ams-space-inside-md;
+$ams-table-of-contents-font-weight: $ams-text-font-weight-normal;
+$ams-table-of-contents-font-size: $ams-text-level-5-font-size;
+$ams-table-of-contents-font-family: $ams-text-font-family;
 $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
-$ams-switch-outline-offset: $ams-focus-outline-offset;
 $ams-switch-checked-background-color: $ams-color-primary-blue;
 $ams-switch-thumb-hover-color: $ams-color-dark-blue;
 $ams-switch-thumb-background-color: $ams-color-primary-white;
-$ams-switch-background-color: $ams-color-neutral-grey3;
+$ams-switch-outline-offset: $ams-focus-outline-offset;
 $ams-switch-font-family: $ams-text-font-family;
+$ams-switch-background-color: $ams-color-neutral-grey3;
 $ams-spotlight-yellow-background-color: $ams-color-yellow;
 $ams-spotlight-purple-background-color: $ams-color-purple;
 $ams-spotlight-orange-background-color: $ams-color-orange;
@@ -284,10 +301,12 @@ $ams-select-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-blac
 $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-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
+$ams-search-field-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
 $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-inline-size: $ams-text-level-5-font-size;
 $ams-search-field-input-cancel-button-color: $ams-color-primary-blue;
+$ams-search-field-input-cancel-button-block-size: $ams-text-level-5-font-size;
 $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;
@@ -298,9 +317,9 @@ $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 $ams-border-width-sm $ams-color-primary-black;
 $ams-search-field-input-background-color: $ams-color-primary-white;
+$ams-search-field-button-hover-background-color: $ams-color-dark-blue;
 $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;
@@ -328,12 +347,12 @@ $ams-radio-font-family: $ams-text-font-family;
 $ams-radio-color: $ams-color-primary-black;
 $ams-paragraph-large-line-height: $ams-text-level-4-line-height;
 $ams-paragraph-large-font-size: $ams-text-level-4-font-size;
-$ams-paragraph-medium-line-height: $ams-text-level-5-line-height;
-$ams-paragraph-medium-font-size: $ams-text-level-5-font-size;
 $ams-paragraph-small-line-height: $ams-text-level-6-line-height;
 $ams-paragraph-small-font-size: $ams-text-level-6-font-size;
 $ams-paragraph-inverse-color: $ams-color-primary-white;
+$ams-paragraph-line-height: $ams-text-level-5-line-height;
 $ams-paragraph-font-weight: $ams-text-font-weight-normal;
+$ams-paragraph-font-size: $ams-text-level-5-font-size;
 $ams-paragraph-font-family: $ams-text-font-family;
 $ams-paragraph-color: $ams-color-primary-black;
 $ams-pagination-button-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
@@ -362,6 +381,8 @@ $ams-page-heading-font-weight: $ams-text-font-weight-bold;
 $ams-page-heading-font-size: $ams-text-level-0-font-size;
 $ams-page-heading-font-family: $ams-text-font-family;
 $ams-page-heading-color: $ams-color-primary-black;
+$ams-ordered-list-small-line-height: $ams-text-level-6-line-height;
+$ams-ordered-list-small-font-size: $ams-text-level-6-font-size;
 $ams-ordered-list-line-height: $ams-text-level-5-line-height;
 $ams-ordered-list-inverse-color: $ams-color-primary-white;
 $ams-ordered-list-font-weight: $ams-text-font-weight-normal;
@@ -394,14 +415,14 @@ $ams-link-font-family: $ams-text-font-family;
 $ams-link-list-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
 $ams-link-list-link-large-line-height: $ams-text-level-4-line-height;
 $ams-link-list-link-large-font-size: $ams-text-level-4-font-size;
-$ams-link-list-link-medium-line-height: $ams-text-level-5-line-height;
-$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-line: $ams-link-appearance-subtle-text-decoration-line;
 $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
+$ams-link-list-link-line-height: $ams-text-level-5-line-height;
 $ams-link-list-link-font-weight: $ams-text-font-weight-normal;
+$ams-link-list-link-font-size: $ams-text-level-5-font-size;
 $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;
@@ -467,11 +488,48 @@ $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-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-md solid;
+$ams-file-input-file-selector-button-disabled-cursor: $ams-action-disabled-cursor;
+$ams-file-input-file-selector-button-disabled-color: $ams-color-neutral-grey2;
+$ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
+$ams-file-input-file-selector-button-hover-color: $ams-color-dark-blue;
+$ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
+$ams-file-input-file-selector-button-padding-inline: $ams-space-inside-md;
+$ams-file-input-file-selector-button-padding-block: $ams-space-inside-xs;
+$ams-file-input-file-selector-button-margin-inline-end: $ams-space-inside-md;
+$ams-file-input-file-selector-button-cursor: $ams-action-activate-cursor;
+$ams-file-input-file-selector-button-color: $ams-color-primary-blue;
+$ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
+$ams-file-input-file-selector-button-background-color: $ams-color-primary-white;
+$ams-file-input-disabled-cursor: $ams-action-disabled-cursor;
+$ams-file-input-disabled-color: $ams-color-neutral-grey2;
+$ams-file-input-padding-inline: $ams-space-inside-md;
+$ams-file-input-padding-block: $ams-space-inside-md;
+$ams-file-input-outline-offset: $ams-focus-outline-offset;
+$ams-file-input-line-height: $ams-text-level-5-line-height;
+$ams-file-input-font-weight: $ams-text-font-weight-normal;
+$ams-file-input-font-size: $ams-text-level-5-font-size;
+$ams-file-input-font-family: $ams-text-font-family;
+$ams-file-input-cursor: $ams-action-activate-cursor;
+$ams-file-input-color: $ams-color-primary-black;
+$ams-file-input-border: $ams-border-width-sm dashed $ams-color-neutral-grey3;
+$ams-file-input-background-color: $ams-color-primary-white;
+$ams-field-invalid-padding-inline-start: $ams-space-inside-md;
+$ams-field-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
+$ams-field-gap: $ams-space-stack-sm;
+$ams-field-set-legend-margin-block-end: $ams-space-inside-md;
+$ams-field-set-legend-line-height: $ams-text-level-4-line-height;
+$ams-field-set-legend-font-weight: $ams-text-font-weight-bold;
+$ams-field-set-legend-font-size: $ams-text-level-4-font-size;
+$ams-field-set-legend-font-family: $ams-text-font-family;
+$ams-field-set-legend-color: $ams-color-primary-black;
+$ams-field-set-invalid-padding-inline-start: $ams-space-inside-md;
+$ams-field-set-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
+$ams-error-message-line-height: $ams-text-level-6-line-height;
+$ams-error-message-font-weight: $ams-text-font-weight-normal;
+$ams-error-message-font-size: $ams-text-level-6-font-size;
+$ams-error-message-font-family: $ams-text-font-family;
+$ams-error-message-color: $ams-color-primary-red;
 $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;
@@ -566,11 +624,11 @@ $ams-button-line-height: $ams-text-level-5-line-height;
 $ams-button-font-size: $ams-text-level-5-font-size;
 $ams-button-font-family: $ams-text-font-family;
 $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-line: $ams-link-appearance-subtle-text-decoration-line;
-$ams-breadcrumb-item-link-outline-offset: $ams-focus-outline-offset;
+$ams-breadcrumb-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
+$ams-breadcrumb-link-hover-color: $ams-color-dark-blue;
+$ams-breadcrumb-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
+$ams-breadcrumb-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
+$ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
 $ams-breadcrumb-line-height: $ams-text-level-6-line-height;
 $ams-breadcrumb-font-weight: $ams-text-font-weight-normal;
 $ams-breadcrumb-font-size: $ams-text-level-6-font-size;
@@ -583,20 +641,32 @@ $ams-blockquote-font-family: $ams-text-font-family;
 $ams-blockquote-color: $ams-color-primary-black;
 $ams-badge-yellow-color: $ams-color-primary-black;
 $ams-badge-yellow-background-color: $ams-color-yellow;
+$ams-badge-white-color: $ams-color-primary-black;
+$ams-badge-white-background-color: $ams-color-primary-white;
+$ams-badge-red-color: $ams-color-primary-white;
+$ams-badge-red-background-color: $ams-color-primary-red;
 $ams-badge-purple-color: $ams-color-primary-white;
 $ams-badge-purple-background-color: $ams-color-purple;
 $ams-badge-orange-color: $ams-color-primary-black;
 $ams-badge-orange-background-color: $ams-color-orange;
 $ams-badge-magenta-color: $ams-color-primary-white;
 $ams-badge-magenta-background-color: $ams-color-magenta;
+$ams-badge-light-blue-color: $ams-color-primary-black;
+$ams-badge-light-blue-background-color: $ams-color-blue;
+$ams-badge-grey-3-color: $ams-color-primary-white;
+$ams-badge-grey-3-background-color: $ams-color-neutral-grey3;
+$ams-badge-grey-2-color: $ams-color-primary-black;
+$ams-badge-grey-2-background-color: $ams-color-neutral-grey2;
+$ams-badge-grey-1-color: $ams-color-primary-black;
+$ams-badge-grey-1-background-color: $ams-color-neutral-grey1;
 $ams-badge-green-color: $ams-color-primary-black;
 $ams-badge-green-background-color: $ams-color-green;
 $ams-badge-dark-green-color: $ams-color-primary-white;
 $ams-badge-dark-green-background-color: $ams-color-dark-green;
-$ams-badge-dark-blue-color: $ams-color-primary-white;
-$ams-badge-dark-blue-background-color: $ams-color-primary-blue;
-$ams-badge-blue-color: $ams-color-primary-black;
-$ams-badge-blue-background-color: $ams-color-blue;
+$ams-badge-blue-color: $ams-color-primary-white;
+$ams-badge-blue-background-color: $ams-color-primary-blue;
+$ams-badge-black-color: $ams-color-primary-white;
+$ams-badge-black-background-color: $ams-color-primary-black;
 $ams-badge-padding-inline: $ams-space-inside-xs;
 $ams-badge-line-height: $ams-text-level-5-line-height;
 $ams-badge-font-weight: $ams-text-font-weight-bold;
@@ -604,6 +674,8 @@ $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-white-color: $ams-color-primary-black;
+$ams-avatar-white-background-color: $ams-color-primary-white;
 $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;
@@ -612,14 +684,22 @@ $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-light-blue-color: $ams-color-primary-black;
+$ams-avatar-light-blue-background-color: $ams-color-blue;
+$ams-avatar-grey-3-color: $ams-color-primary-white;
+$ams-avatar-grey-3-background-color: $ams-color-neutral-grey3;
+$ams-avatar-grey-2-color: $ams-color-primary-black;
+$ams-avatar-grey-2-background-color: $ams-color-neutral-grey2;
+$ams-avatar-grey-1-color: $ams-color-primary-black;
+$ams-avatar-grey-1-background-color: $ams-color-neutral-grey1;
 $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-blue-color: $ams-color-primary-white;
+$ams-avatar-blue-background-color: $ams-color-primary-blue;
+$ams-avatar-black-color: $ams-color-primary-white;
+$ams-avatar-black-background-color: $ams-color-primary-black;
 $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;
@@ -659,6 +739,10 @@ $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-table-of-contents-link-hover-color: $ams-link-appearance-hover-color;
+$ams-table-of-contents-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
+$ams-table-of-contents-link-color: $ams-link-appearance-color;
+$ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-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;
@@ -687,5 +771,5 @@ $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;
+$ams-breadcrumb-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
+$ams-breadcrumb-link-color: $ams-link-appearance-color;