@adobe/spectrum-css/dist/components/button/vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Button,
.spectrum-ActionButton,
.spectrum-LogicButton,
.spectrum-FieldButton,
.spectrum-ClearButton,
.spectrum-Tool {
  --spectrum-button-primary-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-button-primary-border-radius: var(--spectrum-alias-border-radius-large);
  --spectrum-button-primary-height: var(--spectrum-alias-single-line-height);
  --spectrum-button-primary-min-width: undefined;
  --spectrum-button-primary-padding-x: var(--spectrum-global-dimension-size-200);
  --spectrum-button-primary-text-size: var(--spectrum-alias-pill-button-text-size);
  --spectrum-button-primary-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-100);
  --spectrum-actionbutton-height: var(--spectrum-alias-single-line-height);
  --spectrum-actionbutton-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-actionbutton-icon-padding-x: var(--spectrum-global-dimension-size-85);
  --spectrum-actionbutton-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-text-size: var(--spectrum-alias-font-size-default);
  --spectrum-actionbutton-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-text-padding-x: var(--spectrum-global-dimension-size-150);
  --spectrum-actionbutton-icon-size: var(--spectrum-alias-workflow-icon-size);
  --spectrum-actionbutton-hold-icon-padding-right: var(--spectrum-global-dimension-size-40);
  --spectrum-actionbutton-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40);
  --spectrum-actionbutton-quiet-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-quiet-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-quiet-text-size: var(--spectrum-alias-font-size-default);
  --spectrum-actionbutton-quiet-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-logicbutton-and-height: 24px;
  --spectrum-logicbutton-and-padding-x: var(--spectrum-global-dimension-size-100);
  --spectrum-logicbutton-and-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-logicbutton-and-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-logicbutton-and-text-size: var(--spectrum-alias-font-size-default);
  --spectrum-logicbutton-and-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-dropdown-height: var(--spectrum-global-dimension-size-400);
  --spectrum-dropdown-padding-x: var(--spectrum-global-dimension-size-150);
  --spectrum-dropdown-text-size: var(--spectrum-alias-font-size-default);
  --spectrum-dropdown-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-fieldbutton-quiet-border-radius: 0px;
  --spectrum-clearbutton-medium-width: var(--spectrum-alias-single-line-height);
  --spectrum-clearbutton-medium-height: var(--spectrum-alias-single-line-height);
  --spectrum-clearbutton-small-width: var(--spectrum-global-dimension-size-300);
  --spectrum-clearbutton-small-height: var(--spectrum-global-dimension-size-300);
  --spectrum-tool-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-tool-height: var(--spectrum-alias-single-line-height);
  --spectrum-tool-hold-icon-padding-right: var(--spectrum-global-dimension-size-40);
  --spectrum-tool-hold-icon-padding-bottom: var(--spectrum-global-dimension-size-40);
  --spectrum-buttongroup-button-gap-x: var(--spectrum-global-dimension-static-size-200);
  --spectrum-actionbuttongroup-text-button-gap-x: var(--spectrum-global-dimension-size-100);
  --spectrum-toolgroup-text-button-gap-x: var(--spectrum-global-dimension-size-100);
  --spectrum-button-primary-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-clearbutton-medium-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-clearbutton-medium-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-clearbutton-medium-background-color-hover: var(--spectrum-alias-background-color-transparent);
  --spectrum-clearbutton-medium-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-clearbutton-medium-background-color-down: var(--spectrum-alias-background-color-transparent);
  --spectrum-clearbutton-medium-icon-color-down: var(--spectrum-alias-icon-color-down);
  --spectrum-clearbutton-medium-background-color-key-focus: var(--spectrum-alias-background-color-transparent);
  --spectrum-clearbutton-medium-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-clearbutton-medium-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-clearbutton-medium-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-button-cta-background-color: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-button-cta-border-color: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-button-cta-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-background-color-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-border-color-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-text-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-cta-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-cta-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-background-color-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-button-cta-border-color-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-button-cta-text-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-cta-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-cta-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-primary-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-primary-border-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-text-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-background-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-border-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-primary-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-primary-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-primary-background-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-primary-border-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-primary-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-primary-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-primary-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-primary-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-secondary-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-secondary-border-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-text-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-border-color-hover: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-secondary-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-secondary-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-secondary-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-secondary-background-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-secondary-border-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-secondary-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-secondary-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-secondary-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-secondary-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-warning-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-warning-border-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-text-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-background-color-hover: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-border-color-hover: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-warning-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-warning-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-warning-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-warning-background-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-warning-border-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-warning-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-warning-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-warning-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-warning-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-over-background-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-over-background-border-color: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-background-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-border-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-background-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-border-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-background-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-border-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-background-color-disabled: rgba(255,255,255,0.1);
  --spectrum-button-over-background-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-over-background-text-color-disabled: rgba(255,255,255,0.35);
  --spectrum-button-quiet-over-background-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-over-background-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-background-color-hover: rgba(255,255,255,0.1);
  --spectrum-button-quiet-over-background-border-color-hover: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-text-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-background-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-border-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-background-color-down: rgba(255,255,255,0.15);
  --spectrum-button-quiet-over-background-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-text-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-over-background-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-text-color-disabled: rgba(255,255,255,0.15);
  --spectrum-button-quiet-primary-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-primary-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-primary-text-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-primary-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-text-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-button-quiet-primary-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-primary-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-primary-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-primary-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-primary-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-primary-text-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-quiet-primary-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-primary-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-primary-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-quiet-secondary-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-secondary-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-secondary-text-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-quiet-secondary-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-text-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-secondary-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-secondary-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-secondary-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-secondary-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-secondary-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-secondary-text-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-secondary-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-secondary-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-secondary-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-actionbutton-background-color: var(--spectrum-global-color-gray-75);
  --spectrum-actionbutton-border-color: var(--spectrum-alias-border-color);
  --spectrum-actionbutton-text-color: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-hold-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-background-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-border-color-hover: var(--spectrum-alias-border-color-hover);
  --spectrum-actionbutton-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-hold-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-background-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-actionbutton-hold-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-background-color-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-down: var(--spectrum-global-color-gray-400);
  --spectrum-actionbutton-text-color-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-hold-icon-color-down: var(--spectrum-alias-icon-color-down);
  --spectrum-actionbutton-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-hold-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-background-color-selected: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-selected: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-text-color-selected: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-icon-color-selected: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-background-color-selected-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-selected-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-text-color-selected-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-icon-color-selected-key-focus: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-selected-hover: var(--spectrum-global-color-gray-400);
  --spectrum-actionbutton-text-color-selected-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-icon-color-selected-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-background-color-selected-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-selected-down: var(--spectrum-global-color-gray-400);
  --spectrum-actionbutton-text-color-selected-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-icon-color-selected-down: var(--spectrum-alias-icon-color-down);
  --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-border-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-text-color-selected-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-icon-color-selected-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-quiet-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-quiet-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-quiet-text-color: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-quiet-background-color-hover: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-quiet-border-color-hover: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-quiet-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-quiet-background-color-key-focus: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-quiet-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-quiet-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-quiet-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-text-color-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-quiet-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-quiet-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-quiet-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-quiet-background-color-selected: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-border-color-selected: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-text-color-selected: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-quiet-background-color-selected-key-focus: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-border-color-selected-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-quiet-text-color-selected-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-quiet-background-color-selected-hover: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-border-color-selected-hover: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-text-color-selected-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-quiet-background-color-selected-down: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-border-color-selected-down: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-quiet-text-color-selected-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-quiet-background-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-quiet-border-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-quiet-text-color-selected-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-button-quiet-warning-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-warning-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-warning-text-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-quiet-warning-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-text-color-hover: var(--spectrum-global-color-red-700);
  --spectrum-button-quiet-warning-background-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-warning-border-color-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-button-quiet-warning-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-warning-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-warning-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-warning-text-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-quiet-warning-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-warning-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-warning-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-logicbutton-and-background-color: var(--spectrum-global-color-blue-500);
  --spectrum-logicbutton-and-border-color: var(--spectrum-global-color-blue-500);
  --spectrum-logicbutton-and-text-color: var(--spectrum-global-color-static-white);
  --spectrum-logicbutton-and-background-color-hover: var(--spectrum-global-color-blue-700);
  --spectrum-logicbutton-and-border-color-hover: var(--spectrum-global-color-blue-700);
  --spectrum-logicbutton-and-background-color-key-focus: var(--spectrum-global-color-blue-700);
  --spectrum-logicbutton-and-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-logicbutton-and-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-logicbutton-and-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-logicbutton-and-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-logicbutton-or-background-color: var(--spectrum-global-color-magenta-500);
  --spectrum-logicbutton-or-border-color: var(--spectrum-global-color-magenta-500);
  --spectrum-logicbutton-or-text-color: var(--spectrum-global-color-static-white);
  --spectrum-logicbutton-or-background-color-hover: var(--spectrum-global-color-magenta-700);
  --spectrum-logicbutton-or-border-color-hover: var(--spectrum-global-color-magenta-700);
  --spectrum-logicbutton-or-background-color-key-focus: var(--spectrum-global-color-magenta-700);
  --spectrum-logicbutton-or-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-fieldbutton-text-color: var(--spectrum-alias-text-color);
  --spectrum-fieldbutton-background-color: var(--spectrum-global-color-gray-75);
  --spectrum-fieldbutton-border-color: var(--spectrum-global-color-gray-300);
  --spectrum-fieldbutton-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-fieldbutton-background-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-fieldbutton-border-color-hover: var(--spectrum-global-color-gray-400);
  --spectrum-fieldbutton-background-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-fieldbutton-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-fieldbutton-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-fieldbutton-placeholder-text-color-key-focus: var(--spectrum-alias-placeholder-text-color-hover);
  --spectrum-fieldbutton-background-color-down: var(--spectrum-global-color-gray-200);
  --spectrum-fieldbutton-border-color-down: var(--spectrum-global-color-gray-400);
  --spectrum-fieldbutton-border-color-error: var(--spectrum-global-color-red-500);
  --spectrum-fieldbutton-border-color-error-hover: var(--spectrum-global-color-red-600);
  --spectrum-fieldbutton-border-color-error-down: var(--spectrum-global-color-red-600);
  --spectrum-fieldbutton-border-color-error-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-fieldbutton-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-fieldbutton-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-fieldbutton-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-fieldbutton-quiet-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-fieldbutton-quiet-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-fieldbutton-quiet-background-color-hover: var(--spectrum-alias-background-color-transparent);
  --spectrum-fieldbutton-quiet-background-color-key-focus: var(--spectrum-alias-background-color-transparent);
  --spectrum-fieldbutton-quiet-placeholder-text-color-key-focus: var(--spectrum-alias-placeholder-text-color-hover);
  --spectrum-fieldbutton-quiet-background-color-down: var(--spectrum-alias-background-color-transparent);
  --spectrum-fieldbutton-quiet-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-fieldbutton-quiet-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-tool-icon-color-selected: var(--spectrum-alias-icon-color-selected);
  --spectrum-tool-hold-icon-color-selected: var(--spectrum-alias-icon-color-selected);
  --spectrum-tool-icon-color-selected-hover: var(--spectrum-alias-icon-color-selected-hover);
  --spectrum-tool-hold-icon-color-selected-hover: var(--spectrum-alias-icon-color-selected-hover);
  --spectrum-tool-icon-color-selected-down: var(--spectrum-alias-icon-color-selected-down);
  --spectrum-tool-hold-icon-color-selected-down: var(--spectrum-alias-icon-color-selected-down);
  --spectrum-tool-icon-color-selected-key-focus: var(--spectrum-alias-icon-color-selected-focus);
  --spectrum-tool-hold-icon-color-selected-key-focus: var(--spectrum-alias-icon-color-selected-focus);
  --spectrum-tool-background-color-selected-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-tool-border-color-selected-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-tool-icon-color-selected-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-tool-hold-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-tool-hold-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-tool-hold-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-tool-background-color-down: var(--spectrum-alias-background-color-transparent);
  --spectrum-tool-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-tool-hold-icon-color-down: var(--spectrum-alias-icon-color-down);
  --spectrum-tool-hold-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
}