@ds-autonomie/web-components 1.0.1

package/dist/themes/dsa-wc-theme.css

@@ -0,0 +1,1218 @@
+:root,
+:host,
+.dsa-wc {
+  --dsa-wc-transition-x-slow: 1000ms;
+  --dsa-wc-transition-slow: 500ms;
+  --dsa-wc-transition-medium: 250ms;
+  --dsa-wc-transition-fast: 150ms;
+  --dsa-wc-transition-x-fast: 50ms;
+  --dsa-wc-focus-ring-color: var(--dsa-color-primitives-purple-500);
+  --dsa-wc-focus-ring-style: solid;
+  --dsa-wc-focus-ring-width: 2px;
+  --dsa-wc-focus-ring: var(--dsa-wc-focus-ring-style)
+    var(--dsa-wc-focus-ring-width) var(--dsa-wc-focus-ring-color);
+  --dsa-wc-focus-ring-offset: 2px;
+  --dsa-wc-focus-ring-radius: 4px;
+  --dsa-wc-alert-padding: var(--dsa-spacing-16);
+  --dsa-wc-alert-icon-size: 1.8em;
+  --dsa-wc-alert-icon-margin-inline: 1rem;
+  --dsa-wc-alert-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-alert-border-color: var(--dsa-color-alert-border-primary);
+  --dsa-wc-alert-border-width: 1px;
+  --dsa-wc-alert-text-gap: 0.5rem;
+  --dsa-wc-alert-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-alert-title-color: var(--dsa-color-alert-title-on-primary);
+  --dsa-wc-alert-title-padding-top: 0.125rem;
+  --dsa-wc-alert-message-font: var(--dsa-font-medium-normal);
+  --dsa-wc-alert-message-color: var(--dsa-color-alert-text-on-primary);
+  --dsa-wc-alert-message-padding: 1.25rem;
+  --dsa-wc-alert-primary-icon-color: var(--dsa-color-alert-icon-primary);
+  --dsa-wc-alert-primary-background-color: var(
+    --dsa-color-alert-background-primary
+  );
+  --dsa-wc-alert-danger-icon-color: var(--dsa-color-alert-icon-danger);
+  --dsa-wc-alert-danger-background-color: var(
+    --dsa-color-alert-background-danger
+  );
+  --dsa-wc-alert-success-icon-color: var(--dsa-color-alert-icon-success);
+  --dsa-wc-alert-success-background-color: var(
+    --dsa-color-alert-background-success
+  );
+  --dsa-wc-alert-warning-icon-color: var(--dsa-color-alert-icon-warning);
+  --dsa-wc-alert-warning-background-color: var(
+    --dsa-color-alert-background-warning
+  );
+  --dsa-wc-alert-neutral-icon-color: var(--dsa-color-alert-icon-neutral);
+  --dsa-wc-alert-neutral-background-color: var(
+    --dsa-color-alert-background-neutral
+  );
+  --dsa-wc-dialog-spacing: var(--dsa-spacing-24);
+  --dsa-wc-dialog-overlay: var(--dsa-color-background-overlay);
+  --dsa-wc-dialog-font: var(--dsa-font-medium-normal);
+  --dsa-wc-dialog-size: 36.25rem;
+  --dsa-wc-dialog-size-small: 23.125rem;
+  --dsa-wc-dialog-size-large: 50rem;
+  --dsa-wc-dialog-header-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-dialog-header-icon-size: 1.5rem;
+  --dsa-wc-dialog-header-actions-gap: var(--dsa-spacing-4);
+  --dsa-wc-dialog-header-icon-spacing: 0.5rem;
+  --dsa-wc-dialog-header-icon-color: var(--dsa-color-icon-on-base-default);
+  --dsa-wc-dialog-scrollbar-width: 0.25rem;
+  --dsa-wc-dialog-scrollbar-color: var(--dsa-color-background-scrollbar);
+  --dsa-wc-dialog-scrollbar-radius: var(--dsa-spacing-4);
+  --dsa-wc-dialog-panel-color: var(--dsa-color-background-base);
+  --dsa-wc-dialog-panel-border-radius: var(--dsa-radius-8);
+  --dsa-wc-dialog-panel-gutter: var(--dsa-spacing-40);
+  --dsa-wc-dialod-panel-box-shadow: 0px 3px 11px rgba(113, 113, 122, 0.12);
+  --dsa-wc-dialog-footer-border: 1px solid var(--dsa-color-background-border);
+  --dsa-wc-dialog-footer-content-margin: var(--dsa-spacing-8);
+  --dsa-wc-form-font: var(--dsa-font-medium-normal);
+  --dsa-wc-form-font-small: var(--dsa-font-small-normal);
+  --dsa-wc-form-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-form-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-form-input-height: 2.5rem;
+  --dsa-wc-form-input-height-small: 1.875rem;
+  --dsa-wc-form-input-height-large: 3rem;
+  --dsa-wc-form-input-border-width: 1px;
+  --dsa-wc-form-input-autocomplete-background: var(
+    --dsa-color-input-background-on-base-autocomplete
+  );
+  --dsa-wc-focus-ring-color: var(--dsa-color-background-focus-ring);
+  --dsa-wc-focus-ring-style: solid;
+  --dsa-wc-focus-ring-width: 3px;
+  --dsa-wc-focus-ring: var(--dsa-wc-focus-ring-style)
+    var(--dsa-wc-focus-ring-width) var(--dsa-wc-focus-ring-color);
+  --dsa-wc-focus-ring-offset: 1px;
+  --dsa-wc-form-required-content: "*";
+  --dsa-wc-form-required-content-offset: -2px;
+  --dsa-wc-form-required-content-color: var(
+    --dsa-color-input-label-on-base-error
+  );
+  --dsa-wc-checkbox-color: var(--dsa-color-toggle-item-default);
+  --dsa-wc-checkbox-color-disabled: var(--dsa-color-toggle-item-disabled);
+  --dsa-wc-checkbox-color-active: var(--dsa-color-toggle-item-active);
+  --dsa-wc-checkbox-color-hover: var(--dsa-color-toggle-item-hover);
+  --dsa-wc-checkbox-background-color: var(--dsa-color-background-base);
+  --dsa-wc-checkbox-font: var(--dsa-font-medium-normal);
+  --dsa-wc-checkbox-font-small: var(--dsa-font-small-normal);
+  --dsa-wc-checkbox-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-checkbox-size: 1.125rem;
+  --dsa-wc-checkbox-size-small: 0.875rem;
+  --dsa-wc-checkbox-size-large: 1.375rem;
+  --dsa-wc-checkbox-label-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-checkbox-label-color-disabled: var(
+    --dsa-color-text-on-base-disabled
+  );
+  --dsa-wc-checkbox-label-color-error: var(--dsa-color-text-on-base-error);
+  --dsa-wc-checkbox-icon-color: var(--dsa-color-background-base);
+  --dsa-wc-checkbox-border-width: 1px;
+  --dsa-wc-checkbox-border-color: var(--dsa-wc-checkbox-color);
+  --dsa-wc-checkbox-border: solid var(--dsa-wc-checkbox-border-width)
+    var(--dsa-wc-checkbox-color);
+  --dsa-wc-checkbox-border-radius: 6px;
+  --dsa-wc-checkbox-border-radius-small: var(--dsa-spacing-4);
+  --dsa-wc-checkbox-error-text-margin-top: 10px;
+  --dsa-wc-radio-color: var(--dsa-color-toggle-item-default);
+  --dsa-wc-radio-color-active: var(--dsa-color-toggle-item-active);
+  --dsa-wc-radio-color-disabled: var(--dsa-color-toggle-item-disabled);
+  --dsa-wc-radio-color-hover: var(--dsa-color-toggle-item-hover);
+  --dsa-wc-radio-label-font: var(--dsa-font-medium-normal);
+  --dsa-wc-radio-label-font-small: var(--dsa-font-small-normal);
+  --dsa-wc-radio-label-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-radio-label-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-radio-label-color-disabled: var(--dsa-color-text-on-base-disabled);
+  --dsa-wc-radio-size: 1.125rem;
+  --dsa-wc-radio-size-small: 0.875rem;
+  --dsa-wc-radio-size-large: 1.375rem;
+  --dsa-wc-radio-icon-size: 0.875rem;
+  --dsa-wc-radio-icon-size-small: 0.75rem;
+  --dsa-wc-radio-icon-size-large: 1.125rem;
+  --dsa-wc-radio-border-width: 0.125rem;
+  --dsa-wc-radio-border-width-small: 0.099rem;
+  --dsa-wc-toggle-group-spacing-label-toggles: var(--dsa-spacing-16);
+  --dsa-wc-toggle-group-spacing-label-button: var(--dsa-spacing-8);
+  --dsa-wc-toggle-group-spacing: var(--dsa-spacing-16);
+  --dsa-wc-toggle-button-background-color: var(
+    --dsa-color-toggle-button-default-default
+  );
+  --dsa-wc-toggle-button-border-color: transparent;
+  --dsa-wc-toggle-button-color: var(
+    --dsa-color-toggle-button-default-on-default
+  );
+  --dsa-wc-toggle-button-hover-background-color: var(
+    --dsa-color-toggle-button-default-hover
+  );
+  --dsa-wc-toggle-button-hover-border-color: transparent;
+  --dsa-wc-toggle-button-hover-color: var(
+    --dsa-color-toggle-button-default-on-hover
+  );
+  --dsa-wc-toggle-button-active-background-color: var(
+    --dsa-color-toggle-button-default-active
+  );
+  --dsa-wc-toggle-button-active-border-color: transparent;
+  --dsa-wc-toggle-button-active-color: var(
+    --dsa-color-toggle-button-default-on-active
+  );
+  --dsa-wc-toggle-button-disabled-background-color: var(
+    --dsa-color-toggle-button-default-disabled
+  );
+  --dsa-wc-toggle-button-disabled-border-color: transparent;
+  --dsa-wc-toggle-button-disabled-color: var(
+    --dsa-color-toggle-button-default-on-disabled
+  );
+  --dsa-wc-toggle-button-checked-background-color: var(
+    --dsa-color-toggle-button-selected-default
+  );
+  --dsa-wc-toggle-button-checked-border-color: var(
+    --dsa-color-toggle-button-selected-on-default
+  );
+  --dsa-wc-toggle-button-checked-color: var(
+    --dsa-color-toggle-button-selected-on-default
+  );
+  --dsa-wc-toggle-button-checked-hover-background-color: var(
+    --dsa-color-toggle-button-selected-hover
+  );
+  --dsa-wc-toggle-button-checked-hover-border-color: var(
+    --dsa-color-toggle-button-selected-on-hover
+  );
+  --dsa-wc-toggle-button-checked-hover-color: var(
+    --dsa-color-toggle-button-selected-on-hover
+  );
+  --dsa-wc-toggle-button-checked-active-background-color: var(
+    --dsa-color-toggle-button-selected-active
+  );
+  --dsa-wc-toggle-button-checked-active-border-color: var(
+    --dsa-color-toggle-button-selected-on-active
+  );
+  --dsa-wc-toggle-button-checked-active-color: var(
+    --dsa-color-toggle-button-selected-on-active
+  );
+  --dsa-wc-toggle-button-read-only-background-color: var(
+    --dsa-color-toggle-button-default-read-only
+  );
+  --dsa-wc-toggle-button-read-only-border-color: transparent;
+  --dsa-wc-toggle-button-read-only-color: var(
+    --dsa-color-toggle-button-default-on-read-only
+  );
+  --dsa-wc-toggle-button-read-only-checked-background-color: var(
+    --dsa-color-toggle-button-selected-read-only
+  );
+  --dsa-wc-toggle-button-read-only-checked-border-color: var(
+    --dsa-color-toggle-button-selected-on-read-only
+  );
+  --dsa-wc-toggle-button-read-only-checked-color: var(
+    --dsa-color-toggle-button-default-on-read-only
+  );
+  --dsa-wc-toggle-button-read-only-checked-icon-color: var(
+    --dsa-color-toggle-button-selected-on-read-only
+  );
+  --dsa-wc-toggle-button-icon-spacing: var(--dsa-spacing-8);
+  --dsa-wc-toggle-button-icon-padding-x: var(--dsa-spacing-8);
+  --dsa-wc-tab-font: var(--dsa-font-small-normal);
+  --dsa-wc-tab-font-active-tab: var(--dsa-font-small-bold);
+  --dsa-wc-tab-border-radius: var(--dsa-radius-0);
+  --dsa-wc-tab-color: var(--dsa-color-tab-text-primary-default);
+  --dsa-wc-tab-color-disabled: var(--dsa-color-tab-text-primary-disabled);
+  --dsa-wc-tab-color-hover: var(--dsa-color-tab-text-primary-hover);
+  --dsa-wc-tab-color-active-tab: var(--dsa-color-tab-text-primary-active);
+  --dsa-wc-tab-padding: var(--dsa-spacing-16) var(--dsa-spacing-24);
+  --dsa-wc-tab-closable-padding-inline-start: var(--dsa-spacing-8);
+  --dsa-wc-tab-close-size: var(--dsa-spacing-16);
+  --dsa-wc-tab-close-padding: 0;
+  --dsa-wc-tab-group-indicator-color: var(--dsa-color-tab-decoration-primary);
+  --dsa-wc-tab-group-indicator-track-width: 2px;
+  --dsa-wc-tab-group-track-color: var(--dsa-color-background-divider);
+  --dsa-wc-tab-group-track-width: 1px;
+  --dsa-wc-icon-button-color: var(
+    --dsa-color-button-on-base-navigation-enabled
+  );
+  --dsa-wc-icon-button-color-hover: var(
+    --dsa-color-button-on-base-navigation-hover
+  );
+  --dsa-wc-icon-button-color-active: var(
+    --dsa-color-button-on-base-navigation-active
+  );
+  --dsa-wc-icon-button-color-disabled: var(
+    --dsa-color-button-on-base-navigation-disabled
+  );
+  --dsa-wc-icon-button-border-radius: var(--dsa-radius-0);
+  --dsa-wc-icon-button-padding: var(--dsa-spacing-8);
+  --dsa-wc-card-body-font: var(--dsa-font-medium-normal);
+  --dsa-wc-card-title-font: var(--dsa-font-medium-bold);
+  --dsa-wc-card-border-width: 1px;
+  --dsa-wc-card-border-color: #e4e4e7;
+  --dsa-wc-card-border-radius: 0.25rem;
+  --dsa-wc-card-padding: var(--dsa-spacing-24);
+  --dsa-wc-card-border: var(--dsa-wc-card-border-width) solid
+    var(--dsa-wc-card-border-color);
+  --dsa-wc-card-background: var(--dsa-color-background-base);
+  --dsa-wc-card-box-shadow: var(--dsa-wc-shadow-x-small);
+  --dsa-wc-menu-background-color: var(--dsa-color-background-base);
+  --dsa-wc-menu-border: solid 1px var(--dsa-color-background-border);
+  --dsa-wc-menu-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-menu-padding: var(--dsa-spacing-8) 0;
+  --dsa-wc-menu-divider-spacing: 0.5rem;
+  --dsa-wc-menu-item-font: var(--dsa-font-small-normal);
+  --dsa-wc-menu-item-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-menu-item-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-menu-item-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-menu-item-disabled-color: var(--dsa-color-text-on-base-disabled);
+  --dsa-wc-menu-item-background-color: var(--dsa-color-background-base);
+  --dsa-wc-menu-item-hover-background-color: var(
+    --dsa-color-background-base-hover
+  );
+  --dsa-wc-menu-item-margin-inline-start: var(--dsa-spacing-8);
+  --dsa-wc-menu-item-margin-inline-end: var(--dsa-spacing-8);
+  --dsa-wc-menu-item-padding-right: var(--dsa-spacing-24);
+  --dsa-wc-menu-item-padding-left: var(--dsa-spacing-4);
+  --dsa-wc-menu-item-padding: 10px var(--dsa-wc-menu-item-padding-right) 10px
+    var(--dsa-wc-menu-item-padding-left);
+  --dsa-wc-menu-item-small-padding: 7px var(--dsa-wc-menu-item-padding-right)
+    7px var(--dsa-wc-menu-item-padding-left);
+  --dsa-wc-menu-item-large-padding: 13px var(--dsa-wc-menu-item-padding-right)
+    13px var(--dsa-wc-menu-item-padding-left);
+  --dsa-wc-menu-item-focus-ring-offset: -2px;
+  --dsa-wc-menu-label-font: var(--dsa-font-small-bold);
+  --dsa-wc-menu-label-color: var(--dsa-color-text-on-base-secondary);
+  --dsa-wc-menu-label-padding: 0.25rem 1.75rem;
+  --dsa-wc-select-input-font: var(--dsa-font-medium-normal);
+  --dsa-wc-select-input-font-small: var(--dsa-font-small-normal);
+  --dsa-wc-select-input-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-option-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-option-hover-color: var(--dsa-color-background-base-hover);
+  --dsa-wc-option-error-color: var(--dsa-color-icon-on-base-error);
+  --dsa-wc-option-active-color: var(--dsa-color-text-on-contrasted);
+  --dsa-wc-option-active-background-color: var(
+    --dsa-color-background-contrasted
+  );
+  --dsa-wc-option-disabled-color: var(--dsa-color-text-on-base-disabled);
+  --dsa-wc-option-font: var(--dsa-font-small-normal);
+  --dsa-wc-option-icon-size: 1.25rem;
+  --dsa-wc-option-padding: var(--dsa-spacing-12) var(--dsa-spacing-24)
+    var(--dsa-spacing-12) var(--dsa-spacing-4);
+  --dsa-wc-option-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-option-small-icon-size: 1.125rem;
+  --dsa-wc-option-small-padding: var(--dsa-spacing-8) var(--dsa-spacing-24)
+    var(--dsa-spacing-8) var(--dsa-spacing-4);
+  --dsa-wc-option-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-option-large-icon-size: 1.5rem;
+  --dsa-wc-option-large-padding: var(--dsa-spacing-12) var(--dsa-spacing-24)
+    var(--dsa-spacing-12) var(--dsa-spacing-4);
+  --dsa-wc-option-check-icon-horizontal-padding: var(--dsa-spacing-4);
+  --dsa-wc-badge-font: var(--dsa-font-x-small-bold);
+  --dsa-wc-badge-dot-font: var(--dsa-font-2x-small-bold);
+  --dsa-wc-badge-dot-padding: 4px 8px;
+  --dsa-wc-badge-border-radius: 32px;
+  --dsa-wc-badge-background-color-primary: var(
+    --dsa-color-badge-background-primary
+  );
+  --dsa-wc-badge-background-color-success: var(
+    --dsa-color-badge-background-success
+  );
+  --dsa-wc-badge-background-color-warning: var(
+    --dsa-color-badge-background-warning
+  );
+  --dsa-wc-badge-background-color-danger: var(
+    --dsa-color-badge-background-danger
+  );
+  --dsa-wc-badge-background-color-neutral: var(
+    --dsa-color-badge-background-neutral
+  );
+  --dsa-wc-badge-text-color-primary: var(--dsa-color-badge-text-on-primary);
+  --dsa-wc-badge-text-color-success: var(--dsa-color-badge-text-on-success);
+  --dsa-wc-badge-text-color-warning: var(--dsa-color-badge-text-on-warning);
+  --dsa-wc-badge-text-color-neutral: var(--dsa-color-badge-text-on-neutral);
+  --dsa-wc-badge-text-color-danger: var(--dsa-color-badge-text-on-danger);
+  --dsa-wc-button-font: var(--dsa-font-button-medium);
+  --dsa-wc-button-font-small: var(--dsa-font-button-small);
+  --dsa-wc-button-font-large: var(--dsa-font-button-large);
+  --dsa-wc-button-border-radius: var(--dsa-wc-form-border-radius);
+  --dsa-wc-button-border-width: 1px;
+  --dsa-wc-button-padding-horizontal: var(--dsa-spacing-12);
+  --dsa-wc-button-caret-margin-inline-start: var(--dsa-spacing-4);
+  --dsa-wc-button-icon-spacing: var(--dsa-spacing-4);
+  --dsa-wc-button-primary-on-base-color: var(
+    --dsa-color-button-on-base-primary-enabled
+  );
+  --dsa-wc-button-primary-on-base-font-color: var(
+    --dsa-color-button-on-base-primary-on-enabled
+  );
+  --dsa-wc-button-primary-on-base-hover-color: var(
+    --dsa-color-button-on-base-primary-hover
+  );
+  --dsa-wc-button-primary-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-primary-on-hover
+  );
+  --dsa-wc-button-primary-on-base-active-color: var(
+    --dsa-color-button-on-base-primary-active
+  );
+  --dsa-wc-button-primary-on-base-active-font-color: var(
+    --dsa-color-button-on-base-primary-on-active
+  );
+  --dsa-wc-button-primary-on-base-disabled-color: var(
+    --dsa-color-button-on-base-primary-disabled
+  );
+  --dsa-wc-button-primary-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-primary-on-disabled
+  );
+  --dsa-wc-button-primary-on-base-loading-color: var(
+    --dsa-color-button-on-base-primary-disabled
+  );
+  --dsa-wc-button-primary-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-primary-hover
+  );
+  --dsa-wc-button-primary-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-purple-on-button-base
+  );
+  --dsa-wc-button-primary-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-purple-on-button-on-base
+  );
+  --dsa-wc-button-primary-on-floating-menu-color: var(
+    --dsa-color-button-on-floating-menu-primary-enabled
+  );
+  --dsa-wc-button-primary-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-primary-on-enabled
+  );
+  --dsa-wc-button-primary-on-floating-menu-hover-color: var(
+    --dsa-color-button-on-floating-menu-primary-hover
+  );
+  --dsa-wc-button-primary-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-primary-on-hover
+  );
+  --dsa-wc-button-primary-on-floating-menu-active-color: var(
+    --dsa-color-button-on-floating-menu-primary-active
+  );
+  --dsa-wc-button-primary-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-primary-on-active
+  );
+  --dsa-wc-button-primary-on-floating-menu-disabled-color: var(
+    --dsa-color-button-on-floating-menu-primary-disabled
+  );
+  --dsa-wc-button-primary-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-primary-on-disabled
+  );
+  --dsa-wc-button-primary-on-floating-menu-loading-color: var(
+    --dsa-color-button-on-floating-menu-primary-disabled
+  );
+  --dsa-wc-button-primary-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-primary-hover
+  );
+  --dsa-wc-button-primary-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-green-on-button-base
+  );
+  --dsa-wc-button-primary-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-green-on-button-on-base
+  );
+  --dsa-wc-button-secondary-on-base-color: var(
+    --dsa-color-button-on-base-secondary-enabled
+  );
+  --dsa-wc-button-secondary-on-base-font-color: var(
+    --dsa-color-button-on-base-secondary-on-enabled
+  );
+  --dsa-wc-button-secondary-on-base-hover-color: var(
+    --dsa-color-button-on-base-secondary-hover
+  );
+  --dsa-wc-button-secondary-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-secondary-on-hover
+  );
+  --dsa-wc-button-secondary-on-base-active-color: var(
+    --dsa-color-button-on-base-secondary-active
+  );
+  --dsa-wc-button-secondary-on-base-active-font-color: var(
+    --dsa-color-button-on-base-secondary-on-active
+  );
+  --dsa-wc-button-secondary-on-base-disabled-color: var(
+    --dsa-color-button-on-base-secondary-disabled
+  );
+  --dsa-wc-button-secondary-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-secondary-on-disabled
+  );
+  --dsa-wc-button-secondary-on-base-loading-color: var(
+    --dsa-color-button-on-base-secondary-disabled
+  );
+  --dsa-wc-button-secondary-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-secondary-hover
+  );
+  --dsa-wc-button-secondary-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-purple-on-button-base
+  );
+  --dsa-wc-button-secondary-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-purple-on-button-on-base
+  );
+  --dsa-wc-button-secondary-on-floating-menu-color: var(
+    --dsa-color-button-on-floating-menu-secondary-enabled
+  );
+  --dsa-wc-button-secondary-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-secondary-on-enabled
+  );
+  --dsa-wc-button-secondary-on-floating-menu-hover-color: var(
+    --dsa-color-button-on-floating-menu-secondary-hover
+  );
+  --dsa-wc-button-secondary-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-secondary-on-hover
+  );
+  --dsa-wc-button-secondary-on-floating-menu-active-color: var(
+    --dsa-color-button-on-floating-menu-secondary-active
+  );
+  --dsa-wc-button-secondary-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-secondary-on-active
+  );
+  --dsa-wc-button-secondary-on-floating-menu-disabled-color: var(
+    --dsa-color-button-on-floating-menu-secondary-disabled
+  );
+  --dsa-wc-button-secondary-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-secondary-on-disabled
+  );
+  --dsa-wc-button-secondary-on-floating-menu-loading-color: var(
+    --dsa-color-button-on-floating-menu-secondary-disabled
+  );
+  --dsa-wc-button-secondary-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-secondary-hover
+  );
+  --dsa-wc-button-secondary-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-green-on-button-base
+  );
+  --dsa-wc-button-secondary-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-green-on-button-on-base
+  );
+  --dsa-wc-button-tertiary-on-base-color: transparent;
+  --dsa-wc-button-tertiary-on-base-font-color: var(
+    --dsa-color-button-on-base-tertiary-enabled
+  );
+  --dsa-wc-button-tertiary-on-base-hover-color: transparent;
+  --dsa-wc-button-tertiary-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-tertiary-on-hover
+  );
+  --dsa-wc-button-tertiary-on-base-active-color: transparent;
+  --dsa-wc-button-tertiary-on-base-active-font-color: var(
+    --dsa-color-button-on-base-tertiary-on-active
+  );
+  --dsa-wc-button-tertiary-on-base-disabled-color: transparent;
+  --dsa-wc-button-tertiary-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-tertiary-on-disabled
+  );
+  --dsa-wc-button-tertiary-on-base-loading-color: transparent;
+  --dsa-wc-button-tertiary-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-tertiary-hover
+  );
+  --dsa-wc-button-tertiary-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-purple-on-base-base
+  );
+  --dsa-wc-button-tertiary-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-purple-on-base-on-base
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-enabled
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-hover-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-on-hover
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-active-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-on-active
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-disabled-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-on-disabled
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-loading-color: transparent;
+  --dsa-wc-button-tertiary-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-tertiary-hover
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-green-on-base-base
+  );
+  --dsa-wc-button-tertiary-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-green-on-base-on-base
+  );
+  --dsa-wc-button-navigation-on-base-color: transparent;
+  --dsa-wc-button-navigation-on-base-font-color: var(
+    --dsa-color-button-on-base-navigation-enabled
+  );
+  --dsa-wc-button-navigation-on-base-hover-color: transparent;
+  --dsa-wc-button-navigation-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-navigation-hover
+  );
+  --dsa-wc-button-navigation-on-base-active-color: transparent;
+  --dsa-wc-button-navigation-on-base-active-font-color: var(
+    --dsa-color-button-on-base-navigation-active
+  );
+  --dsa-wc-button-navigation-on-base-disabled-color: transparent;
+  --dsa-wc-button-navigation-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-navigation-disabled
+  );
+  --dsa-wc-button-navigation-on-base-loading-color: transparent;
+  --dsa-wc-button-navigation-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-navigation-hover
+  );
+  --dsa-wc-button-navigation-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-purple-on-base-base
+  );
+  --dsa-wc-button-navigation-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-purple-on-base-on-base
+  );
+  --dsa-wc-button-navigation-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-navigation-enabled
+  );
+  --dsa-wc-button-navigation-on-floating-menu-hover-color: transparent;
+  --dsa-wc-button-navigation-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-navigation-hover
+  );
+  --dsa-wc-button-navigation-on-floating-menu-active-color: transparent;
+  --dsa-wc-button-navigation-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-navigation-active
+  );
+  --dsa-wc-button-navigation-on-floating-menu-disabled-color: transparent;
+  --dsa-wc-button-navigation-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-navigation-disabled
+  );
+  --dsa-wc-button-navigation-on-floating-menu-loading-color: transparent;
+  --dsa-wc-button-navigation-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-navigation-hover
+  );
+  --dsa-wc-button-navigation-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-green-on-base-base
+  );
+  --dsa-wc-button-navigation-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-green-on-base-on-base
+  );
+  --dsa-wc-button-neutral-on-base-color: var(
+    --dsa-color-button-on-base-neutral-enabled
+  );
+  --dsa-wc-button-neutral-on-base-font-color: var(
+    --dsa-color-button-on-base-neutra-on-enabled
+  );
+  --dsa-wc-button-neutral-on-base-hover-color: var(
+    --dsa-color-button-on-base-neutral-hover
+  );
+  --dsa-wc-button-neutral-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-neutral-on-hover
+  );
+  --dsa-wc-button-neutral-on-base-active-color: var(
+    --dsa-color-button-on-base-neutral-active
+  );
+  --dsa-wc-button-neutral-on-base-active-font-color: var(
+    --dsa-color-button-on-base-neutral-on-active
+  );
+  --dsa-wc-button-neutral-on-base-disabled-color: var(
+    --dsa-color-button-on-base-neutral-disabled
+  );
+  --dsa-wc-button-neutral-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-neutral-on-disabled
+  );
+  --dsa-wc-button-neutral-on-base-loading-color: var(
+    --dsa-color-button-on-base-neutral-disabled
+  );
+  --dsa-wc-button-neutral-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-neutral-hover
+  );
+  --dsa-wc-button-neutral-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-neutral-base
+  );
+  --dsa-wc-button-neutral-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-neutral-on-base
+  );
+  --dsa-wc-button-neutral-on-floating-menu-color: var(
+    --dsa-color-button-on-floating-menu-neutral-enabled
+  );
+  --dsa-wc-button-neutral-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-neutral-on-enabled
+  );
+  --dsa-wc-button-neutral-on-floating-menu-hover-color: var(
+    --dsa-color-button-on-floating-menu-neutral-hover
+  );
+  --dsa-wc-button-neutral-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-neutral-on-hover
+  );
+  --dsa-wc-button-neutral-on-floating-menu-active-color: var(
+    --dsa-color-button-on-floating-menu-neutral-active
+  );
+  --dsa-wc-button-neutral-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-neutral-on-active
+  );
+  --dsa-wc-button-neutral-on-floating-menu-disabled-color: var(
+    --dsa-color-button-on-floating-menu-neutral-disabled
+  );
+  --dsa-wc-button-neutral-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-neutral-on-disabled
+  );
+  --dsa-wc-button-neutral-on-floating-menu-loading-color: var(
+    --dsa-color-button-on-floating-menu-neutral-disabled
+  );
+  --dsa-wc-button-neutral-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-neutral-hover
+  );
+  --dsa-wc-button-neutral-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-neutral-base
+  );
+  --dsa-wc-button-neutral-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-neutral-on-base
+  );
+  --dsa-wc-button-danger-on-base-color: var(
+    --dsa-color-button-on-base-warning-enabled
+  );
+  --dsa-wc-button-danger-on-base-font-color: var(
+    --dsa-color-button-on-base-warning-on-enabled
+  );
+  --dsa-wc-button-danger-on-base-hover-color: var(
+    --dsa-color-button-on-base-warning-hover
+  );
+  --dsa-wc-button-danger-on-base-hover-font-color: var(
+    --dsa-color-button-on-base-warning-on-hover
+  );
+  --dsa-wc-button-danger-on-base-active-color: var(
+    --dsa-color-button-on-base-warning-active
+  );
+  --dsa-wc-button-danger-on-base-active-font-color: var(
+    --dsa-color-button-on-base-warning-on-active
+  );
+  --dsa-wc-button-danger-on-base-disabled-color: var(
+    --dsa-color-button-on-base-warning-disabled
+  );
+  --dsa-wc-button-danger-on-base-disabled-font-color: var(
+    --dsa-color-button-on-base-warning-on-disabled
+  );
+  --dsa-wc-button-danger-on-base-loading-color: var(
+    --dsa-color-button-on-base-warning-disabled
+  );
+  --dsa-wc-button-danger-on-base-loading-font-color: var(
+    --dsa-color-button-on-base-warning-hover
+  );
+  --dsa-wc-button-danger-on-base-loading-spinner-track-color: var(
+    --dsa-color-spinner-danger-base
+  );
+  --dsa-wc-button-danger-on-base-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-danger-on-base
+  );
+  --dsa-wc-button-danger-on-floating-menu-color: var(
+    --dsa-color-button-on-floating-menu-warning-enabled
+  );
+  --dsa-wc-button-danger-on-floating-menu-font-color: var(
+    --dsa-color-button-on-floating-menu-warning-on-enabled
+  );
+  --dsa-wc-button-danger-on-floating-menu-hover-color: var(
+    --dsa-color-button-on-floating-menu-warning-hover
+  );
+  --dsa-wc-button-danger-on-floating-menu-hover-font-color: var(
+    --dsa-color-button-on-floating-menu-warning-on-hover
+  );
+  --dsa-wc-button-danger-on-floating-menu-active-color: var(
+    --dsa-color-button-on-floating-menu-warning-active
+  );
+  --dsa-wc-button-danger-on-floating-menu-active-font-color: var(
+    --dsa-color-button-on-floating-menu-warning-on-active
+  );
+  --dsa-wc-button-danger-on-floating-menu-disabled-color: var(
+    --dsa-color-button-on-floating-menu-warning-disabled
+  );
+  --dsa-wc-button-danger-on-floating-menu-disabled-font-color: var(
+    --dsa-color-button-on-floating-menu-warning-on-disabled
+  );
+  --dsa-wc-button-danger-on-floating-menu-loading-color: var(
+    --dsa-color-button-on-floating-menu-warning-disabled
+  );
+  --dsa-wc-button-danger-on-floating-menu-loading-font-color: var(
+    --dsa-color-button-on-floating-menu-warning-hover
+  );
+  --dsa-wc-button-danger-on-floating-menu-loading-spinner-track-color: var(
+    --dsa-color-spinner-danger-base
+  );
+  --dsa-wc-button-danger-on-floating-menu-loading-spinner-indicator-color: var(
+    --dsa-color-spinner-danger-on-base
+  );
+  --dsa-wc-dropdown-font: var(--dsa-font-medium-normal);
+  --dsa-wc-dropdown-panel-background: var(--dsa-color-background-base);
+  --dsa-wc-dropdown-panel-box-shadow: 0px 1px 2px 0px rgba(113, 113, 122, 0.12);
+  --dsa-wc-dropdown-panel-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-scrollbar-width: var(--dsa-spacing-4);
+  --dsa-wc-scrollbar-color: var(--dsa-color-background-scrollbar);
+  --dsa-wc-scrollbar-radius: var(--dsa-radius-4);
+  --dsa-wc-tag-border-radius: var(--dsa-radius-32);
+  --dsa-wc-tag-icon-spacing: var(--dsa-spacing-4);
+  --dsa-wc-tag-small-font-size: var(--dsa-font-x-small-normal);
+  --dsa-wc-tag-small-height: 24px;
+  --dsa-wc-tag-small-padding-y: 0.5rem;
+  --dsa-wc-tag-medium-font-size: var(--dsa-font-small-normal);
+  --dsa-wc-tag-medium-height: 32px;
+  --dsa-wc-tag-medium-padding-y: 0.75rem;
+  --dsa-wc-tag-large-font-size: var(--dsa-font-medium-normal);
+  --dsa-wc-tag-large-height: 41px;
+  --dsa-wc-tag-large-padding-y: 1rem;
+  --dsa-wc-tag-green-700-on-base: var(--dsa-color-tag-green-7-on-base);
+  --dsa-wc-tag-green-700-base: var(--dsa-color-tag-green-7-base);
+  --dsa-wc-tag-green-600-on-base: var(--dsa-color-tag-green-6-on-base);
+  --dsa-wc-tag-green-600-base: var(--dsa-color-tag-green-6-base);
+  --dsa-wc-tag-green-500-on-base: var(--dsa-color-tag-green-5-on-base);
+  --dsa-wc-tag-green-500-base: var(--dsa-color-tag-green-5-base);
+  --dsa-wc-tag-green-400-on-base: var(--dsa-color-tag-green-4-on-base);
+  --dsa-wc-tag-green-400-base: var(--dsa-color-tag-green-4-base);
+  --dsa-wc-tag-green-300-on-base: var(--dsa-color-tag-green-3-on-base);
+  --dsa-wc-tag-green-300-base: var(--dsa-color-tag-green-3-base);
+  --dsa-wc-tag-green-200-on-base: var(--dsa-color-tag-green-2-on-base);
+  --dsa-wc-tag-green-200-base: var(--dsa-color-tag-green-2-base);
+  --dsa-wc-tag-green-100-on-base: var(--dsa-color-tag-green-1-on-base);
+  --dsa-wc-tag-green-100-base: var(--dsa-color-tag-green-1-base);
+  --dsa-wc-tag-yellow-700-on-base: var(--dsa-color-tag-yellow-7-on-base);
+  --dsa-wc-tag-yellow-700-base: var(--dsa-color-tag-yellow-7-base);
+  --dsa-wc-tag-yellow-600-on-base: var(--dsa-color-tag-yellow-6-on-base);
+  --dsa-wc-tag-yellow-600-base: var(--dsa-color-tag-yellow-6-base);
+  --dsa-wc-tag-yellow-500-on-base: var(--dsa-color-tag-yellow-5-on-base);
+  --dsa-wc-tag-yellow-500-base: var(--dsa-color-tag-yellow-5-base);
+  --dsa-wc-tag-yellow-400-on-base: var(--dsa-color-tag-yellow-4-on-base);
+  --dsa-wc-tag-yellow-400-base: var(--dsa-color-tag-yellow-4-base);
+  --dsa-wc-tag-yellow-300-on-base: var(--dsa-color-tag-yellow-3-on-base);
+  --dsa-wc-tag-yellow-300-base: var(--dsa-color-tag-yellow-3-base);
+  --dsa-wc-tag-yellow-200-on-base: var(--dsa-color-tag-yellow-2-on-base);
+  --dsa-wc-tag-yellow-200-base: var(--dsa-color-tag-yellow-2-base);
+  --dsa-wc-tag-yellow-100-on-base: var(--dsa-color-tag-yellow-1-on-base);
+  --dsa-wc-tag-yellow-100-base: var(--dsa-color-tag-yellow-1-base);
+  --dsa-wc-tag-pink-500-on-base: var(--dsa-color-tag-pink-5-on-base);
+  --dsa-wc-tag-pink-500-base: var(--dsa-color-tag-pink-5-base);
+  --dsa-wc-tag-pink-400-on-base: var(--dsa-color-tag-pink-4-on-base);
+  --dsa-wc-tag-pink-400-base: var(--dsa-color-tag-pink-4-base);
+  --dsa-wc-tag-pink-300-on-base: var(--dsa-color-tag-pink-3-on-base);
+  --dsa-wc-tag-pink-300-base: var(--dsa-color-tag-pink-3-base);
+  --dsa-wc-tag-pink-200-on-base: var(--dsa-color-tag-pink-2-on-base);
+  --dsa-wc-tag-pink-200-base: var(--dsa-color-tag-pink-2-base);
+  --dsa-wc-tag-pink-100-on-base: var(--dsa-color-tag-pink-1-on-base);
+  --dsa-wc-tag-pink-100-base: var(--dsa-color-tag-pink-1-base);
+  --dsa-wc-tag-orange-600-on-base: var(--dsa-color-tag-orange-6-on-base);
+  --dsa-wc-tag-orange-600-base: var(--dsa-color-tag-orange-6-base);
+  --dsa-wc-tag-orange-500-on-base: var(--dsa-color-tag-orange-5-on-base);
+  --dsa-wc-tag-orange-500-base: var(--dsa-color-tag-orange-5-base);
+  --dsa-wc-tag-orange-400-on-base: var(--dsa-color-tag-orange-4-on-base);
+  --dsa-wc-tag-orange-400-base: var(--dsa-color-tag-orange-4-base);
+  --dsa-wc-tag-orange-300-on-base: var(--dsa-color-tag-orange-3-on-base);
+  --dsa-wc-tag-orange-300-base: var(--dsa-color-tag-orange-3-base);
+  --dsa-wc-tag-orange-200-on-base: var(--dsa-color-tag-orange-2-on-base);
+  --dsa-wc-tag-orange-200-base: var(--dsa-color-tag-orange-2-base);
+  --dsa-wc-tag-orange-100-on-base: var(--dsa-color-tag-orange-1-on-base);
+  --dsa-wc-tag-orange-100-base: var(--dsa-color-tag-orange-1-base);
+  --dsa-wc-tag-blue-600-on-base: var(--dsa-color-tag-blue-6-on-base);
+  --dsa-wc-tag-blue-600-base: var(--dsa-color-tag-blue-6-base);
+  --dsa-wc-tag-blue-500-on-base: var(--dsa-color-tag-blue-5-on-base);
+  --dsa-wc-tag-blue-500-base: var(--dsa-color-tag-blue-5-base);
+  --dsa-wc-tag-blue-400-on-base: var(--dsa-color-tag-blue-4-on-base);
+  --dsa-wc-tag-blue-400-base: var(--dsa-color-tag-blue-4-base);
+  --dsa-wc-tag-blue-300-on-base: var(--dsa-color-tag-blue-3-on-base);
+  --dsa-wc-tag-blue-300-base: var(--dsa-color-tag-blue-3-base);
+  --dsa-wc-tag-blue-200-on-base: var(--dsa-color-tag-blue-2-on-base);
+  --dsa-wc-tag-blue-200-base: var(--dsa-color-tag-blue-2-base);
+  --dsa-wc-tag-blue-100-on-base: var(--dsa-color-tag-blue-1-on-base);
+  --dsa-wc-tag-blue-100-base: var(--dsa-color-tag-blue-1-base);
+  --dsa-wc-tag-purple-500-on-base: var(--dsa-color-tag-purple-5-on-base);
+  --dsa-wc-tag-purple-500-base: var(--dsa-color-tag-purple-5-base);
+  --dsa-wc-tag-purple-400-on-base: var(--dsa-color-tag-purple-4-on-base);
+  --dsa-wc-tag-purple-400-base: var(--dsa-color-tag-purple-4-base);
+  --dsa-wc-tag-purple-300-on-base: var(--dsa-color-tag-purple-3-on-base);
+  --dsa-wc-tag-purple-300-base: var(--dsa-color-tag-purple-3-base);
+  --dsa-wc-tag-purple-200-on-base: var(--dsa-color-tag-purple-2-on-base);
+  --dsa-wc-tag-purple-200-base: var(--dsa-color-tag-purple-2-base);
+  --dsa-wc-tag-purple-100-on-base: var(--dsa-color-tag-purple-1-on-base);
+  --dsa-wc-tag-purple-100-base: var(--dsa-color-tag-purple-1-base);
+  --dsa-wc-tag-stroke-on-base: var(--dsa-color-tag-purple-5-base);
+  --dsa-wc-tag-stroke-base: transparent;
+  --dsa-wc-breadcrumb-item-font: var(--dsa-font-small-normal);
+  --dsa-wc-breadcrumb-item-color: var(
+    --dsa-color-button-on-base-navigation-active
+  );
+  --dsa-wc-breadcrumb-item-hover-color: var(
+    --dsa-color-button-on-base-navigation-hover
+  );
+  --dsa-wc-breadcrumb-item-active-color: var(
+    --dsa-color-button-on-base-navigation-enabled
+  );
+  --dsa-wc-breadcrumb-item-spacing: 0.5rem;
+  --dsa-wc-breadcrumb-item-separator-margin-y: 0.5rem;
+  --dsa-wc-breadcrumb-item-icon-color: var(--dsa-color-icon-on-base-default);
+  --dsa-wc-breadcrumb-item-text-decoration-thickness: 0.125rem;
+  --dsa-wc-breadcrumb-item-text-underline-offset: 4px;
+  --dsa-wc-breadcrumb-item-outline-offset: 3px;
+  --dsa-wc-divider-color: var(--dsa-color-background-divider);
+  --dsa-wc-divider-width: 0.063rem;
+  --dsa-wc-divider-spacing: 1rem;
+  --dsa-wc-progress-ring-font: var(--dsa-font-small-normal);
+  --dsa-wc-progress-ring-color: var(--dsa-color-progress-on-base);
+  --dsa-wc-progress-ring-content-color: var(--dsa-color-progress-content);
+  --dsa-wc-progress-ring-track-color: var(--dsa-color-progress-containing);
+  --dsa-wc-progress-bar-size: 4.5rem;
+  --dsa-wc-progress-bar-track-width: 6px;
+  --dsa-wc-progress-bar-small-size: 1rem;
+  --dsa-wc-progress-bar-small-gap: 0.5rem;
+  --dsa-wc-progress-bar-small-track-width: 3px;
+  --dsa-wc-input-padding-x: var(--dsa-spacing-12);
+  --dsa-wc-input-padding-y: var(--dsa-spacing-8);
+  --dsa-wc-input-padding: var(--dsa-wc-input-padding-y)
+    var(--dsa-wc-input-padding-x);
+  --dsa-wc-input-text-field-font: var(--dsa-font-small-normal);
+  --dsa-wc-input-text-field-font-small: var(--dsa-font-x-small-normal);
+  --dsa-wc-input-text-field-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-input-label-font: var(--dsa-font-small-normal);
+  --dsa-wc-input-label-font-small: var(--dsa-font-x-small-normal);
+  --dsa-wc-input-label-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-input-label-color-error: var(--dsa-color-text-on-base-error);
+  --dsa-wc-input-helper-font: var(--dsa-font-small-normal);
+  --dsa-wc-input-helper-font-small: var(--dsa-font-x-small-normal);
+  --dsa-wc-input-helper-font-large: var(--dsa-font-medium-normal);
+  --dsa-wc-input-border-width: 1px;
+  --dsa-wc-input-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-input-icon-color: var(--dsa-color-button-on-base-navigation-enabled);
+  --dsa-wc-input-icon-color-hover: var(
+    --dsa-color-button-on-base-navigation-hover
+  );
+  --dsa-wc-input-icon-color-disabled: var(
+    --dsa-color-button-on-base-navigation-disabled
+  );
+  --dsa-wc-input-error-text-margin-top: var(--dsa-spacing-4);
+  --dsa-wc-input-spacing-left: var(--dsa-spacing-8);
+  --dsa-wc-input-action-buttons-spacing: var(--dsa-spacing-8);
+  --dsa-wc-input-on-base-text-field-input-color: var(
+    --dsa-color-input-text-field-on-base-input
+  );
+  --dsa-wc-input-on-base-text-field-input-color-disabled: var(
+    --dsa-color-input-text-field-on-base-input-disabled
+  );
+  --dsa-wc-input-on-base-text-field-placeholder-color: var(
+    --dsa-color-input-text-field-on-base-placeholder
+  );
+  --dsa-wc-input-on-base-text-field-placeholder-color-disabled: var(
+    --dsa-color-input-text-field-on-base-placeholder-disabled
+  );
+  --dsa-wc-input-on-base-label-color: var(
+    --dsa-color-input-label-on-base-default
+  );
+  --dsa-wc-input-on-base-label-color-focus: var(
+    --dsa-color-input-label-on-base-focus
+  );
+  --dsa-wc-input-on-base-label-color-disabled: var(
+    --dsa-color-input-label-on-base-disabled
+  );
+  --dsa-wc-input-on-base-read-only-label-color: var(
+    --dsa-color-input-label-on-base-read-only
+  );
+  --dsa-wc-input-on-base-label-color-error: var(
+    --dsa-color-input-label-on-base-error
+  );
+  --dsa-wc-input-on-base-label-color-helper: var(
+    --dsa-color-input-label-on-base-helper
+  );
+  --dsa-wc-input-on-base-background-color: var(
+    --dsa-color-input-background-on-base-enabled
+  );
+  --dsa-wc-input-on-base-background-color-disabled: var(
+    --dsa-color-input-background-on-base-disabled
+  );
+  --dsa-wc-input-on-base-background-color-error: var(
+    --dsa-color-input-background-on-base-error
+  );
+  --dsa-wc-input-on-base-read-only-background-color: var(
+    --dsa-color-input-background-on-base-read-only
+  );
+  --dsa-wc-input-on-base-border-color: var(
+    --dsa-color-input-border-on-base-enabled
+  );
+  --dsa-wc-input-on-base-border-color-hover: var(
+    --dsa-color-input-border-on-base-hover
+  );
+  --dsa-wc-input-on-base-border-color-disabled: var(
+    --dsa-color-input-border-on-base-disabled
+  );
+  --dsa-wc-input-on-base-border-color-error: var(
+    --dsa-color-input-border-on-base-error
+  );
+  --dsa-wc-input-on-base-border-color-error-hover: var(
+    --dsa-color-input-border-on-base-error-hover
+  );
+  --dsa-wc-input-on-base-read-only-border-color: var(
+    --dsa-color-input-border-on-base-read-only
+  );
+  --dsa-wc-input-on-layer-text-field-input-color: var(
+    --dsa-color-input-text-field-on-layer-input
+  );
+  --dsa-wc-input-on-layer-text-field-input-color-disabled: var(
+    --dsa-color-input-text-field-on-layer-input-disabled
+  );
+  --dsa-wc-input-on-layer-text-field-placeholder-color: var(
+    --dsa-color-input-text-field-on-layer-placeholder
+  );
+  --dsa-wc-input-on-layer-text-field-placeholder-color-disabled: var(
+    --dsa-color-input-text-field-on-layer-placeholder-disabled
+  );
+  --dsa-wc-input-on-layer-label-color: var(
+    --dsa-color-input-label-on-layer-default
+  );
+  --dsa-wc-input-on-layer-label-color-focus: var(
+    --dsa-color-input-label-on-layer-focus
+  );
+  --dsa-wc-input-on-layer-label-color-disabled: var(
+    --dsa-color-input-label-on-layer-disabled
+  );
+  --dsa-wc-input-on-layer-read-only-label-color: var(
+    --dsa-color-input-label-on-layer-read-only
+  );
+  --dsa-wc-input-on-layer-label-color-error: var(
+    --dsa-color-input-label-on-layer-error
+  );
+  --dsa-wc-input-on-layer-label-color-helper: var(
+    --dsa-color-input-label-on-layer-helper
+  );
+  --dsa-wc-input-on-layer-background-color: var(
+    --dsa-color-input-background-on-layer-enabled
+  );
+  --dsa-wc-input-on-layer-background-color-disabled: var(
+    --dsa-color-input-background-on-layer-disabled
+  );
+  --dsa-wc-input-on-layer-background-color-error: var(
+    --dsa-color-input-background-on-layer-error
+  );
+  --dsa-wc-input-on-layer-read-only-background-color: var(
+    --dsa-color-input-background-on-layer-read-only
+  );
+  --dsa-wc-input-on-layer-border-color: var(
+    --dsa-color-input-border-on-layer-enabled
+  );
+  --dsa-wc-input-on-layer-border-color-hover: var(
+    --dsa-color-input-border-on-layer-hover
+  );
+  --dsa-wc-input-on-layer-border-color-disabled: var(
+    --dsa-color-input-border-on-layer-disabled
+  );
+  --dsa-wc-input-on-layer-border-color-error: var(
+    --dsa-color-input-border-on-layer-error
+  );
+  --dsa-wc-input-on-layer-border-color-error-hover: var(
+    --dsa-color-input-border-on-layer-error-hover
+  );
+  --dsa-wc-input-on-layer-read-only-border-color: var(
+    --dsa-color-input-border-on-layer-read-only
+  );
+  --dsa-wc-input-mask-clear-icon-margin-inline-start: 0.5em;
+  --dsa-wc-input-mask-clear-icon-z-index: 1;
+  --dsa-wc-input-mask-placeholder-letter-spacing: 0.125rem;
+  --dsa-wc-input-phone-select-border-radius: var(--dsa-spacing-4) 0 0
+    var(--dsa-spacing-4);
+  --dsa-wc-input-phone-select-on-base-hover-background: var(
+    --dsa-color-input-select-on-base-background-hover
+  );
+  --dsa-wc-input-phone-select-on-base-active-background: var(
+    --dsa-color-input-select-on-base-background-active
+  );
+  --dsa-wc-input-phone-select-on-layer-hover-background: var(
+    --dsa-color-input-select-on-layer-background-hover
+  );
+  --dsa-wc-input-phone-select-on-layer-active-background: var(
+    --dsa-color-input-select-on-layer-background-active
+  );
+  --dsa-wc-input-phone-select-listbox-margin-inline-start: 2rem;
+  --dsa-wc-input-phone-border-radius: 0 var(--dsa-spacing-4)
+    var(--dsa-spacing-4) 0;
+  --dsa-wc-input-phone-height: 2.5rem;
+  --dsa-wc-input-phone-small-height: 1.875rem;
+  --dsa-wc-input-phone-large-height: 3.125rem;
+  --dsa-wc-input-phone-prefix-margin-inline-end: 0.4rem;
+  --dsa-wc-error-text-gap: 0.19rem;
+  --dsa-wc-error-text-margin: var(--dsa-spacing-8);
+  --dsa-wc-error-text-icon-padding: 1.5px;
+  --dsa-wc-error-text-icon-padding-small: 1.5px;
+  --dsa-wc-error-text-icon-padding-large: 1.5px;
+  --dsa-wc-error-text-icon-color: var(--dsa-color-input-icon-on-base-error);
+  --dsa-wc-error-text-icon-size: 0.833rem;
+  --dsa-wc-error-text-icon-size-small: 0.729rem;
+  --dsa-wc-error-text-icon-size-large: 0.938rem;
+  --dsa-wc-error-text-color: var(--dsa-color-input-label-on-base-error);
+  --dsa-wc-error-text-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-error-text-font-small: var(--dsa-font-2x-small-normal);
+  --dsa-wc-error-text-font-large: var(--dsa-font-small-normal);
+  --dsa-wc-accordion-icon-color: var(--dsa-color-icon-on-base-default);
+  --dsa-wc-accordion-disabled-icon-color: var(
+    --dsa-color-icon-on-base-disabled
+  );
+  --dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-accordion-disabled-color: var(--dsa-color-text-on-base-disabled);
+  --dsa-wc-accordion-font: var(--dsa-font-medium-normal);
+  --dsa-wc-accordion-border-color: var(--dsa-color-background-border);
+  --dsa-wc-accordion-hover-border-color: var(
+    --dsa-color-background-border-hover
+  );
+  --dsa-wc-accordion-focus-border: 3px solid
+    var(--dsa-color-background-focus-ring);
+  --dsa-wc-accordion-header-hover-background-color: var(
+    --dsa-color-background-base-hover
+  );
+  --dsa-wc-accordion-padding: 1rem;
+  --dsa-wc-accordion-background-color: var(--dsa-color-background-base);
+  --dsa-wc-accordion-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-select-input-font: var(--dsa-font-medium-normal);
+  --dsa-wc-select-input-font-small: var(--dsa-font-small-normal);
+  --dsa-wc-select-input-font-large: var(--dsa-font-large-normal);
+  --dsa-wc-select-listbox-divider-spacing: 0.5rem;
+  --dsa-wc-select-listbox-padding-inline: 1.75rem;
+  --dsa-wc-select-listbox-border-radius: 0.25rem;
+  --dsa-wc-select-listbox-border-width: 1px;
+  --dsa-wc-select-listbox-background-color: var(--dsa-color-background-base);
+  --dsa-wc-select-icon-margin: 0.75rem;
+  --dsa-wc-select-tag-margin-inline-start: 0.25rem;
+  --dsa-wc-select-tag-background: transparent;
+  --dsa-wc-select-tag-color: var(--dsa-color-tag-select-default-on-base);
+  --dsa-wc-select-tag-border-color: var(--dsa-color-tag-select-default-border);
+  --dsa-wc-select-tag-error-background: transparent;
+  --dsa-wc-select-tag-error-color: var(--dsa-color-tag-select-error-on-base);
+  --dsa-wc-select-tag-error-border-color: var(
+    --dsa-color-tag-select-error-border
+  );
+  --dsa-wc-drawer-overlay-color: var(--dsa-color-background-overlay);
+  --dsa-wc-drawer-background-color: var(--dsa-color-background-base);
+  --dsa-wc-drawer-spacing: 1.25rem;
+  --dsa-wc-drawer-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-drawer-header-padding: 1.25rem 1rem;
+  --dsa-wc-drawer-header-font: var(--dsa-font-medium-bold);
+  --dsa-wc-drawer-header-actions-gap: 0.25rem;
+  --dsa-wc-drawer-content-font: var(--dsa-font-medium-normal);
+  --dsa-wc-drawer-footer-border-top: 1px solid
+    var(--dsa-color-background-border);
+  --dsa-wc-drawer-footer-button-margin-inline-end: 0.5rem;
+  --dsa-wc-tooltip-arrow-size: 6px;
+  --dsa-wc-tooltip-arrow-color: var(--dsa-color-background-tooltip);
+  --dsa-wc-tooltip-border-radius: var(--dsa-radius-4);
+  --dsa-wc-tooltip-background-color: var(--dsa-color-background-tooltip);
+  --dsa-wc-tooltip-font: var(--dsa-font-medium-normal);
+  --dsa-wc-tooltip-color: var(--dsa-color-text-on-tooltip);
+  --dsa-wc-tooltip-padding: var(--dsa-spacing-8) var(--dsa-spacing-12);
+  --dsa-wc-tree-indent-guide-color: var(--dsa-color-background-divider);
+  --dsa-wc-tree-indent-guide-offset: 0;
+  --dsa-wc-tree-indent-guide-style: solid;
+  --dsa-wc-tree-indent-guide-width: 1px;
+  --dsa-wc-tree-indent-size: 32px;
+  --dsa-wc-tree-indent-size-offset: -11px;
+  --dsa-wc-tree-item-icon-padding: var(--dsa-spacing-4);
+  --dsa-wc-tree-item-icon-margin-end: var(--dsa-spacing-4);
+  --dsa-wc-tree-item-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-tree-item-font: var(--dsa-font-medium-normal);
+  --dsa-wc-tree-item-selected-background-color: var(
+    --dsa-color-background-base-hover
+  );
+  --dsa-wc-tree-item-selected-border-color: var(--dsa-color-toggle-item-active);
+  --dsa-wc-skeleton-border-radius: 44px;
+  --dsa-wc-skeleton-color: var(--dsa-color-skeleton-text);
+  --dsa-wc-skeleton-sheen-color: var(--dsa-color-skeleton-image);
+  --dsa-wc-progress-bar-track-color: var(--dsa-color-progress-containing);
+  --dsa-wc-progress-bar-indicator-color: var(--dsa-color-progress-content);
+  --dsa-wc-progress-bar-indicator-label-color: var(
+    --dsa-color-progress-on-content
+  );
+  --dsa-wc-progress-bar-border-radius: var(--dsa-spacing-32);
+  --dsa-wc-progress-bar-font: var(--dsa-font-x-small-bold);
+  --dsa-wc-progress-bar-height: 1rem;
+  --dsa-wc-spinner-track-width: var(--dsa-spacing-4);
+  --dsa-wc-spinner-on-base-track-color: var(
+    --dsa-color-spinner-purple-on-base-base
+  );
+  --dsa-wc-spinner-on-base-indicator-color: var(
+    --dsa-color-spinner-purple-on-button-on-base
+  );
+  --dsa-wc-spinner-on-floating-menu-track-color: var(
+    --dsa-color-spinner-green-on-base-base
+  );
+  --dsa-wc-spinner-on-floating-menu-indicator-color: var(
+    --dsa-color-spinner-green-on-base-on-base
+  );
+  --dsa-wc-avatar-background-color: var(--dsa-color-avatar-background);
+  --dsa-wc-avatar-color: var(--dsa-color-avatar-icon);
+  --dsa-wc-avatar-border-radius: 50%;
+  --dsa-wc-avatar-border: solid 2px var(--dsa-color-background-base);
+  --dsa-wc-avatar-small-size: 1.25rem;
+  --dsa-wc-avatar-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-avatar-medium-size: 2rem;
+  --dsa-wc-avatar-medium-font: var(--dsa-font-small-normal);
+  --dsa-wc-avatar-large-size: 2.5rem;
+  --dsa-wc-avatar-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-avatar-x-large-size: 3rem;
+  --dsa-wc-avatar-x-large-font: var(--dsa-font-large-normal);
+  --dsa-wc-avatar-group-margin-left: -0.75rem;
+  --dsa-wc-link-on-base-color: var(--dsa-color-link-on-base-default);
+  --dsa-wc-link-on-contrasted-color: var(
+    --dsa-color-link-on-contrasted-visited
+  );
+  --dsa-wc-link-visited-on-base-color: var(--dsa-color-link-on-base-visited);
+  --dsa-wc-link-visited-on-contrasted-color: var(
+    --dsa-color-link-on-contrasted-default
+  );
+  --dsa-wc-link-underline-thickness: 1px;
+  --dsa-wc-link-hover-underline-thickness-multiplier: 2;
+  --dsa-wc-z-index-drawer: 700;
+  --dsa-wc-z-index-dialog: 800;
+  --dsa-wc-z-index-dropdown: 900;
+  --dsa-wc-z-index-toast: 950;
+  --dsa-wc-z-index-tooltip: 1000;
+  --dsa-wc-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
+  --dsa-wc-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
+  --dsa-wc-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
+  --dsa-wc-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
+  --dsa-wc-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
+}
+
+.dsa-scroll-lock {
+  padding-right: var(--dsa-wc-scroll-lock-size) !important;
+  overflow: hidden !important;
+}
+.dialog__body::-webkit-scrollbar-track-piece {
+  background-color: var(--dsa-wc-component-dialog-scrollbar-color) !important;
+}
+.dsa-toast-stack {
+  position: fixed;
+  top: 0;
+  inset-inline-end: 0;
+  z-index: var(--dsa-wc-z-index-toast);
+  width: 28rem;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+.dsa-toast-stack dsa-alert {
+  margin: var(--dsa-spacing-8);
+}
+.dsa-toast-stack dsa-alert::part(base) {
+  box-shadow: var(--dsa-wc-shadow-large);
+}
+.dsa-link {
+  font: inherit;
+  font-size: inherit;
+  color: var(--dsa-wc-link-on-base-color);
+  text-decoration: none;
+  position: relative;
+}
+.dsa-link--on-contrasted {
+  color: var(--dsa-wc-link-on-contrasted-color);
+}
+.dsa-link::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: var(--dsa-wc-link-underline-thickness);
+  width: 100%;
+  background: currentColor;
+  transform: scaleY(
+    var(--dsa-wc-link-hover-underline-thickness-multiplier) * 100%
+  );
+  transition: transform 0.1s ease-out;
+}
+.dsa-link:hover::after {
+  transform: scaleY(200%);
+}
+.dsa-link:visited {
+  color: var(--dsa-wc-link-visited-on-base-color);
+}
+.dsa-link--on-contrasted:visited {
+  color: var(--dsa-wc-link-visited-on-contrasted-color);
+}
+.dsa-link:focus-visible {
+  outline: var(--dsa-wc-focus-ring);
+  border-radius: var(--dsa-wc-focus-ring-radius);
+}
+.no-animations {
+  --dsa-wc-no-animations-duration: 0s;
+}