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

The Spectrum CSS top-level backwards compatible package

.spectrum-LogicButton,
.spectrum-ClearButton,
.spectrum-Button {
  --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
  --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
  --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-button-primary-m-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size);
  --spectrum-button-primary-m-focus-ring-color-key-focus: var(--spectrum-alias-focus-ring-color);
  --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-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-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-button-secondary-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-secondary-m-border-color-disabled: var(--spectrum-global-color-gray-200);
  --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-button-primary-s-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size);
  --spectrum-button-primary-s-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-button-primary-s-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-button-primary-s-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-button-primary-s-text-size: var(--spectrum-alias-item-text-size-s);
  --spectrum-button-primary-s-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-s);
  --spectrum-button-primary-s-height: var(--spectrum-alias-item-height-s);
  --spectrum-button-primary-s-padding-left: var(--spectrum-alias-item-rounded-workflow-padding-left-s);
  --spectrum-button-primary-s-padding-right: var(--spectrum-alias-item-rounded-padding-s);
  --spectrum-button-primary-s-border-radius: var(--spectrum-alias-item-rounded-border-radius-s);
  --spectrum-button-primary-s-min-width: var(--spectrum-global-dimension-size-675);
  --spectrum-button-primary-s-textonly-padding-left: var(--spectrum-alias-item-rounded-padding-s);
  --spectrum-button-primary-s-textonly-padding-right: var(--spectrum-alias-item-rounded-padding-s);
  --spectrum-button-primary-s-text-padding-top: var(--spectrum-alias-item-text-padding-top-s);
  --spectrum-button-primary-m-min-width: undefined;
  --spectrum-button-primary-m-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-button-primary-m-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-button-primary-m-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-button-primary-m-text-size: var(--spectrum-alias-item-text-size-m);
  --spectrum-button-primary-m-text-padding-top: var(--spectrum-alias-item-text-padding-top-m);
  --spectrum-button-primary-m-height: var(--spectrum-alias-item-height-m);
  --spectrum-button-primary-m-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-m);
  --spectrum-button-primary-m-padding-left: var(--spectrum-alias-item-rounded-workflow-padding-left-m);
  --spectrum-button-primary-m-padding-right: var(--spectrum-alias-item-rounded-padding-m);
  --spectrum-button-primary-m-border-radius: var(--spectrum-alias-item-rounded-border-radius-m);
  --spectrum-button-primary-m-textonly-padding-left: var(--spectrum-alias-item-rounded-padding-m);
  --spectrum-button-primary-m-textonly-padding-right: var(--spectrum-alias-item-rounded-padding-m);
  --spectrum-button-primary-l-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size);
  --spectrum-button-primary-l-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-button-primary-l-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-button-primary-l-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-button-primary-l-text-size: var(--spectrum-alias-item-text-size-l);
  --spectrum-button-primary-l-text-padding-top: var(--spectrum-alias-item-text-padding-top-l);
  --spectrum-button-primary-l-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-button-primary-l-height: var(--spectrum-alias-item-height-l);
  --spectrum-button-primary-l-padding-left: var(--spectrum-alias-item-rounded-workflow-padding-left-l);
  --spectrum-button-primary-l-padding-right: var(--spectrum-alias-item-rounded-padding-l);
  --spectrum-button-primary-l-border-radius: var(--spectrum-alias-item-rounded-border-radius-l);
  --spectrum-button-primary-l-min-width: var(--spectrum-global-dimension-size-1125);
  --spectrum-button-primary-l-textonly-padding-left: var(--spectrum-alias-item-rounded-padding-l);
  --spectrum-button-primary-l-textonly-padding-right: var(--spectrum-alias-item-rounded-padding-l);
  --spectrum-button-primary-xl-focus-ring-size-key-focus: var(--spectrum-alias-focus-ring-size);
  --spectrum-button-primary-xl-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-button-primary-xl-text-line-height: var(--spectrum-alias-component-text-line-height);
  --spectrum-button-primary-xl-border-size: var(--spectrum-alias-border-size-thick);
  --spectrum-button-primary-xl-icon-gap: var(--spectrum-alias-item-workflow-icon-gap-l);
  --spectrum-button-primary-xl-text-size: var(--spectrum-alias-item-text-size-xl);
  --spectrum-button-primary-xl-text-padding-top: var(--spectrum-alias-item-text-padding-top-xl);
  --spectrum-button-primary-xl-height: var(--spectrum-alias-item-height-xl);
  --spectrum-button-primary-xl-padding-left: var(--spectrum-alias-item-rounded-workflow-padding-left-xl);
  --spectrum-button-primary-xl-padding-right: var(--spectrum-alias-item-rounded-padding-xl);
  --spectrum-button-primary-xl-border-radius: var(--spectrum-alias-item-rounded-border-radius-xl);
  --spectrum-button-primary-xl-min-width: var(--spectrum-global-dimension-size-1250);
  --spectrum-button-primary-xl-textonly-padding-left: var(--spectrum-alias-item-rounded-padding-xl);
  --spectrum-button-primary-xl-textonly-padding-right: var(--spectrum-alias-item-rounded-padding-xl);
  --spectrum-button-cta-m-background-color: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-button-cta-m-border-color: var(--spectrum-semantic-cta-color-background-default);
  --spectrum-button-cta-m-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-m-background-color-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-m-border-color-hover: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-m-text-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-m-background-color-key-focus: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-m-border-color-key-focus: var(--spectrum-semantic-cta-color-background-hover);
  --spectrum-button-cta-m-text-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-m-background-color-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-button-cta-m-border-color-down: var(--spectrum-semantic-cta-color-background-down);
  --spectrum-button-cta-m-text-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-cta-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-cta-m-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-cta-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-primary-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-primary-m-border-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-text-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-background-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-border-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-primary-m-background-color-key-focus: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-border-color-key-focus: var(--spectrum-global-color-gray-800);
  --spectrum-button-primary-m-text-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-button-primary-m-background-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-primary-m-border-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-primary-m-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-primary-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-primary-m-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-primary-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-secondary-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-secondary-m-border-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-text-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-background-color-hover: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-border-color-hover: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-secondary-m-background-color-key-focus: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-border-color-key-focus: var(--spectrum-global-color-gray-700);
  --spectrum-button-secondary-m-text-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-button-secondary-m-background-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-secondary-m-border-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-secondary-m-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-secondary-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-warning-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-warning-m-border-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-text-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-background-color-hover: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-border-color-hover: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-text-color-hover: var(--spectrum-global-color-gray-50);
  --spectrum-button-warning-m-background-color-key-focus: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-border-color-key-focus: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-warning-m-text-color-key-focus: var(--spectrum-global-color-gray-50);
  --spectrum-button-warning-m-background-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-warning-m-border-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-warning-m-text-color-down: var(--spectrum-global-color-gray-50);
  --spectrum-button-warning-m-background-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-warning-m-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-button-warning-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-over-background-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-over-background-m-border-color: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-background-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-border-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);
  --spectrum-button-over-background-m-border-color-key-focus: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-background-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-border-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-over-background-m-background-color-disabled: rgba(255,255,255,0.1);
  --spectrum-button-over-background-m-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-over-background-m-text-color-disabled: rgba(255,255,255,0.35);
  --spectrum-button-quiet-over-background-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-over-background-m-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-m-text-color: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-m-background-color-hover: rgba(255,255,255,0.1);
  --spectrum-button-quiet-over-background-m-border-color-hover: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-m-text-color-hover: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-m-background-color-down: rgba(255,255,255,0.2);
  --spectrum-button-quiet-over-background-m-border-color-down: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-m-text-color-down: var(--spectrum-global-color-static-white);
  --spectrum-button-quiet-over-background-m-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-over-background-m-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-over-background-m-text-color-disabled: rgba(255,255,255,0.15);
  --spectrum-button-quiet-primary-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-primary-m-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-primary-m-text-color: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-primary-m-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-m-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-m-text-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-button-quiet-primary-m-background-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-m-border-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-primary-m-text-color-key-focus: var(--spectrum-global-color-gray-900);
  --spectrum-button-quiet-primary-m-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-primary-m-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-primary-m-text-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-button-quiet-primary-m-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-primary-m-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-primary-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-quiet-secondary-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-secondary-m-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-secondary-m-text-color: var(--spectrum-global-color-gray-700);
  --spectrum-button-quiet-secondary-m-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-m-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-m-text-color-hover: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-secondary-m-background-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-m-border-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-secondary-m-text-color-key-focus: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-secondary-m-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-secondary-m-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-secondary-m-text-color-down: var(--spectrum-global-color-gray-800);
  --spectrum-button-quiet-secondary-m-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-secondary-m-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-secondary-m-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-button-quiet-warning-m-background-color: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-warning-m-border-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-warning-m-text-color: var(--spectrum-semantic-negative-color-text-small);
  --spectrum-button-quiet-warning-m-background-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-m-border-color-hover: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-m-text-color-hover: var(--spectrum-global-color-red-700);
  --spectrum-button-quiet-warning-m-background-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-m-border-color-key-focus: var(--spectrum-global-color-gray-200);
  --spectrum-button-quiet-warning-m-text-color-key-focus: var(--spectrum-global-color-red-700);
  --spectrum-button-quiet-warning-m-background-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-warning-m-border-color-down: var(--spectrum-global-color-gray-300);
  --spectrum-button-quiet-warning-m-text-color-down: var(--spectrum-global-color-red-700);
  --spectrum-button-quiet-warning-m-background-color-disabled: var(--spectrum-alias-background-color-transparent);
  --spectrum-button-quiet-warning-m-border-color-disabled: var(--spectrum-alias-border-color-transparent);
  --spectrum-button-quiet-warning-m-text-color-disabled: var(--spectrum-global-color-gray-500);
}