@spectrum-web-components/styles
Version:
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma
362 lines (359 loc) • 19.5 kB
CSS
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
:host,
:root {
--spectrum-transparent-white-100: rgba(255, 255, 255, 0);
--spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
--spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
--spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);
--spectrum-transparent-white-500: rgba(255, 255, 255, 0.55);
--spectrum-transparent-white-600: rgba(255, 255, 255, 0.7);
--spectrum-transparent-white-700: rgba(255, 255, 255, 0.8);
--spectrum-transparent-white-800: rgba(255, 255, 255, 0.9);
--spectrum-transparent-white-900: rgb(255, 255, 255);
--spectrum-transparent-black-100: rgba(0, 0, 0, 0);
--spectrum-transparent-black-200: rgba(0, 0, 0, 0.1);
--spectrum-transparent-black-300: rgba(0, 0, 0, 0.25);
--spectrum-transparent-black-400: rgba(0, 0, 0, 0.4);
--spectrum-transparent-black-500: rgba(0, 0, 0, 0.55);
--spectrum-transparent-black-600: rgba(0, 0, 0, 0.7);
--spectrum-transparent-black-700: rgba(0, 0, 0, 0.8);
--spectrum-transparent-black-800: rgba(0, 0, 0, 0.9);
--spectrum-transparent-black-900: rgb(0, 0, 0);
--spectrum-focus-indicator-color: var(--spectrum-blue-800);
--spectrum-static-white-focus-indicator-color: var(--spectrum-white);
--spectrum-static-black-focus-indicator-color: var(--spectrum-black);
--spectrum-overlay-color: var(--spectrum-black);
--spectrum-neutral-content-color-default: var(--spectrum-gray-800);
--spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
--spectrum-neutral-content-color-down: var(--spectrum-gray-900);
--spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900);
--spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700);
--spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800);
--spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-900);
--spectrum-neutral-subdued-content-color-key-focus: var(
--spectrum-gray-800
);
--spectrum-accent-content-color-default: var(--spectrum-accent-color-900);
--spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000);
--spectrum-accent-content-color-down: var(--spectrum-accent-color-1100);
--spectrum-accent-content-color-key-focus: var(
--spectrum-accent-color-1000
);
--spectrum-negative-content-color-default: var(
--spectrum-negative-color-900
);
--spectrum-negative-content-color-hover: var(
--spectrum-negative-color-1000
);
--spectrum-negative-content-color-down: var(--spectrum-negative-color-1100);
--spectrum-negative-content-color-key-focus: var(
--spectrum-negative-color-1000
);
--spectrum-disabled-content-color: var(--spectrum-gray-400);
--spectrum-disabled-static-white-content-color: var(
--spectrum-transparent-white-500
);
--spectrum-disabled-static-black-content-color: var(
--spectrum-transparent-black-500
);
--spectrum-disabled-background-color: var(--spectrum-gray-200);
--spectrum-disabled-static-white-background-color: var(
--spectrum-transparent-white-200
);
--spectrum-disabled-static-black-background-color: var(
--spectrum-transparent-black-200
);
--spectrum-disabled-border-color: var(--spectrum-gray-300);
--spectrum-disabled-static-white-border-color: var(
--spectrum-transparent-white-300
);
--spectrum-disabled-static-black-border-color: var(
--spectrum-transparent-black-300
);
--spectrum-opacity-disabled: 0.3;
--spectrum-background-opacity-default: 0;
--spectrum-background-opacity-hover: 0.1;
--spectrum-background-opacity-down: 0.1;
--spectrum-background-opacity-key-focus: 0.1;
--spectrum-negative-border-color-default: var(
--spectrum-negative-color-900
);
--spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000);
--spectrum-negative-border-color-down: var(--spectrum-negative-color-1100);
--spectrum-negative-border-color-key-focus: var(
--spectrum-negative-color-1000
);
--spectrum-informative-color-100: var(--spectrum-blue-100);
--spectrum-informative-color-200: var(--spectrum-blue-200);
--spectrum-informative-color-300: var(--spectrum-blue-300);
--spectrum-informative-color-400: var(--spectrum-blue-400);
--spectrum-informative-color-500: var(--spectrum-blue-500);
--spectrum-informative-color-600: var(--spectrum-blue-600);
--spectrum-informative-color-700: var(--spectrum-blue-700);
--spectrum-informative-color-800: var(--spectrum-blue-800);
--spectrum-informative-color-900: var(--spectrum-blue-900);
--spectrum-informative-color-1000: var(--spectrum-blue-1000);
--spectrum-informative-color-1100: var(--spectrum-blue-1100);
--spectrum-informative-color-1200: var(--spectrum-blue-1200);
--spectrum-informative-color-1300: var(--spectrum-blue-1300);
--spectrum-informative-color-1400: var(--spectrum-blue-1400);
--spectrum-negative-color-100: var(--spectrum-red-100);
--spectrum-negative-color-200: var(--spectrum-red-200);
--spectrum-negative-color-300: var(--spectrum-red-300);
--spectrum-negative-color-400: var(--spectrum-red-400);
--spectrum-negative-color-500: var(--spectrum-red-500);
--spectrum-negative-color-600: var(--spectrum-red-600);
--spectrum-negative-color-700: var(--spectrum-red-700);
--spectrum-negative-color-800: var(--spectrum-red-800);
--spectrum-negative-color-900: var(--spectrum-red-900);
--spectrum-negative-color-1000: var(--spectrum-red-1000);
--spectrum-negative-color-1100: var(--spectrum-red-1100);
--spectrum-negative-color-1200: var(--spectrum-red-1200);
--spectrum-negative-color-1300: var(--spectrum-red-1300);
--spectrum-negative-color-1400: var(--spectrum-red-1400);
--spectrum-notice-color-100: var(--spectrum-orange-100);
--spectrum-notice-color-200: var(--spectrum-orange-200);
--spectrum-notice-color-300: var(--spectrum-orange-300);
--spectrum-notice-color-400: var(--spectrum-orange-400);
--spectrum-notice-color-500: var(--spectrum-orange-500);
--spectrum-notice-color-600: var(--spectrum-orange-600);
--spectrum-notice-color-700: var(--spectrum-orange-700);
--spectrum-notice-color-800: var(--spectrum-orange-800);
--spectrum-notice-color-900: var(--spectrum-orange-900);
--spectrum-notice-color-1000: var(--spectrum-orange-1000);
--spectrum-notice-color-1100: var(--spectrum-orange-1100);
--spectrum-notice-color-1200: var(--spectrum-orange-1200);
--spectrum-notice-color-1300: var(--spectrum-orange-1300);
--spectrum-notice-color-1400: var(--spectrum-orange-1400);
--spectrum-positive-color-100: var(--spectrum-green-100);
--spectrum-positive-color-200: var(--spectrum-green-200);
--spectrum-positive-color-300: var(--spectrum-green-300);
--spectrum-positive-color-400: var(--spectrum-green-400);
--spectrum-positive-color-500: var(--spectrum-green-500);
--spectrum-positive-color-600: var(--spectrum-green-600);
--spectrum-positive-color-700: var(--spectrum-green-700);
--spectrum-positive-color-800: var(--spectrum-green-800);
--spectrum-positive-color-900: var(--spectrum-green-900);
--spectrum-positive-color-1000: var(--spectrum-green-1000);
--spectrum-positive-color-1100: var(--spectrum-green-1100);
--spectrum-positive-color-1200: var(--spectrum-green-1200);
--spectrum-positive-color-1300: var(--spectrum-green-1300);
--spectrum-positive-color-1400: var(--spectrum-green-1400);
--spectrum-black: rgb(0, 0, 0);
--spectrum-white: rgb(255, 255, 255);
--spectrum-swatch-border-color: var(--spectrum-gray-900);
--spectrum-swatch-border-opacity: 0.51;
--spectrum-swatch-disabled-icon-border-color: var(--spectrum-black);
--spectrum-swatch-disabled-icon-border-opacity: 0.51;
--spectrum-alert-dialog-minimum-width: 288px;
--spectrum-alert-dialog-maximum-width: 480px;
--spectrum-button-minimum-width-multiplier: 2.25;
--spectrum-divider-thickness-small: 1px;
--spectrum-divider-thickness-medium: 2px;
--spectrum-divider-thickness-large: 4px;
--spectrum-field-label-to-component: 0px;
--spectrum-menu-item-label-to-description: 1px;
--spectrum-meter-minimum-width: 48px;
--spectrum-meter-maximum-width: 768px;
--spectrum-swatch-rectangle-width-multiplier: 2;
--spectrum-swatch-slash-thickness-extra-small: 2px;
--spectrum-swatch-slash-thickness-small: 3px;
--spectrum-swatch-slash-thickness-medium: 4px;
--spectrum-swatch-slash-thickness-large: 5px;
--spectrum-progress-bar-minimum-width: 48px;
--spectrum-progress-bar-maximum-width: 768px;
--spectrum-radio-button-selection-indicator: 4px;
--spectrum-help-text-to-component: 0px;
--spectrum-popover-tip-width: 16px;
--spectrum-popover-tip-height: 8px;
--spectrum-sans-serif-heading-light: var(--spectrum-font-light-default);
--spectrum-serif-heading-light: var(--spectrum-font-regular-default);
--spectrum-heading-heavy: var(--spectrum-font-black-default);
--spectrum-heading-light-strong: var(--spectrum-font-bold-default);
--spectrum-heading-strong: var(--spectrum-font-black-default);
--spectrum-heading-heavy-strong: var(--spectrum-font-black-default);
--spectrum-sans-serif-heading-light-emphasized: var(
--spectrum-font-light-italic-default
);
--spectrum-serif-heading-light-emphasized: var(
--spectrum-font-italic-default
);
--spectrum-heading-heavy-emphasized: var(
--spectrum-font-black-italic-default
);
--spectrum-heading-light-strong-emphasized: var(
--spectrum-font-bold-italic-default
);
--spectrum-heading-strong-emphasized: var(
--spectrum-font-black-italic-default
);
--spectrum-heading-heavy-strong-emphasized: var(
--spectrum-font-black-italic-default
);
--spectrum-cjk-heading-light: var(--spectrum-font-light-cjk);
--spectrum-cjk-heading-heavy: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-light-strong: var(--spectrum-font-extra-bold-cjk);
--spectrum-cjk-heading-strong: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-heavy-strong: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-light-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-heavy-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-light-strong-emphasized: var(
--spectrum-font-extra-bold-cjk
);
--spectrum-cjk-heading-strong-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-heading-heavy-strong-emphasized: var(
--spectrum-font-black-cjk
);
--spectrum-heading-size-xxxl: var(--spectrum-font-size-1300);
--spectrum-heading-size-xxl: var(--spectrum-font-size-1100);
--spectrum-heading-size-xl: var(--spectrum-font-size-900);
--spectrum-heading-size-l: var(--spectrum-font-size-700);
--spectrum-heading-size-m: var(--spectrum-font-size-500);
--spectrum-heading-size-s: var(--spectrum-font-size-300);
--spectrum-heading-size-xs: var(--spectrum-font-size-200);
--spectrum-heading-size-xxs: var(--spectrum-font-size-100);
--spectrum-heading-line-height: var(--spectrum-line-height-100);
--spectrum-cjk-heading-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-heading-margin-top-multiplier: 0.8889;
--spectrum-heading-margin-bottom-multiplier: 0.25;
--spectrum-body: var(--spectrum-font-regular-default);
--spectrum-body-strong: var(--spectrum-font-bold-default);
--spectrum-body-emphasized: var(--spectrum-font-italic-default);
--spectrum-body-strong-emphasized: var(--spectrum-font-bold-italic-default);
--spectrum-cjk-body: var(--spectrum-font-regular-cjk);
--spectrum-cjk-body-strong: var(--spectrum-font-black-cjk);
--spectrum-cjk-body-emphasized: var(--spectrum-font-extra-bold-cjk);
--spectrum-cjk-body-strong-emphasized: var(--spectrum-font-black-cjk);
--spectrum-body-size-xxxl: var(--spectrum-font-size-600);
--spectrum-body-size-xxl: var(--spectrum-font-size-500);
--spectrum-body-size-xl: var(--spectrum-font-size-400);
--spectrum-body-size-l: var(--spectrum-font-size-300);
--spectrum-body-size-m: var(--spectrum-font-size-200);
--spectrum-body-size-s: var(--spectrum-font-size-100);
--spectrum-body-size-xs: var(--spectrum-font-size-75);
--spectrum-body-line-height: var(--spectrum-line-height-200);
--spectrum-cjk-body-line-height: var(--spectrum-cjk-line-height-200);
--spectrum-body-margin-multiplier: 0.75;
--spectrum-detail: var(--spectrum-font-bold-default);
--spectrum-detail-light: var(--spectrum-font-regular-default);
--spectrum-detail-strong: var(--spectrum-font-bold-default);
--spectrum-detail-light-strong: var(--spectrum-font-regular-default);
--spectrum-detail-emphasized: var(--spectrum-font-bold-italic-default);
--spectrum-detail-light-emphasized: var(--spectrum-font-italic-default);
--spectrum-detail-strong-emphasized: var(
--spectrum-font-bold-italic-default
);
--spectrum-detail-light-strong-emphasized: var(
--spectrum-font-italic-default
);
--spectrum-cjk-detail: var(--spectrum-font-extra-bold-cjk);
--spectrum-cjk-detail-light: var(--spectrum-font-light-cjk);
--spectrum-cjk-detail-strong: var(--spectrum-font-black-cjk);
--spectrum-cjk-detail-light-strong: var(--spectrum-font-extra-bold-cjk);
--spectrum-cjk-detail-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-detail-light-emphasized: var(--spectrum-font-regular-cjk);
--spectrum-cjk-detail-strong-emphasized: var(--spectrum-font-black-cjk);
--spectrum-cjk-detail-light-strong-emphasized: var(
--spectrum-font-extra-bold-cjk
);
--spectrum-detail-size-xl: var(--spectrum-font-size-200);
--spectrum-detail-size-l: var(--spectrum-font-size-100);
--spectrum-detail-size-m: var(--spectrum-font-size-75);
--spectrum-detail-size-s: var(--spectrum-font-size-50);
--spectrum-detail-line-height: var(--spectrum-line-height-100);
--spectrum-cjk-detail-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-detail-margin-top-mulitplier: 0.8889;
--spectrum-detail-margin-bottom-multiplier: 0.25;
--spectrum-detail-letter-spacing: 0.06em;
--spectrum-code: var(--spectrum-font-regular-default);
--spectrum-code-strong: var(--spectrum-font-bold-default);
--spectrum-code-emphasized: var(--spectrum-font-italic-default);
--spectrum-code-strong-emphasized: var(--spectrum-font-bold-italic-default);
--spectrum-cjk-code: var(--spectrum-font-regular-cjk);
--spectrum-cjk-code-strong: var(--spectrum-font-black-cjk);
--spectrum-cjk-code-emphasized: var(--spectrum-font-bold-cjk);
--spectrum-cjk-code-strong-emphasized: var(--spectrum-font-black-cjk);
--spectrum-code-size-xl: var(--spectrum-font-size-400);
--spectrum-code-size-l: var(--spectrum-font-size-300);
--spectrum-code-size-m: var(--spectrum-font-size-200);
--spectrum-code-size-s: var(--spectrum-font-size-100);
--spectrum-code-size-xs: var(--spectrum-font-size-75);
--spectrum-code-line-height: var(--spectrum-line-height-200);
--spectrum-cjk-code-line-height: var(--spectrum-cjk-line-height-200);
--spectrum-picker-minimum-width-multiplier: 2;
--spectrum-text-field-minimum-width-multiplier: 1.5;
--spectrum-combo-box-minimum-width-multiplier: 2.5;
--spectrum-combo-box-quiet-minimum-width-multiplier: 2;
--spectrum-combo-box-visual-to-field-button-quiet: 0;
--spectrum-android-elevation: 2dp;
--spectrum-spacing-50: 2px;
--spectrum-spacing-75: 4px;
--spectrum-spacing-100: 8px;
--spectrum-spacing-200: 12px;
--spectrum-spacing-300: 16px;
--spectrum-spacing-400: 24px;
--spectrum-spacing-500: 32px;
--spectrum-spacing-600: 40px;
--spectrum-spacing-700: 48px;
--spectrum-spacing-800: 64px;
--spectrum-spacing-900: 80px;
--spectrum-spacing-1000: 96px;
--spectrum-focus-indicator-thickness: 2px;
--spectrum-focus-indicator-gap: 2px;
--spectrum-border-width-200: 2px;
--spectrum-border-width-400: 4px;
--spectrum-line-height-100: 1.3;
--spectrum-line-height-200: 1.5;
--spectrum-font-family-default: var(--spectrum-font-family-sans-serif);
--spectrum-font-family-sans-serif: adobe clean;
--spectrum-font-family-serif: adobe clean serif;
--spectrum-font-family-code: source code pro;
--spectrum-font-light-default: adobe clean light;
--spectrum-font-light-cjk: adobe clean han light;
--spectrum-font-light-monospace: source code pro;
--spectrum-font-light-italic-default: adobe clean light italic;
--spectrum-font-light-italic-monospace: source code pro light italic;
--spectrum-font-regular-default: adobe clean regular;
--spectrum-font-regular-cjk: adobe clean han regular;
--spectrum-font-regular-serif: adobe clean serif regular;
--spectrum-font-regular-monospace: source code pro regular;
--spectrum-font-italic-default: adobe clean italic;
--spectrum-font-italic-serif: adobe clean serif italic;
--spectrum-font-italic-monospace: source code pro italic;
--spectrum-font-medium-default: adobe clean medium;
--spectrum-font-medium-serif: adobe clean serif medium;
--spectrum-font-medium-monospace: source code pro medium;
--spectrum-font-bold-default: adobe clean bold;
--spectrum-font-bold-cjk: adobe clean han bold;
--spectrum-font-bold-serif: adobe clean serif bold;
--spectrum-font-bold-monospace: source code pro bold;
--spectrum-font-bold-italic-default: adobe clean bold italic;
--spectrum-font-bold-italic-serif: adobe clean serif bold italic;
--spectrum-font-bold-italic-monospace: source code pro bold italic;
--spectrum-font-extra-bold-default: adobe clean extra bold;
--spectrum-font-extra-bold-cjk: adobe clean han extra bold;
--spectrum-font-black-default: adobe clean black;
--spectrum-font-black-cjk: adobe clean han black;
--spectrum-font-black-serif: adobe clean serif black;
--spectrum-font-black-monospace: source code pro black;
--spectrum-font-black-italic-default: adobe clean black italic;
--spectrum-font-black-italic-serif: adobe clean serif black italic;
--spectrum-font-black-italic-monospace: source code pro black italic;
--spectrum-cjk-letter-spacing: 0.05em;
--spectrum-cjk-line-height-100: 1.5;
--spectrum-cjk-line-height-200: 1.7;
--spectrum-field-edge-to-text-quiet: 0px;
--spectrum-field-edge-to-border-quiet: 0px;
--spectrum-field-edge-to-alert-icon-quiet: 0px;
--spectrum-field-edge-to-validation-icon-quiet: 0px;
}