@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-linear: cubic-bezier(0, 0, 1, 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-blue-800: rgb(9, 90, 186);
  --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-background: var(--spectrum-global-color-static-red-700);
  --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500);
  --spectrum-semantic-negative-color-state-hover: var(--spectrum-global-color-red-600);
  --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-negative-color-state-down: var(--spectrum-global-color-red-700);
  --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600);
  --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700);
  --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700);
  --spectrum-semantic-notice-color-status: var(--spectrum-global-color-orange-400);
  --spectrum-semantic-positive-color-background: var(--spectrum-global-color-static-green-700);
  --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-background: var(--spectrum-global-color-static-blue-700);
  --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-800);
  --spectrum-semantic-cta-color-background-key-focus: var(--spectrum-global-color-static-blue-600);
  --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700);


  /* 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-40: 3px;
  --spectrum-global-dimension-static-size-50: 4px;
  --spectrum-global-dimension-static-size-65: 5px;
  --spectrum-global-dimension-static-size-85: 7px;
  --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-175: 14px;
  --spectrum-global-dimension-static-size-200: 16px;
  --spectrum-global-dimension-static-size-225: 18px;
  --spectrum-global-dimension-static-size-250: 20px;
  --spectrum-global-dimension-static-size-300: 24px;
  --spectrum-global-dimension-static-size-325: 26px;
  --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-800: 64px;
  --spectrum-global-dimension-static-size-1000: 80px;
  --spectrum-global-dimension-static-size-2400: 192px;
  --spectrum-global-dimension-static-size-2500: 200px;
  --spectrum-global-dimension-static-size-2800: 224px;
  --spectrum-global-dimension-static-size-3400: 272px;
  --spectrum-global-dimension-static-size-3500: 280px;
  --spectrum-global-dimension-static-size-3600: 288px;
  --spectrum-global-dimension-static-font-size-100: 14px;


  /* spectrum-fontGlobals.css */
  --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
  --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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
  --spectrum-alias-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
  --spectrum-alias-font-family-zh: adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light','sans-serif';
  --spectrum-alias-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif';
  --spectrum-alias-font-family-ko: adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif';
  --spectrum-alias-font-family-ja: adobe-clean-han-japanese, source-han-japanese, 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4  Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', 'sans-serif';
  --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base);
  --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-component-text-line-height: var(--spectrum-global-font-line-height-small);
  --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-detail-text-font-weight: var(--spectrum-global-font-weight-bold);
  --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif);
  --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code);
  --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium);
  --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-light-emphasis: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black);
  --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large);
  --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular);
  --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium);
  --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25);
  --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25);

}

.spectrum--medium,
.spectrum--large {
  /* spectrum-dimensionAliases.css */
  --spectrum-alias-font-size-default: 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-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-item-height-s: var(--spectrum-global-dimension-size-300);
  --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400);
  --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500);
  --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600);
  --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150);
  --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250);
  --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300);
  --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75);
  --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200);
  --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300);
  --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50);
  --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75);
  --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150);
  --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115);
  --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115);
  --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150);
  --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185);
  --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150);
  --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250);
  --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300);
  --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50);
  --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85);
  --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125);
  --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160);
  --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85);
  --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160);
  --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185);
  --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125);
  --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100);
  --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175);
  --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175);
  --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275);
  --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225);
  --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200);
  --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300);
  --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65);
  --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75);
  --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100);
  --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115);
  --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125);
  --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130);
  --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160);
  --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85);
  --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115);
  --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85);
  --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100);
  --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115);
  --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125);
  --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300);
  --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200);
  --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100);
  --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900);
  --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900);
  --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900);
  --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800);
  --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800);
  --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700);
  --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600);
  --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600);
  --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500);
  --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400);
  --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400);
  --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300);
  --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200);
  --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200);
  --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100);
  --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75);
  --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200);
}

.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-disabled: var(--spectrum-global-color-gray-200);
  --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-800);
  --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900);
  --spectrum-alias-placeholder-text-color-down: 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-text-color-selected-neutral: var(--spectrum-global-color-gray-900);
  --spectrum-alias-text-color-over-background: var(--spectrum-global-color-static-white);
  --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
  --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
  --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
  --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);
  --spectrum-alias-border-color-focus: var(--spectrum-global-color-blue-400);
  --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500);
  --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200);
  --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100);
  --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200);
  --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-darker-default: var(--spectrum-global-color-gray-600);
  --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900);
  --spectrum-alias-border-color-transparent: transparent;
  --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400);
  --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color);
  --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-over-background: var(--spectrum-global-color-static-white);
  --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-neutral: var(--spectrum-global-color-gray-900);
  --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-colorhandle-outer-border-color: rgba(0,0,0,0.42);
}