@adobe/spectrum-css/dist/components/vars/globals/spectrum-colorAliases.css

The Spectrum CSS top-level backwards compatible package

.spectrum--darkest,
.spectrum--dark,
.spectrum--light,
.spectrum--lightest {
  --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-over-background-down: rgba(255,255,255,0.2);
  --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-placeholder-text-color-selected: var(--spectrum-global-color-gray-800);
  --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-mouse-focus: var(--spectrum-global-color-blue-600);
  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500);
  --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500);
  --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600);
  --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-text-color-over-background-disabled: rgba(255,255,255,0.2);
  --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-darker-down: var(--spectrum-global-color-gray-900);
  --spectrum-alias-border-color-transparent: transparent;
  --spectrum-alias-border-color-translucent-dark: rgba(0,0,0,0.05);
  --spectrum-alias-border-color-translucent-darker: rgba(0,0,0,0.1);
  --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-disabled: 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-over-background-disabled: rgba(255,255,255,0.2);
  --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-icon-color-selected-focus: var(--spectrum-global-color-blue-600);
  --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30);
  --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100);
  --spectrum-alias-colorhandle-outer-border-color: rgba(0,0,0,0.42);
  --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800);
  --spectrum-alias-code-highlight-color-background: var(--spectrum-global-color-gray-75);
  --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600);
  --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600);
  --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600);
  --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600);
  --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600);
  --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600);
  --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600);
  --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600);
  --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600);
  --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700);
  --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200);
  --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700);
  --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500);
  --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500);
  --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200);
  --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200);
  --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500);
  --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800);
  --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500);
  --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700);
  --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600);
  --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300);
  --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200);
  --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500);
  --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200);
  --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200);
}