@adobe/spectrum-css/dist/vars/spectrum-global-unique.css

The Spectrum CSS top-level backwards compatible package

.spectrum {  /* spectrum-animationGlobals.css */
  --spectrum-global-animation-duration-100: 130ms;
  --spectrum-global-animation-duration-200: 160ms;
  --spectrum-global-animation-duration-300: 190ms;
  --spectrum-global-animation-duration-500: 250ms;
  --spectrum-global-animation-duration-600: 300ms;
  --spectrum-global-animation-duration-2000: 1000ms;
  --spectrum-global-animation-ease-in-out: cubic-bezier(.45, 0, .40, 1);
  --spectrum-global-animation-ease-in: cubic-bezier(.50, 0, 1, 1);
  --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.40, 1);


  /* spectrum-colorGlobals.css */
  --spectrum-global-color-static-white: rgb(255, 255, 255);
  --spectrum-global-color-static-blue: rgb(20, 115, 230);
  --spectrum-global-color-static-gray-500: rgb(188, 188, 188);
  --spectrum-global-color-static-gray-700: rgb(116, 116, 116);
  --spectrum-global-color-static-blue-600: rgb(20, 115, 230);
  --spectrum-global-color-static-blue-700: rgb(13, 102, 208);
  --spectrum-global-color-static-red-600: rgb(215, 55, 63);
  --spectrum-global-color-static-red-700: rgb(201, 37, 45);
  --spectrum-global-color-static-orange-600: rgb(218, 123, 17);
  --spectrum-global-color-static-orange-700: rgb(203, 111, 16);
  --spectrum-global-color-static-green-600: rgb(38, 142, 108);
  --spectrum-global-color-static-green-700: rgb(18, 128, 92);


  /* spectrum-colorSemantics.css */
  --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500);
  --spectrum-semantic-negative-color-border: var(--spectrum-global-color-red-400);
  --spectrum-semantic-negative-color-icon: var(--spectrum-global-color-red-600);
  --spectrum-semantic-negative-color-status: var(--spectrum-global-color-red-400);
  --spectrum-semantic-negative-color-text-small: var(--spectrum-global-color-red-600);
  --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500);
  --spectrum-semantic-notice-color-border: var(--spectrum-global-color-orange-400);
  --spectrum-semantic-notice-color-icon: var(--spectrum-global-color-orange-600);
  --spectrum-semantic-notice-color-status: var(--spectrum-global-color-orange-400);
  --spectrum-semantic-positive-color-border: var(--spectrum-global-color-green-400);
  --spectrum-semantic-positive-color-icon: var(--spectrum-global-color-green-600);
  --spectrum-semantic-positive-color-status: var(--spectrum-global-color-green-400);
  --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500);
  --spectrum-semantic-informative-color-border: var(--spectrum-global-color-blue-400);
  --spectrum-semantic-informative-color-icon: var(--spectrum-global-color-blue-600);
  --spectrum-semantic-informative-color-status: var(--spectrum-global-color-blue-400);
  --spectrum-semantic-cta-color-background-default: var(--spectrum-global-color-static-blue-600);
  --spectrum-semantic-cta-color-background-hover: var(--spectrum-global-color-static-blue-700);
  --spectrum-semantic-cta-color-background-down: var(--spectrum-global-color-static-blue-700);
  --spectrum-semantic-cta-color-background-key-focus: var(--spectrum-global-color-static-blue-600);


  /* spectrum-dimensionGlobals.css */
  --spectrum-global-dimension-static-size-0: 0px;
  --spectrum-global-dimension-static-size-10: 1px;
  --spectrum-global-dimension-static-size-25: 2px;
  --spectrum-global-dimension-static-size-50: 4px;
  --spectrum-global-dimension-static-size-100: 8px;
  --spectrum-global-dimension-static-size-125: 10px;
  --spectrum-global-dimension-static-size-150: 12px;
  --spectrum-global-dimension-static-size-200: 16px;
  --spectrum-global-dimension-static-size-250: 20px;
  --spectrum-global-dimension-static-size-300: 24px;
  --spectrum-global-dimension-static-size-400: 32px;
  --spectrum-global-dimension-static-size-500: 40px;
  --spectrum-global-dimension-static-size-600: 48px;
  --spectrum-global-dimension-static-size-1000: 80px;
  --spectrum-global-dimension-static-size-3400: 272px;
  --spectrum-global-dimension-static-size-3600: 288px;
  --spectrum-global-dimension-static-size-4600: 368px;
  --spectrum-global-dimension-static-font-size-100: 14px;


  /* spectrum-fontGlobals.css */
  --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', Georgia, serif;
  --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace;
  --spectrum-global-font-weight-light: 300;
  --spectrum-global-font-weight-regular: 400;
  --spectrum-global-font-weight-medium: 500;
  --spectrum-global-font-weight-bold: 700;
  --spectrum-global-font-weight-extra-bold: 800;
  --spectrum-global-font-weight-black: 900;
  --spectrum-global-font-style-regular: normal;
  --spectrum-global-font-style-italic: italic;
  --spectrum-global-font-letter-spacing-none: 0;
  --spectrum-global-font-letter-spacing-small: 0.0125em;
  --spectrum-global-font-letter-spacing-han: 0.05em;
  --spectrum-global-font-letter-spacing-medium: 0.06em;
  --spectrum-global-font-line-height-large: 1.7;
  --spectrum-global-font-line-height-medium: 1.5;
  --spectrum-global-font-line-height-small: 1.3;


  /* spectrum-staticAliases.css */
  --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10);
  --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25);
  --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50);
  --spectrum-alias-body-han-text-line-height: var(--spectrum-global-font-line-height-large);
  --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium);
  --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-heading-han-text-line-height: var(--spectrum-global-font-line-height-medium);
  --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small);
  --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light);
  --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-article-text-font-family: var(--spectrum-global-font-family-serif);
  --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code);
  --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold);
  --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light);
  --spectrum-alias-han-heading-text-font-weight-quiet-emphasis: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-han-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-heading-text-font-weight-strong-emphasis: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold);
  --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black);
  --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium);

}

.spectrum--medium,
.spectrum--large {
  /* spectrum-dimensionAliases.css */
  --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-line-height-medium: var(--spectrum-global-dimension-size-250);
  --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10);
  --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);
  --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50);
  --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400);
  --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400);
  --spectrum-alias-workflow-icon-size: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-heading-han-display1-text-size: var(--spectrum-global-dimension-font-size-1000);
  --spectrum-alias-heading-han-display2-text-size: var(--spectrum-global-dimension-font-size-900);
  --spectrum-alias-heading1-han-text-size: var(--spectrum-global-dimension-font-size-800);
  --spectrum-alias-heading2-han-text-size: var(--spectrum-global-dimension-font-size-600);
  --spectrum-alias-heading3-han-text-size: var(--spectrum-global-dimension-font-size-400);
  --spectrum-alias-heading4-text-size: var(--spectrum-global-dimension-font-size-300);
  --spectrum-alias-heading4-margin-top: var(--spectrum-global-dimension-font-size-200);
  --spectrum-alias-heading5-text-size: var(--spectrum-global-dimension-font-size-200);
  --spectrum-alias-heading5-margin-top: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-heading6-text-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-heading6-margin-top: var(--spectrum-global-dimension-font-size-75);
}

.spectrum--darkest,
.spectrum--dark,
.spectrum--light,
.spectrum--lightest {
  /* spectrum-colorAliases.css */
  --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100);
  --spectrum-alias-background-color-transparent: transparent;
  --spectrum-alias-background-color-quickactions-overlay: rgba(0,0,0,0.2);
  --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-600);
  --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700);
  --spectrum-alias-text-color: var(--spectrum-global-color-gray-800);
  --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600);
  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-alias-title-text-color: var(--spectrum-global-color-gray-900);
  --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
  --spectrum-alias-border-color: var(--spectrum-global-color-gray-300);
  --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-400);
  --spectrum-alias-border-color-focus: var(--spectrum-global-color-blue-400);
  --spectrum-alias-border-color-down: var(--spectrum-global-color-blue-500);
  --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100);
  --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300);
  --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400);
  --spectrum-alias-border-color-transparent: transparent;
  --spectrum-alias-border-color-translucent-dark: rgba(0,0,0,0.05);
  --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
  --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300);
  --spectrum-alias-track-color-over-background: rgba(255,255,255,0.2);
  --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700);
  --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900);
  --spectrum-alias-icon-color-focus: var(--spectrum-global-color-gray-900);
  --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400);
  --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500);
  --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600);
  --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700);
  --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600);
}