@spectrum-web-components/styles/tokens/express/global-vars.css

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

/*
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-accent-color-100: var(--spectrum-indigo-100);
    --spectrum-accent-color-200: var(--spectrum-indigo-200);
    --spectrum-accent-color-300: var(--spectrum-indigo-300);
    --spectrum-accent-color-400: var(--spectrum-indigo-400);
    --spectrum-accent-color-500: var(--spectrum-indigo-500);
    --spectrum-accent-color-600: var(--spectrum-indigo-600);
    --spectrum-accent-color-700: var(--spectrum-indigo-700);
    --spectrum-accent-color-800: var(--spectrum-indigo-800);
    --spectrum-accent-color-900: var(--spectrum-indigo-900);
    --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
    --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
    --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
    --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
    --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
    --spectrum-heading: var(--spectrum-font-black-default);
    --spectrum-heading-emphasized: var(--spectrum-font-black-italic-default);
    --spectrum-cjk-heading: var(--spectrum-font-black-cjk);
    --spectrum-slider-track-thickness: 4px;
    --spectrum-slider-handle-gap: 0px;
    --spectrum-border-width-100: 2px;
}
:host,
:root {
    --system-spectrum-actionbutton-background-color-default: var(
        --spectrum-gray-200
    );
    --system-spectrum-actionbutton-background-color-hover: var(
        --spectrum-gray-300
    );
    --system-spectrum-actionbutton-background-color-down: var(
        --spectrum-gray-400
    );
    --system-spectrum-actionbutton-background-color-focus: var(
        --spectrum-gray-300
    );
    --system-spectrum-actionbutton-border-color-default: transparent;
    --system-spectrum-actionbutton-border-color-hover: transparent;
    --system-spectrum-actionbutton-border-color-down: transparent;
    --system-spectrum-actionbutton-border-color-focus: transparent;
    --system-spectrum-actionbutton-content-color-default: var(
        --spectrum-neutral-content-color-default
    );
    --system-spectrum-actionbutton-content-color-hover: var(
        --spectrum-neutral-content-color-hover
    );
    --system-spectrum-actionbutton-content-color-down: var(
        --spectrum-neutral-content-color-down
    );
    --system-spectrum-actionbutton-content-color-focus: var(
        --spectrum-neutral-content-color-key-focus
    );
    --system-spectrum-actionbutton-background-color-disabled: var(
        --spectrum-disabled-background-color
    );
    --system-spectrum-actionbutton-border-color-disabled: transparent;
    --system-spectrum-actionbutton-content-color-disabled: var(
        --spectrum-disabled-content-color
    );
    --system-spectrum-actionbutton-quiet-background-color-default: transparent;
    --system-spectrum-actionbutton-quiet-background-color-hover: var(
        --spectrum-gray-200
    );
    --system-spectrum-actionbutton-quiet-background-color-down: var(
        --spectrum-gray-300
    );
    --system-spectrum-actionbutton-quiet-background-color-focus: var(
        --spectrum-gray-200
    );
    --system-spectrum-actionbutton-quiet-border-color-default: transparent;
    --system-spectrum-actionbutton-quiet-border-color-hover: transparent;
    --system-spectrum-actionbutton-quiet-border-color-down: transparent;
    --system-spectrum-actionbutton-quiet-border-color-focus: transparent;
    --system-spectrum-actionbutton-quiet-background-color-disabled: transparent;
    --system-spectrum-actionbutton-quiet-border-color-disabled: transparent;
    --system-spectrum-actionbutton-selected-background-color-default: var(
        --spectrum-neutral-background-color-default
    );
    --system-spectrum-actionbutton-selected-background-color-hover: var(
        --spectrum-neutral-background-color-hover
    );
    --system-spectrum-actionbutton-selected-background-color-down: var(
        --spectrum-neutral-background-color-down
    );
    --system-spectrum-actionbutton-selected-background-color-focus: var(
        --spectrum-neutral-background-color-key-focus
    );
    --system-spectrum-actionbutton-selected-border-color-default: transparent;
    --system-spectrum-actionbutton-selected-border-color-hover: transparent;
    --system-spectrum-actionbutton-selected-border-color-down: transparent;
    --system-spectrum-actionbutton-selected-border-color-focus: transparent;
    --system-spectrum-actionbutton-selected-content-color-default: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-selected-content-color-hover: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-selected-content-color-down: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-selected-content-color-focus: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-selected-background-color-disabled: var(
        --spectrum-disabled-background-color
    );
    --system-spectrum-actionbutton-selected-border-color-disabled: transparent;
    --system-spectrum-actionbutton-selected-emphasized-background-color-default: var(
        --spectrum-accent-background-color-default
    );
    --system-spectrum-actionbutton-selected-emphasized-background-color-hover: var(
        --spectrum-accent-background-color-hover
    );
    --system-spectrum-actionbutton-selected-emphasized-background-color-down: var(
        --spectrum-accent-background-color-down
    );
    --system-spectrum-actionbutton-selected-emphasized-background-color-focus: var(
        --spectrum-accent-background-color-key-focus
    );
    --system-spectrum-actionbutton-staticblack-quiet-border-color-default: transparent;
    --system-spectrum-actionbutton-staticwhite-quiet-border-color-default: transparent;
    --system-spectrum-actionbutton-staticblack-quiet-border-color-hover: transparent;
    --system-spectrum-actionbutton-staticwhite-quiet-border-color-hover: transparent;
    --system-spectrum-actionbutton-staticblack-quiet-border-color-down: transparent;
    --system-spectrum-actionbutton-staticwhite-quiet-border-color-down: transparent;
    --system-spectrum-actionbutton-staticblack-quiet-border-color-focus: transparent;
    --system-spectrum-actionbutton-staticwhite-quiet-border-color-focus: transparent;
    --system-spectrum-actionbutton-staticblack-quiet-border-color-disabled: transparent;
    --system-spectrum-actionbutton-staticwhite-quiet-border-color-disabled: transparent;
    --system-spectrum-actionbutton-staticblack-background-color-default: var(
        --spectrum-transparent-black-200
    );
    --system-spectrum-actionbutton-staticblack-background-color-hover: var(
        --spectrum-transparent-black-300
    );
    --system-spectrum-actionbutton-staticblack-background-color-down: var(
        --spectrum-transparent-black-400
    );
    --system-spectrum-actionbutton-staticblack-background-color-focus: var(
        --spectrum-transparent-black-300
    );
    --system-spectrum-actionbutton-staticblack-border-color-default: transparent;
    --system-spectrum-actionbutton-staticblack-border-color-hover: transparent;
    --system-spectrum-actionbutton-staticblack-border-color-down: transparent;
    --system-spectrum-actionbutton-staticblack-border-color-focus: transparent;
    --system-spectrum-actionbutton-staticblack-content-color-default: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticblack-content-color-hover: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticblack-content-color-down: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticblack-content-color-focus: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticblack-focus-indicator-color: var(
        --spectrum-static-black-focus-indicator-color
    );
    --system-spectrum-actionbutton-staticblack-background-color-disabled: transparent;
    --system-spectrum-actionbutton-staticblack-border-color-disabled: var(
        --spectrum-disabled-static-black-border-color
    );
    --system-spectrum-actionbutton-staticblack-content-color-disabled: var(
        --spectrum-disabled-static-black-content-color
    );
    --system-spectrum-actionbutton-staticblack-selected-background-color-default: var(
        --spectrum-transparent-black-800
    );
    --system-spectrum-actionbutton-staticblack-selected-background-color-hover: var(
        --spectrum-transparent-black-900
    );
    --system-spectrum-actionbutton-staticblack-selected-background-color-down: var(
        --spectrum-transparent-black-900
    );
    --system-spectrum-actionbutton-staticblack-selected-background-color-focus: var(
        --spectrum-transparent-black-900
    );
    --system-spectrum-actionbutton-staticblack-selected-border-color-disabled: transparent;
    --system-spectrum-actionbutton-staticblack-selected-content-color-default: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticblack-selected-content-color-hover: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticblack-selected-content-color-down: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticblack-selected-content-color-focus: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticblack-selected-background-color-disabled: var(
        --spectrum-disabled-static-black-background-color
    );
    --system-spectrum-actionbutton-staticwhite-background-color-default: var(
        --spectrum-transparent-white-200
    );
    --system-spectrum-actionbutton-staticwhite-background-color-hover: var(
        --spectrum-transparent-white-300
    );
    --system-spectrum-actionbutton-staticwhite-background-color-down: var(
        --spectrum-transparent-white-400
    );
    --system-spectrum-actionbutton-staticwhite-background-color-focus: var(
        --spectrum-transparent-white-300
    );
    --system-spectrum-actionbutton-staticwhite-border-color-default: transparent;
    --system-spectrum-actionbutton-staticwhite-border-color-hover: transparent;
    --system-spectrum-actionbutton-staticwhite-border-color-down: transparent;
    --system-spectrum-actionbutton-staticwhite-border-color-focus: transparent;
    --system-spectrum-actionbutton-staticwhite-content-color-default: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticwhite-content-color-hover: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticwhite-content-color-down: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticwhite-content-color-focus: var(
        --spectrum-white
    );
    --system-spectrum-actionbutton-staticwhite-focus-indicator-color: var(
        --spectrum-static-white-focus-indicator-color
    );
    --system-spectrum-actionbutton-staticwhite-background-color-disabled: transparent;
    --system-spectrum-actionbutton-staticwhite-border-color-disabled: var(
        --spectrum-disabled-static-white-border-color
    );
    --system-spectrum-actionbutton-staticwhite-content-color-disabled: var(
        --spectrum-disabled-static-white-content-color
    );
    --system-spectrum-actionbutton-staticwhite-selected-background-color-default: var(
        --spectrum-transparent-white-800
    );
    --system-spectrum-actionbutton-staticwhite-selected-background-color-hover: var(
        --spectrum-transparent-white-900
    );
    --system-spectrum-actionbutton-staticwhite-selected-background-color-down: var(
        --spectrum-transparent-white-900
    );
    --system-spectrum-actionbutton-staticwhite-selected-background-color-focus: var(
        --spectrum-transparent-white-900
    );
    --system-spectrum-actionbutton-staticwhite-selected-content-color-default: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticwhite-selected-content-color-hover: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticwhite-selected-content-color-down: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticwhite-selected-content-color-focus: var(
        --spectrum-black
    );
    --system-spectrum-actionbutton-staticwhite-selected-background-color-disabled: var(
        --spectrum-disabled-static-white-background-color
    );
    --system-spectrum-actionbutton-staticwhite-selected-border-color-disabled: transparent;
}
:host,
:root {
    --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-800);
    --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-900);
    --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-900);
    --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-900);
    --system-spectrum-checkbox-control-selected-color-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-checkbox-control-selected-color-hover: var(
        --spectrum-gray-900
    );
    --system-spectrum-checkbox-control-selected-color-down: var(
        --spectrum-gray-900
    );
}
:host,
:root {
    --system-spectrum-closebutton-background-color-default: transparent;
    --system-spectrum-closebutton-background-color-hover: var(
        --spectrum-gray-300
    );
    --system-spectrum-closebutton-background-color-down: var(
        --spectrum-gray-400
    );
    --system-spectrum-closebutton-background-color-focus: var(
        --spectrum-gray-300
    );
}

:host,
:root {
    --system-spectrum-radio-button-border-color-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-900);
    --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-900);
    --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-900);
    --system-spectrum-radio-button-checked-border-color-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-radio-button-checked-border-color-hover: var(
        --spectrum-gray-900
    );
    --system-spectrum-radio-button-checked-border-color-down: var(
        --spectrum-gray-900
    );
    --system-spectrum-radio-button-checked-border-color-focus: var(
        --spectrum-gray-900
    );
    --system-spectrum-radio-emphasized-button-checked-border-color-default: var(
        --spectrum-accent-color-900
    );
    --system-spectrum-radio-emphasized-button-checked-border-color-hover: var(
        --spectrum-accent-color-1000
    );
    --system-spectrum-radio-emphasized-button-checked-border-color-down: var(
        --spectrum-accent-color-1100
    );
    --system-spectrum-radio-emphasized-button-checked-border-color-focus: var(
        --spectrum-accent-color-1000
    );
}
:host,
:root {
    --system-spectrum-switch-background-color-selected-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-switch-background-color-selected-hover: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-background-color-selected-down: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-background-color-selected-focus: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-handle-border-color-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-switch-handle-border-color-hover: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-900);
    --system-spectrum-switch-handle-border-color-focus: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-handle-border-color-selected-default: var(
        --spectrum-gray-800
    );
    --system-spectrum-switch-handle-border-color-selected-hover: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-handle-border-color-selected-down: var(
        --spectrum-gray-900
    );
    --system-spectrum-switch-handle-border-color-selected-focus: var(
        --spectrum-gray-900
    );
}

:host,
:root {
    --system-spectrum-toast-background-color-default: var(
        --spectrum-neutral-background-color-default
    );
}
:host,
:root {
    --system-spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50);
    --system-spectrum-actiongroup-horizontal-spacing-compact: calc(
        -1px * var(--spectrum-spacing-50)
    );
    --system-spectrum-actiongroup-vertical-spacing-compact: calc(
        -1px * var(--spectrum-spacing-50)
    );
}