@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
306 lines (303 loc) • 14.3 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-overlay-opacity: 0.5;
--spectrum-gray-background-color-default: var(--spectrum-gray-700);
--spectrum-red-background-color-default: var(--spectrum-red-700);
--spectrum-orange-background-color-default: var(--spectrum-orange-800);
--spectrum-yellow-background-color-default: var(--spectrum-yellow-1000);
--spectrum-chartreuse-background-color-default: var(
--spectrum-chartreuse-900
);
--spectrum-celery-background-color-default: var(--spectrum-celery-800);
--spectrum-green-background-color-default: var(--spectrum-green-700);
--spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700);
--spectrum-cyan-background-color-default: var(--spectrum-cyan-700);
--spectrum-blue-background-color-default: var(--spectrum-blue-700);
--spectrum-indigo-background-color-default: var(--spectrum-indigo-700);
--spectrum-purple-background-color-default: var(--spectrum-purple-700);
--spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700);
--spectrum-magenta-background-color-default: var(--spectrum-magenta-700);
--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
--spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300);
--spectrum-neutral-subdued-background-color-default: var(
--spectrum-gray-400
);
--spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300);
--spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200);
--spectrum-neutral-subdued-background-color-key-focus: var(
--spectrum-gray-300
);
--spectrum-accent-background-color-default: var(
--spectrum-accent-color-500
);
--spectrum-accent-background-color-hover: var(--spectrum-accent-color-400);
--spectrum-accent-background-color-down: var(--spectrum-accent-color-300);
--spectrum-accent-background-color-key-focus: var(
--spectrum-accent-color-400
);
--spectrum-informative-background-color-default: var(
--spectrum-informative-color-500
);
--spectrum-informative-background-color-hover: var(
--spectrum-informative-color-400
);
--spectrum-informative-background-color-down: var(
--spectrum-informative-color-300
);
--spectrum-informative-background-color-key-focus: var(
--spectrum-informative-color-400
);
--spectrum-negative-background-color-default: var(
--spectrum-negative-color-500
);
--spectrum-negative-background-color-hover: var(
--spectrum-negative-color-400
);
--spectrum-negative-background-color-down: var(
--spectrum-negative-color-300
);
--spectrum-negative-background-color-key-focus: var(
--spectrum-negative-color-400
);
--spectrum-positive-background-color-default: var(
--spectrum-positive-color-500
);
--spectrum-positive-background-color-hover: var(
--spectrum-positive-color-400
);
--spectrum-positive-background-color-down: var(
--spectrum-positive-color-300
);
--spectrum-positive-background-color-key-focus: var(
--spectrum-positive-color-400
);
--spectrum-neutral-visual-color: var(--spectrum-gray-600);
--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
--spectrum-gray-visual-color: var(--spectrum-gray-600);
--spectrum-red-visual-color: var(--spectrum-red-700);
--spectrum-orange-visual-color: var(--spectrum-orange-900);
--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
--spectrum-celery-visual-color: var(--spectrum-celery-800);
--spectrum-green-visual-color: var(--spectrum-green-800);
--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
--spectrum-blue-visual-color: var(--spectrum-blue-900);
--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
--spectrum-purple-visual-color: var(--spectrum-purple-900);
--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
--spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
--spectrum-background-base-color: var(--spectrum-gray-50);
--spectrum-background-layer-1-color: var(--spectrum-gray-75);
--spectrum-background-layer-2-color: var(--spectrum-gray-100);
--spectrum-gray-50: rgb(29, 29, 29);
--spectrum-gray-75: rgb(38, 38, 38);
--spectrum-gray-100: rgb(50, 50, 50);
--spectrum-gray-200: rgb(63, 63, 63);
--spectrum-gray-300: rgb(84, 84, 84);
--spectrum-gray-400: rgb(112, 112, 112);
--spectrum-gray-500: rgb(144, 144, 144);
--spectrum-gray-600: rgb(178, 178, 178);
--spectrum-gray-700: rgb(209, 209, 209);
--spectrum-gray-800: rgb(235, 235, 235);
--spectrum-gray-900: rgb(255, 255, 255);
--spectrum-red-100: rgb(123, 0, 0);
--spectrum-red-200: rgb(141, 0, 0);
--spectrum-red-300: rgb(165, 0, 0);
--spectrum-red-400: rgb(190, 4, 3);
--spectrum-red-500: rgb(215, 25, 19);
--spectrum-red-600: rgb(234, 56, 41);
--spectrum-red-700: rgb(246, 88, 67);
--spectrum-red-800: rgb(255, 117, 94);
--spectrum-red-900: rgb(255, 149, 129);
--spectrum-red-1000: rgb(255, 176, 161);
--spectrum-red-1100: rgb(255, 201, 189);
--spectrum-red-1200: rgb(255, 222, 216);
--spectrum-red-1300: rgb(255, 241, 238);
--spectrum-red-1400: rgb(255, 255, 255);
--spectrum-orange-100: rgb(102, 37, 0);
--spectrum-orange-200: rgb(117, 45, 0);
--spectrum-orange-300: rgb(137, 55, 0);
--spectrum-orange-400: rgb(158, 66, 0);
--spectrum-orange-500: rgb(180, 78, 0);
--spectrum-orange-600: rgb(202, 93, 0);
--spectrum-orange-700: rgb(225, 109, 0);
--spectrum-orange-800: rgb(244, 129, 12);
--spectrum-orange-900: rgb(254, 154, 46);
--spectrum-orange-1000: rgb(255, 181, 88);
--spectrum-orange-1100: rgb(253, 206, 136);
--spectrum-orange-1200: rgb(255, 225, 179);
--spectrum-orange-1300: rgb(255, 242, 221);
--spectrum-orange-1400: rgb(255, 253, 249);
--spectrum-yellow-100: rgb(76, 54, 0);
--spectrum-yellow-200: rgb(88, 64, 0);
--spectrum-yellow-300: rgb(103, 76, 0);
--spectrum-yellow-400: rgb(119, 89, 0);
--spectrum-yellow-500: rgb(136, 104, 0);
--spectrum-yellow-600: rgb(155, 120, 0);
--spectrum-yellow-700: rgb(174, 137, 0);
--spectrum-yellow-800: rgb(192, 156, 0);
--spectrum-yellow-900: rgb(211, 174, 0);
--spectrum-yellow-1000: rgb(228, 194, 0);
--spectrum-yellow-1100: rgb(244, 213, 0);
--spectrum-yellow-1200: rgb(249, 232, 92);
--spectrum-yellow-1300: rgb(252, 246, 187);
--spectrum-yellow-1400: rgb(255, 255, 255);
--spectrum-chartreuse-100: rgb(48, 64, 0);
--spectrum-chartreuse-200: rgb(55, 74, 0);
--spectrum-chartreuse-300: rgb(65, 87, 0);
--spectrum-chartreuse-400: rgb(76, 102, 0);
--spectrum-chartreuse-500: rgb(89, 118, 0);
--spectrum-chartreuse-600: rgb(102, 136, 0);
--spectrum-chartreuse-700: rgb(117, 154, 0);
--spectrum-chartreuse-800: rgb(132, 173, 1);
--spectrum-chartreuse-900: rgb(148, 192, 8);
--spectrum-chartreuse-1000: rgb(166, 211, 18);
--spectrum-chartreuse-1100: rgb(184, 229, 37);
--spectrum-chartreuse-1200: rgb(205, 245, 71);
--spectrum-chartreuse-1300: rgb(231, 254, 154);
--spectrum-chartreuse-1400: rgb(255, 255, 255);
--spectrum-celery-100: rgb(0, 69, 10);
--spectrum-celery-200: rgb(0, 80, 12);
--spectrum-celery-300: rgb(0, 94, 14);
--spectrum-celery-400: rgb(0, 109, 15);
--spectrum-celery-500: rgb(0, 127, 15);
--spectrum-celery-600: rgb(0, 145, 18);
--spectrum-celery-700: rgb(4, 165, 30);
--spectrum-celery-800: rgb(34, 184, 51);
--spectrum-celery-900: rgb(68, 202, 73);
--spectrum-celery-1000: rgb(105, 220, 99);
--spectrum-celery-1100: rgb(142, 235, 127);
--spectrum-celery-1200: rgb(180, 247, 162);
--spectrum-celery-1300: rgb(221, 253, 211);
--spectrum-celery-1400: rgb(255, 255, 255);
--spectrum-green-100: rgb(4, 67, 41);
--spectrum-green-200: rgb(0, 78, 47);
--spectrum-green-300: rgb(0, 92, 56);
--spectrum-green-400: rgb(0, 108, 67);
--spectrum-green-500: rgb(0, 125, 78);
--spectrum-green-600: rgb(0, 143, 93);
--spectrum-green-700: rgb(18, 162, 108);
--spectrum-green-800: rgb(43, 180, 125);
--spectrum-green-900: rgb(67, 199, 143);
--spectrum-green-1000: rgb(94, 217, 162);
--spectrum-green-1100: rgb(129, 233, 184);
--spectrum-green-1200: rgb(177, 244, 209);
--spectrum-green-1300: rgb(223, 250, 234);
--spectrum-green-1400: rgb(254, 255, 252);
--spectrum-seafoam-100: rgb(18, 65, 63);
--spectrum-seafoam-200: rgb(14, 76, 73);
--spectrum-seafoam-300: rgb(4, 90, 87);
--spectrum-seafoam-400: rgb(0, 105, 101);
--spectrum-seafoam-500: rgb(0, 122, 117);
--spectrum-seafoam-600: rgb(0, 140, 135);
--spectrum-seafoam-700: rgb(0, 158, 152);
--spectrum-seafoam-800: rgb(3, 178, 171);
--spectrum-seafoam-900: rgb(54, 197, 189);
--spectrum-seafoam-1000: rgb(93, 214, 207);
--spectrum-seafoam-1100: rgb(132, 230, 223);
--spectrum-seafoam-1200: rgb(176, 242, 236);
--spectrum-seafoam-1300: rgb(223, 249, 246);
--spectrum-seafoam-1400: rgb(254, 255, 254);
--spectrum-cyan-100: rgb(0, 61, 98);
--spectrum-cyan-200: rgb(0, 71, 111);
--spectrum-cyan-300: rgb(0, 85, 127);
--spectrum-cyan-400: rgb(0, 100, 145);
--spectrum-cyan-500: rgb(0, 116, 162);
--spectrum-cyan-600: rgb(0, 134, 180);
--spectrum-cyan-700: rgb(0, 153, 198);
--spectrum-cyan-800: rgb(14, 173, 215);
--spectrum-cyan-900: rgb(44, 193, 230);
--spectrum-cyan-1000: rgb(84, 211, 241);
--spectrum-cyan-1100: rgb(127, 228, 249);
--spectrum-cyan-1200: rgb(167, 241, 255);
--spectrum-cyan-1300: rgb(215, 250, 255);
--spectrum-cyan-1400: rgb(255, 255, 255);
--spectrum-blue-100: rgb(0, 56, 119);
--spectrum-blue-200: rgb(0, 65, 138);
--spectrum-blue-300: rgb(0, 77, 163);
--spectrum-blue-400: rgb(0, 89, 194);
--spectrum-blue-500: rgb(3, 103, 224);
--spectrum-blue-600: rgb(19, 121, 243);
--spectrum-blue-700: rgb(52, 143, 244);
--spectrum-blue-800: rgb(84, 163, 246);
--spectrum-blue-900: rgb(114, 183, 249);
--spectrum-blue-1000: rgb(143, 202, 252);
--spectrum-blue-1100: rgb(174, 219, 254);
--spectrum-blue-1200: rgb(204, 233, 255);
--spectrum-blue-1300: rgb(232, 246, 255);
--spectrum-blue-1400: rgb(255, 255, 255);
--spectrum-indigo-100: rgb(40, 44, 140);
--spectrum-indigo-200: rgb(47, 52, 163);
--spectrum-indigo-300: rgb(57, 63, 187);
--spectrum-indigo-400: rgb(70, 75, 211);
--spectrum-indigo-500: rgb(85, 91, 231);
--spectrum-indigo-600: rgb(104, 109, 244);
--spectrum-indigo-700: rgb(124, 129, 251);
--spectrum-indigo-800: rgb(145, 149, 255);
--spectrum-indigo-900: rgb(167, 170, 255);
--spectrum-indigo-1000: rgb(188, 190, 255);
--spectrum-indigo-1100: rgb(208, 210, 255);
--spectrum-indigo-1200: rgb(226, 228, 255);
--spectrum-indigo-1300: rgb(243, 243, 254);
--spectrum-indigo-1400: rgb(255, 255, 255);
--spectrum-purple-100: rgb(76, 13, 157);
--spectrum-purple-200: rgb(89, 17, 177);
--spectrum-purple-300: rgb(105, 28, 200);
--spectrum-purple-400: rgb(122, 45, 218);
--spectrum-purple-500: rgb(140, 65, 233);
--spectrum-purple-600: rgb(157, 87, 243);
--spectrum-purple-700: rgb(172, 111, 249);
--spectrum-purple-800: rgb(187, 135, 251);
--spectrum-purple-900: rgb(202, 159, 252);
--spectrum-purple-1000: rgb(215, 182, 254);
--spectrum-purple-1100: rgb(228, 204, 254);
--spectrum-purple-1200: rgb(239, 223, 255);
--spectrum-purple-1300: rgb(249, 240, 255);
--spectrum-purple-1400: rgb(255, 253, 255);
--spectrum-fuchsia-100: rgb(107, 3, 106);
--spectrum-fuchsia-200: rgb(123, 0, 123);
--spectrum-fuchsia-300: rgb(144, 0, 145);
--spectrum-fuchsia-400: rgb(165, 13, 166);
--spectrum-fuchsia-500: rgb(185, 37, 185);
--spectrum-fuchsia-600: rgb(205, 57, 206);
--spectrum-fuchsia-700: rgb(223, 81, 224);
--spectrum-fuchsia-800: rgb(235, 110, 236);
--spectrum-fuchsia-900: rgb(244, 140, 242);
--spectrum-fuchsia-1000: rgb(250, 168, 245);
--spectrum-fuchsia-1100: rgb(254, 194, 248);
--spectrum-fuchsia-1200: rgb(255, 219, 250);
--spectrum-fuchsia-1300: rgb(255, 239, 252);
--spectrum-fuchsia-1400: rgb(255, 253, 255);
--spectrum-magenta-100: rgb(118, 0, 58);
--spectrum-magenta-200: rgb(137, 0, 66);
--spectrum-magenta-300: rgb(160, 0, 77);
--spectrum-magenta-400: rgb(182, 18, 90);
--spectrum-magenta-500: rgb(203, 38, 109);
--spectrum-magenta-600: rgb(222, 61, 130);
--spectrum-magenta-700: rgb(237, 87, 149);
--spectrum-magenta-800: rgb(249, 114, 167);
--spectrum-magenta-900: rgb(255, 143, 185);
--spectrum-magenta-1000: rgb(255, 172, 202);
--spectrum-magenta-1100: rgb(255, 198, 218);
--spectrum-magenta-1200: rgb(255, 221, 233);
--spectrum-magenta-1300: rgb(255, 240, 245);
--spectrum-magenta-1400: rgb(255, 252, 253);
}