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

The Spectrum CSS top-level backwards compatible package

.spectrum-ActionButton {
  --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
  --spectrum-actionbutton-s-quiet-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-s-quiet-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-s-quiet-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-s-quiet-text-size: var(--spectrum-alias-item-text-size-s);
  --spectrum-actionbutton-s-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-s-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-s-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-actionbutton-s-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-s-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-actionbutton-s-text-size: var(--spectrum-alias-item-text-size-s);
  --spectrum-actionbutton-s-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-s);
  --spectrum-actionbutton-s-height: var(--spectrum-alias-item-height-s);
  --spectrum-actionbutton-s-padding-left: var(--spectrum-alias-item-workflow-padding-left-s);
  --spectrum-actionbutton-s-padding-right: var(--spectrum-alias-item-padding-s);
  --spectrum-actionbutton-s-icononly-padding-left: var(--spectrum-alias-item-icononly-padding-s);
  --spectrum-actionbutton-s-icononly-padding-right: var(--spectrum-alias-item-icononly-padding-s);
  --spectrum-actionbutton-s-textonly-padding-left: var(--spectrum-alias-item-padding-s);
  --spectrum-actionbutton-s-textonly-padding-right: var(--spectrum-alias-item-padding-s);
  --spectrum-actionbutton-m-quiet-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-m-quiet-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-m-quiet-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-m-quiet-text-size: var(--spectrum-alias-item-text-size-m);
  --spectrum-actionbutton-m-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-m-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-m-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-actionbutton-m-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-m-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-actionbutton-m-text-size: var(--spectrum-alias-item-text-size-m);
  --spectrum-actionbutton-m-height: var(--spectrum-alias-item-height-m);
  --spectrum-actionbutton-m-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-m);
  --spectrum-actionbutton-m-padding-left: var(--spectrum-alias-item-workflow-padding-left-m);
  --spectrum-actionbutton-m-padding-right: var(--spectrum-alias-item-padding-m);
  --spectrum-actionbutton-m-icononly-padding-left: var(--spectrum-alias-item-icononly-padding-m);
  --spectrum-actionbutton-m-icononly-padding-right: var(--spectrum-alias-item-icononly-padding-m);
  --spectrum-actionbutton-m-textonly-padding-left: var(--spectrum-alias-item-padding-m);
  --spectrum-actionbutton-m-textonly-padding-right: var(--spectrum-alias-item-padding-m);
  --spectrum-actionbutton-l-quiet-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-l-quiet-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-l-quiet-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-l-quiet-text-size: var(--spectrum-alias-item-text-size-l);
  --spectrum-actionbutton-l-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-l-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-l-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-actionbutton-l-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-l-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-actionbutton-l-text-size: var(--spectrum-alias-item-text-size-l);
  --spectrum-actionbutton-l-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-actionbutton-l-height: var(--spectrum-alias-item-height-l);
  --spectrum-actionbutton-l-padding-left: var(--spectrum-alias-item-workflow-padding-left-l);
  --spectrum-actionbutton-l-padding-right: var(--spectrum-alias-item-padding-l);
  --spectrum-actionbutton-l-icononly-padding-left: var(--spectrum-alias-item-icononly-padding-l);
  --spectrum-actionbutton-l-icononly-padding-right: var(--spectrum-alias-item-icononly-padding-l);
  --spectrum-actionbutton-l-textonly-padding-left: var(--spectrum-alias-item-padding-l);
  --spectrum-actionbutton-l-textonly-padding-right: var(--spectrum-alias-item-padding-l);
  --spectrum-actionbutton-xl-quiet-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-xl-quiet-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-xl-quiet-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-xl-quiet-text-size: var(--spectrum-alias-item-text-size-xl);
  --spectrum-actionbutton-xl-border-size: var(--spectrum-alias-border-size-thin);
  --spectrum-actionbutton-xl-border-radius: var(--spectrum-alias-border-radius-regular);
  --spectrum-actionbutton-xl-min-width: var(--spectrum-global-dimension-size-400);
  --spectrum-actionbutton-xl-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-actionbutton-xl-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-actionbutton-xl-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-actionbutton-xl-text-size: var(--spectrum-alias-item-text-size-xl);
  --spectrum-actionbutton-xl-height: var(--spectrum-alias-item-height-xl);
  --spectrum-actionbutton-xl-padding-left: var(--spectrum-alias-item-workflow-padding-left-xl);
  --spectrum-actionbutton-xl-padding-right: var(--spectrum-alias-item-padding-xl);
  --spectrum-actionbutton-xl-icononly-padding-left: var(--spectrum-alias-item-icononly-padding-xl);
  --spectrum-actionbutton-xl-icononly-padding-right: var(--spectrum-alias-item-icononly-padding-xl);
  --spectrum-actionbutton-xl-textonly-padding-left: var(--spectrum-alias-item-padding-xl);
  --spectrum-actionbutton-xl-textonly-padding-right: var(--spectrum-alias-item-padding-xl);
  --spectrum-actionbutton-m-background-color: var(--spectrum-global-color-gray-75);
  --spectrum-actionbutton-m-border-color: var(--spectrum-alias-border-color);
  --spectrum-actionbutton-m-text-color: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-m-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-m-hold-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-m-background-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-m-border-color-hover: var(--spectrum-alias-border-color-hover);
  --spectrum-actionbutton-m-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-hold-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-background-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-m-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-m-quiet-border-size-key-focus: var(--spectrum-alias-border-size-thick);
  --spectrum-actionbutton-m-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-actionbutton-m-hold-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-background-color-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-down: var(--spectrum-alias-border-color-down);
  --spectrum-actionbutton-m-text-color-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-m-hold-icon-color-down: var(--spectrum-alias-icon-color-down);
  --spectrum-actionbutton-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-disabled: var(--spectrum-alias-border-color-disabled);
  --spectrum-actionbutton-m-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-m-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-hold-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-background-color-selected: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-selected: var(--spectrum-alias-border-color);
  --spectrum-actionbutton-m-text-color-selected: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-m-icon-color-selected: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-m-background-color-selected-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-selected-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-m-text-color-selected-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-icon-color-selected-key-focus: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-background-color-selected-hover: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-selected-hover: var(--spectrum-alias-border-color-hover);
  --spectrum-actionbutton-m-text-color-selected-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-icon-color-selected-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-background-color-selected-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-selected-down: var(--spectrum-alias-border-color-down);
  --spectrum-actionbutton-m-text-color-selected-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-m-icon-color-selected-down: var(--spectrum-alias-icon-color-down);
  --spectrum-actionbutton-m-background-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-border-color-selected-disabled: var(--spectrum-alias-border-color-disabled);
  --spectrum-actionbutton-m-text-color-selected-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-m-icon-color-selected-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-emphasized-background-color: var(--spectrum-global-color-gray-75);
  --spectrum-actionbutton-m-emphasized-border-color: var(--spectrum-alias-border-color);
  --spectrum-actionbutton-m-emphasized-text-color: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-m-emphasized-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-m-emphasized-hold-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-actionbutton-m-emphasized-hold-icon-color-selected: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-text-color-selected-hover: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-background-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-m-emphasized-border-color-hover: var(--spectrum-alias-border-color-hover);
  --spectrum-actionbutton-m-emphasized-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-emphasized-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-emphasized-hold-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-emphasized-background-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-actionbutton-m-emphasized-border-color-key-focus: var(--spectrum-alias-border-color-hover);
  --spectrum-actionbutton-m-emphasized-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-emphasized-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-actionbutton-m-emphasized-hold-icon-color-key-focus: var(--spectrum-alias-icon-color-hover);
  --spectrum-actionbutton-m-emphasized-background-color-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-emphasized-border-color-down: var(--spectrum-alias-border-color-down);
  --spectrum-actionbutton-m-emphasized-text-color-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-m-emphasized-hold-icon-color-down: var(--spectrum-alias-icon-color-down);
  --spectrum-actionbutton-m-emphasized-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-emphasized-border-color-disabled: var(--spectrum-alias-border-color-disabled);
  --spectrum-actionbutton-m-emphasized-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-m-emphasized-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-emphasized-hold-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-emphasized-background-color-selected: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-actionbutton-m-emphasized-border-color-selected: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-actionbutton-m-emphasized-text-color-selected: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-icon-color-selected: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-background-color-selected-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-actionbutton-m-emphasized-border-color-selected-key-focus: var(--spectrum-semantic-cta-color-background-key-focus);
  --spectrum-actionbutton-m-emphasized-text-color-selected-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-icon-color-selected-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-background-color-selected-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-actionbutton-m-emphasized-border-color-selected-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-actionbutton-m-emphasized-icon-color-selected-hover: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-background-color-selected-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-actionbutton-m-emphasized-border-color-selected-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-actionbutton-m-emphasized-text-color-selected-down: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-icon-color-selected-down: var(--spectrum-global-color-static-white);
  --spectrum-actionbutton-m-emphasized-background-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-emphasized-border-color-selected-disabled: var(--spectrum-alias-border-color-disabled);
  --spectrum-actionbutton-m-emphasized-text-color-selected-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-m-emphasized-icon-color-selected-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-actionbutton-m-quiet-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-m-quiet-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-m-quiet-background-color-hover: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-m-quiet-border-color-hover: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-quiet-background-color-key-focus: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-m-quiet-border-color-key-focus: var(--spectrum-alias-border-color-focus);
  --spectrum-actionbutton-m-quiet-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-quiet-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-actionbutton-m-quiet-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-m-quiet-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-actionbutton-m-quiet-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-actionbutton-m-quiet-background-color-selected: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-quiet-border-color-selected: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-selected: var(--spectrum-alias-text-color);
  --spectrum-actionbutton-m-quiet-background-color-selected-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-quiet-border-color-selected-key-focus: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-selected-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-quiet-background-color-selected-hover: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-quiet-border-color-selected-hover: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-selected-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-actionbutton-m-quiet-background-color-selected-down: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-quiet-border-color-selected-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-selected-down: var(--spectrum-alias-text-color-down);
  --spectrum-actionbutton-m-quiet-background-color-selected-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-actionbutton-m-quiet-border-color-selected-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-actionbutton-m-quiet-text-color-selected-disabled: var(--spectrum-alias-text-color-disabled);
}