From 2983a36c1112846c13e885127d2b510bd8efda73 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Wed, 13 Mar 2024 17:50:51 -0400 Subject: [PATCH 001/208] refactor(theme): adds new system attribute and deprecates theme attribute --- packages/overlay/stories/overlay.stories.ts | 10 +-- .../content/guides/what-is-a-theme.md | 50 +++++++++++ .../documentation/src/components/layout.ts | 57 ++++++------ .../story-decorator/src/StoryDecorator.ts | 39 ++++---- projects/story-decorator/src/types.ts | 4 +- tools/theme/core.ts | 3 + tools/theme/src/Theme.ts | 89 ++++++++++++------- tools/theme/src/express/core.ts | 3 + tools/theme/stories/theme.stories.ts | 12 +-- tools/theme/test/theme-lazy.test.ts | 2 +- web-test-runner.utils.js | 12 +-- 11 files changed, 178 insertions(+), 103 deletions(-) create mode 100644 projects/documentation/content/guides/what-is-a-theme.md diff --git a/packages/overlay/stories/overlay.stories.ts b/packages/overlay/stories/overlay.stories.ts index a0d1c06487..8e7b89457f 100644 --- a/packages/overlay/stories/overlay.stories.ts +++ b/packages/overlay/stories/overlay.stories.ts @@ -183,11 +183,7 @@ const template = ({ - + Click to open another popover. @@ -635,13 +631,13 @@ export const deepNesting = (): TemplateResult => { ${storyStyles} diff --git a/projects/documentation/content/guides/what-is-a-theme.md b/projects/documentation/content/guides/what-is-a-theme.md new file mode 100644 index 0000000000..e4d9f6e5dc --- /dev/null +++ b/projects/documentation/content/guides/what-is-a-theme.md @@ -0,0 +1,50 @@ +--- +layout: guide.njk +title: 'What is a theme?' +displayName: What is a theme? +slug: what-is-a-theme +--- + +# Understanding "Theme" in Spectrum Web Components + +Theme is an overloaded term that can lead to confusion and a general thought of "What is a theme anyway?". Is it just color appearance changes for light and dark mode? Is it scale changes? Our answer historically has kind of been, "yes—all that". We've built `sp-theme` to represent these different contexts as a collective type called a "theme". + +```html + + Don't Click + +``` + +This guide aims to provide an understanding of what we mean when we say "theme" in the project and how you should think about it in your projects. + +## What is a theme anyway? + +In a world where "theme" is often used to describe the look and feel of an application, we often tie the term to color alone. If we think about how a theme in a CMS (like Wordpress) works, however, it’s often much more than just color. It can affect the entire layout of the page. We don't quite have that concept to worry about but we do have multiple parameters to think about. Those are: + +- **System** » The design system to use, in our case we have Spectrum and Express. This system can be spectrum itself, and as we work towards future versions of Spectrum, this system can become a way to control which version of the Design System you are using. It's also an open API which opens the door to a limited system you build for your product. +- **Color** » The color appearance, typically light or dark mode. +- **Scale** » The scale of the components as designed, often used for mobile—for example `medium`, `large`. +- **Direction** » The directionality of layout, this helps support right-to-left languages like Arabic. +- **Language** » The language of the content, such as `en-US`, `it`, `jp`, `uk`,—as defined [by mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang). + +## A theme is all of it + +All these parameters together are what we consider a "theme". Theme becomes an aggregate concept that represents the state of this collection of values. This state can be modified in some cases by the user of the application—toggling light/dark mode with the `color` attribute. It could also be modified by their browser configuration or their locale—affecting `direction`. Themes also have advanced use cases as described in the [theme guide](/tools/theme/#advanced-usage) where you could define overrides or custom subsystems that can then be exposed as new sets of `color`, `system`, etc. Finally, the theme may be dependent on future versions of the design system—for example, the `system` attribute will be the entry point for future versions of Spectrum allowing teams that need to migrate a clearer path to the new design language—which allows these parameters, like `system`, to be capable of their own beta cycle. + +``` + + Don't Click + + + + + + Don't Click + +``` diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts index 767b2df8dc..74accfdc21 100644 --- a/projects/documentation/src/components/layout.ts +++ b/projects/documentation/src/components/layout.ts @@ -26,8 +26,8 @@ import '@spectrum-web-components/theme/sp-theme.js'; import type { Color, Scale, + SystemVariant, Theme, - ThemeVariant, } from '@spectrum-web-components/theme'; import type { Picker } from '@spectrum-web-components/picker'; import '@spectrum-web-components/button/sp-button.js'; @@ -53,11 +53,11 @@ import type { ActionButton } from '@spectrum-web-components/bundle'; const SWC_THEME_COLOR_KEY = 'swc-docs:theme:color'; const SWC_THEME_SCALE_KEY = 'swc-docs:theme:scale'; -const SWC_THEME_THEME_KEY = 'swc-docs:theme:theme'; +const SWC_THEME_SYSTEM_KEY = 'swc-docs:theme:system'; const SWC_THEME_DIR_KEY = 'swc-docs:theme:dir'; const COLOR_FALLBACK = matchMedia(DARK_MODE).matches ? 'dark' : 'light'; const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? 'large' : 'medium'; -const THEME_FALLBACK = 'spectrum'; +const SYSTEM_FALLBACK = 'spectrum'; const DIR_FALLBACK = 'ltr'; const DEFAULT_COLOR = ( window.localStorage @@ -69,11 +69,11 @@ const DEFAULT_SCALE = ( ? localStorage.getItem(SWC_THEME_SCALE_KEY) || SCALE_FALLBACK : SCALE_FALLBACK ) as Scale; -const DEFAULT_THEME = ( +const DEFAULT_SYSTEM = ( window.localStorage - ? localStorage.getItem(SWC_THEME_THEME_KEY) || THEME_FALLBACK - : THEME_FALLBACK -) as ThemeVariant; + ? localStorage.getItem(SWC_THEME_SYSTEM_KEY) || SYSTEM_FALLBACK + : SYSTEM_FALLBACK +) as SystemVariant; const DEFAULT_DIR = ( window.localStorage ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK @@ -82,8 +82,11 @@ const DEFAULT_DIR = ( const isNarrowMediaQuery = matchMedia('screen and (max-width: 960px)'); -const lazyStyleFragment = (name: Color | Scale, flavor: ThemeVariant): void => { - var fragmentName = `${name}-${flavor}`; +const lazyStyleFragment = ( + name: Color | Scale, + system: SystemVariant +): void => { + var fragmentName = `${name}-${system}`; switch (fragmentName) { case 'darkest-spectrum': import('@spectrum-web-components/theme/theme-darkest.js'); @@ -128,10 +131,10 @@ const loadDefaults = () => { if ( DEFAULT_COLOR !== COLOR_FALLBACK || DEFAULT_SCALE !== SCALE_FALLBACK || - DEFAULT_THEME !== THEME_FALLBACK + DEFAULT_SYSTEM !== SYSTEM_FALLBACK ) { - lazyStyleFragment(DEFAULT_COLOR, DEFAULT_THEME); - lazyStyleFragment(DEFAULT_SCALE, DEFAULT_THEME); + lazyStyleFragment(DEFAULT_COLOR, DEFAULT_SYSTEM); + lazyStyleFragment(DEFAULT_SCALE, DEFAULT_SYSTEM); } }; @@ -174,7 +177,7 @@ export class LayoutElement extends LitElement { public scale: Scale = DEFAULT_SCALE; @property({ attribute: false }) - public theme: ThemeVariant = DEFAULT_THEME; + public system: SystemVariant = DEFAULT_SYSTEM; @queryAsync('sp-theme') private themeRoot!: Theme; @@ -226,7 +229,7 @@ export class LayoutElement extends LitElement { } private updateTheme(event: Event) { - this.theme = (event.target as Picker).value as ThemeVariant; + this.system = (event.target as Picker).value as SystemVariant; } private updateDirection(event: Event) { @@ -369,23 +372,19 @@ export class LayoutElement extends LitElement { return html`
- Theme + System Spectrum - - Spectrum Express - + Express
- - Color Theme - + Color - ${this.themeControl} ${this.colorControl} ${this.scaleControl} + ${this.systemControl} ${this.colorControl} ${this.scaleControl} ${this.dirControl} ${this.reduceMotionControl}
`; } - private get themeControl(): TemplateResult { + private get systemControl(): TemplateResult { return html` - - Spectrum + + System - Classic + Spectrum 1 Express `; @@ -332,7 +333,7 @@ export class StoryDecorator extends SpectrumElement { private get colorControl(): TemplateResult { return html` - Theme + Color ; export type ThemeFragmentMap = Map; export type Color = @@ -55,8 +55,8 @@ export type Color = | 'dark-express' | 'darkest-express'; export type Scale = 'medium' | 'large' | 'medium-express' | 'large-express'; -export type ThemeVariant = 'spectrum' | 'express'; -const ThemeVariantValues = ['spectrum', 'express']; +export type SystemVariant = 'spectrum' | 'express' | 'spectrum-two'; +const SystemVariantValues = ['spectrum', 'express', 'spectrum-two']; const ScaleValues = ['medium', 'large', 'medium-express', 'large-express']; const ColorValues = [ 'light', @@ -68,17 +68,17 @@ const ColorValues = [ 'dark-express', 'darkest-express', ]; -type FragmentName = Color | Scale | ThemeVariant | 'core' | 'app'; +type FragmentName = Color | Scale | SystemVariant | 'core' | 'app'; export interface ThemeData { color?: Color; scale?: Scale; lang?: string; - theme?: ThemeVariant; + system?: SystemVariant; } type ThemeKindProvider = { - [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | ''; + [P in SettableFragmentTypes]: SystemVariant | Color | Scale | ''; }; export interface ProvideLang { @@ -99,7 +99,15 @@ export class Theme extends HTMLElement implements ThemeKindProvider { static VERSION = version; static get observedAttributes(): string[] { - return ['color', 'scale', 'theme', 'lang', 'dir']; + return [ + 'color', + 'scale', + 'lang', + 'dir', + 'system', + /* deprecated attributes, but still observing */ + 'theme', + ]; } _dir: 'ltr' | 'rtl' | '' = ''; @@ -140,8 +148,8 @@ export class Theme extends HTMLElement implements ThemeKindProvider { } else if (attrName === 'lang' && !!value) { this.lang = value; this._provideContext(); - } else if (attrName === 'theme') { - this.theme = value as ThemeVariant; + } else if (attrName === 'system' || attrName === 'theme') { + this.system = value as SystemVariant; } else if (attrName === 'dir') { this.dir = value as 'ltr' | 'rtl' | ''; } @@ -158,40 +166,55 @@ export class Theme extends HTMLElement implements ThemeKindProvider { public override shadowRoot!: ShadowRootWithAdoptedStyleSheets; - private _theme: ThemeVariant | '' = 'spectrum'; + private _system: SystemVariant | '' = 'spectrum'; /** - * The Spectrum theme that is applied to the content scoped to this `sp-theme` element. + * The Spectrum system that is applied to the content scoped to this `sp-theme` element. * * A value is requried. - * @type {"spectrum" | "express" | ""} + * @type {"spectrum" | "express" } * @attr */ - get theme(): ThemeVariant | '' { - const themeFragments = Theme.themeFragmentsByKind.get('theme'); + get system(): SystemVariant | '' { + const themeFragments = Theme.themeFragmentsByKind.get('system'); const { name } = (themeFragments && themeFragments.get('default')) || {}; - return this._theme || (name as ThemeVariant) || ''; + return this._system || (name as SystemVariant) || ''; } - set theme(newValue: ThemeVariant | '') { - if (newValue === this._theme) return; - const theme = - !!newValue && ThemeVariantValues.includes(newValue) + set system(newValue: SystemVariant | '') { + if (newValue === this._system) return; + const system = + !!newValue && SystemVariantValues.includes(newValue) ? newValue - : this.theme; - if (theme !== this._theme) { - this._theme = theme; + : this.system; + if (system !== this._system) { + this._system = system; this.requestUpdate(); } - if (theme) { - this.setAttribute('theme', theme); + if (system) { + this.setAttribute('system', system); /* c8 ignore next 3 */ } else { + this.removeAttribute('system'); this.removeAttribute('theme'); } } + /* + * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute. + */ + get theme(): SystemVariant | '' { + return this.system; + } + + /* + * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute. + */ + set theme(newValue: SystemVariant | '') { + this.system = newValue; + } + private _color: Color | '' = ''; /** @@ -270,10 +293,10 @@ export class Theme extends HTMLElement implements ThemeKindProvider { kind?: FragmentType ): CSSResultGroup | undefined => { const currentStyles = - kind && kind !== 'theme' && this.theme === 'express' + kind && kind !== 'system' && this.system === 'express' ? fragments.get(`${name}-express`) : fragments.get(name); - // theme="spectrum" is available by default and doesn't need to be applied. + // system="spectrum" is available by default and doesn't need to be applied. const isAppliedFragment = name === 'spectrum' || !kind || this.hasAttribute(kind); if (currentStyles && isAppliedFragment) { @@ -304,9 +327,9 @@ export class Theme extends HTMLElement implements ThemeKindProvider { resolvedValue?: string, actualValue?: string ): void => { - const themeModifier = - this.theme && this.theme !== 'spectrum' - ? `-${this.theme}` + const systemModifier = + this.system && this.system !== 'spectrum' + ? `-${this.system}` : ''; if (!resolvedValue) { issues.push( @@ -321,7 +344,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider { .get(name) ?.get( resolvedValue + - (name === 'theme' ? '' : themeModifier) + (name === 'system' ? '' : systemModifier) ) ) { issues.push( @@ -329,7 +352,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider { ); } }; - checkForAttribute('theme', this.theme, this._theme); + checkForAttribute('system', this.system, this._system); checkForAttribute('color', this.color, this._color); checkForAttribute('scale', this.scale, this._scale); if (issues.length) { @@ -391,7 +414,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider { theme.scale = this.scale || undefined; theme.lang = this.lang || document.documentElement.lang || navigator.language; - theme.theme = this.theme || undefined; + theme.system = this.system || undefined; } protected connectedCallback(): void { diff --git a/tools/theme/src/express/core.ts b/tools/theme/src/express/core.ts index 0da7d272ee..60e6cc249f 100644 --- a/tools/theme/src/express/core.ts +++ b/tools/theme/src/express/core.ts @@ -14,4 +14,7 @@ import { Theme } from '../Theme.js'; import coreStyles from './theme.css.js'; +Theme.registerThemeFragment('express', 'system', coreStyles); + +// `theme` is deprecated in favor of `system` but maintaining `theme` as a deprecated path. Theme.registerThemeFragment('express', 'theme', coreStyles); diff --git a/tools/theme/stories/theme.stories.ts b/tools/theme/stories/theme.stories.ts index 7e0c0fedef..2f846f871f 100644 --- a/tools/theme/stories/theme.stories.ts +++ b/tools/theme/stories/theme.stories.ts @@ -66,7 +66,7 @@ export const Default = ({ ${storyStyles}
@@ -107,7 +107,7 @@ export const displayFlex = (): TemplateResult => html` Start Middle @@ -147,7 +147,7 @@ export const nestedTheme = ({ ${storyStyles}
@@ -170,7 +170,7 @@ export const nestedTheme = ({
@@ -225,7 +225,7 @@ export const reverseColorNestedTheme = ({
@@ -248,7 +248,7 @@ export const reverseColorNestedTheme = ({
diff --git a/tools/theme/test/theme-lazy.test.ts b/tools/theme/test/theme-lazy.test.ts index c7f76b9a1c..0d803aa231 100644 --- a/tools/theme/test/theme-lazy.test.ts +++ b/tools/theme/test/theme-lazy.test.ts @@ -32,7 +32,7 @@ describe('Themes - lazy', () => { Theme as unknown as TestableThemeConstructor ).themeFragmentsByKind.clear(); // Core is registered by default in `theme.ts` - Theme.registerThemeFragment('spectrum', 'theme', coreStyles); + Theme.registerThemeFragment('spectrum', 'system', coreStyles); }); after(() => { Theme.registerThemeFragment('light', 'color', lightStyles); diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index 1d07282639..11a386b7d1 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -100,7 +100,7 @@ export const packages = fs .concat(tools); const vrtHTML = - ({ themeVariant, color, scale, dir, reduceMotion, hcm }) => + ({ systemVariant, color, scale, dir, reduceMotion, hcm }) => (testFramework) => ` @@ -121,7 +121,7 @@ const vrtHTML = diff --git a/test/benchmark/cli.ts b/test/benchmark/cli.ts index 69b33a7ee3..57802c7745 100644 --- a/test/benchmark/cli.ts +++ b/test/benchmark/cli.ts @@ -95,6 +95,15 @@ const optionDefinitions: commandLineUsage.OptionDefinition[] = [ type: String, defaultValue: 'element', }, + { + name: 'end', + description: + 'Test until "updateComplete" for all elements in the text (only includes the work included required to update) or "paint" (wait for the paint after the update has completed).' + + '\n(default updateComplete)', + alias: 'e', + type: String, + defaultValue: 'updateComplete', + }, { name: 'json', description: 'Save output to json.', @@ -114,6 +123,7 @@ interface Options { browser: 'chrome' | 'firefox'; compare: string; start: string; + end: string; json: boolean; } @@ -162,6 +172,7 @@ $ node test/benchmark/cli -n 20 .map((dirEntry) => dirEntry.name); } const start = opts.start; + const end = opts.end; const printResults: string[] = []; for (const packageName of packages) { @@ -238,7 +249,7 @@ $ node test/benchmark/cli -n 20 if (opts.compare !== 'none') { config.benchmarks.push({ name: `${packageName}:${benchmark}`, - url: `bench-runner.html?bench=${benchmark}&package=${packageName}&start=${start}&dir=${monorepoDir}`, + url: `bench-runner.html?bench=${benchmark}&package=${packageName}&start=${start}&end=${end}&dir=${monorepoDir}`, packageVersions: { label: 'remote', dependencies: { @@ -260,7 +271,7 @@ $ node test/benchmark/cli -n 20 } config.benchmarks.push({ name: `${packageName}:${benchmark}`, - url: `bench-runner.html?bench=${benchmark}&package=${packageName}&start=${start}&dir=${monorepoDir}`, + url: `bench-runner.html?bench=${benchmark}&package=${packageName}&start=${start}&end=${end}&dir=${monorepoDir}`, measurement: 'global', browser: { name: opts.browser, diff --git a/test/benchmark/helpers.ts b/test/benchmark/helpers.ts index b0ae6e069c..b271b549cd 100644 --- a/test/benchmark/helpers.ts +++ b/test/benchmark/helpers.ts @@ -20,9 +20,26 @@ declare global { interface Window { tachometerResult: undefined | number; tachometerStart: undefined | 'page' | 'element'; + tachometerEnd: undefined | 'updateComplete' | 'paint'; } } +/** + * Runs `callback` shortly after the next browser Frame is produced. + */ +function runAfterFramePaint(callback: () => void) { + // Queue a "before Render Steps" callback via requestAnimationFrame. + requestAnimationFrame(() => { + const messageChannel = new MessageChannel(); + + // Setup the callback to run in a Task + messageChannel.port1.onmessage = callback; + + // Queue the Task on the Task Queue + messageChannel.port2.postMessage(undefined); + }); +} + @customElement('test-fixture') export class TestFixture extends LitElement { @property({ type: Boolean }) @@ -144,9 +161,10 @@ export const measureFixtureCreation = async ( return acc; }, [] as Element[]); } - document.body.offsetWidth; - } else { - await new Promise((res) => requestAnimationFrame(res)); + } + + if (window.tachometerEnd === 'paint') { + await new Promise((res) => runAfterFramePaint(res)); } if (opts.afterRender) { From 7d76eeddade6c3a7ec8a345cb09944d58ea73b48 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Mon, 1 Apr 2024 18:35:32 -0400 Subject: [PATCH 068/208] fix(shared): ensure the "updateComplete" in Focusable is stable --- .../action-group/test/action-group.test.ts | 4 ++ packages/button/test/button.test.ts | 35 +++++++++++++++++ packages/top-nav/test/top-nav.test.ts | 11 +++++- test/benchmark/helpers.ts | 4 ++ tools/shared/src/focusable.ts | 38 ++++++++++--------- 5 files changed, 72 insertions(+), 20 deletions(-) diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 816d201a71..82add2d170 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -770,6 +770,8 @@ describe('ActionGroup', () => { await elementUpdated(el); + await Promise.all(el.buttons.map((button) => elementUpdated(button))); + const firstButton = el.querySelector('.first') as ActionButton; const secondButton = el.querySelector('.second') as ActionButton; const thirdButton = el.querySelector('.third') as ActionButton; @@ -819,6 +821,8 @@ describe('ActionGroup', () => { await elementUpdated(el); + await Promise.all(el.buttons.map((button) => elementUpdated(button))); + const firstButton = el.querySelector('.first') as ActionButton; const secondButton = el.querySelector('.second') as ActionButton; const thirdButton = el.querySelector('.third') as ActionButton; diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 111e972148..2f82fb6916 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -97,6 +97,41 @@ describe('Button', () => { expect(el).to.not.be.undefined; await expect(el).to.be.accessible(); }); + it('has a stable/predictable `updateComplete`', async () => { + const test = await fixture( + html` +
+ ` + ); + + let keydownTime = -1; + let updateComplete1 = -1; + let updateComplete2 = -1; + + const el = document.createElement('sp-button'); + el.autofocus = true; + el.addEventListener('keydown', () => { + keydownTime = performance.now(); + }); + el.updateComplete.then(() => { + updateComplete1 = performance.now(); + }); + el.updateComplete.then(() => { + updateComplete2 = performance.now(); + }); + test.append(el); + // don't use elementUpdated(), as it is under test... + await nextFrame(); + await nextFrame(); + await nextFrame(); + await nextFrame(); + + expect(keydownTime, 'keydown happened').to.not.eq(-1); + expect(updateComplete1, 'first update complete happened').to.not.eq(-1); + expect(updateComplete2, 'first update complete happened').to.not.eq(-1); + expect(updateComplete1).lte(updateComplete2); + expect(updateComplete2).lte(keydownTime); + }); it('manages "role"', async () => { const el = await fixture
@@ -560,17 +546,11 @@ export class LayoutElement extends LitElement { ...this.querySelectorAll('code-example'), ] as CodeExample[]; examples.forEach((example) => { - example.codeTheme = - this.color === 'dark' || this.color === 'darkest' - ? 'dark' - : 'light'; + example.codeTheme = this.color; }); ( document.querySelector('html') as HTMLHtmlElement - ).style.colorScheme = - this.color === 'dark' || this.color === 'darkest' - ? 'dark' - : 'light'; + ).style.colorScheme = this.color; } if (changes.has('scale')) { if (window.localStorage) { diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts index 26b91c883d..e790672f91 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -338,10 +338,8 @@ export class StoryDecorator extends SpectrumElement { .value=${this.color} @change=${this.updateTheme} > - Lightest Light Dark - Darkest `; } diff --git a/tools/theme/package.json b/tools/theme/package.json index bd72490cea..8ae5191d2f 100755 --- a/tools/theme/package.json +++ b/tools/theme/package.json @@ -246,6 +246,8 @@ "./core-*.js", "./theme-*.js", "./scale-*.js", + "./spectrum-two/theme-*.js", + "./spectrum-two/scale-*.js", "./express/theme-*.js", "./express/scale-*.js", "./src/themes.js", @@ -253,6 +255,10 @@ "./src/express/core.js", "./src/express/core-*.js", "./src/express/themes.js", - "./src/express/themes-*.js" + "./src/express/themes-*.js", + "./src/spectrum-two/core.js", + "./src/spectrum-two/core-*.js", + "./src/spectrum-two/themes.js", + "./src/spectrum-two/themes-*.js" ] } From a20402cf27f5aaace13159fb5a07b5fc5c5f542d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 Apr 2024 16:11:27 -0400 Subject: [PATCH 087/208] chore: Configure Renovate (#4248) * Add renovate.json * chore: update renovate config --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Westbrook Johnson --- renovate.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 renovate.json diff --git a/renovate.json b/renovate.json new file mode 100644 index 0000000000..0c77564077 --- /dev/null +++ b/renovate.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "extends": [ + "config:recommended" + ], + "timezone": "America/Los_Angeles", + "schedule": [ + "after 12pm on thursday" + ] +} From d2fe74f3e26fcc5a7d39f45064684778866d2002 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 22 Apr 2024 22:13:16 -0400 Subject: [PATCH 088/208] chore: update dependency rollup to v4.16.2 (#4288) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- yarn.lock | 192 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 120 insertions(+), 72 deletions(-) diff --git a/yarn.lock b/yarn.lock index d225cc9f1c..67fa5f384c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4773,130 +4773,145 @@ estree-walker "^2.0.2" picomatch "^2.3.1" -"@rollup/rollup-android-arm-eabi@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.0.tgz#38c3abd1955a3c21d492af6b1a1dca4bb1d894d6" - integrity sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w== +"@rollup/rollup-android-arm-eabi@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.16.2.tgz#29b7b3c70ddf532fe6dcf859cbfc3e4714c34842" + integrity sha512-VGodkwtEuZ+ENPz/CpDSl091koMv8ao5jHVMbG1vNK+sbx/48/wVzP84M5xSfDAC69mAKKoEkSo+ym9bXYRK9w== "@rollup/rollup-android-arm-eabi@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.0.tgz#0437b27edd7095d0b6d5db99d13af8157d7c58b0" integrity sha512-+1ge/xmaJpm1KVBuIH38Z94zj9fBD+hp+/5WLaHgyY8XLq1ibxk/zj6dTXaqM2cAbYKq8jYlhHd6k05If1W5xA== -"@rollup/rollup-android-arm64@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.0.tgz#3822e929f415627609e53b11cec9a4be806de0e2" - integrity sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ== +"@rollup/rollup-android-arm64@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.16.2.tgz#f50f65d0c3b8b30d070d8616b2dfc0978dd588bd" + integrity sha512-5/W1xyIdc7jw6c/f1KEtg1vYDBWnWCsLiipK41NiaWGLG93eH2edgE6EgQJ3AGiPERhiOLUqlDSfjRK08C9xFg== "@rollup/rollup-android-arm64@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.0.tgz#d4c14ef9e45d5c46b8d1f611ab8124a611d5be5b" integrity sha512-im6hUEyQ7ZfoZdNvtwgEJvBWZYauC9KVKq1w58LG2Zfz6zMd8gRrbN+xCVoqA2hv/v6fm9lp5LFGJ3za8EQH3A== -"@rollup/rollup-darwin-arm64@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.0.tgz#6c082de71f481f57df6cfa3701ab2a7afde96f69" - integrity sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ== +"@rollup/rollup-darwin-arm64@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.16.2.tgz#be3d9fffbf6fc5b9d5f0642f1f0250e0ecab8d3e" + integrity sha512-vOAKMqZSTbPfyPVu1jBiy+YniIQd3MG7LUnqV0dA6Q5tyhdqYtxacTHP1+S/ksKl6qCtMG1qQ0grcIgk/19JEA== "@rollup/rollup-darwin-arm64@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.0.tgz#6f3fdf5712db6b5e3d8f62a86a09cd659dd871f9" integrity sha512-u7aTMskN6Dmg1lCT0QJ+tINRt+ntUrvVkhbPfFz4bCwRZvjItx2nJtwJnJRlKMMaQCHRjrNqHRDYvE4mBm3DlQ== -"@rollup/rollup-darwin-x64@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.0.tgz#c34ca0d31f3c46a22c9afa0e944403eea0edcfd8" - integrity sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg== +"@rollup/rollup-darwin-x64@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.16.2.tgz#fe45a772526b2c03d545e20f97a1e5cd60a46e52" + integrity sha512-aIJVRUS3Dnj6MqocBMrcXlatKm64O3ITeQAdAxVSE9swyhNyV1dwnRgw7IGKIkDQofatd8UqMSyUxuFEa42EcA== "@rollup/rollup-darwin-x64@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.0.tgz#626d7786fe7c10b2e8533ad981b4a791fd72b9d0" integrity sha512-8FvEl3w2ExmpcOmX5RJD0yqXcVSOqAJJUJ29Lca29Ik+3zPS1yFimr2fr5JSZ4Z5gt8/d7WqycpgkX9nocijSw== -"@rollup/rollup-linux-arm-gnueabihf@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.0.tgz#48e899c1e438629c072889b824a98787a7c2362d" - integrity sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA== +"@rollup/rollup-linux-arm-gnueabihf@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.16.2.tgz#450ecf66f30a51514413aafa79d28561db73151c" + integrity sha512-/bjfUiXwy3P5vYr6/ezv//Yle2Y0ak3a+Av/BKoi76nFryjWCkki8AuVoPR7ZU/ckcvAWFo77OnFK14B9B5JsA== "@rollup/rollup-linux-arm-gnueabihf@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.0.tgz#57ece7bb1b7659a3ea2ace580a63b8f92b3161f1" integrity sha512-lHoKYaRwd4gge+IpqJHCY+8Vc3hhdJfU6ukFnnrJasEBUvVlydP8PuwndbWfGkdgSvZhHfSEw6urrlBj0TSSfg== -"@rollup/rollup-linux-arm64-gnu@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.0.tgz#788c2698a119dc229062d40da6ada8a090a73a68" - integrity sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA== +"@rollup/rollup-linux-arm-musleabihf@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.16.2.tgz#1e8807d220047084579cd01499c5476a325e0700" + integrity sha512-S24b+tJHwpq2TNRz9T+r71FjMvyBBApY8EkYxz8Cwi/rhH6h+lu/iDUxyc9PuHf9UvyeBFYkWWcrDahai/NCGw== + +"@rollup/rollup-linux-arm64-gnu@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.16.2.tgz#128adb9dbf0057b989127d2e7fd73931a6729410" + integrity sha512-UN7VAXLyeyGbCQWiOtQN7BqmjTDw1ON2Oos4lfk0YR7yNhFEJWZiwGtvj9Ay4lsT/ueT04sh80Sg2MlWVVZ+Ug== "@rollup/rollup-linux-arm64-gnu@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.0.tgz#345b276b814a5377344adc5780c4dfb7cd0e8ba9" integrity sha512-JbEPfhndYeWHfOSeh4DOFvNXrj7ls9S/2omijVsao+LBPTPayT1uKcK3dHW3MwDJ7KO11t9m2cVTqXnTKpeaiw== -"@rollup/rollup-linux-arm64-musl@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.0.tgz#3882a4e3a564af9e55804beeb67076857b035ab7" - integrity sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ== +"@rollup/rollup-linux-arm64-musl@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.16.2.tgz#fddc7730045301a7fb0132532890e5edcb23d2bc" + integrity sha512-ZBKvz3+rIhQjusKMccuJiPsStCrPOtejCHxTe+yWp3tNnuPWtyCh9QLGPKz6bFNFbwbw28E2T6zDgzJZ05F1JQ== "@rollup/rollup-linux-arm64-musl@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.0.tgz#61cc6516e6e92e2205ea1d0ac30326379b0563c8" integrity sha512-ahqcSXLlcV2XUBM3/f/C6cRoh7NxYA/W7Yzuv4bDU1YscTFw7ay4LmD7l6OS8EMhTNvcrWGkEettL1Bhjf+B+w== -"@rollup/rollup-linux-riscv64-gnu@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.0.tgz#0c6ad792e1195c12bfae634425a3d2aa0fe93ab7" - integrity sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw== +"@rollup/rollup-linux-powerpc64le-gnu@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.16.2.tgz#7154fe9ffc6405b2a6555ca931c42c0aa5198c2a" + integrity sha512-LjMMFiVBRL3wOe095vHAekL4b7nQqf4KZEpdMWd3/W+nIy5o9q/8tlVKiqMbfieDypNXLsxM9fexOxd9Qcklyg== + +"@rollup/rollup-linux-riscv64-gnu@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.16.2.tgz#7a7d091a94fa7c50ebf72d5578475093e01c739e" + integrity sha512-ohkPt0lKoCU0s4B6twro2aft+QROPdUiWwOjPNTzwTsBK5w+2+iT9kySdtOdq0gzWJAdiqsV4NFtXOwGZmIsHA== "@rollup/rollup-linux-riscv64-gnu@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.0.tgz#e9add70ddca7bd6f685ec447ae83eb3be552f211" integrity sha512-uwvOYNtLw8gVtrExKhdFsYHA/kotURUmZYlinH2VcQxNCQJeJXnkmWgw2hI9Xgzhgu7J9QvWiq9TtTVwWMDa+w== -"@rollup/rollup-linux-x64-gnu@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz#9d62485ea0f18d8674033b57aa14fb758f6ec6e3" - integrity sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA== +"@rollup/rollup-linux-s390x-gnu@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.16.2.tgz#39b87bd355dfafbc062ca856d3d6bc5aa1905d89" + integrity sha512-jm2lvLc+/gqXfndlpDw05jKvsl/HKYxUEAt1h5UXcMFVpO4vGpoWmJVUfKDtTqSaHcCNw1his1XjkgR9aort3w== + +"@rollup/rollup-linux-x64-gnu@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.16.2.tgz#30b88169db18dec202ab9662d5148523d59da553" + integrity sha512-oc5/SlITI/Vj/qL4UM+lXN7MERpiy1HEOnrE+SegXwzf7WP9bzmZd6+MDljCEZTdSY84CpvUv9Rq7bCaftn1+g== "@rollup/rollup-linux-x64-gnu@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.0.tgz#ece153613f0cf2c864dbfc2076c579da8abd51a9" integrity sha512-m6pkSwcZZD2LCFHZX/zW2aLIISyzWLU3hrLLzQKMI12+OLEzgruTovAxY5sCZJkipklaZqPy/2bEEBNjp+Y7xg== -"@rollup/rollup-linux-x64-musl@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz#50e8167e28b33c977c1f813def2b2074d1435e05" - integrity sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw== +"@rollup/rollup-linux-x64-musl@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.16.2.tgz#d4fd52a28d5ce4aaed436311d89a9a1eaff87c2d" + integrity sha512-/2VWEBG6mKbS2itm7hzPwhIPaxfZh/KLWrYg20pCRLHhNFtF+epLgcBtwy3m07bl/k86Q3PFRAf2cX+VbZbwzQ== "@rollup/rollup-linux-x64-musl@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.0.tgz#2d2dbdf5fbf2c19d1f3d31b8a7850b57f5799037" integrity sha512-VFAC1RDRSbU3iOF98X42KaVicAfKf0m0OvIu8dbnqhTe26Kh6Ym9JrDulz7Hbk7/9zGc41JkV02g+p3BivOdAg== -"@rollup/rollup-win32-arm64-msvc@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.0.tgz#68d233272a2004429124494121a42c4aebdc5b8e" - integrity sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw== +"@rollup/rollup-win32-arm64-msvc@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.16.2.tgz#edd352302e3fa6a2d612447590b0a0887cdbf762" + integrity sha512-Wg7ANh7+hSilF0lG3e/0Oy8GtfTIfEk1327Bw8juZOMOoKmJLs3R+a4JDa/4cHJp2Gs7QfCDTepXXcyFD0ubBg== "@rollup/rollup-win32-arm64-msvc@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.0.tgz#bf2dbad350376e46cb77fab408bb398ad5f3648d" integrity sha512-9jPgMvTKXARz4inw6jezMLA2ihDBvgIU9Ml01hjdVpOcMKyxFBJrn83KVQINnbeqDv0+HdO1c09hgZ8N0s820Q== -"@rollup/rollup-win32-ia32-msvc@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.0.tgz#366ca62221d1689e3b55a03f4ae12ae9ba595d40" - integrity sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA== +"@rollup/rollup-win32-ia32-msvc@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.16.2.tgz#f17cc1db108f364bf6ef427f98844b5f742d31f0" + integrity sha512-J/jCDKVMWp0Y2ELnTjpQFYUCUWv1Jr+LdFrJVZtdqGyjDo0PHPa7pCamjHvJel6zBFM3doFFqAr7cmXYWBAbfw== "@rollup/rollup-win32-ia32-msvc@4.9.0": version "4.9.0" resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.0.tgz#5c26b07f74f4054f3ecf202550100496ed2e73f3" integrity sha512-WE4pT2kTXQN2bAv40Uog0AsV7/s9nT9HBWXAou8+++MBCnY51QS02KYtm6dQxxosKi1VIz/wZIrTQO5UP2EW+Q== -"@rollup/rollup-win32-x64-msvc@4.12.0": - version "4.12.0" - resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.0.tgz#9ffdf9ed133a7464f4ae187eb9e1294413fab235" - integrity sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg== +"@rollup/rollup-win32-x64-msvc@4.16.2": + version "4.16.2" + resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.16.2.tgz#98fb87589960075d39c44784e3a99f67138602f4" + integrity sha512-3nIf+SJMs2ZzrCh+SKNqgLVV9hS/UY0UjT1YU8XQYFGLiUfmHYJ/5trOU1XSvmHjV5gTF/K3DjrWxtyzKKcAHA== "@rollup/rollup-win32-x64-msvc@4.9.0": version "4.9.0" @@ -13459,11 +13474,16 @@ fs@^0.0.1-security: resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4" integrity sha1-invTcYa23d84E/I4WLV+yq9eQdQ= -fsevents@2.3.2, fsevents@^2.3.2, fsevents@~2.3.2: +fsevents@2.3.2, fsevents@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + fstream@^1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045" @@ -23134,25 +23154,28 @@ rollup@^2.43.1: fsevents "~2.3.2" rollup@^4.12.0: - version "4.12.0" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.12.0.tgz#0b6d1e5f3d46bbcf244deec41a7421dc54cc45b5" - integrity sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q== + version "4.16.2" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.16.2.tgz#43bcbd225d0a6bc68df97a6e41c45003188a3845" + integrity sha512-sxDP0+pya/Yi5ZtptF4p3avI+uWCIf/OdrfdH2Gbv1kWddLKk0U7WE3PmQokhi5JrektxsK3sK8s4hzAmjqahw== dependencies: "@types/estree" "1.0.5" optionalDependencies: - "@rollup/rollup-android-arm-eabi" "4.12.0" - "@rollup/rollup-android-arm64" "4.12.0" - "@rollup/rollup-darwin-arm64" "4.12.0" - "@rollup/rollup-darwin-x64" "4.12.0" - "@rollup/rollup-linux-arm-gnueabihf" "4.12.0" - "@rollup/rollup-linux-arm64-gnu" "4.12.0" - "@rollup/rollup-linux-arm64-musl" "4.12.0" - "@rollup/rollup-linux-riscv64-gnu" "4.12.0" - "@rollup/rollup-linux-x64-gnu" "4.12.0" - "@rollup/rollup-linux-x64-musl" "4.12.0" - "@rollup/rollup-win32-arm64-msvc" "4.12.0" - "@rollup/rollup-win32-ia32-msvc" "4.12.0" - "@rollup/rollup-win32-x64-msvc" "4.12.0" + "@rollup/rollup-android-arm-eabi" "4.16.2" + "@rollup/rollup-android-arm64" "4.16.2" + "@rollup/rollup-darwin-arm64" "4.16.2" + "@rollup/rollup-darwin-x64" "4.16.2" + "@rollup/rollup-linux-arm-gnueabihf" "4.16.2" + "@rollup/rollup-linux-arm-musleabihf" "4.16.2" + "@rollup/rollup-linux-arm64-gnu" "4.16.2" + "@rollup/rollup-linux-arm64-musl" "4.16.2" + "@rollup/rollup-linux-powerpc64le-gnu" "4.16.2" + "@rollup/rollup-linux-riscv64-gnu" "4.16.2" + "@rollup/rollup-linux-s390x-gnu" "4.16.2" + "@rollup/rollup-linux-x64-gnu" "4.16.2" + "@rollup/rollup-linux-x64-musl" "4.16.2" + "@rollup/rollup-win32-arm64-msvc" "4.16.2" + "@rollup/rollup-win32-ia32-msvc" "4.16.2" + "@rollup/rollup-win32-x64-msvc" "4.16.2" fsevents "~2.3.2" rollup@^4.4.0: @@ -24176,7 +24199,7 @@ string-to-template-literal@^2.0.0: resolved "https://registry.yarnpkg.com/string-to-template-literal/-/string-to-template-literal-2.0.0.tgz#0ce56bf42052d53049243e11dbf045b9ad687f9e" integrity sha512-AbTUWHXMyoRlTFP9qe013dfGTFq1XbcBLUoLC7PcumbJewtUwNXCvnko5cH2gZkUFC7kD2Fwxiv4YIndkU0xHA== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -24194,6 +24217,15 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^2.1.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -24322,7 +24354,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -24355,6 +24387,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.0, strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -27023,7 +27062,7 @@ workbox-window@7.0.0: "@types/trusted-types" "^2.0.2" workbox-core "7.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -27058,6 +27097,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3" From 503d565a66534243d95d6f13727b91615fbeda55 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Apr 2024 16:50:44 -0400 Subject: [PATCH 089/208] chore: bump @11ty/eleventy in the eleventy-ecosystem group (#4291) Bumps the eleventy-ecosystem group with 1 update: [@11ty/eleventy](https://github.com/11ty/eleventy). Updates `@11ty/eleventy` from 3.0.0-alpha.6 to 3.0.0-alpha.7 - [Release notes](https://github.com/11ty/eleventy/releases) - [Changelog](https://github.com/11ty/eleventy/blob/main/docs/release-instructions.md) - [Commits](https://github.com/11ty/eleventy/commits/v3.0.0-alpha.7) --- updated-dependencies: - dependency-name: "@11ty/eleventy" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: eleventy-ecosystem ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 84 +++++++++++++++++++++++++++---------------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/yarn.lock b/yarn.lock index 67fa5f384c..9abaedd535 100644 --- a/yarn.lock +++ b/yarn.lock @@ -19,22 +19,24 @@ dependencies: "@11ty/eleventy-utils" "^1.0.2" -"@11ty/eleventy-dev-server@^1.0.4": - version "1.0.4" - resolved "https://registry.yarnpkg.com/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz#87c2cf182ed22f90ac2793e1e1337a0d9e32b318" - integrity sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg== +"@11ty/eleventy-dev-server@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.0.tgz#f97cf03b345673c5e449638f3a03e24cd8a66b25" + integrity sha512-hqxQV92Bos0uyZa3P+BAX0nQqjQQMi4vCSxcQHNYEB/jjGV6CnurLBSn63U1VoixGAL4SpHm9OdTa2oVOTUx6Q== dependencies: - "@11ty/eleventy-utils" "^1.0.1" - chokidar "^3.5.3" + "@11ty/eleventy-utils" "^1.0.2" + chokidar "^3.6.0" debug "^4.3.4" dev-ip "^1.0.1" finalhandler "^1.2.0" mime "^3.0.0" minimist "^1.2.8" - morphdom "^2.7.0" + morphdom "^2.7.2" please-upgrade-node "^3.2.0" - ssri "^8.0.1" - ws "^8.13.0" + send "^0.18.0" + ssri "^10.0.5" + urlpattern-polyfill "^10.0.0" + ws "^8.16.0" "@11ty/eleventy-plugin-syntaxhighlight@^5.0.0": version "5.0.0" @@ -43,7 +45,7 @@ dependencies: prismjs "^1.29.0" -"@11ty/eleventy-utils@^1.0.1", "@11ty/eleventy-utils@^1.0.2": +"@11ty/eleventy-utils@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz#a936338385c83e7ce61438d08c85830db8c5c648" integrity sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA== @@ -51,13 +53,13 @@ normalize-path "^3.0.0" "@11ty/eleventy@^3.0.0-alpha.4": - version "3.0.0-alpha.6" - resolved "https://registry.yarnpkg.com/@11ty/eleventy/-/eleventy-3.0.0-alpha.6.tgz#8662beb054207d28c4f742617bb063b972aa9a47" - integrity sha512-wllqMiM3A9qRt1mUA6iETQfhRtpFfUnzCT7v4RK/5RFqX/Bjwmqe18v7dfStHSO+V2zv5hE32skdM23HigG+eg== + version "3.0.0-alpha.7" + resolved "https://registry.yarnpkg.com/@11ty/eleventy/-/eleventy-3.0.0-alpha.7.tgz#713e8faa4bcf291eb05e47f7b965938b955de9d0" + integrity sha512-0d81WOSU9OVnRZKwnMl61cWxXuM4fXyJabgW9Q5PovO0Yx/eT+xkdzhRFwC70cSgLVVsZY5BYnvlauCW1hqNrw== dependencies: "@11ty/dependency-tree" "^3.0.0" "@11ty/dependency-tree-esm" "^1.0.0" - "@11ty/eleventy-dev-server" "^1.0.4" + "@11ty/eleventy-dev-server" "^2.0.0" "@11ty/eleventy-utils" "^1.0.2" "@11ty/lodash-custom" "^4.17.21" "@11ty/posthtml-urls" "^1.0.0" @@ -73,14 +75,14 @@ is-glob "^4.0.3" iso-639-1 "^3.1.2" kleur "^4.1.5" - liquidjs "^10.10.2" + liquidjs "^10.11.1" luxon "^3.4.4" markdown-it "^14.1.0" micromatch "^4.0.5" minimist "^1.2.8" moo "^0.5.2" multimatch "^7.0.0" - node-retrieve-globals "^5.0.0" + node-retrieve-globals "^6.0.0" normalize-path "^3.0.0" nunjucks "^3.2.4" please-upgrade-node "^3.2.0" @@ -7875,7 +7877,7 @@ acorn-walk@^7.1.1: resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== -acorn-walk@^8.0.0, acorn-walk@^8.1.1, acorn-walk@^8.3.1: +acorn-walk@^8.0.0, acorn-walk@^8.1.1, acorn-walk@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa" integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A== @@ -7885,7 +7887,7 @@ acorn@^7.1.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== -acorn@^8.0.0, acorn@^8.0.4, acorn@^8.10.0, acorn@^8.11.2, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.6.0, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0: +acorn@^8.0.0, acorn@^8.0.4, acorn@^8.1.3, acorn@^8.10.0, acorn@^8.11.2, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.6.0, acorn@^8.7.1, acorn@^8.8.2, acorn@^8.9.0: version "8.11.3" resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a" integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg== @@ -17317,10 +17319,10 @@ linkify-it@^5.0.0: dependencies: uc.micro "^2.0.0" -liquidjs@^10.10.2: - version "10.11.0" - resolved "https://registry.yarnpkg.com/liquidjs/-/liquidjs-10.11.0.tgz#85a5bb50b4838558d03a352f7427f3186229e028" - integrity sha512-DPUG/ez9KbeV6oxon4EOJPzkNModjYmSa2ceP3r9+3bOV9+MnpN/+a1KwGaj8bz5pp4td3kBiHrPX9sC7iuDxA== +liquidjs@^10.11.1: + version "10.11.1" + resolved "https://registry.yarnpkg.com/liquidjs/-/liquidjs-10.11.1.tgz#abc6cd118bda960883401a6f0e406e29d64bcf43" + integrity sha512-ORlMi7Okt311anHyvuYTRijrdX9He4lbeGEfugSLeHuSYREnFM2M0ppG1/zQHR/k5KSvMP/d4DfUDIFdS8MtqQ== dependencies: commander "^10.0.0" @@ -19213,10 +19215,10 @@ moo@^0.5.2: resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c" integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q== -morphdom@^2.7.0: - version "2.7.0" - resolved "https://registry.yarnpkg.com/morphdom/-/morphdom-2.7.0.tgz#9ef0c4bc15ac8725df398d127c6984f62e7f89e8" - integrity sha512-8L8DwbdjjWwM/aNqj7BSoSn4G7SQLNiDcxCnMWbf506jojR6lNQ5YOmQqXEIE8u3C492UlkN4d0hQwz97+M1oQ== +morphdom@^2.7.2: + version "2.7.2" + resolved "https://registry.yarnpkg.com/morphdom/-/morphdom-2.7.2.tgz#d48a87254f9b3031c0e1ec367736721fbaf22167" + integrity sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg== move-file@^3.0.0: version "3.0.0" @@ -19720,13 +19722,13 @@ node-releases@^2.0.14: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== -node-retrieve-globals@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/node-retrieve-globals/-/node-retrieve-globals-5.0.0.tgz#386112672ae1d3c6e264d04316bb419ba090e466" - integrity sha512-C4R0rtPEoxJaeo8RnLWx3VMvFgs0fAePFvI6WHBS2BS/aNxuHwL9IK922UBOjHnD5UKVfY1Xef9qk/BkmLrWiw== +node-retrieve-globals@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/node-retrieve-globals/-/node-retrieve-globals-6.0.0.tgz#682889351b83fb7b6c48d0e09b16a0487ff3ee1f" + integrity sha512-VoEp6WMN/JcbBrJr6LnFE11kdzpKiBKNPFrHCEK2GgFWtiYpeL85WgcZpZFFnWxAU0O65+b+ipQAy4Oxy/+Pdg== dependencies: - acorn "^8.8.2" - acorn-walk "^8.3.1" + acorn "^8.1.3" + acorn-walk "^8.3.2" esm-import-transformer "^3.0.2" node-source-walk@^6.0.0, node-source-walk@^6.0.1, node-source-walk@^6.0.2: @@ -23430,7 +23432,7 @@ semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semve dependencies: lru-cache "^6.0.0" -send@0.18.0: +send@0.18.0, send@^0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg== @@ -24061,20 +24063,13 @@ ssri@9.0.1, ssri@^9.0.0: dependencies: minipass "^3.1.1" -ssri@^10.0.0, ssri@^10.0.1: +ssri@^10.0.0, ssri@^10.0.1, ssri@^10.0.5: version "10.0.5" resolved "https://registry.yarnpkg.com/ssri/-/ssri-10.0.5.tgz#e49efcd6e36385196cb515d3a2ad6c3f0265ef8c" integrity sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A== dependencies: minipass "^7.0.3" -ssri@^8.0.1: - version "8.0.1" - resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af" - integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ== - dependencies: - minipass "^3.1.1" - stable@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf" @@ -26127,6 +26122,11 @@ urlpattern-polyfill@8.0.2: resolved "https://registry.yarnpkg.com/urlpattern-polyfill/-/urlpattern-polyfill-8.0.2.tgz#99f096e35eff8bf4b5a2aa7d58a1523d6ebc7ce5" integrity sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ== +urlpattern-polyfill@^10.0.0: + version "10.0.0" + resolved "https://registry.yarnpkg.com/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz#f0a03a97bfb03cdf33553e5e79a2aadd22cac8ec" + integrity sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg== + urlpattern-polyfill@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/urlpattern-polyfill/-/urlpattern-polyfill-6.0.2.tgz#a193fe773459865a2a5c93b246bb794b13d07256" @@ -27210,7 +27210,7 @@ ws@8.13.0: resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== -ws@>=7.4.6, ws@^8.13.0, ws@^8.16.0, ws@^8.2.3: +ws@>=7.4.6, ws@^8.16.0, ws@^8.2.3: version "8.16.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4" integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ== From e68545fc30d9985e9fc1981a24fa5a8a14e416f9 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Apr 2024 18:19:59 -0400 Subject: [PATCH 090/208] chore: bump the commitlint-ecosystem group with 2 updates (#4290) Bumps the commitlint-ecosystem group with 2 updates: [@commitlint/cli](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/cli) and [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/HEAD/@commitlint/config-conventional). Updates `@commitlint/cli` from 19.2.1 to 19.3.0 - [Release notes](https://github.com/conventional-changelog/commitlint/releases) - [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/cli/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.3.0/@commitlint/cli) Updates `@commitlint/config-conventional` from 19.1.0 to 19.2.2 - [Release notes](https://github.com/conventional-changelog/commitlint/releases) - [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/commitlint/commits/v19.2.2/@commitlint/config-conventional) --- updated-dependencies: - dependency-name: "@commitlint/cli" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: commitlint-ecosystem - dependency-name: "@commitlint/config-conventional" dependency-type: direct:development update-type: version-update:semver-minor dependency-group: commitlint-ecosystem ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/yarn.lock b/yarn.lock index 9abaedd535..cae6f825d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1282,12 +1282,12 @@ integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== "@commitlint/cli@^19.2.1": - version "19.2.1" - resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.2.1.tgz#8f00d27a8b7c7780e75b06fd4658fdc1e9209f1b" - integrity sha512-cbkYUJsLqRomccNxvoJTyv5yn0bSy05BBizVyIcLACkRbVUqYorC351Diw/XFSWC/GtpwiwT2eOvQgFZa374bg== + version "19.3.0" + resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-19.3.0.tgz#44e6da9823a01f0cdcc43054bbefdd2c6c5ddf39" + integrity sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g== dependencies: - "@commitlint/format" "^19.0.3" - "@commitlint/lint" "^19.1.0" + "@commitlint/format" "^19.3.0" + "@commitlint/lint" "^19.2.2" "@commitlint/load" "^19.2.0" "@commitlint/read" "^19.2.1" "@commitlint/types" "^19.0.3" @@ -1295,9 +1295,9 @@ yargs "^17.0.0" "@commitlint/config-conventional@^19.1.0": - version "19.1.0" - resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.1.0.tgz#6b4b7938aa3bc308214a683247520f602e55961e" - integrity sha512-KIKD2xrp6Uuk+dcZVj3++MlzIr/Su6zLE8crEDQCZNvWHNQSeeGbzOlNtsR32TUy6H3JbP7nWgduAHCaiGQ6EA== + version "19.2.2" + resolved "https://registry.yarnpkg.com/@commitlint/config-conventional/-/config-conventional-19.2.2.tgz#1f4e6975d428985deacf2b3ff6547e02c9302054" + integrity sha512-mLXjsxUVLYEGgzbxbxicGPggDuyWNkf25Ht23owXIH+zV2pv1eJuzLK3t1gDY5Gp6pxdE60jZnWUY5cvgL3ufw== dependencies: "@commitlint/types" "^19.0.3" conventional-changelog-conventionalcommits "^7.0.2" @@ -1337,28 +1337,28 @@ resolved "https://registry.yarnpkg.com/@commitlint/execute-rule/-/execute-rule-19.0.0.tgz#928fb239ae8deec82a6e3b05ec9cfe20afa83856" integrity sha512-mtsdpY1qyWgAO/iOK0L6gSGeR7GFcdW7tIjcNFxcWkfLDF5qVbPHKuGATFqRMsxcO8OUKNj0+3WOHB7EHm4Jdw== -"@commitlint/format@^19.0.3": - version "19.0.3" - resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-19.0.3.tgz#6e3dcdc028b39d370ba717b8bde0853705c467dc" - integrity sha512-QjjyGyoiVWzx1f5xOteKHNLFyhyweVifMgopozSgx1fGNrGV8+wp7k6n1t6StHdJ6maQJ+UUtO2TcEiBFRyR6Q== +"@commitlint/format@^19.3.0": + version "19.3.0" + resolved "https://registry.yarnpkg.com/@commitlint/format/-/format-19.3.0.tgz#48dd9e6930d41eb0ca19f36159ee940c5b25d857" + integrity sha512-luguk5/aF68HiF4H23ACAfk8qS8AHxl4LLN5oxPc24H+2+JRPsNr1OS3Gaea0CrH7PKhArBMKBz5RX9sA5NtTg== dependencies: "@commitlint/types" "^19.0.3" chalk "^5.3.0" -"@commitlint/is-ignored@^19.0.3": - version "19.0.3" - resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-19.0.3.tgz#a64e0e217044f2d916127369d21ea12324a834fe" - integrity sha512-MqDrxJaRSVSzCbPsV6iOKG/Lt52Y+PVwFVexqImmYYFhe51iVJjK2hRhOG2jUAGiUHk4jpdFr0cZPzcBkSzXDQ== +"@commitlint/is-ignored@^19.2.2": + version "19.2.2" + resolved "https://registry.yarnpkg.com/@commitlint/is-ignored/-/is-ignored-19.2.2.tgz#503ddcf908ac6b2bc4586a49cb53893a1856f5b2" + integrity sha512-eNX54oXMVxncORywF4ZPFtJoBm3Tvp111tg1xf4zWXGfhBPKpfKG6R+G3G4v5CPlRROXpAOpQ3HMhA9n1Tck1g== dependencies: "@commitlint/types" "^19.0.3" semver "^7.6.0" -"@commitlint/lint@^19.1.0": - version "19.1.0" - resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.1.0.tgz#0f4b26b1452d59a92a28b5fa6de9bdbee18399a1" - integrity sha512-ESjaBmL/9cxm+eePyEr6SFlBUIYlYpI80n+Ltm7IA3MAcrmiP05UMhJdAD66sO8jvo8O4xdGn/1Mt2G5VzfZKw== +"@commitlint/lint@^19.2.2": + version "19.2.2" + resolved "https://registry.yarnpkg.com/@commitlint/lint/-/lint-19.2.2.tgz#57f69e24bd832a7dcce8ebf82d11e3bf03ccc2a9" + integrity sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA== dependencies: - "@commitlint/is-ignored" "^19.0.3" + "@commitlint/is-ignored" "^19.2.2" "@commitlint/parse" "^19.0.3" "@commitlint/rules" "^19.0.3" "@commitlint/types" "^19.0.3" From 593c13bb02e3cf0c5e8861c844228d446714d644 Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Tue, 23 Apr 2024 20:03:39 -0400 Subject: [PATCH 091/208] chore: update chromedriver (#4293) --- package.json | 2 +- yarn.lock | 39 +++++++-------------------------------- 2 files changed, 8 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 4c4b270bab..ac9925b850 100755 --- a/package.json +++ b/package.json @@ -138,7 +138,7 @@ "alex": "^11.0.1", "cem-plugin-module-file-extensions": "^0.0.5", "chalk": "^5.0.1", - "chromedriver": "^122.0.0", + "chromedriver": "^123.0.0", "common-tags": "^1.8.2", "custom-elements-manifest": "^2.0.0", "debounce": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index cae6f825d8..8dd3c64147 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9612,10 +9612,10 @@ chrome-trace-event@^1.0.2: dependencies: tslib "^1.9.0" -chromedriver@^122.0.0: - version "122.0.6" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-122.0.6.tgz#d5b2922416ba1b5e09d8da1c8fa95b370d10cd6f" - integrity sha512-Q0r+QlUtiJWMQ5HdYaFa0CtBmLFq3n5JWfmq9mOC00UMBvWxku09gUkvBt457QnYfTM/XHqY/HTFOxHvATnTmA== +chromedriver@^123.0.0: + version "123.0.4" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-123.0.4.tgz#886886c79108b22b10f80925b67cecdc46d41988" + integrity sha512-3Yi7y7q35kkSAOTbRisiww/SL2w+DqafDPAaUShpSuLMmPaOvHQR0i3bm2/33QBiQ8fUb1J/MzppzVL6IDqvhA== dependencies: "@testim/chrome-version" "^1.1.4" axios "^1.6.7" @@ -24194,7 +24194,7 @@ string-to-template-literal@^2.0.0: resolved "https://registry.yarnpkg.com/string-to-template-literal/-/string-to-template-literal-2.0.0.tgz#0ce56bf42052d53049243e11dbf045b9ad687f9e" integrity sha512-AbTUWHXMyoRlTFP9qe013dfGTFq1XbcBLUoLC7PcumbJewtUwNXCvnko5cH2gZkUFC7kD2Fwxiv4YIndkU0xHA== -"string-width-cjs@npm:string-width@^4.2.0": +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -24212,15 +24212,6 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - version "4.2.3" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - string-width@^2.1.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -24349,7 +24340,7 @@ stringify-object@^3.3.0: is-obj "^1.0.1" is-regexp "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -24382,13 +24373,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" -strip-ansi@^6.0.0, strip-ansi@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - strip-ansi@^7.0.0, strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -27062,7 +27046,7 @@ workbox-window@7.0.0: "@types/trusted-types" "^2.0.2" workbox-core "7.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -27097,15 +27081,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.0.1.tgz#2101e861777fec527d0ea90c57c6b03aac56a5b3" From df2d9af59bd88a8b375dd12ab1902d6c6a909f9f Mon Sep 17 00:00:00 2001 From: Westbrook Johnson Date: Wed, 24 Apr 2024 09:32:10 -0400 Subject: [PATCH 092/208] chore: use latest playwright (#4295) * chore: use latest playwright * ci: update golden images cache --- .circleci/config.yml | 4 ++-- package.json | 2 +- yarn.lock | 28 ++++++++++++++-------------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 3dd8f1d415..78d6d1ea0c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -3,14 +3,14 @@ version: 2.1 executors: node: docker: - - image: mcr.microsoft.com/playwright:v1.42.1 + - image: mcr.microsoft.com/playwright:v1.43.1 resource_class: large environment: NODE_ENV: development parameters: current_golden_images_hash: type: string - default: ad9b04c1970941a7e18a9f3505a0a93523ad31d3 + default: 171002bd5c878baa0f931adf4d0d05da1b8ed130 wireit_cache_name: type: string default: wireit diff --git a/package.json b/package.json index ac9925b850..155a813b52 100755 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "@netlify/build": "^29.1.0", "@open-wc/dev-server-hmr": "^0.2.0", "@open-wc/testing": "^3.2.0", - "@playwright/test": "^1.42.1", + "@playwright/test": "^1.43.1", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.0.1", "@rollup/plugin-node-resolve": "^15.2.3", diff --git a/yarn.lock b/yarn.lock index 8dd3c64147..a25004efd3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4228,12 +4228,12 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@playwright/test@^1.42.1": - version "1.42.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.42.1.tgz#9eff7417bcaa770e9e9a00439e078284b301f31c" - integrity sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ== +"@playwright/test@^1.43.1": + version "1.43.1" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.43.1.tgz#16728a59eb8ce0f60472f98d8886d6cab0fa3e42" + integrity sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA== dependencies: - playwright "1.42.1" + playwright "1.43.1" "@pnpm/network.ca-file@^1.0.1": version "1.0.1" @@ -21295,17 +21295,17 @@ pkg-up@^4.0.0: dependencies: find-up "^6.2.0" -playwright-core@1.42.1: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.42.1.tgz#13c150b93c940a3280ab1d3fbc945bc855c9459e" - integrity sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA== +playwright-core@1.43.1: + version "1.43.1" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.43.1.tgz#0eafef9994c69c02a1a3825a4343e56c99c03b02" + integrity sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg== -playwright@1.42.1, playwright@^1.22.2: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.42.1.tgz#79c828b51fe3830211137550542426111dc8239f" - integrity sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg== +playwright@1.43.1, playwright@^1.22.2: + version "1.43.1" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.43.1.tgz#8ad08984ac66c9ef3d0db035be54dd7ec9f1c7d9" + integrity sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA== dependencies: - playwright-core "1.42.1" + playwright-core "1.43.1" optionalDependencies: fsevents "2.3.2" From d5efe6e31f4398b2bf8569c5a236e9d85e17c009 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Thu, 25 Apr 2024 11:27:59 +0530 Subject: [PATCH 093/208] chore: updated golden image hash --- .circleci/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 78d6d1ea0c..2b34b4844d 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 171002bd5c878baa0f931adf4d0d05da1b8ed130 + default: fdad34196f267ea453e9de37ab8e1608b8a03ae7 wireit_cache_name: type: string default: wireit From 6c45b9b7154771686bbfbb27937a634242d42639 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 26 Apr 2024 11:50:13 +0530 Subject: [PATCH 094/208] chore: fixed merge conflicts --- .../documentation/src/components/layout.ts | 8 +- .../styles/tokens-v2/spectrum/global-vars.css | 1353 +++++++++++++++++ tools/theme/src/Theme.ts | 1 - 3 files changed, 1357 insertions(+), 5 deletions(-) diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts index 8ece92ef20..3497eef980 100644 --- a/projects/documentation/src/components/layout.ts +++ b/projects/documentation/src/components/layout.ts @@ -91,10 +91,10 @@ const lazyStyleFragment = ( ): void => { var fragmentName = `${name}-${system}`; switch (fragmentName) { - case 'dark-spectrum': + case 'dark-spectrum' || 'darkest-spectrum': import('@spectrum-web-components/theme/theme-dark.js'); break; - case 'light-spectrum': + case 'light-spectrum' || 'lightest-spectrum': import('@spectrum-web-components/theme/theme-light.js'); break; case 'medium-spectrum': @@ -103,10 +103,10 @@ const lazyStyleFragment = ( case 'large-spectrum': import('@spectrum-web-components/theme/scale-large.js'); break; - case 'dark-express': + case 'dark-express' || 'darkest-express': import('@spectrum-web-components/theme/express/theme-dark.js'); break; - case 'light-express': + case 'light-express' || 'lightest-express': import('@spectrum-web-components/theme/express/theme-light.js'); break; case 'medium-express': diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css index c73cf0c125..b640cd8774 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/spectrum/global-vars.css @@ -6762,3 +6762,1356 @@ --spectrum-neutral-subdued-background-color-default ); } + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts index f03a121f32..785d2563aa 100755 --- a/tools/theme/src/Theme.ts +++ b/tools/theme/src/Theme.ts @@ -58,7 +58,6 @@ export type Color = | 'dark-spectrum-two'; export type SystemVariant = 'spectrum' | 'express' | 'spectrum-two'; const SystemVariantValues = ['spectrum', 'express', 'spectrum-two']; -const ScaleValues = ['medium', 'large', 'medium-express', 'large-express']; export type Scale = | 'medium' | 'large' From 1482230b1b46d325f04defbe3f19c758cd58c879 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 26 Apr 2024 12:45:28 +0530 Subject: [PATCH 095/208] chore: fixed merge conflicts --- tools/theme/src/Theme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts index 50e1e7dc32..200daffaa0 100755 --- a/tools/theme/src/Theme.ts +++ b/tools/theme/src/Theme.ts @@ -56,6 +56,7 @@ export type Color = | 'darkest-express' | 'light-spectrum-two' | 'dark-spectrum-two'; +export type ThemeVariant = 'spectrum' | 'express' | 'spectrum-two'; export type SystemVariant = 'spectrum' | 'express' | 'spectrum-two'; const SystemVariantValues = ['spectrum', 'express', 'spectrum-two']; export type Scale = From 84b1d49ae21bace91501b63b118d2972c3563066 Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 26 Apr 2024 13:06:32 +0530 Subject: [PATCH 096/208] chore: use system instead of theme in s2 --- tools/theme/src/Theme.ts | 2 +- tools/theme/src/spectrum-two/core-tokens.ts | 2 +- tools/theme/src/spectrum-two/core.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts index 200daffaa0..8f2244a8c7 100755 --- a/tools/theme/src/Theme.ts +++ b/tools/theme/src/Theme.ts @@ -338,7 +338,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider { kind !== 'system' && this.theme !== 'spectrum' && this.system !== 'spectrum' - ? fragments.get(`${name}-${this.theme}`) + ? fragments.get(`${name}-${this.system}`) : fragments.get(name); // theme="spectrum" is available by default and doesn't need to be applied. const isAppliedFragment = diff --git a/tools/theme/src/spectrum-two/core-tokens.ts b/tools/theme/src/spectrum-two/core-tokens.ts index 55c28c9304..9499581842 100755 --- a/tools/theme/src/spectrum-two/core-tokens.ts +++ b/tools/theme/src/spectrum-two/core-tokens.ts @@ -14,4 +14,4 @@ import { Theme } from '../Theme.js'; import coreStyles from './theme-core-tokens.css.js'; -Theme.registerThemeFragment('spectrum-two', 'theme', coreStyles); +Theme.registerThemeFragment('spectrum-two', 'system', coreStyles); diff --git a/tools/theme/src/spectrum-two/core.ts b/tools/theme/src/spectrum-two/core.ts index b8b307ae6d..0ced386df4 100644 --- a/tools/theme/src/spectrum-two/core.ts +++ b/tools/theme/src/spectrum-two/core.ts @@ -14,4 +14,4 @@ import { Theme } from '../Theme.js'; import coreStyles from './theme.css.js'; -Theme.registerThemeFragment('spectrum-two', 'theme', coreStyles); +Theme.registerThemeFragment('spectrum-two', 'system', coreStyles); From f4ac74b372465c51d45e90207a0fc1d7f366394c Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 26 Apr 2024 22:34:54 +0530 Subject: [PATCH 097/208] chore: externalised process spectrum script and update golden image hash --- .circleci/config.yml | 2 +- package.json | 5 +- ...m-tokens.js => generate-tokens-wrapper.js} | 99 +- scripts/generate-tokens.js | 19 + scripts/spectrum-two-tokens.js | 179 - tools/styles/tokens-v2/global-vars.css | 93 - tools/styles/tokens-v2/large-vars.css | 209 - tools/styles/tokens-v2/medium-vars.css | 209 - .../tokens-v2/spectrum/custom-dark-vars.css | 18 +- .../spectrum/custom-darkest-vars.css | 18 +- .../tokens-v2/spectrum/custom-large-vars.css | 35 - .../tokens-v2/spectrum/custom-light-vars.css | 18 +- .../tokens-v2/spectrum/custom-medium-vars.css | 35 - .../styles/tokens-v2/spectrum/global-vars.css | 2706 +++++++++++ tools/styles/tokens/express/global-vars.css | 2678 +++++++++++ tools/styles/tokens/spectrum/global-vars.css | 4059 +++++++++++++++++ 16 files changed, 9523 insertions(+), 859 deletions(-) rename scripts/{spectrum-tokens.js => generate-tokens-wrapper.js} (80%) create mode 100644 scripts/generate-tokens.js delete mode 100644 scripts/spectrum-two-tokens.js diff --git a/.circleci/config.yml b/.circleci/config.yml index d871a79b08..35ace270c5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 171002bd5c878baa0f931adf4d0d05da1b8ed130 + default: 84b1d49ae21bace91501b63b118d2972c3563066 wireit_cache_name: type: string default: wireit diff --git a/package.json b/package.json index 155a813b52..d6b1f7ec95 100755 --- a/package.json +++ b/package.json @@ -367,14 +367,13 @@ ] }, "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/spectrum-tokens.js && node ./scripts/spectrum-two-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"", + "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"", "files": [ "tasks/process-spectrum.js", "packages/**/spectrum-config.js", "tools/**/spectrum-config.js", "node_modules/@spectrum-css/**/index-vars.css", - "scripts/spectrum-two-tokens.js", - "scripts/spectrum-tokens.js", + "scripts/generate-tokens.js", "node_modules/@spectrum-css/**/*.css", "scripts/spectrum-vars.js", "tools/styles/package.json" diff --git a/scripts/spectrum-tokens.js b/scripts/generate-tokens-wrapper.js similarity index 80% rename from scripts/spectrum-tokens.js rename to scripts/generate-tokens-wrapper.js index 8f4eb29b24..8112a05a7a 100644 --- a/scripts/spectrum-tokens.js +++ b/scripts/generate-tokens-wrapper.js @@ -9,7 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ - import fg from 'fast-glob'; import fs from 'fs-extra'; import path from 'path'; @@ -17,17 +16,19 @@ import { fileURLToPath } from 'url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const tokensRoot = path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - 'tokens', - 'dist', - 'css', - '**', - '*.css' -); +const tokensRoot = (tokensDir) => { + return path.join( + __dirname, + '..', + 'node_modules', + '@spectrum-css', + tokensDir, + 'dist', + 'css', + '**', + '*.css' + ); +}; /** @todo Could generate this from CSS packages that have @spectrum-css/tokens as a dependency */ const tokenPackages = [ @@ -123,55 +124,66 @@ const removeImporantComments = (css) => { return css.replaceAll(importantCommentRegExp, ''); }; -const processTokens = (srcPath) => { +const processTokens = (srcPath, tokensDir) => { let css = fs.readFileSync(srcPath, 'utf8'); const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); css = removeImporantComments(targetHost(css)); + // if the filename starts with express ignore it + if (fileName.startsWith('express')) { + return; + } + fs.writeFileSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens', fileName), + path.join(__dirname, '..', 'tools', 'styles', tokensDir, fileName), css ); }; -const processPackages = async (srcPath, index) => { +const processPackages = async (srcPath, tokensDir, index) => { const packageName = tokenPackages[index]; - const expressPath = path.join(srcPath, 'express.css'); const spectrumPath = path.join(srcPath, 'spectrum.css'); - // check if expressPath exists - if (fs.existsSync(expressPath)) { - let express = fs.readFileSync(expressPath, 'utf8'); - express = removeImporantComments(targetHost(express)); + // check if spectrumPath exists + if (fs.existsSync(spectrumPath)) { + let spectrum = fs.readFileSync(spectrumPath, 'utf8'); + spectrum = removeImporantComments(targetHost(spectrum)); fs.appendFileSync( path.join( __dirname, '..', 'tools', 'styles', - 'tokens', - 'express', + tokensDir, + 'spectrum', 'global-vars.css' ), - express + spectrum ); } - // check if spectrumPath exists - if (fs.existsSync(spectrumPath)) { - let spectrum = fs.readFileSync(spectrumPath, 'utf8'); - spectrum = removeImporantComments(targetHost(spectrum)); + // spectrum-2 doesn't need express or vars + if (tokensDir === 'tokens-v2') { + return; + } + + const expressPath = path.join(srcPath, 'express.css'); + + // check if expressPath exists + if (fs.existsSync(expressPath)) { + let express = fs.readFileSync(expressPath, 'utf8'); + express = removeImporantComments(targetHost(express)); fs.appendFileSync( path.join( __dirname, '..', 'tools', 'styles', - 'tokens', - 'spectrum', + tokensDir, + 'express', 'global-vars.css' ), - spectrum + express ); } @@ -199,24 +211,23 @@ const processPackages = async (srcPath, index) => { } }; -const spectrumTokens = async () => { - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'spectrum'), - { - recursive: true, - } - ); +/** + * Core entry function + */ +export async function generateTokensWrapper(spectrumVersion) { + const tokensDir = spectrumVersion === 'classic' ? 'tokens' : 'tokens-v2'; fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'express'), + path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'), { recursive: true, } ); - for (const tokensPath of await fg([`${tokensRoot}`])) { - processTokens(tokensPath); + for (const tokensPath of await fg([`${tokensRoot(spectrumVersion)}`])) { + processTokens(tokensPath, tokensDir); } - const processes = packagePaths.map(processPackages); - await Promise.all(processes); -}; -spectrumTokens(); + const processes = packagePaths.map((path, index) => { + return processPackages(path, tokensDir, index); + }); + await Promise.all(processes); +} diff --git a/scripts/generate-tokens.js b/scripts/generate-tokens.js new file mode 100644 index 0000000000..05ca1b2c03 --- /dev/null +++ b/scripts/generate-tokens.js @@ -0,0 +1,19 @@ +#!/usr/bin/env node + +/* +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. +*/ + +import { generateTokensWrapper } from './generate-tokens-wrapper.js'; + +(async () => { + await generateTokensWrapper('classic'); + await generateTokensWrapper('spectrum-two'); +})(); diff --git a/scripts/spectrum-two-tokens.js b/scripts/spectrum-two-tokens.js deleted file mode 100644 index 4b437b9138..0000000000 --- a/scripts/spectrum-two-tokens.js +++ /dev/null @@ -1,179 +0,0 @@ -/* -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. -*/ - -import fg from 'fast-glob'; -import fs from 'fs-extra'; -import path from 'path'; -import { fileURLToPath } from 'url'; - -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -const tokensRoot = path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - 'tokens-v2', - 'dist', - 'css', - '**', - '*.css' -); - -/** @todo Could generate this from CSS packages that have @spectrum-css/tokens as a dependency */ -const tokenPackages = [ - 'accordion', - 'actionbar', - 'actionbutton', - 'actiongroup', - 'alertdialog', - 'avatar', - 'badge', - 'button', - 'buttongroup', - 'checkbox', - 'closebutton', - 'colorarea', - 'colorhandle', - 'colorloupe', - 'colorwheel', - 'combobox', - 'divider', - 'dropzone', - 'fieldgroup', - 'fieldlabel', - 'helptext', - 'illustratedmessage', - 'infieldbutton', - 'link', - 'menu', - 'picker', - 'pickerbutton', - 'popover', - 'progressbar', - 'progresscircle', - 'radio', - 'search', - 'sidenav', - 'slider', - 'splitview', - 'statuslight', - 'stepper', - 'swatch', - 'swatchgroup', - 'switch', - 'table', - 'tabs', - 'tag', - 'textfield', - 'thumbnail', - 'toast', - 'tooltip', - 'tray', - 'underlay', -]; - -const packagePaths = tokenPackages.map((packageName) => { - return path.join( - __dirname, - '..', - 'node_modules', - '@spectrum-css', - packageName, - 'dist', - 'themes' - ); -}); - -const spectrumThemeSelectorRegExp = - /(?:\.spectrum(--(?:express|light(?:est)?|dark(?:est)?|medium|large)?,?(\n|\s)*)?)+\s?\{/g; -const importantCommentRegExp = /\/\*![^*]*\*+([^\/*][^*]*\*+)*\//g; - -const targetHost = (css) => { - /** @note Could use this regex to more permissive of class names */ - // return css.replaceAll(/(?:\.spectrum(--[a-z]+,?(\n|\s)*)?)+ \{/g, ':host,\n:root {'); - - /** - * @note ...Or this to lock down expected class names - * - * A few helpful regex hints: - * (?:...) - non-capturing group - * \s - whitespace - * \n - newline - * (...)? - 0 or 1 - * \g - global - **/ - return css.replaceAll(spectrumThemeSelectorRegExp, ':host,\n:root {'); -}; - -const removeImporantComments = (css) => { - /** - * Spectrum CSS uses /*! comments that are "not" removable. - * These comments pile up in merged files, so we _need_ to remove them. - */ - return css.replaceAll(importantCommentRegExp, ''); -}; - -const processPackages = async (srcPath, index) => { - const spectrumPath = path.join(srcPath, 'spectrum.css'); - - // check if spectrumPath exists - if (fs.existsSync(spectrumPath)) { - let spectrum = fs.readFileSync(spectrumPath, 'utf8'); - spectrum = removeImporantComments(targetHost(spectrum)); - fs.appendFileSync( - path.join( - __dirname, - '..', - 'tools', - 'styles', - 'tokens-v2', - 'spectrum', - 'global-vars.css' - ), - spectrum - ); - } -}; - -const processTokens = (srcPath) => { - let css = fs.readFileSync(srcPath, 'utf8'); - const fileName = srcPath.split(path.sep + 'css' + path.sep).at(-1); - css = removeImporantComments(targetHost(css)); - - // if the filename starts with express ignore it - if (fileName.startsWith('express')) { - return; - } - - fs.writeFileSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens-v2', fileName), - css - ); -}; - -const spectrumTokens = async () => { - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens-v2', 'spectrum'), - { - recursive: true, - } - ); - for (const tokensPath of await fg([`${tokensRoot}`])) { - processTokens(tokensPath); - } - - const processes = packagePaths.map(processPackages); - await Promise.all(processes); -}; - -spectrumTokens(); diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index 30f896a805..ed79048034 100644 --- a/tools/styles/tokens-v2/global-vars.css +++ b/tools/styles/tokens-v2/global-vars.css @@ -96,15 +96,7 @@ --spectrum-negative-border-color-key-focus: var( --spectrum-negative-color-1000 ); - --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-thumbnail-border-color: var(--spectrum-gray-800); - --spectrum-thumbnail-border-opacity: 0.1; - --spectrum-thumbnail-opacity-disabled: var(--spectrum-opacity-disabled); --spectrum-opacity-checkerboard-square-light: var(--spectrum-white); - --spectrum-avatar-opacity-disabled: var(--spectrum-opacity-disabled); --spectrum-color-area-border-color: var(--spectrum-gray-1000); --spectrum-color-area-border-opacity: 0.1; --spectrum-color-slider-border-color: var(--spectrum-gray-1000); @@ -137,19 +129,6 @@ --spectrum-floating-action-button-shadow-color: var( --spectrum-floating-action-button-drop-shadow-color ); - --spectrum-table-row-hover-color: var(--spectrum-gray-900); - --spectrum-table-row-hover-opacity: 0.07; - --spectrum-table-selected-row-background-color: var( - --spectrum-informative-background-color-default - ); - --spectrum-table-selected-row-background-opacity: 0.1; - --spectrum-table-selected-row-background-color-non-emphasized: var( - --spectrum-neutral-background-color-selected-default - ); - --spectrum-table-selected-row-background-opacity-non-emphasized: 0.1; - --spectrum-table-row-down-opacity: 0.1; - --spectrum-table-selected-row-background-opacity-hover: 0.15; - --spectrum-table-selected-row-background-opacity-non-emphasized-hover: 0.15; --spectrum-white-rgb: 255, 255, 255; --spectrum-white: rgba(var(--spectrum-white-rgb)); --spectrum-transparent-white-25-rgb: 255, 255, 255; @@ -310,7 +289,6 @@ --spectrum-icon-color-primary-default: var( --spectrum-neutral-content-color-default ); - --spectrum-radio-button-selection-indicator: 4px; --spectrum-field-label-top-margin-small: 0px; --spectrum-field-label-top-margin-medium: 0px; --spectrum-field-label-top-margin-large: 0px; @@ -320,33 +298,12 @@ --spectrum-status-light-dot-size-small: 8px; --spectrum-action-button-edge-to-hold-icon-extra-small: 3px; --spectrum-action-button-edge-to-hold-icon-small: 3px; - --spectrum-button-minimum-width-multiplier: 2.25; - --spectrum-divider-thickness-small: 1px; - --spectrum-divider-thickness-medium: 2px; - --spectrum-divider-thickness-large: 4px; - --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-meter-minimum-width: 48px; --spectrum-meter-maximum-width: 768px; --spectrum-meter-default-width: var(--spectrum-meter-width); --spectrum-in-line-alert-minimum-width: 240px; - --spectrum-popover-tip-width: 16px; - --spectrum-popover-tip-height: 8px; - --spectrum-menu-item-label-to-description: 1px; - --spectrum-menu-item-section-divider-height: 8px; - --spectrum-slider-track-thickness: 2px; - --spectrum-slider-handle-gap: 4px; - --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-border-width: var(--spectrum-border-width-100); - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-end-edge-to-disclosure-icon-quiet: 0px; --spectrum-text-field-minimum-width-multiplier: 1.5; --spectrum-combo-box-minimum-width-multiplier: 2.5; --spectrum-combo-box-quiet-minimum-width-multiplier: 2; @@ -381,7 +338,6 @@ --spectrum-floating-action-button-drop-shadow-blur: 12px; --spectrum-floating-action-button-drop-shadow-y: 4px; --spectrum-illustrated-message-maximum-width: 380px; - --spectrum-search-field-minimum-width-multiplier: 4; --spectrum-color-loupe-height: 64px; --spectrum-color-loupe-width: 48px; --spectrum-color-loupe-bottom-to-color-handle: 12px; @@ -405,56 +361,12 @@ --spectrum-drop-zone-body-size: var( --spectrum-illustrated-message-body-size ); - --spectrum-accordion-top-to-text-compact-small: 2px; - --spectrum-accordion-top-to-text-compact-medium: 4px; - --spectrum-accordion-disclosure-indicator-to-text: 0px; - --spectrum-accordion-edge-to-disclosure-indicator: 0px; - --spectrum-accordion-edge-to-text: 0px; - --spectrum-accordion-focus-indicator-gap: 0px; --spectrum-color-handle-border-width: var(--spectrum-border-width-200); --spectrum-color-handle-inner-border-width: 1px; --spectrum-color-handle-outer-border-width: 1px; --spectrum-color-handle-drop-shadow-x: 0; --spectrum-color-handle-drop-shadow-y: 0; --spectrum-color-handle-drop-shadow-blur: 0; - --spectrum-table-row-height-small-compact: var( - --spectrum-component-height-75 - ); - --spectrum-table-row-height-medium-compact: var( - --spectrum-component-height-100 - ); - --spectrum-table-row-height-large-compact: var( - --spectrum-component-height-200 - ); - --spectrum-table-row-height-extra-large-compact: var( - --spectrum-component-height-300 - ); - --spectrum-table-row-top-to-text-small-compact: var( - --spectrum-component-top-to-text-75 - ); - --spectrum-table-row-top-to-text-medium-compact: var( - --spectrum-component-top-to-text-100 - ); - --spectrum-table-row-top-to-text-large-compact: var( - --spectrum-component-top-to-text-200 - ); - --spectrum-table-row-top-to-text-extra-large-compact: var( - --spectrum-component-top-to-text-300 - ); - --spectrum-table-row-bottom-to-text-small-compact: var( - --spectrum-component-bottom-to-text-75 - ); - --spectrum-table-row-bottom-to-text-medium-compact: var( - --spectrum-component-bottom-to-text-100 - ); - --spectrum-table-row-bottom-to-text-large-compact: var( - --spectrum-component-bottom-to-text-200 - ); - --spectrum-table-row-bottom-to-text-extra-large-compact: var( - --spectrum-component-bottom-to-text-300 - ); - --spectrum-table-edge-to-content: 16px; - --spectrum-table-border-divider-width: 1px; --spectrum-tab-item-height-small: var(--spectrum-component-height-200); --spectrum-tab-item-height-medium: var(--spectrum-component-height-300); --spectrum-tab-item-height-large: var(--spectrum-component-height-400); @@ -502,11 +414,6 @@ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large ); --spectrum-asterisk-icon-size-75: 8px; - --spectrum-divider-vertical-minimum-height: 200px; - --spectrum-divider-horizontal-minimum-width: 200px; - --spectrum-tooltip-tip-corner-radius: 1px; - --spectrum-tag-minimum-width-multiplier: 1; - --spectrum-tag-maximum-width-multiplier: 7; --spectrum-title-cjk-emphasized-font-style: var( --spectrum-default-font-style ); diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css index ade4542c96..225f3599c6 100644 --- a/tools/styles/tokens-v2/large-vars.css +++ b/tools/styles/tokens-v2/large-vars.css @@ -1,33 +1,5 @@ :host, :root { - --spectrum-checkbox-control-size-small: 16px; - --spectrum-checkbox-control-size-medium: 18px; - --spectrum-checkbox-control-size-large: 20px; - --spectrum-checkbox-control-size-extra-large: 22px; - --spectrum-checkbox-top-to-control-small: 7px; - --spectrum-checkbox-top-to-control-medium: 11px; - --spectrum-checkbox-top-to-control-large: 15px; - --spectrum-checkbox-top-to-control-extra-large: 19px; - --spectrum-switch-control-width-small: 30px; - --spectrum-switch-control-width-medium: 34px; - --spectrum-switch-control-width-large: 38px; - --spectrum-switch-control-width-extra-large: 46px; - --spectrum-switch-control-height-small: 18px; - --spectrum-switch-control-height-medium: 20px; - --spectrum-switch-control-height-large: 22px; - --spectrum-switch-control-height-extra-large: 26px; - --spectrum-switch-top-to-control-small: 7px; - --spectrum-switch-top-to-control-medium: 11px; - --spectrum-switch-top-to-control-large: 15px; - --spectrum-switch-top-to-control-extra-large: 19px; - --spectrum-radio-button-control-size-small: 16px; - --spectrum-radio-button-control-size-medium: 18px; - --spectrum-radio-button-control-size-large: 20px; - --spectrum-radio-button-control-size-extra-large: 22px; - --spectrum-radio-button-top-to-control-small: 7px; - --spectrum-radio-button-top-to-control-medium: 11px; - --spectrum-radio-button-top-to-control-large: 15px; - --spectrum-radio-button-top-to-control-extra-large: 19px; --spectrum-field-label-text-to-asterisk-small: 5px; --spectrum-field-label-text-to-asterisk-medium: 5px; --spectrum-field-label-text-to-asterisk-large: 6px; @@ -62,26 +34,14 @@ --spectrum-action-button-edge-to-hold-icon-medium: 5px; --spectrum-action-button-edge-to-hold-icon-large: 6px; --spectrum-action-button-edge-to-hold-icon-extra-large: 7px; - --spectrum-tooltip-tip-width: 12px; - --spectrum-tooltip-tip-height: 6px; - --spectrum-tooltip-maximum-width: 200px; --spectrum-progress-circle-size-small: 20px; --spectrum-progress-circle-size-medium: 40px; --spectrum-progress-circle-size-large: 80px; --spectrum-progress-circle-thickness-small: 3px; --spectrum-progress-circle-thickness-medium: 4px; --spectrum-progress-circle-thickness-large: 5px; - --spectrum-toast-height: 60px; - --spectrum-toast-maximum-width: 420px; - --spectrum-toast-top-to-workflow-icon: 20px; - --spectrum-toast-top-to-text: 20px; - --spectrum-toast-bottom-to-text: 22px; --spectrum-action-bar-height: 56px; --spectrum-action-bar-top-to-item-counter: 16px; - --spectrum-swatch-size-extra-small: 20px; - --spectrum-swatch-size-small: 30px; - --spectrum-swatch-size-medium: 40px; - --spectrum-swatch-size-large: 50px; --spectrum-progress-bar-thickness-small: 5px; --spectrum-progress-bar-thickness-medium: 8px; --spectrum-progress-bar-thickness-large: 10px; @@ -89,67 +49,12 @@ --spectrum-meter-width: 240px; --spectrum-meter-thickness-small: 5px; --spectrum-meter-thickness-large: 8px; - --spectrum-tag-top-to-avatar-small: 5px; - --spectrum-tag-top-to-avatar-medium: 7px; - --spectrum-tag-top-to-avatar-large: 11px; - --spectrum-tag-top-to-cross-icon-small: 10px; - --spectrum-tag-top-to-cross-icon-medium: 15px; - --spectrum-tag-top-to-cross-icon-large: 19px; - --spectrum-popover-top-to-content-area: 5px; - --spectrum-menu-item-edge-to-content-not-selected-small: 24px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 42px; - --spectrum-menu-item-edge-to-content-not-selected-large: 47px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px; - --spectrum-menu-item-top-to-disclosure-icon-small: 9px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 13px; - --spectrum-menu-item-top-to-disclosure-icon-large: 17px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px; - --spectrum-menu-item-top-to-selected-icon-small: 9px; - --spectrum-menu-item-top-to-selected-icon-medium: 13px; - --spectrum-menu-item-top-to-selected-icon-large: 17px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 22px; - --spectrum-slider-control-height-small: 18px; - --spectrum-slider-control-height-medium: 20px; - --spectrum-slider-control-height-large: 22px; - --spectrum-slider-control-height-extra-large: 26px; - --spectrum-slider-handle-size-small: 18px; - --spectrum-slider-handle-size-medium: 20px; - --spectrum-slider-handle-size-large: 22px; - --spectrum-slider-handle-size-extra-large: 26px; - --spectrum-slider-handle-border-width-down-small: 7px; - --spectrum-slider-handle-border-width-down-medium: 8px; - --spectrum-slider-handle-border-width-down-large: 9px; - --spectrum-slider-handle-border-width-down-extra-large: 11px; - --spectrum-slider-bottom-to-handle-small: 6px; - --spectrum-slider-bottom-to-handle-medium: 10px; - --spectrum-slider-bottom-to-handle-large: 14px; - --spectrum-slider-bottom-to-handle-extra-large: 17px; - --spectrum-slider-control-to-field-label-small: 6px; - --spectrum-slider-control-to-field-label-medium: 10px; - --spectrum-slider-control-to-field-label-large: 14px; - --spectrum-slider-control-to-field-label-extra-large: 17px; - --spectrum-picker-visual-to-disclosure-icon-small: 9px; - --spectrum-picker-visual-to-disclosure-icon-medium: 10px; - --spectrum-picker-visual-to-disclosure-icon-large: 11px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px; --spectrum-text-area-minimum-width: 140px; --spectrum-text-area-minimum-height: 70px; --spectrum-combo-box-visual-to-field-button-small: 9px; --spectrum-combo-box-visual-to-field-button-medium: 10px; --spectrum-combo-box-visual-to-field-button-large: 11px; --spectrum-combo-box-visual-to-field-button-extra-large: 13px; - --spectrum-thumbnail-size-50: 20px; - --spectrum-thumbnail-size-75: 22px; - --spectrum-thumbnail-size-100: 26px; - --spectrum-thumbnail-size-200: 28px; - --spectrum-thumbnail-size-300: 32px; - --spectrum-thumbnail-size-400: 36px; - --spectrum-thumbnail-size-500: 40px; - --spectrum-thumbnail-size-600: 46px; - --spectrum-thumbnail-size-700: 50px; - --spectrum-thumbnail-size-800: 55px; - --spectrum-thumbnail-size-900: 62px; - --spectrum-thumbnail-size-1000: 70px; --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-xs); --spectrum-alert-dialog-description-size: var(--spectrum-body-size-xs); --spectrum-opacity-checkerboard-square-size: var( @@ -173,15 +78,6 @@ --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px; --spectrum-breadcrumbs-top-to-truncated-menu: 10px; --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px; - --spectrum-avatar-size-50: 20px; - --spectrum-avatar-size-75: 22px; - --spectrum-avatar-size-100: 26px; - --spectrum-avatar-size-200: 28px; - --spectrum-avatar-size-300: 32px; - --spectrum-avatar-size-400: 36px; - --spectrum-avatar-size-500: 40px; - --spectrum-avatar-size-600: 46px; - --spectrum-avatar-size-700: 50px; --spectrum-alert-banner-minimum-height: 64px; --spectrum-alert-banner-width: 680px; --spectrum-alert-banner-top-to-workflow-icon: 21px; @@ -212,98 +108,8 @@ --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xxs); --spectrum-coach-mark-body-size: var(--spectrum-body-size-xs); --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-xs); - --spectrum-accordion-top-to-text-regular-small: 7px; - --spectrum-accordion-small-top-to-text-spacious: 12px; - --spectrum-accordion-top-to-text-regular-medium: 9px; - --spectrum-accordion-top-to-text-spacious-medium: 14px; - --spectrum-accordion-top-to-text-compact-large: 7px; - --spectrum-accordion-top-to-text-regular-large: 12px; - --spectrum-accordion-top-to-text-spacious-large: 14px; - --spectrum-accordion-top-to-text-compact-extra-large: 7px; - --spectrum-accordion-top-to-text-regular-extra-large: 12px; - --spectrum-accordion-top-to-text-spacious-extra-large: 14px; - --spectrum-accordion-bottom-to-text-compact-small: 4px; - --spectrum-accordion-bottom-to-text-regular-small: 9px; - --spectrum-accordion-bottom-to-text-spacious-small: 14px; - --spectrum-accordion-bottom-to-text-compact-medium: 8px; - --spectrum-accordion-bottom-to-text-regular-medium: 13px; - --spectrum-accordion-bottom-to-text-spacious-medium: 18px; - --spectrum-accordion-bottom-to-text-compact-large: 9px; - --spectrum-accordion-bottom-to-text-regular-large: 14px; - --spectrum-accordion-bottom-to-text-spacious-large: 19px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 10px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 15px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 21px; - --spectrum-accordion-minimum-width: 250px; - --spectrum-accordion-content-area-top-to-content: 10px; - --spectrum-accordion-content-area-bottom-to-content: 20px; --spectrum-color-handle-size: 20px; --spectrum-color-handle-size-key-focus: 40px; - --spectrum-table-column-header-row-top-to-text-small: 10px; - --spectrum-table-column-header-row-top-to-text-medium: 9px; - --spectrum-table-column-header-row-top-to-text-large: 13px; - --spectrum-table-column-header-row-top-to-text-extra-large: 16px; - --spectrum-table-column-header-row-bottom-to-text-small: 11px; - --spectrum-table-column-header-row-bottom-to-text-medium: 10px; - --spectrum-table-column-header-row-bottom-to-text-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 17px; - --spectrum-table-row-height-small-regular: 40px; - --spectrum-table-row-height-medium-regular: 50px; - --spectrum-table-row-height-large-regular: 60px; - --spectrum-table-row-height-extra-large-regular: 70px; - --spectrum-table-row-height-small-spacious: 50px; - --spectrum-table-row-height-medium-spacious: 60px; - --spectrum-table-row-height-large-spacious: 70px; - --spectrum-table-row-height-extra-large-spacious: 80px; - --spectrum-table-row-top-to-text-small-regular: 10px; - --spectrum-table-row-top-to-text-medium-regular: 14px; - --spectrum-table-row-top-to-text-large-regular: 18px; - --spectrum-table-row-top-to-text-extra-large-regular: 21px; - --spectrum-table-row-bottom-to-text-small-regular: 11px; - --spectrum-table-row-bottom-to-text-medium-regular: 15px; - --spectrum-table-row-bottom-to-text-large-regular: 18px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 22px; - --spectrum-table-row-top-to-text-small-spacious: 15px; - --spectrum-table-row-top-to-text-medium-spacious: 18px; - --spectrum-table-row-top-to-text-large-spacious: 23px; - --spectrum-table-row-top-to-text-extra-large-spacious: 26px; - --spectrum-table-row-bottom-to-text-small-spacious: 16px; - --spectrum-table-row-bottom-to-text-medium-spacious: 18px; - --spectrum-table-row-bottom-to-text-large-spacious: 23px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 27px; - --spectrum-table-checkbox-to-text: 30px; - --spectrum-table-header-row-checkbox-to-top-small: 14px; - --spectrum-table-header-row-checkbox-to-top-medium: 13px; - --spectrum-table-header-row-checkbox-to-top-large: 17px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 21px; - --spectrum-table-row-checkbox-to-top-small-compact: 9px; - --spectrum-table-row-checkbox-to-top-small-regular: 14px; - --spectrum-table-row-checkbox-to-top-small-spacious: 19px; - --spectrum-table-row-checkbox-to-top-medium-compact: 13px; - --spectrum-table-row-checkbox-to-top-medium-regular: 18px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 23px; - --spectrum-table-row-checkbox-to-top-large-compact: 17px; - --spectrum-table-row-checkbox-to-top-large-regular: 22px; - --spectrum-table-row-checkbox-to-top-large-spacious: 27px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 21px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 26px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 31px; - --spectrum-table-section-header-row-height-small: 30px; - --spectrum-table-section-header-row-height-medium: 40px; - --spectrum-table-section-header-row-height-large: 50px; - --spectrum-table-section-header-row-height-extra-large: 60px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 6px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 9px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 6px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 9px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 10px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 9px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 10px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 12px; --spectrum-tab-item-to-tab-item-horizontal-small: 27px; --spectrum-tab-item-to-tab-item-horizontal-medium: 30px; --spectrum-tab-item-to-tab-item-horizontal-large: 33px; @@ -354,7 +160,6 @@ --spectrum-side-navigation-item-to-item: 5px; --spectrum-side-navigation-item-to-header: 30px; --spectrum-side-navigation-bottom-to-text: 10px; - --spectrum-tray-top-to-content-area: 5px; --spectrum-arrow-icon-size-75: 12px; --spectrum-arrow-icon-size-100: 14px; --spectrum-arrow-icon-size-200: 16px; @@ -397,20 +202,6 @@ --spectrum-dash-icon-size-500: 20px; --spectrum-dash-icon-size-600: 22px; --spectrum-side-navigation-header-to-item: 10px; - --spectrum-switch-handle-size-small: 10px; - --spectrum-switch-handle-selected-size-small: 12px; - --spectrum-switch-handle-selected-size-medium: 14px; - --spectrum-switch-handle-selected-size-large: 16px; - --spectrum-switch-handle-selected-size-extra-large: 20px; - --spectrum-switch-handle-size-medium: 12px; - --spectrum-switch-handle-size-large: 14px; - --spectrum-switch-handle-size-extra-large: 18px; - --spectrum-tag-label-to-clear-icon-small: 10px; - --spectrum-tag-label-to-clear-icon-medium: 15px; - --spectrum-tag-label-to-clear-icon-large: 19px; - --spectrum-tag-edge-to-clear-icon-small: 10px; - --spectrum-tag-edge-to-clear-icon-medium: 15px; - --spectrum-tag-edge-to-clear-icon-large: 19px; --spectrum-opacity-checkerboard-square-size-small: 5px; --spectrum-drop-shadow-y: 2px; --spectrum-drop-shadow-blur: 6px; diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css index 3777d920d8..41c46260cb 100644 --- a/tools/styles/tokens-v2/medium-vars.css +++ b/tools/styles/tokens-v2/medium-vars.css @@ -1,33 +1,5 @@ :host, :root { - --spectrum-checkbox-control-size-small: 12px; - --spectrum-checkbox-control-size-medium: 14px; - --spectrum-checkbox-control-size-large: 16px; - --spectrum-checkbox-control-size-extra-large: 18px; - --spectrum-checkbox-top-to-control-small: 6px; - --spectrum-checkbox-top-to-control-medium: 9px; - --spectrum-checkbox-top-to-control-large: 12px; - --spectrum-checkbox-top-to-control-extra-large: 15px; - --spectrum-switch-control-width-small: 22px; - --spectrum-switch-control-width-medium: 26px; - --spectrum-switch-control-width-large: 30px; - --spectrum-switch-control-width-extra-large: 34px; - --spectrum-switch-control-height-small: 14px; - --spectrum-switch-control-height-medium: 16px; - --spectrum-switch-control-height-large: 18px; - --spectrum-switch-control-height-extra-large: 20px; - --spectrum-switch-top-to-control-small: 6px; - --spectrum-switch-top-to-control-medium: 9px; - --spectrum-switch-top-to-control-large: 12px; - --spectrum-switch-top-to-control-extra-large: 15px; - --spectrum-radio-button-control-size-small: 12px; - --spectrum-radio-button-control-size-medium: 14px; - --spectrum-radio-button-control-size-large: 16px; - --spectrum-radio-button-control-size-extra-large: 18px; - --spectrum-radio-button-top-to-control-small: 6px; - --spectrum-radio-button-top-to-control-medium: 9px; - --spectrum-radio-button-top-to-control-large: 12px; - --spectrum-radio-button-top-to-control-extra-large: 15px; --spectrum-field-label-text-to-asterisk-small: 4px; --spectrum-field-label-text-to-asterisk-medium: 4px; --spectrum-field-label-text-to-asterisk-large: 5px; @@ -62,26 +34,14 @@ --spectrum-action-button-edge-to-hold-icon-medium: 4px; --spectrum-action-button-edge-to-hold-icon-large: 5px; --spectrum-action-button-edge-to-hold-icon-extra-large: 6px; - --spectrum-tooltip-tip-width: 10px; - --spectrum-tooltip-tip-height: 5px; - --spectrum-tooltip-maximum-width: 160px; --spectrum-progress-circle-size-small: 16px; --spectrum-progress-circle-size-medium: 32px; --spectrum-progress-circle-size-large: 64px; --spectrum-progress-circle-thickness-small: 2px; --spectrum-progress-circle-thickness-medium: 3px; --spectrum-progress-circle-thickness-large: 4px; - --spectrum-toast-height: 52px; - --spectrum-toast-maximum-width: 336px; - --spectrum-toast-top-to-workflow-icon: 18px; - --spectrum-toast-top-to-text: 18px; - --spectrum-toast-bottom-to-text: 20px; --spectrum-action-bar-height: 48px; --spectrum-action-bar-top-to-item-counter: 14px; - --spectrum-swatch-size-extra-small: 16px; - --spectrum-swatch-size-small: 24px; - --spectrum-swatch-size-medium: 32px; - --spectrum-swatch-size-large: 40px; --spectrum-progress-bar-thickness-small: 4px; --spectrum-progress-bar-thickness-medium: 6px; --spectrum-progress-bar-thickness-large: 8px; @@ -89,67 +49,12 @@ --spectrum-meter-width: 192px; --spectrum-meter-thickness-small: 4px; --spectrum-meter-thickness-large: 6px; - --spectrum-tag-top-to-avatar-small: 4px; - --spectrum-tag-top-to-avatar-medium: 6px; - --spectrum-tag-top-to-avatar-large: 9px; - --spectrum-tag-top-to-cross-icon-small: 8px; - --spectrum-tag-top-to-cross-icon-medium: 12px; - --spectrum-tag-top-to-cross-icon-large: 15px; - --spectrum-popover-top-to-content-area: 4px; - --spectrum-menu-item-edge-to-content-not-selected-small: 28px; - --spectrum-menu-item-edge-to-content-not-selected-medium: 32px; - --spectrum-menu-item-edge-to-content-not-selected-large: 38px; - --spectrum-menu-item-edge-to-content-not-selected-extra-large: 45px; - --spectrum-menu-item-top-to-disclosure-icon-small: 7px; - --spectrum-menu-item-top-to-disclosure-icon-medium: 11px; - --spectrum-menu-item-top-to-disclosure-icon-large: 14px; - --spectrum-menu-item-top-to-disclosure-icon-extra-large: 17px; - --spectrum-menu-item-top-to-selected-icon-small: 7px; - --spectrum-menu-item-top-to-selected-icon-medium: 11px; - --spectrum-menu-item-top-to-selected-icon-large: 14px; - --spectrum-menu-item-top-to-selected-icon-extra-large: 17px; - --spectrum-slider-control-height-small: 14px; - --spectrum-slider-control-height-medium: 16px; - --spectrum-slider-control-height-large: 18px; - --spectrum-slider-control-height-extra-large: 20px; - --spectrum-slider-handle-size-small: 14px; - --spectrum-slider-handle-size-medium: 16px; - --spectrum-slider-handle-size-large: 18px; - --spectrum-slider-handle-size-extra-large: 20px; - --spectrum-slider-handle-border-width-down-small: 5px; - --spectrum-slider-handle-border-width-down-medium: 6px; - --spectrum-slider-handle-border-width-down-large: 7px; - --spectrum-slider-handle-border-width-down-extra-large: 8px; - --spectrum-slider-bottom-to-handle-small: 5px; - --spectrum-slider-bottom-to-handle-medium: 8px; - --spectrum-slider-bottom-to-handle-large: 11px; - --spectrum-slider-bottom-to-handle-extra-large: 14px; - --spectrum-slider-control-to-field-label-small: 5px; - --spectrum-slider-control-to-field-label-medium: 8px; - --spectrum-slider-control-to-field-label-large: 11px; - --spectrum-slider-control-to-field-label-extra-large: 14px; - --spectrum-picker-visual-to-disclosure-icon-small: 7px; - --spectrum-picker-visual-to-disclosure-icon-medium: 8px; - --spectrum-picker-visual-to-disclosure-icon-large: 9px; - --spectrum-picker-visual-to-disclosure-icon-extra-large: 10px; --spectrum-text-area-minimum-width: 112px; --spectrum-text-area-minimum-height: 56px; --spectrum-combo-box-visual-to-field-button-small: 7px; --spectrum-combo-box-visual-to-field-button-medium: 8px; --spectrum-combo-box-visual-to-field-button-large: 9px; --spectrum-combo-box-visual-to-field-button-extra-large: 10px; - --spectrum-thumbnail-size-50: 16px; - --spectrum-thumbnail-size-75: 18px; - --spectrum-thumbnail-size-100: 20px; - --spectrum-thumbnail-size-200: 22px; - --spectrum-thumbnail-size-300: 26px; - --spectrum-thumbnail-size-400: 28px; - --spectrum-thumbnail-size-500: 32px; - --spectrum-thumbnail-size-600: 36px; - --spectrum-thumbnail-size-700: 40px; - --spectrum-thumbnail-size-800: 44px; - --spectrum-thumbnail-size-900: 50px; - --spectrum-thumbnail-size-1000: 56px; --spectrum-alert-dialog-title-size: var(--spectrum-heading-size-s); --spectrum-alert-dialog-description-size: var(--spectrum-body-size-s); --spectrum-opacity-checkerboard-square-size: var( @@ -173,15 +78,6 @@ --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 11px; --spectrum-breadcrumbs-top-to-truncated-menu: 8px; --spectrum-breadcrumbs-top-to-truncated-menu-compact: 4px; - --spectrum-avatar-size-50: 16px; - --spectrum-avatar-size-75: 18px; - --spectrum-avatar-size-100: 20px; - --spectrum-avatar-size-200: 22px; - --spectrum-avatar-size-300: 26px; - --spectrum-avatar-size-400: 28px; - --spectrum-avatar-size-500: 32px; - --spectrum-avatar-size-600: 36px; - --spectrum-avatar-size-700: 40px; --spectrum-alert-banner-minimum-height: 56px; --spectrum-alert-banner-width: 832px; --spectrum-alert-banner-top-to-workflow-icon: 19px; @@ -212,98 +108,8 @@ --spectrum-coach-mark-title-size: var(--spectrum-heading-size-xs); --spectrum-coach-mark-body-size: var(--spectrum-body-size-s); --spectrum-coach-mark-pagination-body-size: var(--spectrum-body-size-s); - --spectrum-accordion-top-to-text-regular-small: 5px; - --spectrum-accordion-small-top-to-text-spacious: 9px; - --spectrum-accordion-top-to-text-regular-medium: 8px; - --spectrum-accordion-top-to-text-spacious-medium: 12px; - --spectrum-accordion-top-to-text-compact-large: 4px; - --spectrum-accordion-top-to-text-regular-large: 9px; - --spectrum-accordion-top-to-text-spacious-large: 12px; - --spectrum-accordion-top-to-text-compact-extra-large: 5px; - --spectrum-accordion-top-to-text-regular-extra-large: 9px; - --spectrum-accordion-top-to-text-spacious-extra-large: 13px; - --spectrum-accordion-bottom-to-text-compact-small: 2px; - --spectrum-accordion-bottom-to-text-regular-small: 7px; - --spectrum-accordion-bottom-to-text-spacious-small: 11px; - --spectrum-accordion-bottom-to-text-compact-medium: 5px; - --spectrum-accordion-bottom-to-text-regular-medium: 9px; - --spectrum-accordion-bottom-to-text-spacious-medium: 13px; - --spectrum-accordion-bottom-to-text-compact-large: 8px; - --spectrum-accordion-bottom-to-text-regular-large: 11px; - --spectrum-accordion-bottom-to-text-spacious-large: 16px; - --spectrum-accordion-bottom-to-text-compact-extra-large: 8px; - --spectrum-accordion-bottom-to-text-regular-extra-large: 12px; - --spectrum-accordion-bottom-to-text-spacious-extra-large: 16px; - --spectrum-accordion-minimum-width: 200px; - --spectrum-accordion-content-area-top-to-content: 8px; - --spectrum-accordion-content-area-bottom-to-content: 16px; --spectrum-color-handle-size: 16px; --spectrum-color-handle-size-key-focus: 32px; - --spectrum-table-column-header-row-top-to-text-small: 8px; - --spectrum-table-column-header-row-top-to-text-medium: 7px; - --spectrum-table-column-header-row-top-to-text-large: 10px; - --spectrum-table-column-header-row-top-to-text-extra-large: 13px; - --spectrum-table-column-header-row-bottom-to-text-small: 9px; - --spectrum-table-column-header-row-bottom-to-text-medium: 8px; - --spectrum-table-column-header-row-bottom-to-text-large: 10px; - --spectrum-table-column-header-row-bottom-to-text-extra-large: 13px; - --spectrum-table-row-height-small-regular: 32px; - --spectrum-table-row-height-medium-regular: 40px; - --spectrum-table-row-height-large-regular: 48px; - --spectrum-table-row-height-extra-large-regular: 56px; - --spectrum-table-row-height-small-spacious: 40px; - --spectrum-table-row-height-medium-spacious: 48px; - --spectrum-table-row-height-large-spacious: 56px; - --spectrum-table-row-height-extra-large-spacious: 64px; - --spectrum-table-row-top-to-text-small-regular: 8px; - --spectrum-table-row-top-to-text-medium-regular: 11px; - --spectrum-table-row-top-to-text-large-regular: 14px; - --spectrum-table-row-top-to-text-extra-large-regular: 17px; - --spectrum-table-row-bottom-to-text-small-regular: 9px; - --spectrum-table-row-bottom-to-text-medium-regular: 12px; - --spectrum-table-row-bottom-to-text-large-regular: 14px; - --spectrum-table-row-bottom-to-text-extra-large-regular: 17px; - --spectrum-table-row-top-to-text-small-spacious: 12px; - --spectrum-table-row-top-to-text-medium-spacious: 15px; - --spectrum-table-row-top-to-text-large-spacious: 18px; - --spectrum-table-row-top-to-text-extra-large-spacious: 21px; - --spectrum-table-row-bottom-to-text-small-spacious: 13px; - --spectrum-table-row-bottom-to-text-medium-spacious: 16px; - --spectrum-table-row-bottom-to-text-large-spacious: 18px; - --spectrum-table-row-bottom-to-text-extra-large-spacious: 21px; - --spectrum-table-checkbox-to-text: 24px; - --spectrum-table-header-row-checkbox-to-top-small: 10px; - --spectrum-table-header-row-checkbox-to-top-medium: 9px; - --spectrum-table-header-row-checkbox-to-top-large: 12px; - --spectrum-table-header-row-checkbox-to-top-extra-large: 15px; - --spectrum-table-row-checkbox-to-top-small-compact: 6px; - --spectrum-table-row-checkbox-to-top-small-regular: 10px; - --spectrum-table-row-checkbox-to-top-small-spacious: 14px; - --spectrum-table-row-checkbox-to-top-medium-compact: 9px; - --spectrum-table-row-checkbox-to-top-medium-regular: 13px; - --spectrum-table-row-checkbox-to-top-medium-spacious: 17px; - --spectrum-table-row-checkbox-to-top-large-compact: 12px; - --spectrum-table-row-checkbox-to-top-large-regular: 16px; - --spectrum-table-row-checkbox-to-top-large-spacious: 20px; - --spectrum-table-row-checkbox-to-top-extra-large-compact: 15px; - --spectrum-table-row-checkbox-to-top-extra-large-regular: 19px; - --spectrum-table-row-checkbox-to-top-extra-large-spacious: 23px; - --spectrum-table-section-header-row-height-small: 24px; - --spectrum-table-section-header-row-height-medium: 32px; - --spectrum-table-section-header-row-height-large: 40px; - --spectrum-table-section-header-row-height-extra-large: 48px; - --spectrum-table-thumbnail-to-top-minimum-small-compact: 4px; - --spectrum-table-thumbnail-to-top-minimum-medium-compact: 5px; - --spectrum-table-thumbnail-to-top-minimum-large-compact: 7px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-compact: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-regular: 5px; - --spectrum-table-thumbnail-to-top-minimum-medium-regular: 7px; - --spectrum-table-thumbnail-to-top-minimum-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-regular: 8px; - --spectrum-table-thumbnail-to-top-minimum-small-spacious: 7px; - --spectrum-table-thumbnail-to-top-minimum-medium-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-large-spacious: 8px; - --spectrum-table-thumbnail-to-top-minimum-extra-large-spacious: 10px; --spectrum-tab-item-to-tab-item-horizontal-small: 21px; --spectrum-tab-item-to-tab-item-horizontal-medium: 24px; --spectrum-tab-item-to-tab-item-horizontal-large: 27px; @@ -354,7 +160,6 @@ --spectrum-side-navigation-item-to-item: 4px; --spectrum-side-navigation-item-to-header: 24px; --spectrum-side-navigation-bottom-to-text: 8px; - --spectrum-tray-top-to-content-area: 4px; --spectrum-arrow-icon-size-75: 10px; --spectrum-arrow-icon-size-100: 10px; --spectrum-arrow-icon-size-200: 12px; @@ -397,20 +202,6 @@ --spectrum-dash-icon-size-500: 16px; --spectrum-dash-icon-size-600: 18px; --spectrum-side-navigation-header-to-item: 8px; - --spectrum-switch-handle-size-small: 6px; - --spectrum-switch-handle-selected-size-small: 8px; - --spectrum-switch-handle-selected-size-medium: 10px; - --spectrum-switch-handle-selected-size-large: 12px; - --spectrum-switch-handle-selected-size-extra-large: 14px; - --spectrum-switch-handle-size-medium: 8px; - --spectrum-switch-handle-size-large: 10px; - --spectrum-switch-handle-size-extra-large: 12px; - --spectrum-tag-label-to-clear-icon-small: 8px; - --spectrum-tag-label-to-clear-icon-medium: 12px; - --spectrum-tag-label-to-clear-icon-large: 15px; - --spectrum-tag-edge-to-clear-icon-small: 8px; - --spectrum-tag-edge-to-clear-icon-medium: 12px; - --spectrum-tag-edge-to-clear-icon-large: 15px; --spectrum-opacity-checkerboard-square-size-small: 4px; --spectrum-drop-shadow-y: 1px; --spectrum-drop-shadow-blur: 4px; diff --git a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css index 3b5fe4f4c7..b670ba72cc 100644 --- a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css @@ -1,20 +1,6 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + /* --spectrum-gray-900 */ /* Drop Zone background color rgb */ --spectrum-drop-zone-background-color-rgb: var( @@ -53,8 +39,6 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css index 9b137abd32..de13689c7b 100644 --- a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css @@ -1,20 +1,6 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + /* --spectrum-gray-900 */ /* Drop Zone background color rgb */ --spectrum-drop-zone-background-color-rgb: var( @@ -54,8 +40,6 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css index b21332805f..56f25fd883 100644 --- a/tools/styles/tokens-v2/spectrum/custom-large-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-large-vars.css @@ -6,41 +6,8 @@ --spectrum-edge-to-visual-only-200: 13px; --spectrum-edge-to-visual-only-300: 16px; - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0'; - --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0'; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); @@ -113,8 +80,6 @@ ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - --spectrum-tooltip-animation-distance: 5px; - --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; } diff --git a/tools/styles/tokens-v2/spectrum/custom-light-vars.css b/tools/styles/tokens-v2/spectrum/custom-light-vars.css index 05529d7727..32527584a1 100644 --- a/tools/styles/tokens-v2/spectrum/custom-light-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-light-vars.css @@ -1,20 +1,6 @@ :host, :root { - --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; - --spectrum-menu-item-background-color-default-opacity: 0; - --spectrum-menu-item-background-color-default: rgba( - var(--spectrum-menu-item-background-color-default-rgb), - var(--spectrum-menu-item-background-color-default-opacity) - ); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); + /* --spectrum-gray-900 */ /* Drop Zone background color rgb */ --spectrum-drop-zone-background-color-rgb: var( @@ -53,8 +39,6 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css index 487524757b..5df1e8e128 100644 --- a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css @@ -6,41 +6,8 @@ --spectrum-edge-to-visual-only-200: 10px; --spectrum-edge-to-visual-only-300: 13px; - --spectrum-slider-tick-mark-height: 10px; - --spectrum-slider-ramp-track-height: 16px; - - --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0'; - --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0'; - --spectrum-colorwheel-colorarea-container-size: 144px; - - --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); @@ -114,8 +81,6 @@ ); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); - --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; } diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css index b640cd8774..a91b2d4eb2 100644 --- a/tools/styles/tokens-v2/spectrum/global-vars.css +++ b/tools/styles/tokens-v2/spectrum/global-vars.css @@ -8115,3 +8115,2709 @@ --spectrum-neutral-subdued-background-color-default ); } + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} diff --git a/tools/styles/tokens/express/global-vars.css b/tools/styles/tokens/express/global-vars.css index 9c7088bef0..3db48d0de1 100644 --- a/tools/styles/tokens/express/global-vars.css +++ b/tools/styles/tokens/express/global-vars.css @@ -1389,3 +1389,2681 @@ --spectrum-neutral-background-color-default ); } + +: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-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-300 + ); + --system-spectrum-actionbutton-quiet-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-quiet-background-color-focus: var( + --spectrum-gray-300 + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +: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) + ); +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-200); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-border-color-default: transparent; + --system-spectrum-button-border-color-hover: transparent; + --system-spectrum-button-border-color-down: transparent; + --system-spectrum-button-border-color-focus: transparent; + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-border-color-disabled: transparent; + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +: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); +} + +: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-combobox-border-color-default: var(--spectrum-gray-400); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: transparent; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-300 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-400); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-border-color-default: transparent; + --system-spectrum-picker-border-color-default-open: transparent; + --system-spectrum-picker-border-color-hover: transparent; + --system-spectrum-picker-border-color-hover-open: transparent; + --system-spectrum-picker-border-color-active: transparent; + --system-spectrum-picker-border-color-key-focus: transparent; + --system-spectrum-picker-border-width: 0px; +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px; +} + +:host, +:root { + --system-spectrum-popover-border-width: 0; +} + +: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-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-search-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-400); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: calc( + var(--spectrum-component-height-75) / 2 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: calc( + var(--spectrum-component-height-200) / 2 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: calc( + var(--spectrum-component-height-300) / 2 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-200); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-handle-background-color-disabled: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-style: solid; + --system-spectrum-stepper-buttons-border-width: var( + --spectrum-border-width-200 + ); + --system-spectrum-stepper-buttons-border-color: transparent; + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: transparent; + --system-spectrum-stepper-buttons-border-color-focus: transparent; + --system-spectrum-stepper-buttons-border-color-keyboard-focus: transparent; + --system-spectrum-stepper-button-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-spectrum-stepper-button-border-width: 0; + --system-spectrum-stepper-border-color: var(--spectrum-gray-400); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: transparent; + --system-spectrum-stepper-border-color-focus-invalid: transparent; + --system-spectrum-stepper-border-color-focus-hover-invalid: transparent; + --system-spectrum-stepper-border-color-keyboard-focus-invalid: transparent; + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-disabled-buttons-background-color: var( + --spectrum-disabled-background-color + ); + --system-spectrum-stepper-disabled-buttons-border-width: 0; +} + +:host, +:root { + --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-tabs-font-weight: var(--spectrum-bold-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-300); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-400); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-500); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-400); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-component-height-75 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-component-height-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-component-height-200 + ); + --system-spectrum-tag-background-color: transparent; + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-400); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-tag-background-color-disabled: transparent; + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-400); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-200); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-background-color-default + ); +} + +: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-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-300 + ); + --system-spectrum-actionbutton-quiet-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-quiet-background-color-focus: var( + --spectrum-gray-300 + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +: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) + ); +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-200); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-button-background-color-down: var(--spectrum-gray-400); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-button-border-color-default: transparent; + --system-spectrum-button-border-color-hover: transparent; + --system-spectrum-button-border-color-down: transparent; + --system-spectrum-button-border-color-focus: transparent; + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-border-color-disabled: transparent; + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +: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); +} + +: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-combobox-border-color-default: var(--spectrum-gray-400); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-900); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: transparent; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-300 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-400); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-picker-border-color-default: transparent; + --system-spectrum-picker-border-color-default-open: transparent; + --system-spectrum-picker-border-color-hover: transparent; + --system-spectrum-picker-border-color-hover-open: transparent; + --system-spectrum-picker-border-color-active: transparent; + --system-spectrum-picker-border-color-key-focus: transparent; + --system-spectrum-picker-border-width: 0px; +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: none; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: var( + --spectrum-corner-radius-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: var( + --spectrum-corner-radius-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: 0px; +} + +:host, +:root { + --system-spectrum-popover-border-width: 0; +} + +: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-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-search-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-400); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: calc( + var(--spectrum-component-height-75) / 2 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: calc( + var(--spectrum-component-height-100) / 2 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: calc( + var(--spectrum-component-height-200) / 2 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: calc( + var(--spectrum-component-height-300) / 2 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-pill-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-200); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-600); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: var(--spectrum-gray-50); + --system-spectrum-slider-handle-background-color-disabled: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-800); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-50 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-200); + --system-spectrum-stepper-buttons-border-style: solid; + --system-spectrum-stepper-buttons-border-width: var( + --spectrum-border-width-200 + ); + --system-spectrum-stepper-buttons-border-color: transparent; + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: transparent; + --system-spectrum-stepper-buttons-border-color-focus: transparent; + --system-spectrum-stepper-buttons-border-color-keyboard-focus: transparent; + --system-spectrum-stepper-button-border-radius-reset: var( + --spectrum-in-field-button-fill-stacked-inner-border-rounding + ); + --system-spectrum-stepper-button-border-width: 0; + --system-spectrum-stepper-border-color: var(--spectrum-gray-400); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: transparent; + --system-spectrum-stepper-border-color-focus-invalid: transparent; + --system-spectrum-stepper-border-color-focus-hover-invalid: transparent; + --system-spectrum-stepper-border-color-keyboard-focus-invalid: transparent; + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-disabled-buttons-background-color: var( + --spectrum-disabled-background-color + ); + --system-spectrum-stepper-disabled-buttons-border-width: 0; +} + +:host, +:root { + --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-tabs-font-weight: var(--spectrum-bold-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-300); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-400); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-500); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-400); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-component-height-75 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-component-height-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-component-height-200 + ); + --system-spectrum-tag-background-color: transparent; + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-400); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-tag-background-color-disabled: transparent; + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-pill-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-pill-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-pill-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-400); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-200); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-background-color-default + ); +} diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 964cb0126a..d09cd3ce40 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -1411,3 +1411,4062 @@ --spectrum-neutral-subdued-background-color-default ); } + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-actionbutton-background-color-default: var( + --spectrum-gray-75 + ); + --system-spectrum-actionbutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-actionbutton-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-actionbutton-border-color-default: var( + --spectrum-gray-400 + ); + --system-spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --system-spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-actionbutton-background-color-disabled: transparent; + --system-spectrum-actionbutton-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --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-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-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-actionbutton-selected-border-color-disabled: transparent; + --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: transparent; + --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: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-actionbutton-staticblack-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-actionbutton-staticblack-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-actionbutton-staticblack-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-default: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-down: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-actionbutton-staticblack-selected-mod-actionbutton-border-color-disabled: transparent; + --system-spectrum-actionbutton-staticwhite-background-color-default: transparent; + --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: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-actionbutton-staticwhite-border-color-hover: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-actionbutton-staticwhite-border-color-down: var( + --spectrum-transparent-white-600 + ); + --system-spectrum-actionbutton-staticwhite-border-color-focus: var( + --spectrum-transparent-white-500 + ); + --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-mod-actionbutton-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-default: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-down: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-actionbutton-staticwhite-selected-mod-actionbutton-border-color-disabled: transparent; +} + +:host, +:root { + --system-spectrum-actiongroup-gap-size-compact: 0; + --system-spectrum-actiongroup-horizontal-spacing-compact: -1px; + --system-spectrum-actiongroup-vertical-spacing-compact: -1px; +} + +:host, +:root { + --system-spectrum-button-background-color-default: var(--spectrum-gray-75); + --system-spectrum-button-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-button-background-color-down: var(--spectrum-gray-300); + --system-spectrum-button-background-color-focus: var(--spectrum-gray-200); + --system-spectrum-button-border-color-default: var(--spectrum-gray-400); + --system-spectrum-button-border-color-hover: var(--spectrum-gray-500); + --system-spectrum-button-border-color-down: var(--spectrum-gray-600); + --system-spectrum-button-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-button-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-background-color-disabled: transparent; + --system-spectrum-button-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-accent-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-accent-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-accent-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-accent-border-color-default: transparent; + --system-spectrum-button-accent-border-color-hover: transparent; + --system-spectrum-button-accent-border-color-down: transparent; + --system-spectrum-button-accent-border-color-focus: transparent; + --system-spectrum-button-accent-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-accent-content-color-hover: var(--spectrum-white); + --system-spectrum-button-accent-content-color-down: var(--spectrum-white); + --system-spectrum-button-accent-content-color-focus: var(--spectrum-white); + --system-spectrum-button-accent-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-accent-border-color-disabled: transparent; + --system-spectrum-button-accent-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-accent-outline-background-color-default: transparent; + --system-spectrum-button-accent-outline-background-color-hover: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-background-color-down: var( + --spectrum-accent-color-300 + ); + --system-spectrum-button-accent-outline-background-color-focus: var( + --spectrum-accent-color-200 + ); + --system-spectrum-button-accent-outline-border-color-default: var( + --spectrum-accent-color-900 + ); + --system-spectrum-button-accent-outline-border-color-hover: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-border-color-down: var( + --spectrum-accent-color-1100 + ); + --system-spectrum-button-accent-outline-border-color-focus: var( + --spectrum-accent-color-1000 + ); + --system-spectrum-button-accent-outline-content-color-default: var( + --spectrum-accent-content-color-default + ); + --system-spectrum-button-accent-outline-content-color-hover: var( + --spectrum-accent-content-color-hover + ); + --system-spectrum-button-accent-outline-content-color-down: var( + --spectrum-accent-content-color-down + ); + --system-spectrum-button-accent-outline-content-color-focus: var( + --spectrum-accent-content-color-key-focus + ); + --system-spectrum-button-accent-outline-background-color-disabled: transparent; + --system-spectrum-button-accent-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-accent-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-background-color-default: var( + --spectrum-negative-background-color-default + ); + --system-spectrum-button-negative-background-color-hover: var( + --spectrum-negative-background-color-hover + ); + --system-spectrum-button-negative-background-color-down: var( + --spectrum-negative-background-color-down + ); + --system-spectrum-button-negative-background-color-focus: var( + --spectrum-negative-background-color-key-focus + ); + --system-spectrum-button-negative-border-color-default: transparent; + --system-spectrum-button-negative-border-color-hover: transparent; + --system-spectrum-button-negative-border-color-down: transparent; + --system-spectrum-button-negative-border-color-focus: transparent; + --system-spectrum-button-negative-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-negative-content-color-down: var(--spectrum-white); + --system-spectrum-button-negative-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-negative-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-negative-border-color-disabled: transparent; + --system-spectrum-button-negative-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-negative-outline-background-color-default: transparent; + --system-spectrum-button-negative-outline-background-color-hover: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-background-color-down: var( + --spectrum-negative-color-300 + ); + --system-spectrum-button-negative-outline-background-color-focus: var( + --spectrum-negative-color-200 + ); + --system-spectrum-button-negative-outline-border-color-default: var( + --spectrum-negative-color-900 + ); + --system-spectrum-button-negative-outline-border-color-hover: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-border-color-down: var( + --spectrum-negative-color-1100 + ); + --system-spectrum-button-negative-outline-border-color-focus: var( + --spectrum-negative-color-1000 + ); + --system-spectrum-button-negative-outline-content-color-default: var( + --spectrum-negative-content-color-default + ); + --system-spectrum-button-negative-outline-content-color-hover: var( + --spectrum-negative-content-color-hover + ); + --system-spectrum-button-negative-outline-content-color-down: var( + --spectrum-negative-content-color-down + ); + --system-spectrum-button-negative-outline-content-color-focus: var( + --spectrum-negative-content-color-key-focus + ); + --system-spectrum-button-negative-outline-background-color-disabled: transparent; + --system-spectrum-button-negative-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-negative-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-background-color-default: var( + --spectrum-neutral-background-color-default + ); + --system-spectrum-button-primary-background-color-hover: var( + --spectrum-neutral-background-color-hover + ); + --system-spectrum-button-primary-background-color-down: var( + --spectrum-neutral-background-color-down + ); + --system-spectrum-button-primary-background-color-focus: var( + --spectrum-neutral-background-color-key-focus + ); + --system-spectrum-button-primary-border-color-default: transparent; + --system-spectrum-button-primary-border-color-hover: transparent; + --system-spectrum-button-primary-border-color-down: transparent; + --system-spectrum-button-primary-border-color-focus: transparent; + --system-spectrum-button-primary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-primary-content-color-hover: var(--spectrum-white); + --system-spectrum-button-primary-content-color-down: var(--spectrum-white); + --system-spectrum-button-primary-content-color-focus: var(--spectrum-white); + --system-spectrum-button-primary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-primary-border-color-disabled: transparent; + --system-spectrum-button-primary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-primary-outline-background-color-default: transparent; + --system-spectrum-button-primary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-primary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-primary-outline-border-color-default: var( + --spectrum-gray-800 + ); + --system-spectrum-button-primary-outline-border-color-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-down: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-border-color-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-button-primary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-primary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-primary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-primary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-primary-outline-background-color-disabled: transparent; + --system-spectrum-button-primary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-primary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-background-color-default: var( + --spectrum-gray-200 + ); + --system-spectrum-button-secondary-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-border-color-default: transparent; + --system-spectrum-button-secondary-border-color-hover: transparent; + --system-spectrum-button-secondary-border-color-down: transparent; + --system-spectrum-button-secondary-border-color-focus: transparent; + --system-spectrum-button-secondary-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-secondary-border-color-disabled: transparent; + --system-spectrum-button-secondary-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-secondary-outline-background-color-default: transparent; + --system-spectrum-button-secondary-outline-background-color-hover: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-background-color-down: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-default: var( + --spectrum-gray-300 + ); + --system-spectrum-button-secondary-outline-border-color-hover: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-border-color-down: var( + --spectrum-gray-500 + ); + --system-spectrum-button-secondary-outline-border-color-focus: var( + --spectrum-gray-400 + ); + --system-spectrum-button-secondary-outline-content-color-default: var( + --spectrum-neutral-content-color-default + ); + --system-spectrum-button-secondary-outline-content-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --system-spectrum-button-secondary-outline-content-color-down: var( + --spectrum-neutral-content-color-down + ); + --system-spectrum-button-secondary-outline-content-color-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --system-spectrum-button-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-secondary-outline-border-color-disabled: var( + --spectrum-disabled-border-color + ); + --system-spectrum-button-secondary-outline-content-color-disabled: var( + --spectrum-disabled-content-color + ); + --system-spectrum-button-quiet-background-color-default: transparent; + --system-spectrum-button-quiet-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-button-quiet-background-color-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-button-quiet-border-color-default: transparent; + --system-spectrum-button-quiet-border-color-hover: transparent; + --system-spectrum-button-quiet-border-color-down: transparent; + --system-spectrum-button-quiet-border-color-focus: transparent; + --system-spectrum-button-quiet-background-color-disabled: transparent; + --system-spectrum-button-quiet-border-color-disabled: transparent; + --system-spectrum-button-selected-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-button-selected-background-color-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-button-selected-background-color-down: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-button-selected-background-color-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-button-selected-border-color-default: transparent; + --system-spectrum-button-selected-border-color-hover: transparent; + --system-spectrum-button-selected-border-color-down: transparent; + --system-spectrum-button-selected-border-color-focus: transparent; + --system-spectrum-button-selected-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-selected-content-color-down: var(--spectrum-white); + --system-spectrum-button-selected-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-selected-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-button-selected-border-color-disabled: transparent; + --system-spectrum-button-selected-emphasized-background-color-default: var( + --spectrum-accent-background-color-default + ); + --system-spectrum-button-selected-emphasized-background-color-hover: var( + --spectrum-accent-background-color-hover + ); + --system-spectrum-button-selected-emphasized-background-color-down: var( + --spectrum-accent-background-color-down + ); + --system-spectrum-button-selected-emphasized-background-color-focus: var( + --spectrum-accent-background-color-key-focus + ); + --system-spectrum-button-staticblack-quiet-border-color-default: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-default: transparent; + --system-spectrum-button-staticblack-quiet-border-color-hover: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-hover: transparent; + --system-spectrum-button-staticblack-quiet-border-color-down: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-down: transparent; + --system-spectrum-button-staticblack-quiet-border-color-focus: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-focus: transparent; + --system-spectrum-button-staticblack-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-quiet-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-border-color-default: transparent; + --system-spectrum-button-staticwhite-border-color-hover: transparent; + --system-spectrum-button-staticwhite-border-color-down: transparent; + --system-spectrum-button-staticwhite-border-color-focus: transparent; + --system-spectrum-button-staticwhite-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-outline-border-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-outline-border-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-border-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-selected-background-color-default: var( + --spectrum-transparent-white-800 + ); + --system-spectrum-button-staticwhite-selected-background-color-hover: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-down: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-background-color-focus: var( + --spectrum-transparent-white-900 + ); + --system-spectrum-button-staticwhite-selected-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticwhite-selected-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-selected-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-background-color-default: var( + --spectrum-transparent-white-200 + ); + --system-spectrum-button-staticwhite-secondary-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-border-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-hover: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-down: transparent; + --system-spectrum-button-staticwhite-secondary-border-color-focus: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-background-color-disabled: var( + --spectrum-disabled-static-white-background-color + ); + --system-spectrum-button-staticwhite-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticwhite-secondary-outline-background-color-hover: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-down: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-focus: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-default: var( + --spectrum-transparent-white-300 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-hover: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-down: var( + --spectrum-transparent-white-500 + ); + --system-spectrum-button-staticwhite-secondary-outline-border-color-focus: var( + --spectrum-transparent-white-400 + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticwhite-secondary-outline-focus-indicator-color: var( + --spectrum-static-white-focus-indicator-color + ); + --system-spectrum-button-staticwhite-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticwhite-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-white-border-color + ); + --system-spectrum-button-staticwhite-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-white-content-color + ); + --system-spectrum-button-staticblack-background-color-default: var( + --spectrum-transparent-black-800 + ); + --system-spectrum-button-staticblack-background-color-hover: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-down: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-background-color-focus: var( + --spectrum-transparent-black-900 + ); + --system-spectrum-button-staticblack-border-color-default: transparent; + --system-spectrum-button-staticblack-border-color-hover: transparent; + --system-spectrum-button-staticblack-border-color-down: transparent; + --system-spectrum-button-staticblack-border-color-focus: transparent; + --system-spectrum-button-staticblack-content-color-default: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-hover: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-down: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-content-color-focus: var( + --spectrum-white + ); + --system-spectrum-button-staticblack-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-border-color-disabled: transparent; + --system-spectrum-button-staticblack-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-outline-border-color-default: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-outline-border-color-hover: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-border-color-down: var( + --spectrum-transparent-black-600 + ); + --system-spectrum-button-staticblack-outline-border-color-focus: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-background-color-default: var( + --spectrum-transparent-black-200 + ); + --system-spectrum-button-staticblack-secondary-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-border-color-default: transparent; + --system-spectrum-button-staticblack-secondary-border-color-hover: transparent; + --system-spectrum-button-staticblack-secondary-border-color-down: transparent; + --system-spectrum-button-staticblack-secondary-border-color-focus: transparent; + --system-spectrum-button-staticblack-secondary-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-background-color-disabled: var( + --spectrum-disabled-static-black-background-color + ); + --system-spectrum-button-staticblack-secondary-border-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-default: transparent; + --system-spectrum-button-staticblack-secondary-outline-background-color-hover: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-down: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-focus: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-default: var( + --spectrum-transparent-black-300 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-hover: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-down: var( + --spectrum-transparent-black-500 + ); + --system-spectrum-button-staticblack-secondary-outline-border-color-focus: var( + --spectrum-transparent-black-400 + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-default: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-hover: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-down: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-focus: var( + --spectrum-black + ); + --system-spectrum-button-staticblack-secondary-outline-focus-indicator-color: var( + --spectrum-static-black-focus-indicator-color + ); + --system-spectrum-button-staticblack-secondary-outline-background-color-disabled: transparent; + --system-spectrum-button-staticblack-secondary-outline-border-color-disabled: var( + --spectrum-disabled-static-black-border-color + ); + --system-spectrum-button-staticblack-secondary-outline-content-color-disabled: var( + --spectrum-disabled-static-black-content-color + ); +} + +:host, +:root { + --system-spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --system-spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --system-spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --system-spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); +} + +:host, +:root { + --system-spectrum-closebutton-background-color-default: transparent; + --system-spectrum-closebutton-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-closebutton-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-closebutton-background-color-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-combobox-border-color-focus: var(--spectrum-gray-500); + --system-spectrum-combobox-border-color-focus-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); +} + +:host, +:root { + --system-spectrum-infieldbutton-spectrum-infield-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-color: inherit; + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-border-radius-reset: 0; + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-top-border-radius-start-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-stacked-bottom-border-radius-end-start: var( + --spectrum-infield-button-border-radius-reset + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-infieldbutton-spectrum-infield-button-background-color-key-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-picker-background-color-default: var(--spectrum-gray-75); + --system-spectrum-picker-background-color-default-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-active: var(--spectrum-gray-300); + --system-spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --system-spectrum-picker-background-color-hover-open: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-picker-border-color-default: var(--spectrum-gray-500); + --system-spectrum-picker-border-color-default-open: var( + --spectrum-gray-500 + ); + --system-spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); + --system-spectrum-picker-border-color-active: var(--spectrum-gray-700); + --system-spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); + --system-spectrum-picker-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-pickerbutton-spectrum-picker-button-background-color: var( + --spectrum-gray-75 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down: var( + --spectrum-gray-300 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus: var( + --spectrum-gray-200 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-color: inherit; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided: 0; + --system-spectrum-pickerbutton-spectrum-picker-button-border-width: var( + --spectrum-border-width-100 + ); +} + +:host, +:root { + --system-spectrum-popover-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-radio-button-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --system-spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --system-spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + --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-search-border-radius: var(--spectrum-corner-radius-100); + --system-spectrum-search-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-border-color-default: var(--spectrum-gray-500); + --system-spectrum-search-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-search-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --system-spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + --system-spectrum-search-sizes-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizes-edge-to-visual: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-search-sizem-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizem-edge-to-visual: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-search-sizel-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizel-edge-to-visual: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-search-sizexl-border-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-search-sizexl-edge-to-visual: var( + --spectrum-component-edge-to-visual-300 + ); +} + +:host, +:root { + --system-spectrum-slider-track-color: var(--spectrum-gray-300); + --system-spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --system-spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --system-spectrum-slider-ramp-track-color-disabled: var( + --spectrum-gray-200 + ); + --system-spectrum-slider-handle-background-color: transparent; + --system-spectrum-slider-handle-background-color-disabled: transparent; + --system-spectrum-slider-ramp-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-ticks-handle-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --system-spectrum-slider-handle-disabled-background-color: var( + --spectrum-gray-100 + ); + --system-spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --system-spectrum-slider-handle-border-color-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-slider-handle-border-color-key-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-slider-handle-focus-ring-color-key-focus: var( + --spectrum-focus-indicator-color + ); +} + +:host, +:root { + --system-spectrum-stepper-border-width: var(--spectrum-border-width-100); + --system-spectrum-stepper-buttons-border-style: none; + --system-spectrum-stepper-buttons-border-width: 0; + --system-spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); + --system-spectrum-stepper-buttons-border-color-hover: var( + --spectrum-gray-600 + ); + --system-spectrum-stepper-buttons-border-color-focus: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-buttons-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-button-border-radius-reset: 0px; + --system-spectrum-stepper-button-border-width: var( + --spectrum-border-width-100 + ); + --system-spectrum-stepper-border-color: var(--spectrum-gray-500); + --system-spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-stepper-border-color-focus-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-stepper-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-stepper-border-color-invalid: var( + --spectrum-negative-border-color-default + ); + --system-spectrum-stepper-border-color-focus-invalid: var( + --spectrum-negative-border-color-focus + ); + --system-spectrum-stepper-border-color-focus-hover-invalid: var( + --spectrum-negative-border-color-focus-hover + ); + --system-spectrum-stepper-border-color-keyboard-focus-invalid: var( + --spectrum-negative-border-color-key-focus + ); + --system-spectrum-stepper-button-background-color-focus: var( + --spectrum-gray-300 + ); + --system-spectrum-stepper-button-background-color-keyboard-focus: var( + --spectrum-gray-200 + ); +} + +:host, +:root { + --system-spectrum-switch-handle-border-color-default: var( + --spectrum-gray-600 + ); + --system-spectrum-switch-handle-border-color-hover: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --system-spectrum-switch-handle-border-color-focus: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-default: var( + --spectrum-gray-700 + ); + --system-spectrum-switch-handle-border-color-selected-hover: var( + --spectrum-gray-800 + ); + --system-spectrum-switch-handle-border-color-selected-down: var( + --spectrum-gray-900 + ); + --system-spectrum-switch-handle-border-color-selected-focus: var( + --spectrum-gray-800 + ); +} + +:host, +:root { + --system-spectrum-tabs-font-weight: var(--spectrum-default-font-weight); +} + +:host, +:root { + --system-spectrum-tag-border-color: var(--spectrum-gray-700); + --system-spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --system-spectrum-tag-border-color-active: var(--spectrum-gray-900); + --system-spectrum-tag-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-tag-size-small-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-medium-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-size-large-corner-radius: var( + --spectrum-corner-radius-100 + ); + --system-spectrum-tag-background-color: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-hover: var(--spectrum-gray-75); + --system-spectrum-tag-background-color-active: var(--spectrum-gray-200); + --system-spectrum-tag-background-color-focus: var(--spectrum-gray-75); + --system-spectrum-tag-content-color: var( + --spectrum-neutral-subdued-content-color-default + ); + --system-spectrum-tag-content-color-hover: var( + --spectrum-neutral-subdued-content-color-hover + ); + --system-spectrum-tag-content-color-active: var( + --spectrum-neutral-subdued-content-color-down + ); + --system-spectrum-tag-content-color-focus: var( + --spectrum-neutral-subdued-content-color-key-focus + ); + --system-spectrum-tag-border-color-selected: var( + --spectrum-neutral-subdued-background-color-default + ); + --system-spectrum-tag-border-color-selected-hover: var( + --spectrum-neutral-subdued-background-color-hover + ); + --system-spectrum-tag-border-color-selected-active: var( + --spectrum-neutral-subdued-background-color-down + ); + --system-spectrum-tag-border-color-selected-focus: var( + --spectrum-neutral-subdued-background-color-key-focus + ); + --system-spectrum-tag-border-color-disabled: transparent; + --system-spectrum-tag-background-color-disabled: var( + --spectrum-disabled-background-color + ); + --system-spectrum-tag-size-small-spacing-inline-start: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-small-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-75 + ); + --system-spectrum-tag-size-small-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-75 + ); + --system-spectrum-tag-size-medium-spacing-inline-start: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-medium-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-100 + ); + --system-spectrum-tag-size-medium-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-100 + ); + --system-spectrum-tag-size-large-spacing-inline-start: var( + --spectrum-component-edge-to-visual-200 + ); + --system-spectrum-tag-size-large-label-spacing-inline-end: var( + --spectrum-component-edge-to-text-200 + ); + --system-spectrum-tag-size-large-clear-button-spacing-inline-end: var( + --spectrum-component-edge-to-visual-200 + ); +} + +:host, +:root { + --system-spectrum-textfield-border-color: var(--spectrum-gray-500); + --system-spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --system-spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --system-spectrum-textfield-border-color-focus-hover: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-color-keyboard-focus: var( + --spectrum-gray-900 + ); + --system-spectrum-textfield-border-width: var(--spectrum-border-width-100); +} + +:host, +:root { + --system-spectrum-toast-background-color-default: var( + --spectrum-neutral-subdued-background-color-default + ); +} + +:host, +:root { + --system-spectrum-tooltip-backgound-color-default-neutral: var( + --spectrum-neutral-subdued-background-color-default + ); +} From 3cb248b727e7f6d907052579e211751700c02f1e Mon Sep 17 00:00:00 2001 From: TarunAdobe Date: Fri, 26 Apr 2024 23:03:10 +0530 Subject: [PATCH 098/208] chore: normalized spectrum-two var naming usage --- .circleci/config.yml | 2 +- tasks/build-preview-urls-comment.js | 2 +- test/visual/review.js | 2 +- web-test-runner.utils.js | 6 ++---- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 35ace270c5..b516b0fd7f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -321,7 +321,7 @@ workflows: name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >> matrix: parameters: - theme: [classic, express, s2] + theme: [classic, express, spectrum-two] color: [lightest, light, dark, darkest] scale: [medium, large] dir: [ltr, rtl] diff --git a/tasks/build-preview-urls-comment.js b/tasks/build-preview-urls-comment.js index 0d4b75926e..7ea7b0765d 100644 --- a/tasks/build-preview-urls-comment.js +++ b/tasks/build-preview-urls-comment.js @@ -54,7 +54,7 @@ export const buildPreviewURLComment = (ref) => { const branch = ref.replace('refs/heads/', ''); const branchSlug = slugify(branch); const previewLinks = []; - const themes = ['Classic', 'Express', 's2']; + const themes = ['Classic', 'Express', 'Spectrum-two']; const scales = ['Medium', 'Large']; const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; diff --git a/test/visual/review.js b/test/visual/review.js index cc62f250a8..49a01203b6 100644 --- a/test/visual/review.js +++ b/test/visual/review.js @@ -27,7 +27,7 @@ const getHash = (context) => { }; const vrts = []; -const themes = ['Classic', 'Express', 's2']; +const themes = ['Classic', 'Express', 'Spectrum-two']; const scales = ['Medium', 'Large']; const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index b8608038da..7fb61246a8 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -121,9 +121,7 @@ const vrtHTML =