diff --git a/.circleci/config.yml b/.circleci/config.yml index b3ebce948f..d761376cb7 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 00f8d230a15ce013f289abbe80bc64cd9e90963b + default: c5a1a42567a3c179a5e89f57c99e12c1058d682a wireit_cache_name: type: string default: wireit @@ -229,7 +229,7 @@ jobs: keys: - v2-golden-images-<< pipeline.parameters.current_golden_images_hash >>-hcm- - v2-golden-images-main-hcm- - - v2-golden-images-main-classic-lightest-medium-ltr- + - v2-golden-images-main-spectrum-lightest-medium-ltr- - run: name: Count baseline images command: find test/visual/screenshots-baseline -type f | wc -l > count_start.txt @@ -333,7 +333,7 @@ workflows: name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >> matrix: parameters: - theme: [classic, express] + theme: [spectrum, express] color: [lightest, light, dark, darkest] scale: [medium, large] dir: [ltr, rtl] @@ -341,3 +341,16 @@ workflows: branches: # Forked pull requests have CIRCLE_BRANCH set to pull/XXX ignore: /pull\/[0-9]+/ + - visual: + name: << matrix.theme >>-<< matrix.color >>-<< matrix.scale >>-<< matrix.dir >> + matrix: + parameters: + # Spectrum-two doesn't support the lightest and darkest themes + theme: [spectrum-two] + color: [light, dark] + scale: [medium, large] + dir: [ltr, rtl] + filters: + branches: + # Forked pull requests have CIRCLE_BRANCH set to pull/XXX + ignore: /pull\/[0-9]+/ diff --git a/package.json b/package.json old mode 100644 new mode 100755 index 36c8ba5cc6..86f14d1640 --- a/package.json +++ b/package.json @@ -369,13 +369,13 @@ ] }, "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/spectrum-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-tokens.js", + "scripts/generate-tokens.js", "node_modules/@spectrum-css/**/*.css", "scripts/spectrum-vars.js", "tools/styles/package.json" diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts index 98de7471bf..0f4a61ca76 100644 --- a/packages/action-bar/src/ActionBar.ts +++ b/packages/action-bar/src/ActionBar.ts @@ -23,7 +23,7 @@ import '@spectrum-web-components/button/sp-close-button.js'; import '@spectrum-web-components/field-label/sp-field-label.js'; import actionBarStyles from './action-bar.css.js'; import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; -import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js"; +import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js'; export const actionBarVariants = ['sticky', 'fixed']; /** diff --git a/packages/overlay/src/slottable-request-directive.ts b/packages/overlay/src/slottable-request-directive.ts index 88d6b82087..1ebdc0de8d 100644 --- a/packages/overlay/src/slottable-request-directive.ts +++ b/packages/overlay/src/slottable-request-directive.ts @@ -15,7 +15,10 @@ import { render, TemplateResult, } from '@spectrum-web-components/base'; -import { AsyncDirective, directive } from '@spectrum-web-components/base/src/async-directive.js'; +import { + AsyncDirective, + directive, +} from '@spectrum-web-components/base/src/async-directive.js'; import { removeSlottableRequest, SlottableRequestEvent, diff --git a/projects/documentation/content/guides/generating-components.md b/projects/documentation/content/guides/generating-components.md index 4f14f50810..4b89362164 100644 --- a/projects/documentation/content/guides/generating-components.md +++ b/projects/documentation/content/guides/generating-components.md @@ -43,7 +43,7 @@ Outside of your new package, you will need to manually add information about you Open `tsconfig-all.json`, find "references", and add an entry for your package (`{ "path": "packages/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-all.json` config is used to build types for the project in parallel with the JS build that is handled outside of `tsc`. This will ensure that the types for your new package are available throughout the library, include at demonstration and test time. -Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper. +Open `tsconfig-react-wrapper.json`, find "references", and add an entry for your package (`{ "path": "react/spectrum-pattern" }`) alphabetically (replacing "spectrum-pattern" with the pattern you're implementing, such as "action-button" or "progress-bar"). The `tsconfig-react-wrapper.json` config is used to build types for the `@swc-react` project, so that consumers can benefit of type definitions for SWC components even when using the React wrapper. Include a listing for your package in `bundle/elements.ts` and `bundle/src/index.js`. Then, confirm that your new package is already listed in `tools/bundle/package.json`. The `bundle` package makes it possible to build demo projects with _all_ of the components from the library registered in a single place, and is also leveraged for ease of component consumption in the documentation site build. diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts index 57ee0d9908..86253db3f3 100644 --- a/projects/documentation/src/components/layout.ts +++ b/projects/documentation/src/components/layout.ts @@ -93,42 +93,50 @@ const lazyStyleFragment = ( ): void => { var fragmentName = `${name}-${system}`; switch (fragmentName) { - case 'darkest-spectrum': - import('@spectrum-web-components/theme/theme-darkest.js'); - break; - 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 'lightest-spectrum': - import('@spectrum-web-components/theme/theme-lightest.js'); - break; case 'medium-spectrum': import('@spectrum-web-components/theme/scale-medium.js'); break; case 'large-spectrum': import('@spectrum-web-components/theme/scale-large.js'); break; - case 'darkest-express': - import('@spectrum-web-components/theme/express/theme-darkest.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 'lightest-express': - import('@spectrum-web-components/theme/express/theme-lightest.js'); - break; case 'medium-express': import('@spectrum-web-components/theme/express/scale-medium.js'); break; case 'large-express': import('@spectrum-web-components/theme/express/scale-large.js'); break; + case 'light-spectrum-two': + import( + '@spectrum-web-components/theme/spectrum-two/theme-light-core-tokens.js' + ); + break; + case 'dark-spectrum-two': + import( + '@spectrum-web-components/theme/spectrum-two/theme-dark-core-tokens.js' + ); + break; + case 'medium-spectrum-two': + import( + '@spectrum-web-components/theme/spectrum-two/scale-medium-core-tokens.js' + ); + break; + case 'large-spectrum-two': + import( + '@spectrum-web-components/theme/spectrum-two/scale-large-core-tokens.js' + ); + break; } }; @@ -346,6 +354,9 @@ export class LayoutElement extends LitElement { > Spectrum Express + + Spectrum 2 +
@@ -356,10 +367,8 @@ export class LayoutElement extends LitElement { value=${this.color} @change=${this.updateColor} > - Lightest Light Dark - Darkest
@@ -483,17 +492,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 ea22db8c2b..61209d2a43 100644 --- a/projects/story-decorator/src/StoryDecorator.ts +++ b/projects/story-decorator/src/StoryDecorator.ts @@ -25,6 +25,7 @@ import { import { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; import '@spectrum-web-components/theme/sp-theme.js'; import '@spectrum-web-components/theme/src/themes.js'; +import '@spectrum-web-components/theme/src/spectrum-two/themes-core-tokens.js'; import '@spectrum-web-components/theme/src/express/themes.js'; import '@spectrum-web-components/field-label/sp-field-label.js'; import '@spectrum-web-components/picker/sp-picker.js'; @@ -317,8 +318,9 @@ export class StoryDecorator extends SpectrumElement { .value=${this.system} @change=${this.updateTheme} > - Classic + Spectrum Express + Spectrum 2 `; } @@ -335,10 +337,8 @@ export class StoryDecorator extends SpectrumElement { .value=${this.color} @change=${this.updateTheme} > - Lightest Light Dark - Darkest `; } diff --git a/projects/vrt-quick-link/404.html b/projects/vrt-quick-link/404.html index 9f4ffd0195..6f19f0f8bb 100644 --- a/projects/vrt-quick-link/404.html +++ b/projects/vrt-quick-link/404.html @@ -233,7 +233,7 @@ return temp.toLowerCase(); }; const { pathname, search } = window.location; - const flavor = search ? search.slice(1) : 'classic'; + const flavor = search ? search.slice(1) : 'spectrum'; const destColor = 'light'; const destScale = 'medium'; const destDir = 'ltr'; diff --git a/scripts/spectrum-tokens.js b/scripts/generate-tokens-wrapper.js similarity index 77% rename from scripts/spectrum-tokens.js rename to scripts/generate-tokens-wrapper.js index 8f4eb29b24..2c587e3d6f 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)); + // s2 doesn't need express tokens + if (tokensDir === 'tokens-v2' && 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 package tokens + 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,33 @@ const processPackages = async (srcPath, index) => { } }; -const spectrumTokens = async () => { +/** + * Core entry function + */ +export async function generateTokensWrapper(spectrumVersion) { + const tokensDir = spectrumVersion === 'spectrum' ? 'tokens' : 'tokens-v2'; fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'spectrum'), + path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'spectrum'), { recursive: true, } ); - fs.mkdirSync( - path.join(__dirname, '..', 'tools', 'styles', 'tokens', 'express'), - { - recursive: true, - } - ); - for (const tokensPath of await fg([`${tokensRoot}`])) { - processTokens(tokensPath); + + if (spectrumVersion === 'spectrum') { + fs.mkdirSync( + path.join(__dirname, '..', 'tools', 'styles', tokensDir, 'express'), + { + recursive: true, + } + ); + } + + for (const tokensPath of await fg([`${tokensRoot(tokensDir)}`])) { + 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..c1c90d3818 --- /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('spectrum'); + await generateTokensWrapper('spectrum-two'); +})(); diff --git a/tasks/build-preview-urls-comment.js b/tasks/build-preview-urls-comment.js index f50810a83c..bf037c6f19 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']; + const themes = ['Spectrum', 'Express', 'Spectrum-two']; const scales = ['Medium', 'Large']; const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; @@ -64,7 +64,13 @@ export const buildPreviewURLComment = (ref) => { )}--spectrum-web-components.netlify.app/review/)` ); themes.map((theme) => - colors.map((color) => + colors.map((color) => { + if ( + theme === 'Spectrum-two' && + (color === 'Lightest' || color === 'Darkest') + ) { + return; + } scales.map((scale) => directions.map((direction) => { const context = `${branch}-${theme.toLocaleLowerCase()}-${color.toLocaleLowerCase()}-${scale.toLocaleLowerCase()}-${direction.toLocaleLowerCase()}`; @@ -73,8 +79,8 @@ export const buildPreviewURLComment = (ref) => { context )}--spectrum-web-components.netlify.app/review/)`); }) - ) - ) + ); + }) ); let comment = `## Branch preview diff --git a/test/visual/review.js b/test/visual/review.js index 60bb328dfd..f430ba9e6a 100644 --- a/test/visual/review.js +++ b/test/visual/review.js @@ -27,7 +27,7 @@ const getHash = (context) => { }; const vrts = []; -const themes = ['Classic', 'Express']; +const themes = ['Spectrum', 'Express', 'Spectrum-two']; const scales = ['Medium', 'Large']; const colors = ['Lightest', 'Light', 'Dark', 'Darkest']; const directions = ['LTR', 'RTL']; @@ -38,7 +38,13 @@ vrts.push([ )}--spectrum-web-components.netlify.app/review/`, ]); themes.map((theme) => - colors.map((color) => + colors.map((color) => { + if ( + theme === 'Spectrum-two' && + (color === 'Lightest' || color === 'Darkest') + ) { + return; + } scales.map((scale) => directions.map((direction) => { const context = `${branch}-${theme.toLocaleLowerCase()}-${color.toLocaleLowerCase()}-${scale.toLocaleLowerCase()}-${direction.toLocaleLowerCase()}`; @@ -49,8 +55,8 @@ themes.map((theme) => )}--spectrum-web-components.netlify.app/review/`, ]); }) - ) - ) + ); + }) ); function cleanURL(url) { diff --git a/tools/base/src/version.js b/tools/base/src/version.js old mode 100644 new mode 100755 diff --git a/tools/styles/exports.json b/tools/styles/exports.json old mode 100644 new mode 100755 index 90f5144515..14e36becea --- a/tools/styles/exports.json +++ b/tools/styles/exports.json @@ -30,6 +30,7 @@ "./typography.js": "./typography.js", "./src/*": "./src/*", "./tokens/*": "./tokens/*", + "./tokens-v2/*": "./tokens-v2/*", "./src/spectrum-base.css": "./src/spectrum-base.css", "./src/spectrum-body.css": "./src/spectrum-body.css", "./src/spectrum-code.css": "./src/spectrum-code.css", @@ -48,5 +49,10 @@ "./tokens/spectrum/custom-vars.css": "./tokens/spectrum/custom-vars.css", "./tokens/spectrum/global-vars.css": "./tokens/spectrum/global-vars.css", "./tokens/spectrum/large-vars.css": "./tokens/spectrum/large-vars.css", - "./tokens/spectrum/medium-vars.css": "./tokens/spectrum/medium-vars.css" + "./tokens/spectrum/medium-vars.css": "./tokens/spectrum/medium-vars.css", + "./tokens-v2/spectrum/custom-large-vars.css": "./tokens-v2/spectrum/custom-large-vars.css", + "./tokens-v2/spectrum/custom-medium-vars.css": "./tokens-v2/spectrum/custom-medium-vars.css", + "./tokens-v2/spectrum/custom-vars.css": "./tokens-v2/spectrum/custom-vars.css", + "./tokens-v2/spectrum/custom-dark-vars.css": "./tokens-v2/spectrum/custom-dark-vars.css", + "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/spectrum/custom-light-vars.css" } diff --git a/tools/styles/package.json b/tools/styles/package.json old mode 100644 new mode 100755 index 13c5432a6a..8444cc55cb --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -83,7 +83,12 @@ "./tokens/spectrum/custom-vars.css": "./tokens/spectrum/custom-vars.css", "./tokens/spectrum/global-vars.css": "./tokens/spectrum/global-vars.css", "./tokens/spectrum/large-vars.css": "./tokens/spectrum/large-vars.css", - "./tokens/spectrum/medium-vars.css": "./tokens/spectrum/medium-vars.css" + "./tokens/spectrum/medium-vars.css": "./tokens/spectrum/medium-vars.css", + "./tokens-v2/spectrum/custom-large-vars.css": "./tokens-v2/spectrum/custom-large-vars.css", + "./tokens-v2/spectrum/custom-medium-vars.css": "./tokens-v2/spectrum/custom-medium-vars.css", + "./tokens-v2/spectrum/custom-vars.css": "./tokens-v2/spectrum/custom-vars.css", + "./tokens-v2/spectrum/custom-dark-vars.css": "./tokens-v2/spectrum/custom-dark-vars.css", + "./tokens-v2/spectrum/custom-light-vars.css": "./tokens-v2/spectrum/custom-light-vars.css" }, "scripts": { "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" @@ -110,6 +115,7 @@ "@spectrum-css/commons": "^10.0.0", "@spectrum-css/expressvars": "^3.0.9", "@spectrum-css/tokens": "^14.0.0", + "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@^14.0.0-next.3", "@spectrum-css/typography": "^6.1.0", "@spectrum-css/vars": "^9.0.8" }, diff --git a/tools/styles/tokens-v2/dark-vars.css b/tools/styles/tokens-v2/dark-vars.css new file mode 100644 index 0000000000..a8acb26f31 --- /dev/null +++ b/tools/styles/tokens-v2/dark-vars.css @@ -0,0 +1,723 @@ +:host, +:root { + --spectrum-overlay-opacity: 0.6; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.8; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-layer-2-color: var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default: var( + --spectrum-gray-500 + ); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-400 + ); + --spectrum-accent-background-color-default: var( + --spectrum-accent-color-700 + ); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-600); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-600); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-600 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-700 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-600 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-600 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-600 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-700 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-600 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-600 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-600 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-700 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-600 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-600 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-600 + ); + --spectrum-notice-background-color-default: var( + --spectrum-notice-color-900 + ); + --spectrum-gray-background-color-default: var(--spectrum-gray-500); + --spectrum-red-background-color-default: var(--spectrum-red-700); + --spectrum-orange-background-color-default: var(--spectrum-orange-900); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-1000 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-900); + --spectrum-green-background-color-default: var(--spectrum-green-700); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-700); + --spectrum-blue-background-color-default: var(--spectrum-blue-700); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-700); + --spectrum-purple-background-color-default: var(--spectrum-purple-700); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-700); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-700); + --spectrum-neutral-visual-color: var(--spectrum-gray-600); + --spectrum-accent-visual-color: var(--spectrum-accent-color-900); + --spectrum-informative-visual-color: var(--spectrum-informative-color-900); + --spectrum-negative-visual-color: var(--spectrum-negative-color-700); + --spectrum-notice-visual-color: var(--spectrum-notice-color-900); + --spectrum-positive-visual-color: var(--spectrum-positive-color-800); + --spectrum-gray-visual-color: var(--spectrum-gray-600); + --spectrum-red-visual-color: var(--spectrum-red-700); + --spectrum-orange-visual-color: var(--spectrum-orange-900); + --spectrum-yellow-visual-color: var(--spectrum-yellow-1100); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900); + --spectrum-celery-visual-color: var(--spectrum-celery-800); + --spectrum-green-visual-color: var(--spectrum-green-800); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-800); + --spectrum-cyan-visual-color: var(--spectrum-cyan-900); + --spectrum-blue-visual-color: var(--spectrum-blue-900); + --spectrum-indigo-visual-color: var(--spectrum-indigo-900); + --spectrum-purple-visual-color: var(--spectrum-purple-900); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900); + --spectrum-magenta-visual-color: var(--spectrum-magenta-900); + --spectrum-background-elevated-color: var(--spectrum-gray-75); + --spectrum-background-pasteboard-color: var(--spectrum-gray-25); + --spectrum-brown-visual-color: var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color: var(--spectrum-pink-900); + --spectrum-silver-visual-color: var(--spectrum-silver-900); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default: var(--spectrum-brown-700); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-700); + --spectrum-pink-background-color-default: var(--spectrum-pink-700); + --spectrum-silver-background-color-default: var(--spectrum-silver-700); + --spectrum-turquoise-background-color-default: var( + --spectrum-turquoise-700 + ); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); + --spectrum-gray-25-rgb: 17, 17, 17; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 27, 27, 27; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 34, 34, 34; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 44, 44, 44; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 50, 50, 50; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 57, 57, 57; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 68, 68, 68; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 109, 109, 109; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 138, 138, 138; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 175, 175, 175; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 219, 219, 219; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 242, 242, 242; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 255, 255, 255; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 14, 23, 63; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 15, 28, 82; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 12, 33, 117; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 18, 45, 154; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 26, 58, 195; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 37, 73, 229; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 52, 91, 248; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 69, 110, 254; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 86, 129, 255; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 105, 149, 254; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 124, 169, 252; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 152, 192, 252; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 181, 213, 253; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 213, 231, 254; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 238, 245, 255; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 255, 255, 255; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 54, 10, 3; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 68, 13, 5; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 87, 17, 7; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 115, 24, 11; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 147, 31, 17; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 177, 38, 23; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 205, 46, 29; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 230, 54, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 252, 67, 46; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 255, 103, 86; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 255, 134, 120; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 255, 167, 157; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 255, 196, 189; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 255, 222, 219; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 255, 242, 240; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 255, 255, 255; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 49, 16, 0; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 61, 21, 0; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 80, 27, 0; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 106, 36, 0; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 135, 47, 0; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 162, 59, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 185, 73, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 205, 86, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 224, 100, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 243, 117, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 255, 137, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 255, 173, 45; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 255, 201, 116; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 255, 225, 178; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 255, 243, 225; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 255, 255, 255; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 37, 23, 0; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 47, 29, 0; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 61, 39, 0; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 83, 52, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 107, 67, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 130, 82, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 151, 97, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 169, 110, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 186, 124, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 203, 141, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 218, 159, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 235, 183, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 249, 206, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 255, 230, 86; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 255, 246, 195; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 255, 255, 255; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 23, 28, 0; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 30, 36, 0; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 39, 47, 0; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 53, 63, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 68, 82, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 83, 100, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 97, 116, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 109, 131, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 122, 147, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 136, 164, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 151, 181, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 169, 203, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 187, 225, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 219, 240, 117; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 242, 249, 206; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 255, 255, 255; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 11, 31, 0; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 15, 38, 0; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 21, 51, 1; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 31, 67, 4; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 41, 86, 8; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 50, 105, 11; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 60, 122, 15; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 69, 138, 19; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 78, 154, 23; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 88, 172, 28; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 100, 190, 35; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 116, 213, 46; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 136, 234, 65; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 170, 251, 112; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 222, 255, 198; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 255, 255, 255; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 0, 30, 23; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 0, 38, 29; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 0, 51, 38; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 0, 68, 48; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 2, 87, 58; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 3, 106, 67; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 4, 124, 75; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 6, 140, 82; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 9, 157, 89; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 14, 175, 98; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 24, 193, 110; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 57, 215, 134; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 126, 231, 172; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 189, 241, 208; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 229, 250, 236; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 255, 255, 255; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 0, 30, 27; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 0, 39, 35; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 0, 50, 44; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 0, 67, 59; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 2, 86, 75; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 4, 105, 89; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 6, 122, 103; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 8, 138, 116; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 10, 154, 128; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 12, 173, 142; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 14, 190, 156; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 29, 214, 176; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 122, 229, 203; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 186, 241, 222; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 229, 249, 243; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 255, 255, 255; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 0, 29, 39; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 0, 36, 49; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 0, 48, 65; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 0, 64, 88; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 0, 82, 113; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 3, 99, 140; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 8, 115, 168; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 15, 128, 194; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 24, 142, 220; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 38, 159, 244; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 63, 177, 255; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 107, 199, 255; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 152, 219, 255; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 195, 236, 252; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 230, 248, 253; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 255, 255, 255; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 30, 0, 93; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 35, 0, 110; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 47, 0, 140; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 62, 12, 174; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 79, 30, 209; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 95, 52, 235; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 109, 75, 248; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 119, 97, 252; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 128, 119, 254; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 139, 141, 254; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 153, 161, 255; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 176, 186, 255; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 199, 208, 255; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 223, 228, 255; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 243, 244, 255; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 255, 255, 255; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 41, 0, 79; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 50, 0, 96; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 64, 0, 122; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 83, 0, 159; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 107, 6, 195; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 130, 34, 215; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 148, 62, 224; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 161, 84, 229; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 173, 105, 233; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 186, 127, 237; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 197, 149, 240; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 212, 176, 244; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 225, 201, 247; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 238, 224, 250; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 248, 243, 253; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 255, 255, 255; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 50, 0, 61; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 61, 0, 74; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 79, 0, 95; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 102, 9, 120; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 127, 23, 146; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 151, 38, 170; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 173, 51, 192; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 192, 64, 212; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 213, 73, 235; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 232, 91, 253; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 240, 122, 255; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 245, 159, 255; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 248, 191, 255; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 251, 219, 255; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 253, 241, 255; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 255, 255, 255; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 59, 0, 22; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 74, 0, 27; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 93, 0, 34; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 123, 0, 45; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 152, 7, 60; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 181, 19, 76; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 207, 31, 92; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 231, 41, 105; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 255, 51, 119; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 255, 96, 149; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 255, 128, 171; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 255, 163, 194; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 255, 193, 214; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 255, 220, 232; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 255, 241, 246; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 255, 255, 255; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 58, 0, 37; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 71, 0, 44; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 90, 0, 57; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 115, 7, 75; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 143, 18, 97; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 171, 29, 119; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 196, 39, 138; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 220, 47, 156; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 236, 67, 175; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 251, 90, 196; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 255, 122, 210; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 255, 159, 223; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 255, 191, 234; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 255, 219, 243; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 255, 241, 250; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 255, 255, 255; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 0, 30, 33; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 0, 37, 41; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 0, 49, 54; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 0, 66, 72; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 3, 84, 92; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 5, 103, 112; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 7, 120, 131; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 9, 135, 147; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 11, 151, 164; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 13, 168, 182; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 16, 186, 202; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 64, 208, 220; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 128, 225, 231; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 183, 240, 240; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 228, 249, 249; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 255, 255, 255; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 35, 24, 8; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 44, 31, 11; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 58, 40, 14; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 78, 55, 19; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 98, 71, 30; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 115, 88, 47; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 132, 104, 61; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 148, 118, 73; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 163, 132, 84; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 181, 147, 98; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 199, 163, 112; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 222, 185, 130; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 232, 207, 169; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 242, 227, 206; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 250, 244, 236; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 255, 255, 255; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 26, 26, 26; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 33, 33, 33; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 44, 44, 44; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 59, 59, 59; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 76, 76, 76; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 92, 92, 92; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 108, 108, 108; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 123, 123, 123; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 137, 137, 137; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 152, 152, 152; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 169, 169, 169; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 190, 190, 190; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 211, 211, 211; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 229, 229, 229; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 244, 244, 244; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 255, 255, 255; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 48, 17, 4; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 59, 21, 5; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 79, 28, 7; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 100, 41, 15; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 122, 57, 28; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 143, 74, 40; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 163, 88, 52; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 179, 103, 64; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 192, 119, 80; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 206, 136, 99; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 220, 154, 118; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 232, 179, 149; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 239, 203, 183; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 246, 225, 214; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 252, 244, 239; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 255, 255, 255; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-800); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); +} diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css new file mode 100644 index 0000000000..30f896a805 --- /dev/null +++ b/tools/styles/tokens-v2/global-vars.css @@ -0,0 +1,1248 @@ +:host, +:root { + --spectrum-focus-indicator-color: var(--spectrum-blue-800); + --spectrum-static-white-focus-indicator-color: var(--spectrum-white); + --spectrum-static-black-focus-indicator-color: var(--spectrum-black); + --spectrum-overlay-color: var(--spectrum-black); + --spectrum-opacity-disabled: 0.3; + --spectrum-background-base-color: var(--spectrum-gray-25); + --spectrum-background-layer-1-color: var(--spectrum-gray-50); + --spectrum-neutral-background-color-default: var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-background-color-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-hover: var( + --spectrum-gray-900 + ); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-900 + ); + --spectrum-neutral-subdued-content-color-selected: var( + --spectrum-neutral-subdued-content-color-down + ); + --spectrum-accent-content-color-selected: var( + --spectrum-accent-content-color-down + ); + --spectrum-disabled-background-color: var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color: var( + --spectrum-transparent-white-100 + ); + --spectrum-disabled-static-black-background-color: var( + --spectrum-transparent-black-100 + ); + --spectrum-background-opacity-default: 0; + --spectrum-background-opacity-hover: 0.1; + --spectrum-background-opacity-down: 0.1; + --spectrum-background-opacity-key-focus: 0.1; + --spectrum-neutral-content-color-default: var(--spectrum-gray-800); + --spectrum-neutral-content-color-hover: var(--spectrum-gray-900); + --spectrum-neutral-content-color-down: var(--spectrum-gray-900); + --spectrum-neutral-content-color-focus-hover: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-focus: var( + --spectrum-neutral-content-color-down + ); + --spectrum-neutral-content-color-key-focus: var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-default: var(--spectrum-gray-700); + --spectrum-neutral-subdued-content-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-content-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-content-color-default: var(--spectrum-accent-color-900); + --spectrum-accent-content-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-content-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-negative-content-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-content-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-content-color-down: var(--spectrum-negative-color-1000); + --spectrum-negative-content-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-disabled-content-color: var(--spectrum-gray-400); + --spectrum-disabled-static-white-content-color: var( + --spectrum-transparent-white-400 + ); + --spectrum-disabled-static-black-content-color: var( + --spectrum-transparent-black-400 + ); + --spectrum-disabled-border-color: var(--spectrum-gray-300); + --spectrum-disabled-static-white-border-color: var( + --spectrum-transparent-white-300 + ); + --spectrum-disabled-static-black-border-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-negative-border-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-negative-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-negative-border-color-focus-hover: var( + --spectrum-negative-border-color-down + ); + --spectrum-negative-border-color-focus: var(--spectrum-negative-color-1000); + --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); + --spectrum-color-slider-border-opacity: 0.1; + --spectrum-color-loupe-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --spectrum-color-loupe-drop-shadow-y: 2px; + --spectrum-color-loupe-drop-shadow-blur: 8px; + --spectrum-color-loupe-inner-border: var(--spectrum-transparent-black-200); + --spectrum-color-loupe-outer-border: var(--spectrum-white); + --spectrum-card-selection-background-color: var(--spectrum-gray-100); + --spectrum-card-selection-background-color-opacity: 0.95; + --spectrum-drop-zone-background-color: var(--spectrum-accent-visual-color); + --spectrum-drop-zone-background-color-opacity: 0.1; + --spectrum-drop-zone-background-color-opacity-filled: 0.3; + --spectrum-coach-mark-pagination-color: var(--spectrum-gray-600); + --spectrum-color-handle-inner-border-color: var(--spectrum-black); + --spectrum-color-handle-inner-border-opacity: 0.42; + --spectrum-color-handle-outer-border-color: var(--spectrum-black); + --spectrum-color-handle-outer-border-opacity: var( + --spectrum-color-handle-inner-border-opacity + ); + --spectrum-color-handle-drop-shadow-color: var( + --spectrum-drop-shadow-color + ); + --spectrum-floating-action-button-drop-shadow-color: var( + --spectrum-transparent-black-300 + ); + --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; + --spectrum-transparent-white-25-opacity: 0; + --spectrum-transparent-white-25: rgba( + var(--spectrum-transparent-white-25-rgb), + var(--spectrum-transparent-white-25-opacity) + ); + --spectrum-transparent-white-50-rgb: 255, 255, 255; + --spectrum-transparent-white-50-opacity: 0.04; + --spectrum-transparent-white-50: rgba( + var(--spectrum-transparent-white-50-rgb), + var(--spectrum-transparent-white-50-opacity) + ); + --spectrum-transparent-white-75-rgb: 255, 255, 255; + --spectrum-transparent-white-75-opacity: 0.07; + --spectrum-transparent-white-75: rgba( + var(--spectrum-transparent-white-75-rgb), + var(--spectrum-transparent-white-75-opacity) + ); + --spectrum-transparent-white-100-rgb: 255, 255, 255; + --spectrum-transparent-white-100-opacity: 0.11; + --spectrum-transparent-white-100: rgba( + var(--spectrum-transparent-white-100-rgb), + var(--spectrum-transparent-white-100-opacity) + ); + --spectrum-transparent-white-200-rgb: 255, 255, 255; + --spectrum-transparent-white-200-opacity: 0.14; + --spectrum-transparent-white-200: rgba( + var(--spectrum-transparent-white-200-rgb), + var(--spectrum-transparent-white-200-opacity) + ); + --spectrum-transparent-white-300-rgb: 255, 255, 255; + --spectrum-transparent-white-300-opacity: 0.17; + --spectrum-transparent-white-300: rgba( + var(--spectrum-transparent-white-300-rgb), + var(--spectrum-transparent-white-300-opacity) + ); + --spectrum-transparent-white-400-rgb: 255, 255, 255; + --spectrum-transparent-white-400-opacity: 0.21; + --spectrum-transparent-white-400: rgba( + var(--spectrum-transparent-white-400-rgb), + var(--spectrum-transparent-white-400-opacity) + ); + --spectrum-transparent-white-500-rgb: 255, 255, 255; + --spectrum-transparent-white-500-opacity: 0.39; + --spectrum-transparent-white-500: rgba( + var(--spectrum-transparent-white-500-rgb), + var(--spectrum-transparent-white-500-opacity) + ); + --spectrum-transparent-white-600-rgb: 255, 255, 255; + --spectrum-transparent-white-600-opacity: 0.51; + --spectrum-transparent-white-600: rgba( + var(--spectrum-transparent-white-600-rgb), + var(--spectrum-transparent-white-600-opacity) + ); + --spectrum-transparent-white-700-rgb: 255, 255, 255; + --spectrum-transparent-white-700-opacity: 0.66; + --spectrum-transparent-white-700: rgba( + var(--spectrum-transparent-white-700-rgb), + var(--spectrum-transparent-white-700-opacity) + ); + --spectrum-transparent-white-800-rgb: 255, 255, 255; + --spectrum-transparent-white-800-opacity: 0.85; + --spectrum-transparent-white-800: rgba( + var(--spectrum-transparent-white-800-rgb), + var(--spectrum-transparent-white-800-opacity) + ); + --spectrum-transparent-white-900-rgb: 255, 255, 255; + --spectrum-transparent-white-900-opacity: 0.94; + --spectrum-transparent-white-900: rgba( + var(--spectrum-transparent-white-900-rgb), + var(--spectrum-transparent-white-900-opacity) + ); + --spectrum-transparent-white-1000-rgb: 255, 255, 255; + --spectrum-transparent-white-1000: rgba( + var(--spectrum-transparent-white-1000-rgb) + ); + --spectrum-black-rgb: 0, 0, 0; + --spectrum-black: rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb: 0, 0, 0; + --spectrum-transparent-black-25-opacity: 0; + --spectrum-transparent-black-25: rgba( + var(--spectrum-transparent-black-25-rgb), + var(--spectrum-transparent-black-25-opacity) + ); + --spectrum-transparent-black-50-rgb: 0, 0, 0; + --spectrum-transparent-black-50-opacity: 0.03; + --spectrum-transparent-black-50: rgba( + var(--spectrum-transparent-black-50-rgb), + var(--spectrum-transparent-black-50-opacity) + ); + --spectrum-transparent-black-75-rgb: 0, 0, 0; + --spectrum-transparent-black-75-opacity: 0.05; + --spectrum-transparent-black-75: rgba( + var(--spectrum-transparent-black-75-rgb), + var(--spectrum-transparent-black-75-opacity) + ); + --spectrum-transparent-black-100-rgb: 0, 0, 0; + --spectrum-transparent-black-100-opacity: 0.09; + --spectrum-transparent-black-100: rgba( + var(--spectrum-transparent-black-100-rgb), + var(--spectrum-transparent-black-100-opacity) + ); + --spectrum-transparent-black-200-rgb: 0, 0, 0; + --spectrum-transparent-black-200-opacity: 0.12; + --spectrum-transparent-black-200: rgba( + var(--spectrum-transparent-black-200-rgb), + var(--spectrum-transparent-black-200-opacity) + ); + --spectrum-transparent-black-300-rgb: 0, 0, 0; + --spectrum-transparent-black-300-opacity: 0.15; + --spectrum-transparent-black-300: rgba( + var(--spectrum-transparent-black-300-rgb), + var(--spectrum-transparent-black-300-opacity) + ); + --spectrum-transparent-black-400-rgb: 0, 0, 0; + --spectrum-transparent-black-400-opacity: 0.22; + --spectrum-transparent-black-400: rgba( + var(--spectrum-transparent-black-400-rgb), + var(--spectrum-transparent-black-400-opacity) + ); + --spectrum-transparent-black-500-rgb: 0, 0, 0; + --spectrum-transparent-black-500-opacity: 0.44; + --spectrum-transparent-black-500: rgba( + var(--spectrum-transparent-black-500-rgb), + var(--spectrum-transparent-black-500-opacity) + ); + --spectrum-transparent-black-600-rgb: 0, 0, 0; + --spectrum-transparent-black-600-opacity: 0.56; + --spectrum-transparent-black-600: rgba( + var(--spectrum-transparent-black-600-rgb), + var(--spectrum-transparent-black-600-opacity) + ); + --spectrum-transparent-black-700-rgb: 0, 0, 0; + --spectrum-transparent-black-700-opacity: 0.69; + --spectrum-transparent-black-700: rgba( + var(--spectrum-transparent-black-700-rgb), + var(--spectrum-transparent-black-700-opacity) + ); + --spectrum-transparent-black-800-rgb: 0, 0, 0; + --spectrum-transparent-black-800-opacity: 0.84; + --spectrum-transparent-black-800: rgba( + var(--spectrum-transparent-black-800-rgb), + var(--spectrum-transparent-black-800-opacity) + ); + --spectrum-transparent-black-900-rgb: 0, 0, 0; + --spectrum-transparent-black-900-opacity: 0.93; + --spectrum-transparent-black-900: rgba( + var(--spectrum-transparent-black-900-rgb), + var(--spectrum-transparent-black-900-opacity) + ); + --spectrum-transparent-black-1000-rgb: 0, 0, 0; + --spectrum-transparent-black-1000: rgba( + var(--spectrum-transparent-black-1000-rgb) + ); + --spectrum-icon-color-inverse: var(--spectrum-gray-50); + --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; + --spectrum-field-label-top-margin-extra-large: 0px; + --spectrum-field-label-to-component: 0px; + --spectrum-help-text-to-component: 0px; + --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; + --spectrum-combo-box-visual-to-field-button-quiet: 0px; + --spectrum-alert-dialog-minimum-width: 288px; + --spectrum-alert-dialog-maximum-width: 480px; + --spectrum-contextual-help-minimum-width: 268px; + --spectrum-breadcrumbs-height: var(--spectrum-component-height-300); + --spectrum-breadcrumbs-height-compact: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-end-edge-to-text: 0px; + --spectrum-breadcrumbs-truncated-menu-to-separator-icon: 0px; + --spectrum-breadcrumbs-start-edge-to-truncated-menu: 0px; + --spectrum-breadcrumbs-truncated-menu-to-bottom-text: 0px; + --spectrum-alert-banner-to-top-workflow-icon: var( + --spectrum-alert-banner-top-to-workflow-icon + ); + --spectrum-alert-banner-to-top-text: var( + --spectrum-alert-banner-top-to-text + ); + --spectrum-alert-banner-to-bottom-text: var( + --spectrum-alert-banner-bottom-to-text + ); + --spectrum-color-area-border-width: var(--spectrum-border-width-100); + --spectrum-color-area-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --spectrum-color-wheel-color-area-margin: 12px; + --spectrum-color-slider-border-width: 1px; + --spectrum-color-slider-border-rounding: var( + --spectrum-corner-radius-medium-size-small + ); + --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; + --spectrum-color-loupe-outer-border-width: var(--spectrum-border-width-200); + --spectrum-color-loupe-inner-border-width: 1px; + --spectrum-card-minimum-width: 100px; + --spectrum-card-preview-minimum-height: 130px; + --spectrum-card-selection-background-size: 40px; + --spectrum-drop-zone-width: 428px; + --spectrum-drop-zone-content-maximum-width: var( + --spectrum-illustrated-message-maximum-width + ); + --spectrum-drop-zone-border-dash-length: 8px; + --spectrum-drop-zone-border-dash-gap: 4px; + --spectrum-drop-zone-title-size: var( + --spectrum-illustrated-message-title-size + ); + --spectrum-drop-zone-cjk-title-size: var( + --spectrum-illustrated-message-cjk-title-size + ); + --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); + --spectrum-tab-item-height-extra-large: var( + --spectrum-component-height-500 + ); + --spectrum-tab-item-compact-height-small: var( + --spectrum-component-height-75 + ); + --spectrum-tab-item-compact-height-medium: var( + --spectrum-component-height-100 + ); + --spectrum-tab-item-compact-height-large: var( + --spectrum-component-height-200 + ); + --spectrum-tab-item-compact-height-extra-large: var( + --spectrum-component-height-300 + ); + --spectrum-tab-item-start-to-edge-quiet: 0px; + --spectrum-in-field-button-width-stacked-small: 20px; + --spectrum-in-field-button-width-stacked-medium: 28px; + --spectrum-in-field-button-width-stacked-large: 36px; + --spectrum-in-field-button-width-stacked-extra-large: 44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; + --spectrum-in-field-button-edge-to-fill: 0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small: 7px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium: 9px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large: 13px; + --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large: 16px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( + --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 + ); + --spectrum-title-cjk-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-title-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-title-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-title-cjk-font-weight: var(--spectrum-bold-font-weight); + --spectrum-title-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-title-cjk-size-l: var(--spectrum-font-size-200); + --spectrum-title-cjk-size-m: var(--spectrum-font-size-100); + --spectrum-title-cjk-size-s: var(--spectrum-font-size-75); + --spectrum-title-cjk-size-xl: var(--spectrum-font-size-300); + --spectrum-title-cjk-size-xs: var(--spectrum-font-size-50); + --spectrum-title-cjk-size-xxl: var(--spectrum-font-size-400); + --spectrum-title-cjk-size-xxxl: var(--spectrum-font-size-500); + --spectrum-title-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-title-cjk-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-title-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-title-cjk-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-title-line-height: var(--spectrum-line-height-100); + --spectrum-title-margin-bottom-multiplier: 0.25; + --spectrum-title-margin-top-multiplier: 0.88888889; + --spectrum-title-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-title-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-title-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-title-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-title-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-title-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-title-sans-serif-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-title-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-title-sans-serif-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-title-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-title-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-title-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-title-serif-font-style: var(--spectrum-default-font-style); + --spectrum-title-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-title-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-title-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-title-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-title-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-title-size-l: var(--spectrum-font-size-300); + --spectrum-title-size-m: var(--spectrum-font-size-200); + --spectrum-title-size-s: var(--spectrum-font-size-100); + --spectrum-title-size-xl: var(--spectrum-font-size-400); + --spectrum-title-size-xs: var(--spectrum-font-size-75); + --spectrum-title-size-xxl: var(--spectrum-font-size-500); + --spectrum-title-size-xxxl: var(--spectrum-font-size-600); + --spectrum-corner-radius-0: 0px; + --spectrum-corner-radius-75: 3px; + --spectrum-corner-radius-100: 4px; + --spectrum-corner-radius-200: 5px; + --spectrum-corner-radius-300: 6px; + --spectrum-corner-radius-400: 7px; + --spectrum-corner-radius-500: 8px; + --spectrum-corner-radius-600: 9px; + --spectrum-corner-radius-700: 10px; + --spectrum-corner-radius-800: 16px; + --spectrum-corner-radius-1000: 0.5; + --spectrum-drop-shadow-x: 0px; + --spectrum-android-elevation: 2dp; + --spectrum-spacing-50: 2px; + --spectrum-spacing-75: 4px; + --spectrum-spacing-100: 8px; + --spectrum-spacing-200: 12px; + --spectrum-spacing-300: 16px; + --spectrum-spacing-400: 24px; + --spectrum-spacing-500: 32px; + --spectrum-spacing-600: 40px; + --spectrum-spacing-700: 48px; + --spectrum-spacing-800: 64px; + --spectrum-spacing-900: 80px; + --spectrum-spacing-1000: 96px; + --spectrum-focus-indicator-thickness: 2px; + --spectrum-focus-indicator-gap: 2px; + --spectrum-border-width-100: 1px; + --spectrum-border-width-200: 2px; + --spectrum-border-width-400: 4px; + --spectrum-field-edge-to-text-quiet: 0px; + --spectrum-field-edge-to-visual-quiet: 0px; + --spectrum-field-edge-to-border-quiet: 0px; + --spectrum-field-edge-to-alert-icon-quiet: 0px; + --spectrum-field-edge-to-validation-icon-quiet: 0px; + --spectrum-side-label-character-count-top-margin-small: 0px; + --spectrum-side-label-character-count-top-margin-medium: 0px; + --spectrum-side-label-character-count-top-margin-large: 0px; + --spectrum-side-label-character-count-top-margin-extra-large: 0px; + --spectrum-text-underline-thickness: 1px; + --spectrum-text-underline-gap: 1px; + --spectrum-component-size-width-ratio-down: 0.3333; + --spectrum-component-size-minimum-perspective-down: 24px; + --spectrum-component-size-difference-down: -2px; + --spectrum-corner-radius-none: var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default: var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default: var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default: var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default: var( + --spectrum-corner-radius-800 + ); + --spectrum-corner-radius-full: var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small: var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium: var( + --spectrum-corner-radius-100 + ); + --spectrum-corner-radius-small-size-large: var( + --spectrum-corner-radius-200 + ); + --spectrum-corner-radius-small-size-extra-large: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-extra-small: var( + --spectrum-corner-radius-300 + ); + --spectrum-corner-radius-medium-size-small: var( + --spectrum-corner-radius-400 + ); + --spectrum-corner-radius-medium-size-medium: var( + --spectrum-corner-radius-500 + ); + --spectrum-corner-radius-medium-size-large: var( + --spectrum-corner-radius-600 + ); + --spectrum-corner-radius-medium-size-extra-large: var( + --spectrum-corner-radius-700 + ); + --spectrum-accent-color-100: var(--spectrum-blue-100); + --spectrum-accent-color-200: var(--spectrum-blue-200); + --spectrum-accent-color-300: var(--spectrum-blue-300); + --spectrum-accent-color-400: var(--spectrum-blue-400); + --spectrum-accent-color-500: var(--spectrum-blue-500); + --spectrum-accent-color-600: var(--spectrum-blue-600); + --spectrum-accent-color-700: var(--spectrum-blue-700); + --spectrum-accent-color-800: var(--spectrum-blue-800); + --spectrum-accent-color-900: var(--spectrum-blue-900); + --spectrum-accent-color-1000: var(--spectrum-blue-1000); + --spectrum-accent-color-1100: var(--spectrum-blue-1100); + --spectrum-accent-color-1200: var(--spectrum-blue-1200); + --spectrum-accent-color-1300: var(--spectrum-blue-1300); + --spectrum-accent-color-1400: var(--spectrum-blue-1400); + --spectrum-accent-color-1500: var(--spectrum-blue-1500); + --spectrum-accent-color-1600: var(--spectrum-blue-1600); + --spectrum-informative-color-100: var(--spectrum-blue-100); + --spectrum-informative-color-200: var(--spectrum-blue-200); + --spectrum-informative-color-300: var(--spectrum-blue-300); + --spectrum-informative-color-400: var(--spectrum-blue-400); + --spectrum-informative-color-500: var(--spectrum-blue-500); + --spectrum-informative-color-600: var(--spectrum-blue-600); + --spectrum-informative-color-700: var(--spectrum-blue-700); + --spectrum-informative-color-800: var(--spectrum-blue-800); + --spectrum-informative-color-900: var(--spectrum-blue-900); + --spectrum-informative-color-1000: var(--spectrum-blue-1000); + --spectrum-informative-color-1100: var(--spectrum-blue-1100); + --spectrum-informative-color-1200: var(--spectrum-blue-1200); + --spectrum-informative-color-1300: var(--spectrum-blue-1300); + --spectrum-informative-color-1400: var(--spectrum-blue-1400); + --spectrum-informative-color-1500: var(--spectrum-blue-1500); + --spectrum-informative-color-1600: var(--spectrum-blue-1600); + --spectrum-negative-color-100: var(--spectrum-red-100); + --spectrum-negative-color-200: var(--spectrum-red-200); + --spectrum-negative-color-300: var(--spectrum-red-300); + --spectrum-negative-color-400: var(--spectrum-red-400); + --spectrum-negative-color-500: var(--spectrum-red-500); + --spectrum-negative-color-600: var(--spectrum-red-600); + --spectrum-negative-color-700: var(--spectrum-red-700); + --spectrum-negative-color-800: var(--spectrum-red-800); + --spectrum-negative-color-900: var(--spectrum-red-900); + --spectrum-negative-color-1000: var(--spectrum-red-1000); + --spectrum-negative-color-1100: var(--spectrum-red-1100); + --spectrum-negative-color-1200: var(--spectrum-red-1200); + --spectrum-negative-color-1300: var(--spectrum-red-1300); + --spectrum-negative-color-1400: var(--spectrum-red-1400); + --spectrum-negative-color-1500: var(--spectrum-red-1500); + --spectrum-negative-color-1600: var(--spectrum-red-1600); + --spectrum-notice-color-100: var(--spectrum-orange-100); + --spectrum-notice-color-200: var(--spectrum-orange-200); + --spectrum-notice-color-300: var(--spectrum-orange-300); + --spectrum-notice-color-400: var(--spectrum-orange-400); + --spectrum-notice-color-500: var(--spectrum-orange-500); + --spectrum-notice-color-600: var(--spectrum-orange-600); + --spectrum-notice-color-700: var(--spectrum-orange-700); + --spectrum-notice-color-800: var(--spectrum-orange-800); + --spectrum-notice-color-900: var(--spectrum-orange-900); + --spectrum-notice-color-1000: var(--spectrum-orange-1000); + --spectrum-notice-color-1100: var(--spectrum-orange-1100); + --spectrum-notice-color-1200: var(--spectrum-orange-1200); + --spectrum-notice-color-1300: var(--spectrum-orange-1300); + --spectrum-notice-color-1400: var(--spectrum-orange-1400); + --spectrum-notice-color-1500: var(--spectrum-orange-1500); + --spectrum-notice-color-1600: var(--spectrum-orange-1600); + --spectrum-positive-color-100: var(--spectrum-green-100); + --spectrum-positive-color-200: var(--spectrum-green-200); + --spectrum-positive-color-300: var(--spectrum-green-300); + --spectrum-positive-color-400: var(--spectrum-green-400); + --spectrum-positive-color-500: var(--spectrum-green-500); + --spectrum-positive-color-600: var(--spectrum-green-600); + --spectrum-positive-color-700: var(--spectrum-green-700); + --spectrum-positive-color-800: var(--spectrum-green-800); + --spectrum-positive-color-900: var(--spectrum-green-900); + --spectrum-positive-color-1000: var(--spectrum-green-1000); + --spectrum-positive-color-1100: var(--spectrum-green-1100); + --spectrum-positive-color-1200: var(--spectrum-green-1200); + --spectrum-positive-color-1300: var(--spectrum-green-1300); + --spectrum-positive-color-1400: var(--spectrum-green-1400); + --spectrum-positive-color-1500: var(--spectrum-green-1500); + --spectrum-positive-color-1600: var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-default: var( + --spectrum-negative-color-200 + ); + --spectrum-negative-subdued-background-color-hover: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-down: var( + --spectrum-negative-color-300 + ); + --spectrum-negative-subdued-background-color-key-focus: var( + --spectrum-negative-color-300 + ); + --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); + --spectrum-sans-serif-font-family: Adobe Clean; + --spectrum-serif-font-family: Adobe Clean Serif; + --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-light-font-weight: 300; + --spectrum-regular-font-weight: 400; + --spectrum-medium-font-weight: 500; + --spectrum-bold-font-weight: 700; + --spectrum-extra-bold-font-weight: 800; + --spectrum-black-font-weight: 900; + --spectrum-italic-font-style: italic; + --spectrum-default-font-style: normal; + --spectrum-line-height-100: 1.3; + --spectrum-line-height-200: 1.5; + --spectrum-cjk-line-height-100: 1.5; + --spectrum-cjk-line-height-200: 1.7; + --spectrum-cjk-letter-spacing: 0.05em; + --spectrum-heading-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-heading-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-heading-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-heading-sans-serif-light-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-heading-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-sans-serif-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-heavy-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-heavy-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-cjk-heavy-font-style: var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-light-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-serif-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-cjk-heavy-strong-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-emphasized-font-weight: var( + --spectrum-light-font-weight + ); + --spectrum-heading-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-heading-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-light-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-heading-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-sans-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-serif-heavy-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-heading-cjk-heavy-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-heading-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-size-xxl: var(--spectrum-font-size-1100); + --spectrum-heading-size-xl: var(--spectrum-font-size-900); + --spectrum-heading-size-l: var(--spectrum-font-size-700); + --spectrum-heading-size-m: var(--spectrum-font-size-500); + --spectrum-heading-size-s: var(--spectrum-font-size-300); + --spectrum-heading-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-cjk-size-xxxl: var(--spectrum-font-size-1300); + --spectrum-heading-cjk-size-xxl: var(--spectrum-font-size-900); + --spectrum-heading-cjk-size-xl: var(--spectrum-font-size-800); + --spectrum-heading-cjk-size-l: var(--spectrum-font-size-600); + --spectrum-heading-cjk-size-m: var(--spectrum-font-size-400); + --spectrum-heading-cjk-size-s: var(--spectrum-font-size-300); + --spectrum-heading-cjk-size-xs: var(--spectrum-font-size-200); + --spectrum-heading-cjk-size-xxs: var(--spectrum-font-size-100); + --spectrum-heading-line-height: var(--spectrum-line-height-100); + --spectrum-heading-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-heading-margin-top-multiplier: 0.88888889; + --spectrum-heading-margin-bottom-multiplier: 0.25; + --spectrum-heading-color: var(--spectrum-gray-900); + --spectrum-body-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-body-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-body-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-body-sans-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-serif-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-serif-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-body-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-serif-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-body-serif-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-body-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-body-sans-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-body-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-body-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-body-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-body-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-body-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-body-size-xxxl: var(--spectrum-font-size-600); + --spectrum-body-size-xxl: var(--spectrum-font-size-500); + --spectrum-body-size-xl: var(--spectrum-font-size-400); + --spectrum-body-size-l: var(--spectrum-font-size-300); + --spectrum-body-size-m: var(--spectrum-font-size-200); + --spectrum-body-size-s: var(--spectrum-font-size-100); + --spectrum-body-size-xs: var(--spectrum-font-size-75); + --spectrum-body-line-height: var(--spectrum-line-height-200); + --spectrum-body-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-body-margin-multiplier: 0.75; + --spectrum-body-color: var(--spectrum-gray-800); + --spectrum-detail-sans-serif-font-family: var( + --spectrum-sans-serif-font-family + ); + --spectrum-detail-serif-font-family: var(--spectrum-serif-font-family); + --spectrum-detail-cjk-font-family: var(--spectrum-cjk-font-family); + --spectrum-detail-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-sans-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-detail-serif-font-style: var(--spectrum-default-font-style); + --spectrum-detail-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-detail-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-light-font-weight: var(--spectrum-light-font-weight); + --spectrum-detail-cjk-light-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-strong-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-detail-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-detail-sans-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-serif-light-strong-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-cjk-light-strong-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-cjk-light-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-sans-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-detail-serif-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-detail-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-sans-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-serif-light-strong-emphasized-font-weight: var( + --spectrum-regular-font-weight + ); + --spectrum-detail-serif-light-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-detail-cjk-light-strong-emphasized-font-weight: var( + --spectrum-extra-bold-font-weight + ); + --spectrum-detail-cjk-light-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-detail-size-xl: var(--spectrum-font-size-200); + --spectrum-detail-size-l: var(--spectrum-font-size-100); + --spectrum-detail-size-m: var(--spectrum-font-size-75); + --spectrum-detail-size-s: var(--spectrum-font-size-50); + --spectrum-detail-line-height: var(--spectrum-line-height-100); + --spectrum-detail-cjk-line-height: var(--spectrum-cjk-line-height-100); + --spectrum-detail-margin-top-multiplier: 0.88888889; + --spectrum-detail-margin-bottom-multiplier: 0.25; + --spectrum-detail-letter-spacing: 0.06em; + --spectrum-detail-sans-serif-text-transform: uppercase; + --spectrum-detail-serif-text-transform: uppercase; + --spectrum-detail-color: var(--spectrum-gray-900); + --spectrum-code-font-family: Source Code Pro; + --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); + --spectrum-code-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-cjk-font-style: var(--spectrum-default-font-style); + --spectrum-code-strong-font-weight: var(--spectrum-bold-font-weight); + --spectrum-code-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-cjk-strong-font-weight: var(--spectrum-black-font-weight); + --spectrum-code-cjk-strong-font-style: var(--spectrum-default-font-style); + --spectrum-code-emphasized-font-weight: var(--spectrum-regular-font-weight); + --spectrum-code-emphasized-font-style: var(--spectrum-italic-font-style); + --spectrum-code-cjk-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-code-cjk-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-code-strong-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-code-strong-emphasized-font-style: var( + --spectrum-italic-font-style + ); + --spectrum-code-cjk-strong-emphasized-font-weight: var( + --spectrum-black-font-weight + ); + --spectrum-code-cjk-strong-emphasized-font-style: var( + --spectrum-default-font-style + ); + --spectrum-code-size-xl: var(--spectrum-font-size-400); + --spectrum-code-size-l: var(--spectrum-font-size-300); + --spectrum-code-size-m: var(--spectrum-font-size-200); + --spectrum-code-size-s: var(--spectrum-font-size-100); + --spectrum-code-size-xs: var(--spectrum-font-size-75); + --spectrum-code-line-height: var(--spectrum-line-height-200); + --spectrum-code-cjk-line-height: var(--spectrum-cjk-line-height-200); + --spectrum-code-color: var(--spectrum-gray-800); +} diff --git a/tools/styles/tokens-v2/large-vars.css b/tools/styles/tokens-v2/large-vars.css new file mode 100644 index 0000000000..ade4542c96 --- /dev/null +++ b/tools/styles/tokens-v2/large-vars.css @@ -0,0 +1,562 @@ +: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; + --spectrum-field-label-text-to-asterisk-extra-large: 6px; + --spectrum-field-label-top-to-asterisk-small: 11px; + --spectrum-field-label-top-to-asterisk-medium: 15px; + --spectrum-field-label-top-to-asterisk-large: 19px; + --spectrum-field-label-top-to-asterisk-extra-large: 24px; + --spectrum-field-label-to-component-quiet-small: -10px; + --spectrum-field-label-to-component-quiet-medium: -10px; + --spectrum-field-label-to-component-quiet-large: -15px; + --spectrum-field-label-to-component-quiet-extra-large: -19px; + --spectrum-help-text-top-to-workflow-icon-small: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-help-text-top-to-workflow-icon-medium: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-help-text-top-to-workflow-icon-large: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-help-text-top-to-workflow-icon-extra-large: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --spectrum-status-light-dot-size-medium: 10px; + --spectrum-status-light-dot-size-large: 12px; + --spectrum-status-light-dot-size-extra-large: 12px; + --spectrum-status-light-top-to-dot-small: 11px; + --spectrum-status-light-top-to-dot-medium: 15px; + --spectrum-status-light-top-to-dot-large: 19px; + --spectrum-status-light-top-to-dot-extra-large: 24px; + --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; + --spectrum-progress-bar-thickness-extra-large: 13px; + --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( + --spectrum-opacity-checkerboard-square-size-medium + ); + --spectrum-opacity-checkerboard-square-size-medium: 10px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xxs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-xs); + --spectrum-breadcrumbs-height-multiline: 84px; + --spectrum-breadcrumbs-top-to-text: 17px; + --spectrum-breadcrumbs-top-to-text-compact: 16px; + --spectrum-breadcrumbs-top-to-text-multiline: 15px; + --spectrum-breadcrumbs-bottom-to-text: 19px; + --spectrum-breadcrumbs-bottom-to-text-compact: 19px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 10px; + --spectrum-breadcrumbs-start-edge-to-text: 9px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 11px; + --spectrum-breadcrumbs-top-to-separator-icon: 25px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px; + --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; + --spectrum-alert-banner-top-to-text: 21px; + --spectrum-alert-banner-bottom-to-text: 22px; + --spectrum-rating-indicator-width: 22px; + --spectrum-rating-indicator-to-icon: 5px; + --spectrum-color-area-width: 240px; + --spectrum-color-area-minimum-width: 80px; + --spectrum-color-area-height: 240px; + --spectrum-color-area-minimum-height: 80px; + --spectrum-color-wheel-width: 240px; + --spectrum-color-wheel-minimum-width: 219px; + --spectrum-color-slider-length: 240px; + --spectrum-color-slider-minimum-length: 100px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-s); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-s + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-xs); + --spectrum-coach-mark-width: 216px; + --spectrum-coach-mark-minimum-width: 216px; + --spectrum-coach-mark-maximum-width: 248px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-300); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 22px; + --spectrum-coach-mark-media-height: 162px; + --spectrum-coach-mark-media-minimum-height: 121px; + --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; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 36px; + --spectrum-tab-item-to-tab-item-vertical-small: 5px; + --spectrum-tab-item-to-tab-item-vertical-medium: 5px; + --spectrum-tab-item-to-tab-item-vertical-large: 6px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 6px; + --spectrum-tab-item-start-to-edge-small: 13px; + --spectrum-tab-item-start-to-edge-medium: 15px; + --spectrum-tab-item-start-to-edge-large: 17px; + --spectrum-tab-item-start-to-edge-extra-large: 19px; + --spectrum-tab-item-top-to-text-small: 14px; + --spectrum-tab-item-bottom-to-text-small: 15px; + --spectrum-tab-item-top-to-text-medium: 18px; + --spectrum-tab-item-bottom-to-text-medium: 19px; + --spectrum-tab-item-top-to-text-large: 22px; + --spectrum-tab-item-bottom-to-text-large: 22px; + --spectrum-tab-item-top-to-text-extra-large: 25px; + --spectrum-tab-item-bottom-to-text-extra-large: 25px; + --spectrum-tab-item-top-to-text-compact-small: 5px; + --spectrum-tab-item-bottom-to-text-compact-small: 6px; + --spectrum-tab-item-top-to-text-compact-medium: 9px; + --spectrum-tab-item-bottom-to-text-compact-medium: 10px; + --spectrum-tab-item-top-to-text-compact-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-large: 14px; + --spectrum-tab-item-top-to-text-compact-extra-large: 15px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-small: 15px; + --spectrum-tab-item-top-to-workflow-icon-medium: 19px; + --spectrum-tab-item-top-to-workflow-icon-large: 23px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 26px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 5px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 16px; + --spectrum-tab-item-focus-indicator-gap-small: 9px; + --spectrum-tab-item-focus-indicator-gap-medium: 10px; + --spectrum-tab-item-focus-indicator-gap-large: 11px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 12px; + --spectrum-side-navigation-width: 240px; + --spectrum-side-navigation-minimum-width: 200px; + --spectrum-side-navigation-maximum-width: 300px; + --spectrum-side-navigation-second-level-edge-to-text: 30px; + --spectrum-side-navigation-third-level-edge-to-text: 45px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 62px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 77px; + --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; + --spectrum-arrow-icon-size-300: 16px; + --spectrum-arrow-icon-size-400: 18px; + --spectrum-arrow-icon-size-500: 22px; + --spectrum-arrow-icon-size-600: 24px; + --spectrum-asterisk-icon-size-100: 10px; + --spectrum-asterisk-icon-size-200: 12px; + --spectrum-asterisk-icon-size-300: 12px; + --spectrum-checkmark-icon-size-50: 12px; + --spectrum-checkmark-icon-size-75: 12px; + --spectrum-checkmark-icon-size-100: 14px; + --spectrum-checkmark-icon-size-200: 14px; + --spectrum-checkmark-icon-size-300: 16px; + --spectrum-checkmark-icon-size-400: 18px; + --spectrum-checkmark-icon-size-500: 20px; + --spectrum-checkmark-icon-size-600: 24px; + --spectrum-chevron-icon-size-50: 8px; + --spectrum-chevron-icon-size-75: 12px; + --spectrum-chevron-icon-size-100: 14px; + --spectrum-chevron-icon-size-200: 14px; + --spectrum-chevron-icon-size-300: 16px; + --spectrum-chevron-icon-size-400: 18px; + --spectrum-chevron-icon-size-500: 20px; + --spectrum-chevron-icon-size-600: 24px; + --spectrum-cross-icon-size-75: 10px; + --spectrum-cross-icon-size-100: 10px; + --spectrum-cross-icon-size-200: 12px; + --spectrum-cross-icon-size-300: 14px; + --spectrum-cross-icon-size-400: 16px; + --spectrum-cross-icon-size-500: 16px; + --spectrum-cross-icon-size-600: 18px; + --spectrum-dash-icon-size-50: 10px; + --spectrum-dash-icon-size-75: 10px; + --spectrum-dash-icon-size-100: 12px; + --spectrum-dash-icon-size-200: 14px; + --spectrum-dash-icon-size-300: 16px; + --spectrum-dash-icon-size-400: 18px; + --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; + --spectrum-workflow-icon-size-50: 16px; + --spectrum-workflow-icon-size-75: 18px; + --spectrum-workflow-icon-size-100: 24px; + --spectrum-workflow-icon-size-200: 28px; + --spectrum-workflow-icon-size-300: 30px; + --spectrum-text-to-visual-50: 7px; + --spectrum-text-to-visual-75: 7px; + --spectrum-text-to-visual-100: 8px; + --spectrum-text-to-visual-200: 9px; + --spectrum-text-to-visual-300: 10px; + --spectrum-text-to-control-75: 11px; + --spectrum-text-to-control-100: 13px; + --spectrum-text-to-control-200: 14px; + --spectrum-text-to-control-300: 16px; + --spectrum-component-height-50: 26px; + --spectrum-component-height-75: 30px; + --spectrum-component-height-100: 40px; + --spectrum-component-height-200: 50px; + --spectrum-component-height-300: 60px; + --spectrum-component-height-400: 70px; + --spectrum-component-height-500: 80px; + --spectrum-component-pill-edge-to-visual-75: 13px; + --spectrum-component-pill-edge-to-visual-100: 17px; + --spectrum-component-pill-edge-to-visual-200: 22px; + --spectrum-component-pill-edge-to-visual-300: 27px; + --spectrum-component-pill-edge-to-visual-only-75: 5px; + --spectrum-component-pill-edge-to-visual-only-100: 9px; + --spectrum-component-pill-edge-to-visual-only-200: 13px; + --spectrum-component-pill-edge-to-visual-only-300: 16px; + --spectrum-component-pill-edge-to-text-75: 15px; + --spectrum-component-pill-edge-to-text-100: 20px; + --spectrum-component-pill-edge-to-text-200: 25px; + --spectrum-component-pill-edge-to-text-300: 30px; + --spectrum-component-edge-to-visual-50: 7px; + --spectrum-component-edge-to-visual-75: 9px; + --spectrum-component-edge-to-visual-100: 12px; + --spectrum-component-edge-to-visual-200: 16px; + --spectrum-component-edge-to-visual-300: 19px; + --spectrum-component-edge-to-visual-only-50: 5px; + --spectrum-component-edge-to-visual-only-75: 6px; + --spectrum-component-edge-to-visual-only-100: 8px; + --spectrum-component-edge-to-visual-only-200: 11px; + --spectrum-component-edge-to-visual-only-300: 15px; + --spectrum-component-edge-to-text-50: 10px; + --spectrum-component-edge-to-text-75: 11px; + --spectrum-component-edge-to-text-100: 15px; + --spectrum-component-edge-to-text-200: 19px; + --spectrum-component-edge-to-text-300: 22px; + --spectrum-component-top-to-workflow-icon-50: 5px; + --spectrum-component-top-to-workflow-icon-75: 6px; + --spectrum-component-top-to-workflow-icon-100: 8px; + --spectrum-component-top-to-workflow-icon-200: 11px; + --spectrum-component-top-to-workflow-icon-300: 15px; + --spectrum-component-top-to-text-50: 4px; + --spectrum-component-top-to-text-75: 5px; + --spectrum-component-top-to-text-100: 8px; + --spectrum-component-top-to-text-200: 12px; + --spectrum-component-top-to-text-300: 15px; + --spectrum-component-bottom-to-text-50: 6px; + --spectrum-component-bottom-to-text-75: 6px; + --spectrum-component-bottom-to-text-100: 11px; + --spectrum-component-bottom-to-text-200: 14px; + --spectrum-component-bottom-to-text-300: 18px; + --spectrum-component-to-menu-small: 7px; + --spectrum-component-to-menu-medium: 8px; + --spectrum-component-to-menu-large: 9px; + --spectrum-component-to-menu-extra-large: 10px; + --spectrum-field-edge-to-disclosure-icon-75: 9px; + --spectrum-field-edge-to-disclosure-icon-100: 13px; + --spectrum-field-edge-to-disclosure-icon-200: 17px; + --spectrum-field-edge-to-disclosure-icon-300: 22px; + --spectrum-field-end-edge-to-disclosure-icon-75: 9px; + --spectrum-field-end-edge-to-disclosure-icon-100: 13px; + --spectrum-field-end-edge-to-disclosure-icon-200: 17px; + --spectrum-field-end-edge-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-disclosure-icon-75: 9px; + --spectrum-field-top-to-disclosure-icon-100: 13px; + --spectrum-field-top-to-disclosure-icon-200: 17px; + --spectrum-field-top-to-disclosure-icon-300: 22px; + --spectrum-field-top-to-alert-icon-small: 5px; + --spectrum-field-top-to-alert-icon-medium: 9px; + --spectrum-field-top-to-alert-icon-large: 13px; + --spectrum-field-top-to-alert-icon-extra-large: 16px; + --spectrum-field-top-to-validation-icon-small: 9px; + --spectrum-field-top-to-validation-icon-medium: 13px; + --spectrum-field-top-to-validation-icon-large: 17px; + --spectrum-field-top-to-validation-icon-extra-large: 22px; + --spectrum-field-top-to-progress-circle-small: 7px; + --spectrum-field-top-to-progress-circle-medium: 12px; + --spectrum-field-top-to-progress-circle-large: 17px; + --spectrum-field-top-to-progress-circle-extra-large: 22px; + --spectrum-field-edge-to-alert-icon-small: 11px; + --spectrum-field-edge-to-alert-icon-medium: 15px; + --spectrum-field-edge-to-alert-icon-large: 19px; + --spectrum-field-edge-to-alert-icon-extra-large: 22px; + --spectrum-field-edge-to-validation-icon-small: 11px; + --spectrum-field-edge-to-validation-icon-medium: 15px; + --spectrum-field-edge-to-validation-icon-large: 19px; + --spectrum-field-edge-to-validation-icon-extra-large: 22px; + --spectrum-field-text-to-alert-icon-small: 10px; + --spectrum-field-text-to-alert-icon-medium: 15px; + --spectrum-field-text-to-alert-icon-large: 19px; + --spectrum-field-text-to-alert-icon-extra-large: 22px; + --spectrum-field-text-to-validation-icon-small: 10px; + --spectrum-field-text-to-validation-icon-medium: 15px; + --spectrum-field-text-to-validation-icon-large: 19px; + --spectrum-field-text-to-validation-icon-extra-large: 22px; + --spectrum-field-width: var(--spectrum-field-width-small); + --spectrum-field-width-small: 240px; + --spectrum-character-count-to-field-quiet-small: -4px; + --spectrum-character-count-to-field-quiet-medium: -4px; + --spectrum-character-count-to-field-quiet-large: -4px; + --spectrum-character-count-to-field-quiet-extra-large: -5px; + --spectrum-side-label-character-count-to-field: 15px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 9px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px; + --spectrum-navigational-indicator-top-to-back-icon-small: 7px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 12px; + --spectrum-navigational-indicator-top-to-back-icon-large: 16px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 19px; + --spectrum-color-control-track-width: 30px; + --spectrum-corner-triangle-icon-size-75: 6px; + --spectrum-corner-triangle-icon-size-100: 7px; + --spectrum-corner-triangle-icon-size-200: 8px; + --spectrum-corner-triangle-icon-size-300: 8px; + --spectrum-field-width-medium: 256px; + --spectrum-field-width-large: 272px; + --spectrum-field-width-extra-large: 288px; + --spectrum-font-size-50: 13px; + --spectrum-font-size-75: 15px; + --spectrum-font-size-100: 17px; + --spectrum-font-size-200: 19px; + --spectrum-font-size-300: 22px; + --spectrum-font-size-400: 24px; + --spectrum-font-size-500: 27px; + --spectrum-font-size-600: 31px; + --spectrum-font-size-700: 34px; + --spectrum-font-size-800: 39px; + --spectrum-font-size-900: 44px; + --spectrum-font-size-1000: 49px; + --spectrum-font-size-1100: 55px; + --spectrum-font-size-1200: 62px; + --spectrum-font-size-1300: 70px; +} diff --git a/tools/styles/tokens-v2/light-vars.css b/tools/styles/tokens-v2/light-vars.css new file mode 100644 index 0000000000..cb20577406 --- /dev/null +++ b/tools/styles/tokens-v2/light-vars.css @@ -0,0 +1,723 @@ +:host, +:root { + --spectrum-overlay-opacity: 0.4; + --spectrum-drop-shadow-color-rgb: 0, 0, 0; + --spectrum-drop-shadow-color-opacity: 0.15; + --spectrum-drop-shadow-color: rgba( + var(--spectrum-drop-shadow-color-rgb), + var(--spectrum-drop-shadow-color-opacity) + ); + --spectrum-background-layer-2-color: var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default: var( + --spectrum-gray-700 + ); + --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); + --spectrum-neutral-subdued-background-color-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-accent-background-color-default: var( + --spectrum-accent-color-900 + ); + --spectrum-accent-background-color-hover: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-down: var(--spectrum-accent-color-1000); + --spectrum-accent-background-color-key-focus: var( + --spectrum-accent-color-1000 + ); + --spectrum-informative-background-color-default: var( + --spectrum-informative-color-900 + ); + --spectrum-informative-background-color-hover: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-down: var( + --spectrum-informative-color-1000 + ); + --spectrum-informative-background-color-key-focus: var( + --spectrum-informative-color-1000 + ); + --spectrum-negative-background-color-default: var( + --spectrum-negative-color-900 + ); + --spectrum-negative-background-color-hover: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-down: var( + --spectrum-negative-color-1000 + ); + --spectrum-negative-background-color-key-focus: var( + --spectrum-negative-color-1000 + ); + --spectrum-positive-background-color-default: var( + --spectrum-positive-color-900 + ); + --spectrum-positive-background-color-hover: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-down: var( + --spectrum-positive-color-1000 + ); + --spectrum-positive-background-color-key-focus: var( + --spectrum-positive-color-1000 + ); + --spectrum-notice-background-color-default: var( + --spectrum-notice-color-600 + ); + --spectrum-gray-background-color-default: var(--spectrum-gray-700); + --spectrum-red-background-color-default: var(--spectrum-red-900); + --spectrum-orange-background-color-default: var(--spectrum-orange-600); + --spectrum-yellow-background-color-default: var(--spectrum-yellow-400); + --spectrum-chartreuse-background-color-default: var( + --spectrum-chartreuse-500 + ); + --spectrum-celery-background-color-default: var(--spectrum-celery-600); + --spectrum-green-background-color-default: var(--spectrum-green-900); + --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900); + --spectrum-cyan-background-color-default: var(--spectrum-cyan-900); + --spectrum-blue-background-color-default: var(--spectrum-blue-900); + --spectrum-indigo-background-color-default: var(--spectrum-indigo-900); + --spectrum-purple-background-color-default: var(--spectrum-purple-900); + --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900); + --spectrum-magenta-background-color-default: var(--spectrum-magenta-900); + --spectrum-neutral-visual-color: var(--spectrum-gray-500); + --spectrum-accent-visual-color: var(--spectrum-accent-color-800); + --spectrum-informative-visual-color: var(--spectrum-informative-color-800); + --spectrum-negative-visual-color: var(--spectrum-negative-color-800); + --spectrum-notice-visual-color: var(--spectrum-notice-color-700); + --spectrum-positive-visual-color: var(--spectrum-positive-color-700); + --spectrum-gray-visual-color: var(--spectrum-gray-500); + --spectrum-red-visual-color: var(--spectrum-red-800); + --spectrum-orange-visual-color: var(--spectrum-orange-700); + --spectrum-yellow-visual-color: var(--spectrum-yellow-600); + --spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600); + --spectrum-celery-visual-color: var(--spectrum-celery-700); + --spectrum-green-visual-color: var(--spectrum-green-700); + --spectrum-seafoam-visual-color: var(--spectrum-seafoam-700); + --spectrum-cyan-visual-color: var(--spectrum-cyan-600); + --spectrum-blue-visual-color: var(--spectrum-blue-800); + --spectrum-indigo-visual-color: var(--spectrum-indigo-800); + --spectrum-purple-visual-color: var(--spectrum-purple-800); + --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800); + --spectrum-magenta-visual-color: var(--spectrum-magenta-800); + --spectrum-background-elevated-color: var(--spectrum-gray-25); + --spectrum-background-pasteboard-color: var(--spectrum-gray-100); + --spectrum-brown-visual-color: var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color: var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color: var(--spectrum-pink-800); + --spectrum-silver-visual-color: var(--spectrum-silver-800); + --spectrum-turquoise-visual-color: var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default: var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default: var(--spectrum-pink-900); + --spectrum-silver-background-color-default: var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default: var( + --spectrum-turquoise-900 + ); + --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); + --spectrum-gray-25-rgb: 255, 255, 255; + --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb: 248, 248, 248; + --spectrum-gray-50: rgba(var(--spectrum-gray-50-rgb)); + --spectrum-gray-75-rgb: 243, 243, 243; + --spectrum-gray-75: rgba(var(--spectrum-gray-75-rgb)); + --spectrum-gray-100-rgb: 233, 233, 233; + --spectrum-gray-100: rgba(var(--spectrum-gray-100-rgb)); + --spectrum-gray-200-rgb: 225, 225, 225; + --spectrum-gray-200: rgba(var(--spectrum-gray-200-rgb)); + --spectrum-gray-300-rgb: 218, 218, 218; + --spectrum-gray-300: rgba(var(--spectrum-gray-300-rgb)); + --spectrum-gray-400-rgb: 198, 198, 198; + --spectrum-gray-400: rgba(var(--spectrum-gray-400-rgb)); + --spectrum-gray-500-rgb: 143, 143, 143; + --spectrum-gray-500: rgba(var(--spectrum-gray-500-rgb)); + --spectrum-gray-600-rgb: 113, 113, 113; + --spectrum-gray-600: rgba(var(--spectrum-gray-600-rgb)); + --spectrum-gray-700-rgb: 80, 80, 80; + --spectrum-gray-700: rgba(var(--spectrum-gray-700-rgb)); + --spectrum-gray-800-rgb: 41, 41, 41; + --spectrum-gray-800: rgba(var(--spectrum-gray-800-rgb)); + --spectrum-gray-900-rgb: 19, 19, 19; + --spectrum-gray-900: rgba(var(--spectrum-gray-900-rgb)); + --spectrum-gray-1000-rgb: 0, 0, 0; + --spectrum-gray-1000: rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb: 245, 249, 255; + --spectrum-blue-100: rgba(var(--spectrum-blue-100-rgb)); + --spectrum-blue-200-rgb: 229, 240, 254; + --spectrum-blue-200: rgba(var(--spectrum-blue-200-rgb)); + --spectrum-blue-300-rgb: 203, 226, 254; + --spectrum-blue-300: rgba(var(--spectrum-blue-300-rgb)); + --spectrum-blue-400-rgb: 172, 207, 253; + --spectrum-blue-400: rgba(var(--spectrum-blue-400-rgb)); + --spectrum-blue-500-rgb: 142, 185, 252; + --spectrum-blue-500: rgba(var(--spectrum-blue-500-rgb)); + --spectrum-blue-600-rgb: 114, 158, 253; + --spectrum-blue-600: rgba(var(--spectrum-blue-600-rgb)); + --spectrum-blue-700-rgb: 93, 137, 255; + --spectrum-blue-700: rgba(var(--spectrum-blue-700-rgb)); + --spectrum-blue-800-rgb: 75, 117, 255; + --spectrum-blue-800: rgba(var(--spectrum-blue-800-rgb)); + --spectrum-blue-900-rgb: 59, 99, 251; + --spectrum-blue-900: rgba(var(--spectrum-blue-900-rgb)); + --spectrum-blue-1000-rgb: 39, 77, 234; + --spectrum-blue-1000: rgba(var(--spectrum-blue-1000-rgb)); + --spectrum-blue-1100-rgb: 29, 62, 207; + --spectrum-blue-1100: rgba(var(--spectrum-blue-1100-rgb)); + --spectrum-blue-1200-rgb: 21, 50, 173; + --spectrum-blue-1200: rgba(var(--spectrum-blue-1200-rgb)); + --spectrum-blue-1300-rgb: 16, 40, 140; + --spectrum-blue-1300: rgba(var(--spectrum-blue-1300-rgb)); + --spectrum-blue-1400-rgb: 12, 31, 105; + --spectrum-blue-1400: rgba(var(--spectrum-blue-1400-rgb)); + --spectrum-blue-1500-rgb: 14, 24, 67; + --spectrum-blue-1500: rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb: 7, 11, 30; + --spectrum-blue-1600: rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb: 255, 246, 245; + --spectrum-red-100: rgba(var(--spectrum-red-100-rgb)); + --spectrum-red-200-rgb: 255, 235, 232; + --spectrum-red-200: rgba(var(--spectrum-red-200-rgb)); + --spectrum-red-300-rgb: 255, 214, 209; + --spectrum-red-300: rgba(var(--spectrum-red-300-rgb)); + --spectrum-red-400-rgb: 255, 188, 180; + --spectrum-red-400: rgba(var(--spectrum-red-400-rgb)); + --spectrum-red-500-rgb: 255, 157, 145; + --spectrum-red-500: rgba(var(--spectrum-red-500-rgb)); + --spectrum-red-600-rgb: 255, 118, 101; + --spectrum-red-600: rgba(var(--spectrum-red-600-rgb)); + --spectrum-red-700-rgb: 255, 81, 61; + --spectrum-red-700: rgba(var(--spectrum-red-700-rgb)); + --spectrum-red-800-rgb: 240, 56, 35; + --spectrum-red-800: rgba(var(--spectrum-red-800-rgb)); + --spectrum-red-900-rgb: 215, 50, 32; + --spectrum-red-900: rgba(var(--spectrum-red-900-rgb)); + --spectrum-red-1000-rgb: 183, 40, 24; + --spectrum-red-1000: rgba(var(--spectrum-red-1000-rgb)); + --spectrum-red-1100-rgb: 156, 33, 19; + --spectrum-red-1100: rgba(var(--spectrum-red-1100-rgb)); + --spectrum-red-1200-rgb: 129, 27, 14; + --spectrum-red-1200: rgba(var(--spectrum-red-1200-rgb)); + --spectrum-red-1300-rgb: 104, 21, 10; + --spectrum-red-1300: rgba(var(--spectrum-red-1300-rgb)); + --spectrum-red-1400-rgb: 80, 16, 6; + --spectrum-red-1400: rgba(var(--spectrum-red-1400-rgb)); + --spectrum-red-1500-rgb: 59, 11, 4; + --spectrum-red-1500: rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb: 29, 5, 2; + --spectrum-red-1600: rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb: 255, 246, 231; + --spectrum-orange-100: rgba(var(--spectrum-orange-100-rgb)); + --spectrum-orange-200-rgb: 255, 236, 207; + --spectrum-orange-200: rgba(var(--spectrum-orange-200-rgb)); + --spectrum-orange-300-rgb: 255, 218, 158; + --spectrum-orange-300: rgba(var(--spectrum-orange-300-rgb)); + --spectrum-orange-400-rgb: 255, 193, 94; + --spectrum-orange-400: rgba(var(--spectrum-orange-400-rgb)); + --spectrum-orange-500-rgb: 255, 162, 19; + --spectrum-orange-500: rgba(var(--spectrum-orange-500-rgb)); + --spectrum-orange-600-rgb: 252, 125, 0; + --spectrum-orange-600: rgba(var(--spectrum-orange-600-rgb)); + --spectrum-orange-700-rgb: 232, 106, 0; + --spectrum-orange-700: rgba(var(--spectrum-orange-700-rgb)); + --spectrum-orange-800-rgb: 212, 91, 0; + --spectrum-orange-800: rgba(var(--spectrum-orange-800-rgb)); + --spectrum-orange-900-rgb: 194, 78, 0; + --spectrum-orange-900: rgba(var(--spectrum-orange-900-rgb)); + --spectrum-orange-1000-rgb: 167, 62, 0; + --spectrum-orange-1000: rgba(var(--spectrum-orange-1000-rgb)); + --spectrum-orange-1100-rgb: 144, 51, 0; + --spectrum-orange-1100: rgba(var(--spectrum-orange-1100-rgb)); + --spectrum-orange-1200-rgb: 118, 41, 0; + --spectrum-orange-1200: rgba(var(--spectrum-orange-1200-rgb)); + --spectrum-orange-1300-rgb: 95, 32, 0; + --spectrum-orange-1300: rgba(var(--spectrum-orange-1300-rgb)); + --spectrum-orange-1400-rgb: 73, 24, 0; + --spectrum-orange-1400: rgba(var(--spectrum-orange-1400-rgb)); + --spectrum-orange-1500-rgb: 52, 18, 0; + --spectrum-orange-1500: rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb: 25, 8, 0; + --spectrum-orange-1600: rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb: 255, 248, 204; + --spectrum-yellow-100: rgba(var(--spectrum-yellow-100-rgb)); + --spectrum-yellow-200-rgb: 255, 241, 151; + --spectrum-yellow-200: rgba(var(--spectrum-yellow-200-rgb)); + --spectrum-yellow-300-rgb: 255, 222, 44; + --spectrum-yellow-300: rgba(var(--spectrum-yellow-300-rgb)); + --spectrum-yellow-400-rgb: 245, 199, 0; + --spectrum-yellow-400: rgba(var(--spectrum-yellow-400-rgb)); + --spectrum-yellow-500-rgb: 230, 175, 0; + --spectrum-yellow-500: rgba(var(--spectrum-yellow-500-rgb)); + --spectrum-yellow-600-rgb: 210, 149, 0; + --spectrum-yellow-600: rgba(var(--spectrum-yellow-600-rgb)); + --spectrum-yellow-700-rgb: 193, 131, 0; + --spectrum-yellow-700: rgba(var(--spectrum-yellow-700-rgb)); + --spectrum-yellow-800-rgb: 175, 116, 0; + --spectrum-yellow-800: rgba(var(--spectrum-yellow-800-rgb)); + --spectrum-yellow-900-rgb: 158, 102, 0; + --spectrum-yellow-900: rgba(var(--spectrum-yellow-900-rgb)); + --spectrum-yellow-1000-rgb: 134, 85, 0; + --spectrum-yellow-1000: rgba(var(--spectrum-yellow-1000-rgb)); + --spectrum-yellow-1100-rgb: 114, 72, 0; + --spectrum-yellow-1100: rgba(var(--spectrum-yellow-1100-rgb)); + --spectrum-yellow-1200-rgb: 93, 59, 0; + --spectrum-yellow-1200: rgba(var(--spectrum-yellow-1200-rgb)); + --spectrum-yellow-1300-rgb: 75, 47, 0; + --spectrum-yellow-1300: rgba(var(--spectrum-yellow-1300-rgb)); + --spectrum-yellow-1400-rgb: 56, 35, 0; + --spectrum-yellow-1400: rgba(var(--spectrum-yellow-1400-rgb)); + --spectrum-yellow-1500-rgb: 40, 25, 0; + --spectrum-yellow-1500: rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb: 18, 11, 0; + --spectrum-yellow-1600: rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb: 246, 251, 222; + --spectrum-chartreuse-100: rgba(var(--spectrum-chartreuse-100-rgb)); + --spectrum-chartreuse-200-rgb: 234, 246, 173; + --spectrum-chartreuse-200: rgba(var(--spectrum-chartreuse-200-rgb)); + --spectrum-chartreuse-300-rgb: 208, 236, 70; + --spectrum-chartreuse-300: rgba(var(--spectrum-chartreuse-300-rgb)); + --spectrum-chartreuse-400-rgb: 182, 219, 0; + --spectrum-chartreuse-400: rgba(var(--spectrum-chartreuse-400-rgb)); + --spectrum-chartreuse-500-rgb: 163, 196, 0; + --spectrum-chartreuse-500: rgba(var(--spectrum-chartreuse-500-rgb)); + --spectrum-chartreuse-600-rgb: 143, 172, 0; + --spectrum-chartreuse-600: rgba(var(--spectrum-chartreuse-600-rgb)); + --spectrum-chartreuse-700-rgb: 128, 153, 0; + --spectrum-chartreuse-700: rgba(var(--spectrum-chartreuse-700-rgb)); + --spectrum-chartreuse-800-rgb: 114, 137, 0; + --spectrum-chartreuse-800: rgba(var(--spectrum-chartreuse-800-rgb)); + --spectrum-chartreuse-900-rgb: 102, 122, 0; + --spectrum-chartreuse-900: rgba(var(--spectrum-chartreuse-900-rgb)); + --spectrum-chartreuse-1000-rgb: 86, 103, 0; + --spectrum-chartreuse-1000: rgba(var(--spectrum-chartreuse-1000-rgb)); + --spectrum-chartreuse-1100-rgb: 73, 87, 0; + --spectrum-chartreuse-1100: rgba(var(--spectrum-chartreuse-1100-rgb)); + --spectrum-chartreuse-1200-rgb: 60, 71, 0; + --spectrum-chartreuse-1200: rgba(var(--spectrum-chartreuse-1200-rgb)); + --spectrum-chartreuse-1300-rgb: 47, 57, 0; + --spectrum-chartreuse-1300: rgba(var(--spectrum-chartreuse-1300-rgb)); + --spectrum-chartreuse-1400-rgb: 35, 43, 0; + --spectrum-chartreuse-1400: rgba(var(--spectrum-chartreuse-1400-rgb)); + --spectrum-chartreuse-1500-rgb: 25, 30, 0; + --spectrum-chartreuse-1500: rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb: 11, 14, 0; + --spectrum-chartreuse-1600: rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb: 235, 255, 220; + --spectrum-celery-100: rgba(var(--spectrum-celery-100-rgb)); + --spectrum-celery-200-rgb: 197, 255, 156; + --spectrum-celery-200: rgba(var(--spectrum-celery-200-rgb)); + --spectrum-celery-300-rgb: 157, 247, 92; + --spectrum-celery-300: rgba(var(--spectrum-celery-300-rgb)); + --spectrum-celery-400-rgb: 129, 228, 58; + --spectrum-celery-400: rgba(var(--spectrum-celery-400-rgb)); + --spectrum-celery-500-rgb: 110, 206, 42; + --spectrum-celery-500: rgba(var(--spectrum-celery-500-rgb)); + --spectrum-celery-600-rgb: 93, 180, 31; + --spectrum-celery-600: rgba(var(--spectrum-celery-600-rgb)); + --spectrum-celery-700-rgb: 82, 161, 25; + --spectrum-celery-700: rgba(var(--spectrum-celery-700-rgb)); + --spectrum-celery-800-rgb: 72, 144, 20; + --spectrum-celery-800: rgba(var(--spectrum-celery-800-rgb)); + --spectrum-celery-900-rgb: 64, 129, 17; + --spectrum-celery-900: rgba(var(--spectrum-celery-900-rgb)); + --spectrum-celery-1000-rgb: 52, 109, 12; + --spectrum-celery-1000: rgba(var(--spectrum-celery-1000-rgb)); + --spectrum-celery-1100-rgb: 44, 92, 9; + --spectrum-celery-1100: rgba(var(--spectrum-celery-1100-rgb)); + --spectrum-celery-1200-rgb: 35, 75, 6; + --spectrum-celery-1200: rgba(var(--spectrum-celery-1200-rgb)); + --spectrum-celery-1300-rgb: 27, 60, 3; + --spectrum-celery-1300: rgba(var(--spectrum-celery-1300-rgb)); + --spectrum-celery-1400-rgb: 19, 46, 0; + --spectrum-celery-1400: rgba(var(--spectrum-celery-1400-rgb)); + --spectrum-celery-1500-rgb: 12, 33, 0; + --spectrum-celery-1500: rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb: 4, 15, 0; + --spectrum-celery-1600: rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb: 237, 252, 241; + --spectrum-green-100: rgba(var(--spectrum-green-100-rgb)); + --spectrum-green-200-rgb: 215, 247, 225; + --spectrum-green-200: rgba(var(--spectrum-green-200-rgb)); + --spectrum-green-300-rgb: 173, 238, 197; + --spectrum-green-300: rgba(var(--spectrum-green-300-rgb)); + --spectrum-green-400-rgb: 107, 227, 162; + --spectrum-green-400: rgba(var(--spectrum-green-400-rgb)); + --spectrum-green-500-rgb: 43, 209, 125; + --spectrum-green-500: rgba(var(--spectrum-green-500-rgb)); + --spectrum-green-600-rgb: 18, 184, 103; + --spectrum-green-600: rgba(var(--spectrum-green-600-rgb)); + --spectrum-green-700-rgb: 11, 164, 93; + --spectrum-green-700: rgba(var(--spectrum-green-700-rgb)); + --spectrum-green-800-rgb: 7, 147, 85; + --spectrum-green-800: rgba(var(--spectrum-green-800-rgb)); + --spectrum-green-900-rgb: 5, 131, 78; + --spectrum-green-900: rgba(var(--spectrum-green-900-rgb)); + --spectrum-green-1000-rgb: 3, 110, 69; + --spectrum-green-1000: rgba(var(--spectrum-green-1000-rgb)); + --spectrum-green-1100-rgb: 2, 93, 60; + --spectrum-green-1100: rgba(var(--spectrum-green-1100-rgb)); + --spectrum-green-1200-rgb: 1, 76, 52; + --spectrum-green-1200: rgba(var(--spectrum-green-1200-rgb)); + --spectrum-green-1300-rgb: 0, 61, 44; + --spectrum-green-1300: rgba(var(--spectrum-green-1300-rgb)); + --spectrum-green-1400-rgb: 0, 46, 34; + --spectrum-green-1400: rgba(var(--spectrum-green-1400-rgb)); + --spectrum-green-1500-rgb: 0, 33, 25; + --spectrum-green-1500: rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb: 0, 15, 12; + --spectrum-green-1600: rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb: 235, 251, 246; + --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); + --spectrum-seafoam-200-rgb: 211, 246, 234; + --spectrum-seafoam-200: rgba(var(--spectrum-seafoam-200-rgb)); + --spectrum-seafoam-300-rgb: 169, 237, 216; + --spectrum-seafoam-300: rgba(var(--spectrum-seafoam-300-rgb)); + --spectrum-seafoam-400-rgb: 92, 225, 194; + --spectrum-seafoam-400: rgba(var(--spectrum-seafoam-400-rgb)); + --spectrum-seafoam-500-rgb: 16, 207, 169; + --spectrum-seafoam-500: rgba(var(--spectrum-seafoam-500-rgb)); + --spectrum-seafoam-600-rgb: 13, 181, 149; + --spectrum-seafoam-600: rgba(var(--spectrum-seafoam-600-rgb)); + --spectrum-seafoam-700-rgb: 11, 162, 134; + --spectrum-seafoam-700: rgba(var(--spectrum-seafoam-700-rgb)); + --spectrum-seafoam-800-rgb: 9, 144, 120; + --spectrum-seafoam-800: rgba(var(--spectrum-seafoam-800-rgb)); + --spectrum-seafoam-900-rgb: 7, 129, 109; + --spectrum-seafoam-900: rgba(var(--spectrum-seafoam-900-rgb)); + --spectrum-seafoam-1000-rgb: 5, 108, 92; + --spectrum-seafoam-1000: rgba(var(--spectrum-seafoam-1000-rgb)); + --spectrum-seafoam-1100-rgb: 3, 92, 80; + --spectrum-seafoam-1100: rgba(var(--spectrum-seafoam-1100-rgb)); + --spectrum-seafoam-1200-rgb: 1, 75, 67; + --spectrum-seafoam-1200: rgba(var(--spectrum-seafoam-1200-rgb)); + --spectrum-seafoam-1300-rgb: 0, 60, 54; + --spectrum-seafoam-1300: rgba(var(--spectrum-seafoam-1300-rgb)); + --spectrum-seafoam-1400-rgb: 0, 46, 40; + --spectrum-seafoam-1400: rgba(var(--spectrum-seafoam-1400-rgb)); + --spectrum-seafoam-1500-rgb: 0, 33, 29; + --spectrum-seafoam-1500: rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb: 0, 15, 14; + --spectrum-seafoam-1600: rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb: 238, 250, 254; + --spectrum-cyan-100: rgba(var(--spectrum-cyan-100-rgb)); + --spectrum-cyan-200-rgb: 217, 244, 253; + --spectrum-cyan-200: rgba(var(--spectrum-cyan-200-rgb)); + --spectrum-cyan-300-rgb: 183, 231, 252; + --spectrum-cyan-300: rgba(var(--spectrum-cyan-300-rgb)); + --spectrum-cyan-400-rgb: 138, 213, 255; + --spectrum-cyan-400: rgba(var(--spectrum-cyan-400-rgb)); + --spectrum-cyan-500-rgb: 92, 192, 255; + --spectrum-cyan-500: rgba(var(--spectrum-cyan-500-rgb)); + --spectrum-cyan-600-rgb: 48, 167, 254; + --spectrum-cyan-600: rgba(var(--spectrum-cyan-600-rgb)); + --spectrum-cyan-700-rgb: 29, 149, 231; + --spectrum-cyan-700: rgba(var(--spectrum-cyan-700-rgb)); + --spectrum-cyan-800-rgb: 18, 134, 205; + --spectrum-cyan-800: rgba(var(--spectrum-cyan-800-rgb)); + --spectrum-cyan-900-rgb: 11, 120, 179; + --spectrum-cyan-900: rgba(var(--spectrum-cyan-900-rgb)); + --spectrum-cyan-1000-rgb: 4, 102, 145; + --spectrum-cyan-1000: rgba(var(--spectrum-cyan-1000-rgb)); + --spectrum-cyan-1100-rgb: 0, 87, 121; + --spectrum-cyan-1100: rgba(var(--spectrum-cyan-1100-rgb)); + --spectrum-cyan-1200-rgb: 0, 71, 98; + --spectrum-cyan-1200: rgba(var(--spectrum-cyan-1200-rgb)); + --spectrum-cyan-1300-rgb: 0, 57, 78; + --spectrum-cyan-1300: rgba(var(--spectrum-cyan-1300-rgb)); + --spectrum-cyan-1400-rgb: 0, 43, 59; + --spectrum-cyan-1400: rgba(var(--spectrum-cyan-1400-rgb)); + --spectrum-cyan-1500-rgb: 0, 31, 43; + --spectrum-cyan-1500: rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb: 0, 14, 20; + --spectrum-cyan-1600: rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb: 247, 248, 255; + --spectrum-indigo-100: rgba(var(--spectrum-indigo-100-rgb)); + --spectrum-indigo-200-rgb: 235, 238, 255; + --spectrum-indigo-200: rgba(var(--spectrum-indigo-200-rgb)); + --spectrum-indigo-300-rgb: 216, 222, 255; + --spectrum-indigo-300: rgba(var(--spectrum-indigo-300-rgb)); + --spectrum-indigo-400-rgb: 192, 201, 255; + --spectrum-indigo-400: rgba(var(--spectrum-indigo-400-rgb)); + --spectrum-indigo-500-rgb: 167, 178, 255; + --spectrum-indigo-500: rgba(var(--spectrum-indigo-500-rgb)); + --spectrum-indigo-600-rgb: 145, 151, 254; + --spectrum-indigo-600: rgba(var(--spectrum-indigo-600-rgb)); + --spectrum-indigo-700-rgb: 132, 128, 254; + --spectrum-indigo-700: rgba(var(--spectrum-indigo-700-rgb)); + --spectrum-indigo-800-rgb: 122, 106, 253; + --spectrum-indigo-800: rgba(var(--spectrum-indigo-800-rgb)); + --spectrum-indigo-900-rgb: 113, 85, 250; + --spectrum-indigo-900: rgba(var(--spectrum-indigo-900-rgb)); + --spectrum-indigo-1000-rgb: 99, 56, 238; + --spectrum-indigo-1000: rgba(var(--spectrum-indigo-1000-rgb)); + --spectrum-indigo-1100-rgb: 84, 36, 219; + --spectrum-indigo-1100: rgba(var(--spectrum-indigo-1100-rgb)); + --spectrum-indigo-1200-rgb: 69, 19, 191; + --spectrum-indigo-1200: rgba(var(--spectrum-indigo-1200-rgb)); + --spectrum-indigo-1300-rgb: 55, 6, 160; + --spectrum-indigo-1300: rgba(var(--spectrum-indigo-1300-rgb)); + --spectrum-indigo-1400-rgb: 42, 0, 129; + --spectrum-indigo-1400: rgba(var(--spectrum-indigo-1400-rgb)); + --spectrum-indigo-1500-rgb: 31, 0, 98; + --spectrum-indigo-1500: rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb: 17, 0, 54; + --spectrum-indigo-1600: rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb: 251, 247, 254; + --spectrum-purple-100: rgba(var(--spectrum-purple-100-rgb)); + --spectrum-purple-200-rgb: 244, 235, 252; + --spectrum-purple-200: rgba(var(--spectrum-purple-200-rgb)); + --spectrum-purple-300-rgb: 235, 218, 249; + --spectrum-purple-300: rgba(var(--spectrum-purple-300-rgb)); + --spectrum-purple-400-rgb: 221, 193, 246; + --spectrum-purple-400: rgba(var(--spectrum-purple-400-rgb)); + --spectrum-purple-500-rgb: 208, 167, 243; + --spectrum-purple-500: rgba(var(--spectrum-purple-500-rgb)); + --spectrum-purple-600-rgb: 191, 138, 238; + --spectrum-purple-600: rgba(var(--spectrum-purple-600-rgb)); + --spectrum-purple-700-rgb: 178, 114, 235; + --spectrum-purple-700: rgba(var(--spectrum-purple-700-rgb)); + --spectrum-purple-800-rgb: 166, 92, 231; + --spectrum-purple-800: rgba(var(--spectrum-purple-800-rgb)); + --spectrum-purple-900-rgb: 154, 71, 226; + --spectrum-purple-900: rgba(var(--spectrum-purple-900-rgb)); + --spectrum-purple-1000-rgb: 134, 40, 217; + --spectrum-purple-1000: rgba(var(--spectrum-purple-1000-rgb)); + --spectrum-purple-1100-rgb: 115, 13, 204; + --spectrum-purple-1100: rgba(var(--spectrum-purple-1100-rgb)); + --spectrum-purple-1200-rgb: 93, 0, 177; + --spectrum-purple-1200: rgba(var(--spectrum-purple-1200-rgb)); + --spectrum-purple-1300-rgb: 75, 0, 144; + --spectrum-purple-1300: rgba(var(--spectrum-purple-1300-rgb)); + --spectrum-purple-1400-rgb: 59, 0, 111; + --spectrum-purple-1400: rgba(var(--spectrum-purple-1400-rgb)); + --spectrum-purple-1500-rgb: 44, 0, 84; + --spectrum-purple-1500: rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb: 23, 0, 45; + --spectrum-purple-1600: rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb: 254, 246, 255; + --spectrum-fuchsia-100: rgba(var(--spectrum-fuchsia-100-rgb)); + --spectrum-fuchsia-200-rgb: 253, 233, 255; + --spectrum-fuchsia-200: rgba(var(--spectrum-fuchsia-200-rgb)); + --spectrum-fuchsia-300-rgb: 250, 211, 255; + --spectrum-fuchsia-300: rgba(var(--spectrum-fuchsia-300-rgb)); + --spectrum-fuchsia-400-rgb: 247, 181, 255; + --spectrum-fuchsia-400: rgba(var(--spectrum-fuchsia-400-rgb)); + --spectrum-fuchsia-500-rgb: 243, 147, 255; + --spectrum-fuchsia-500: rgba(var(--spectrum-fuchsia-500-rgb)); + --spectrum-fuchsia-600-rgb: 236, 105, 255; + --spectrum-fuchsia-600: rgba(var(--spectrum-fuchsia-600-rgb)); + --spectrum-fuchsia-700-rgb: 223, 77, 245; + --spectrum-fuchsia-700: rgba(var(--spectrum-fuchsia-700-rgb)); + --spectrum-fuchsia-800-rgb: 200, 68, 220; + --spectrum-fuchsia-800: rgba(var(--spectrum-fuchsia-800-rgb)); + --spectrum-fuchsia-900-rgb: 181, 57, 200; + --spectrum-fuchsia-900: rgba(var(--spectrum-fuchsia-900-rgb)); + --spectrum-fuchsia-1000-rgb: 156, 40, 175; + --spectrum-fuchsia-1000: rgba(var(--spectrum-fuchsia-1000-rgb)); + --spectrum-fuchsia-1100-rgb: 135, 27, 154; + --spectrum-fuchsia-1100: rgba(var(--spectrum-fuchsia-1100-rgb)); + --spectrum-fuchsia-1200-rgb: 113, 15, 131; + --spectrum-fuchsia-1200: rgba(var(--spectrum-fuchsia-1200-rgb)); + --spectrum-fuchsia-1300-rgb: 92, 4, 109; + --spectrum-fuchsia-1300: rgba(var(--spectrum-fuchsia-1300-rgb)); + --spectrum-fuchsia-1400-rgb: 72, 0, 88; + --spectrum-fuchsia-1400: rgba(var(--spectrum-fuchsia-1400-rgb)); + --spectrum-fuchsia-1500-rgb: 54, 0, 66; + --spectrum-fuchsia-1500: rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb: 29, 0, 35; + --spectrum-fuchsia-1600: rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb: 255, 245, 248; + --spectrum-magenta-100: rgba(var(--spectrum-magenta-100-rgb)); + --spectrum-magenta-200-rgb: 255, 232, 240; + --spectrum-magenta-200: rgba(var(--spectrum-magenta-200-rgb)); + --spectrum-magenta-300-rgb: 255, 213, 227; + --spectrum-magenta-300: rgba(var(--spectrum-magenta-300-rgb)); + --spectrum-magenta-400-rgb: 255, 185, 208; + --spectrum-magenta-400: rgba(var(--spectrum-magenta-400-rgb)); + --spectrum-magenta-500-rgb: 255, 152, 187; + --spectrum-magenta-500: rgba(var(--spectrum-magenta-500-rgb)); + --spectrum-magenta-600-rgb: 255, 112, 159; + --spectrum-magenta-600: rgba(var(--spectrum-magenta-600-rgb)); + --spectrum-magenta-700-rgb: 255, 72, 133; + --spectrum-magenta-700: rgba(var(--spectrum-magenta-700-rgb)); + --spectrum-magenta-800-rgb: 240, 45, 110; + --spectrum-magenta-800: rgba(var(--spectrum-magenta-800-rgb)); + --spectrum-magenta-900-rgb: 217, 35, 97; + --spectrum-magenta-900: rgba(var(--spectrum-magenta-900-rgb)); + --spectrum-magenta-1000-rgb: 186, 22, 80; + --spectrum-magenta-1000: rgba(var(--spectrum-magenta-1000-rgb)); + --spectrum-magenta-1100-rgb: 163, 5, 62; + --spectrum-magenta-1100: rgba(var(--spectrum-magenta-1100-rgb)); + --spectrum-magenta-1200-rgb: 136, 0, 51; + --spectrum-magenta-1200: rgba(var(--spectrum-magenta-1200-rgb)); + --spectrum-magenta-1300-rgb: 111, 0, 40; + --spectrum-magenta-1300: rgba(var(--spectrum-magenta-1300-rgb)); + --spectrum-magenta-1400-rgb: 86, 0, 30; + --spectrum-magenta-1400: rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb: 64, 0, 22; + --spectrum-magenta-1500: rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb: 35, 0, 12; + --spectrum-magenta-1600: rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb: 255, 246, 252; + --spectrum-pink-100: rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb: 255, 232, 247; + --spectrum-pink-200: rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb: 255, 211, 240; + --spectrum-pink-300: rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb: 255, 181, 230; + --spectrum-pink-400: rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb: 255, 148, 219; + --spectrum-pink-500: rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb: 255, 103, 204; + --spectrum-pink-600: rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb: 242, 76, 184; + --spectrum-pink-700: rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb: 228, 52, 163; + --spectrum-pink-800: rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb: 206, 42, 146; + --spectrum-pink-900: rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb: 176, 31, 123; + --spectrum-pink-1000: rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb: 152, 22, 104; + --spectrum-pink-1100: rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb: 128, 12, 85; + --spectrum-pink-1200: rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb: 105, 3, 68; + --spectrum-pink-1300: rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb: 83, 0, 53; + --spectrum-pink-1400: rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb: 62, 0, 39; + --spectrum-pink-1500: rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb: 33, 0, 21; + --spectrum-pink-1600: rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb: 238, 251, 251; + --spectrum-turquoise-100: rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb: 209, 245, 245; + --spectrum-turquoise-200: rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb: 169, 236, 237; + --spectrum-turquoise-300: rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb: 111, 221, 228; + --spectrum-turquoise-400: rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb: 39, 202, 216; + --spectrum-turquoise-500: rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb: 15, 177, 192; + --spectrum-turquoise-600: rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb: 12, 158, 171; + --spectrum-turquoise-700: rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb: 10, 141, 153; + --spectrum-turquoise-800: rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb: 8, 126, 137; + --spectrum-turquoise-900: rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb: 5, 107, 116; + --spectrum-turquoise-1000: rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb: 3, 90, 98; + --spectrum-turquoise-1100: rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb: 1, 74, 81; + --spectrum-turquoise-1200: rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb: 0, 59, 65; + --spectrum-turquoise-1300: rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb: 0, 44, 49; + --spectrum-turquoise-1400: rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb: 0, 32, 35; + --spectrum-turquoise-1500: rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb: 0, 15, 17; + --spectrum-turquoise-1600: rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb: 252, 247, 242; + --spectrum-brown-100: rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb: 247, 238, 225; + --spectrum-brown-200: rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb: 239, 221, 195; + --spectrum-brown-300: rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb: 229, 200, 157; + --spectrum-brown-400: rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb: 214, 177, 123; + --spectrum-brown-500: rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb: 190, 155, 104; + --spectrum-brown-600: rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb: 171, 138, 90; + --spectrum-brown-700: rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb: 154, 123, 77; + --spectrum-brown-800: rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb: 139, 109, 66; + --spectrum-brown-900: rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb: 119, 91, 50; + --spectrum-brown-1000: rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb: 103, 76, 35; + --spectrum-brown-1100: rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb: 88, 61, 21; + --spectrum-brown-1200: rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb: 70, 49, 17; + --spectrum-brown-1300: rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb: 52, 37, 13; + --spectrum-brown-1400: rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb: 38, 26, 9; + --spectrum-brown-1500: rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb: 16, 12, 4; + --spectrum-brown-1600: rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb: 247, 247, 247; + --spectrum-silver-100: rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb: 239, 239, 239; + --spectrum-silver-200: rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb: 223, 223, 223; + --spectrum-silver-300: rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb: 204, 204, 204; + --spectrum-silver-400: rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb: 183, 183, 183; + --spectrum-silver-500: rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb: 160, 160, 160; + --spectrum-silver-600: rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb: 143, 143, 143; + --spectrum-silver-700: rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb: 128, 128, 128; + --spectrum-silver-800: rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb: 114, 114, 114; + --spectrum-silver-900: rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb: 96, 96, 96; + --spectrum-silver-1000: rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb: 81, 81, 81; + --spectrum-silver-1100: rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb: 66, 66, 66; + --spectrum-silver-1200: rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb: 52, 52, 52; + --spectrum-silver-1300: rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb: 39, 39, 39; + --spectrum-silver-1400: rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb: 28, 28, 28; + --spectrum-silver-1500: rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb: 12, 12, 12; + --spectrum-silver-1600: rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb: 253, 247, 243; + --spectrum-cinnamon-100: rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb: 249, 236, 229; + --spectrum-cinnamon-200: rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb: 244, 218, 203; + --spectrum-cinnamon-300: rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb: 237, 196, 172; + --spectrum-cinnamon-400: rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb: 229, 170, 136; + --spectrum-cinnamon-500: rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb: 212, 145, 108; + --spectrum-cinnamon-600: rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb: 198, 126, 88; + --spectrum-cinnamon-700: rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb: 184, 109, 70; + --spectrum-cinnamon-800: rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb: 170, 94, 56; + --spectrum-cinnamon-900: rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb: 147, 77, 43; + --spectrum-cinnamon-1000: rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb: 128, 62, 32; + --spectrum-cinnamon-1100: rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb: 110, 48, 21; + --spectrum-cinnamon-1200: rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb: 92, 35, 11; + --spectrum-cinnamon-1300: rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb: 72, 25, 6; + --spectrum-cinnamon-1400: rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb: 52, 18, 4; + --spectrum-cinnamon-1500: rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb: 24, 8, 2; + --spectrum-cinnamon-1600: rgba(var(--spectrum-cinnamon-1600-rgb)); + --spectrum-icon-color-blue-primary-default: var(--spectrum-blue-900); + --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); + --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); + --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); +} diff --git a/tools/styles/tokens-v2/medium-vars.css b/tools/styles/tokens-v2/medium-vars.css new file mode 100644 index 0000000000..3777d920d8 --- /dev/null +++ b/tools/styles/tokens-v2/medium-vars.css @@ -0,0 +1,562 @@ +: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; + --spectrum-field-label-text-to-asterisk-extra-large: 5px; + --spectrum-field-label-top-to-asterisk-small: 8px; + --spectrum-field-label-top-to-asterisk-medium: 12px; + --spectrum-field-label-top-to-asterisk-large: 15px; + --spectrum-field-label-top-to-asterisk-extra-large: 18px; + --spectrum-field-label-to-component-quiet-small: -8px; + --spectrum-field-label-to-component-quiet-medium: -8px; + --spectrum-field-label-to-component-quiet-large: -12px; + --spectrum-field-label-to-component-quiet-extra-large: -15px; + --spectrum-help-text-top-to-workflow-icon-small: var( + --spectrum-component-top-to-workflow-icon-75 + ); + --spectrum-help-text-top-to-workflow-icon-medium: var( + --spectrum-component-top-to-workflow-icon-100 + ); + --spectrum-help-text-top-to-workflow-icon-large: var( + --spectrum-component-top-to-workflow-icon-200 + ); + --spectrum-help-text-top-to-workflow-icon-extra-large: var( + --spectrum-component-top-to-workflow-icon-300 + ); + --spectrum-status-light-dot-size-medium: 8px; + --spectrum-status-light-dot-size-large: 10px; + --spectrum-status-light-dot-size-extra-large: 10px; + --spectrum-status-light-top-to-dot-small: 8px; + --spectrum-status-light-top-to-dot-medium: 12px; + --spectrum-status-light-top-to-dot-large: 15px; + --spectrum-status-light-top-to-dot-extra-large: 19px; + --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; + --spectrum-progress-bar-thickness-extra-large: 10px; + --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( + --spectrum-opacity-checkerboard-square-size-medium + ); + --spectrum-opacity-checkerboard-square-size-medium: 8px; + --spectrum-contextual-help-title-size: var(--spectrum-heading-size-xs); + --spectrum-contextual-help-body-size: var(--spectrum-body-size-s); + --spectrum-breadcrumbs-height-multiline: 72px; + --spectrum-breadcrumbs-top-to-text: 13px; + --spectrum-breadcrumbs-top-to-text-compact: 11px; + --spectrum-breadcrumbs-top-to-text-multiline: 12px; + --spectrum-breadcrumbs-bottom-to-text: 15px; + --spectrum-breadcrumbs-bottom-to-text-compact: 12px; + --spectrum-breadcrumbs-bottom-to-text-multiline: 9px; + --spectrum-breadcrumbs-start-edge-to-text: 8px; + --spectrum-breadcrumbs-top-text-to-bottom-text: 9px; + --spectrum-breadcrumbs-top-to-separator-icon: 19px; + --spectrum-breadcrumbs-top-to-separator-icon-compact: 15px; + --spectrum-breadcrumbs-top-to-separator-icon-multiline: 15px; + --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; + --spectrum-alert-banner-top-to-text: 18px; + --spectrum-alert-banner-bottom-to-text: 20px; + --spectrum-rating-indicator-width: 18px; + --spectrum-rating-indicator-to-icon: 4px; + --spectrum-color-area-width: 192px; + --spectrum-color-area-minimum-width: 64px; + --spectrum-color-area-height: 192px; + --spectrum-color-area-minimum-height: 64px; + --spectrum-color-wheel-width: 192px; + --spectrum-color-wheel-minimum-width: 175px; + --spectrum-color-slider-length: 192px; + --spectrum-color-slider-minimum-length: 80px; + --spectrum-illustrated-message-title-size: var(--spectrum-heading-size-m); + --spectrum-illustrated-message-cjk-title-size: var( + --spectrum-heading-cjk-size-m + ); + --spectrum-illustrated-message-body-size: var(--spectrum-body-size-s); + --spectrum-coach-mark-width: 296px; + --spectrum-coach-mark-minimum-width: 296px; + --spectrum-coach-mark-maximum-width: 380px; + --spectrum-coach-mark-edge-to-content: var(--spectrum-spacing-400); + --spectrum-coach-mark-pagination-text-to-bottom-edge: 33px; + --spectrum-coach-mark-media-height: 222px; + --spectrum-coach-mark-media-minimum-height: 166px; + --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; + --spectrum-tab-item-to-tab-item-horizontal-extra-large: 30px; + --spectrum-tab-item-to-tab-item-vertical-small: 4px; + --spectrum-tab-item-to-tab-item-vertical-medium: 4px; + --spectrum-tab-item-to-tab-item-vertical-large: 5px; + --spectrum-tab-item-to-tab-item-vertical-extra-large: 5px; + --spectrum-tab-item-start-to-edge-small: 12px; + --spectrum-tab-item-start-to-edge-medium: 12px; + --spectrum-tab-item-start-to-edge-large: 13px; + --spectrum-tab-item-start-to-edge-extra-large: 13px; + --spectrum-tab-item-top-to-text-small: 11px; + --spectrum-tab-item-bottom-to-text-small: 12px; + --spectrum-tab-item-top-to-text-medium: 14px; + --spectrum-tab-item-bottom-to-text-medium: 14px; + --spectrum-tab-item-top-to-text-large: 16px; + --spectrum-tab-item-bottom-to-text-large: 18px; + --spectrum-tab-item-top-to-text-extra-large: 19px; + --spectrum-tab-item-bottom-to-text-extra-large: 20px; + --spectrum-tab-item-top-to-text-compact-small: 4px; + --spectrum-tab-item-bottom-to-text-compact-small: 5px; + --spectrum-tab-item-top-to-text-compact-medium: 6px; + --spectrum-tab-item-bottom-to-text-compact-medium: 8px; + --spectrum-tab-item-top-to-text-compact-large: 10px; + --spectrum-tab-item-bottom-to-text-compact-large: 12px; + --spectrum-tab-item-top-to-text-compact-extra-large: 12px; + --spectrum-tab-item-bottom-to-text-compact-extra-large: 13px; + --spectrum-tab-item-top-to-workflow-icon-small: 13px; + --spectrum-tab-item-top-to-workflow-icon-medium: 15px; + --spectrum-tab-item-top-to-workflow-icon-large: 17px; + --spectrum-tab-item-top-to-workflow-icon-extra-large: 19px; + --spectrum-tab-item-top-to-workflow-icon-compact-small: 3px; + --spectrum-tab-item-top-to-workflow-icon-compact-medium: 7px; + --spectrum-tab-item-top-to-workflow-icon-compact-large: 9px; + --spectrum-tab-item-top-to-workflow-icon-compact-extra-large: 11px; + --spectrum-tab-item-focus-indicator-gap-small: 7px; + --spectrum-tab-item-focus-indicator-gap-medium: 8px; + --spectrum-tab-item-focus-indicator-gap-large: 9px; + --spectrum-tab-item-focus-indicator-gap-extra-large: 10px; + --spectrum-side-navigation-width: 192px; + --spectrum-side-navigation-minimum-width: 160px; + --spectrum-side-navigation-maximum-width: 240px; + --spectrum-side-navigation-second-level-edge-to-text: 24px; + --spectrum-side-navigation-third-level-edge-to-text: 36px; + --spectrum-side-navigation-with-icon-second-level-edge-to-text: 50px; + --spectrum-side-navigation-with-icon-third-level-edge-to-text: 62px; + --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; + --spectrum-arrow-icon-size-300: 14px; + --spectrum-arrow-icon-size-400: 16px; + --spectrum-arrow-icon-size-500: 18px; + --spectrum-arrow-icon-size-600: 20px; + --spectrum-asterisk-icon-size-100: 8px; + --spectrum-asterisk-icon-size-200: 10px; + --spectrum-asterisk-icon-size-300: 10px; + --spectrum-checkmark-icon-size-50: 10px; + --spectrum-checkmark-icon-size-75: 10px; + --spectrum-checkmark-icon-size-100: 10px; + --spectrum-checkmark-icon-size-200: 12px; + --spectrum-checkmark-icon-size-300: 14px; + --spectrum-checkmark-icon-size-400: 16px; + --spectrum-checkmark-icon-size-500: 16px; + --spectrum-checkmark-icon-size-600: 18px; + --spectrum-chevron-icon-size-50: 6px; + --spectrum-chevron-icon-size-75: 10px; + --spectrum-chevron-icon-size-100: 10px; + --spectrum-chevron-icon-size-200: 12px; + --spectrum-chevron-icon-size-300: 14px; + --spectrum-chevron-icon-size-400: 16px; + --spectrum-chevron-icon-size-500: 16px; + --spectrum-chevron-icon-size-600: 18px; + --spectrum-cross-icon-size-75: 8px; + --spectrum-cross-icon-size-100: 8px; + --spectrum-cross-icon-size-200: 10px; + --spectrum-cross-icon-size-300: 12px; + --spectrum-cross-icon-size-400: 12px; + --spectrum-cross-icon-size-500: 14px; + --spectrum-cross-icon-size-600: 16px; + --spectrum-dash-icon-size-50: 8px; + --spectrum-dash-icon-size-75: 8px; + --spectrum-dash-icon-size-100: 10px; + --spectrum-dash-icon-size-200: 12px; + --spectrum-dash-icon-size-300: 12px; + --spectrum-dash-icon-size-400: 14px; + --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; + --spectrum-workflow-icon-size-50: 14px; + --spectrum-workflow-icon-size-75: 16px; + --spectrum-workflow-icon-size-100: 20px; + --spectrum-workflow-icon-size-200: 22px; + --spectrum-workflow-icon-size-300: 26px; + --spectrum-text-to-visual-50: 5px; + --spectrum-text-to-visual-75: 5px; + --spectrum-text-to-visual-100: 6px; + --spectrum-text-to-visual-200: 7px; + --spectrum-text-to-visual-300: 8px; + --spectrum-text-to-control-75: 9px; + --spectrum-text-to-control-100: 10px; + --spectrum-text-to-control-200: 11px; + --spectrum-text-to-control-300: 13px; + --spectrum-component-height-50: 20px; + --spectrum-component-height-75: 24px; + --spectrum-component-height-100: 32px; + --spectrum-component-height-200: 40px; + --spectrum-component-height-300: 48px; + --spectrum-component-height-400: 56px; + --spectrum-component-height-500: 64px; + --spectrum-component-pill-edge-to-visual-75: 10px; + --spectrum-component-pill-edge-to-visual-100: 14px; + --spectrum-component-pill-edge-to-visual-200: 18px; + --spectrum-component-pill-edge-to-visual-300: 21px; + --spectrum-component-pill-edge-to-visual-only-75: 4px; + --spectrum-component-pill-edge-to-visual-only-100: 7px; + --spectrum-component-pill-edge-to-visual-only-200: 10px; + --spectrum-component-pill-edge-to-visual-only-300: 13px; + --spectrum-component-pill-edge-to-text-75: 12px; + --spectrum-component-pill-edge-to-text-100: 16px; + --spectrum-component-pill-edge-to-text-200: 20px; + --spectrum-component-pill-edge-to-text-300: 24px; + --spectrum-component-edge-to-visual-50: 6px; + --spectrum-component-edge-to-visual-75: 7px; + --spectrum-component-edge-to-visual-100: 10px; + --spectrum-component-edge-to-visual-200: 13px; + --spectrum-component-edge-to-visual-300: 15px; + --spectrum-component-edge-to-visual-only-50: 3px; + --spectrum-component-edge-to-visual-only-75: 4px; + --spectrum-component-edge-to-visual-only-100: 6px; + --spectrum-component-edge-to-visual-only-200: 9px; + --spectrum-component-edge-to-visual-only-300: 11px; + --spectrum-component-edge-to-text-50: 8px; + --spectrum-component-edge-to-text-75: 9px; + --spectrum-component-edge-to-text-100: 12px; + --spectrum-component-edge-to-text-200: 15px; + --spectrum-component-edge-to-text-300: 18px; + --spectrum-component-top-to-workflow-icon-50: 3px; + --spectrum-component-top-to-workflow-icon-75: 4px; + --spectrum-component-top-to-workflow-icon-100: 6px; + --spectrum-component-top-to-workflow-icon-200: 9px; + --spectrum-component-top-to-workflow-icon-300: 11px; + --spectrum-component-top-to-text-50: 3px; + --spectrum-component-top-to-text-75: 4px; + --spectrum-component-top-to-text-100: 6px; + --spectrum-component-top-to-text-200: 9px; + --spectrum-component-top-to-text-300: 12px; + --spectrum-component-bottom-to-text-50: 3px; + --spectrum-component-bottom-to-text-75: 5px; + --spectrum-component-bottom-to-text-100: 9px; + --spectrum-component-bottom-to-text-200: 11px; + --spectrum-component-bottom-to-text-300: 14px; + --spectrum-component-to-menu-small: 6px; + --spectrum-component-to-menu-medium: 6px; + --spectrum-component-to-menu-large: 7px; + --spectrum-component-to-menu-extra-large: 8px; + --spectrum-field-edge-to-disclosure-icon-75: 7px; + --spectrum-field-edge-to-disclosure-icon-100: 11px; + --spectrum-field-edge-to-disclosure-icon-200: 14px; + --spectrum-field-edge-to-disclosure-icon-300: 17px; + --spectrum-field-end-edge-to-disclosure-icon-75: 7px; + --spectrum-field-end-edge-to-disclosure-icon-100: 11px; + --spectrum-field-end-edge-to-disclosure-icon-200: 14px; + --spectrum-field-end-edge-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-disclosure-icon-75: 7px; + --spectrum-field-top-to-disclosure-icon-100: 11px; + --spectrum-field-top-to-disclosure-icon-200: 14px; + --spectrum-field-top-to-disclosure-icon-300: 17px; + --spectrum-field-top-to-alert-icon-small: 4px; + --spectrum-field-top-to-alert-icon-medium: 7px; + --spectrum-field-top-to-alert-icon-large: 10px; + --spectrum-field-top-to-alert-icon-extra-large: 13px; + --spectrum-field-top-to-validation-icon-small: 7px; + --spectrum-field-top-to-validation-icon-medium: 11px; + --spectrum-field-top-to-validation-icon-large: 14px; + --spectrum-field-top-to-validation-icon-extra-large: 17px; + --spectrum-field-top-to-progress-circle-small: 4px; + --spectrum-field-top-to-progress-circle-medium: 8px; + --spectrum-field-top-to-progress-circle-large: 12px; + --spectrum-field-top-to-progress-circle-extra-large: 16px; + --spectrum-field-edge-to-alert-icon-small: 9px; + --spectrum-field-edge-to-alert-icon-medium: 12px; + --spectrum-field-edge-to-alert-icon-large: 15px; + --spectrum-field-edge-to-alert-icon-extra-large: 18px; + --spectrum-field-edge-to-validation-icon-small: 9px; + --spectrum-field-edge-to-validation-icon-medium: 12px; + --spectrum-field-edge-to-validation-icon-large: 15px; + --spectrum-field-edge-to-validation-icon-extra-large: 18px; + --spectrum-field-text-to-alert-icon-small: 8px; + --spectrum-field-text-to-alert-icon-medium: 12px; + --spectrum-field-text-to-alert-icon-large: 15px; + --spectrum-field-text-to-alert-icon-extra-large: 18px; + --spectrum-field-text-to-validation-icon-small: 8px; + --spectrum-field-text-to-validation-icon-medium: 12px; + --spectrum-field-text-to-validation-icon-large: 15px; + --spectrum-field-text-to-validation-icon-extra-large: 18px; + --spectrum-field-width: var(--spectrum-field-width-small); + --spectrum-field-width-small: 192px; + --spectrum-character-count-to-field-quiet-small: -3px; + --spectrum-character-count-to-field-quiet-medium: -3px; + --spectrum-character-count-to-field-quiet-large: -3px; + --spectrum-character-count-to-field-quiet-extra-large: -4px; + --spectrum-side-label-character-count-to-field: 12px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-small: 7px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 11px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 14px; + --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 17px; + --spectrum-navigational-indicator-top-to-back-icon-small: 6px; + --spectrum-navigational-indicator-top-to-back-icon-medium: 9px; + --spectrum-navigational-indicator-top-to-back-icon-large: 12px; + --spectrum-navigational-indicator-top-to-back-icon-extra-large: 15px; + --spectrum-color-control-track-width: 24px; + --spectrum-corner-triangle-icon-size-75: 5px; + --spectrum-corner-triangle-icon-size-100: 5px; + --spectrum-corner-triangle-icon-size-200: 6px; + --spectrum-corner-triangle-icon-size-300: 7px; + --spectrum-field-width-medium: 208px; + --spectrum-field-width-large: 224px; + --spectrum-field-width-extra-large: 240px; + --spectrum-font-size-50: 11px; + --spectrum-font-size-75: 12px; + --spectrum-font-size-100: 14px; + --spectrum-font-size-200: 16px; + --spectrum-font-size-300: 18px; + --spectrum-font-size-400: 20px; + --spectrum-font-size-500: 22px; + --spectrum-font-size-600: 25px; + --spectrum-font-size-700: 28px; + --spectrum-font-size-800: 32px; + --spectrum-font-size-900: 36px; + --spectrum-font-size-1000: 40px; + --spectrum-font-size-1100: 45px; + --spectrum-font-size-1200: 50px; + --spectrum-font-size-1300: 60px; +} diff --git a/tools/styles/tokens-v2/spectrum/custom-dark-vars.css b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css new file mode 100644 index 0000000000..3b5fe4f4c7 --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-dark-vars.css @@ -0,0 +1,108 @@ +: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 + ); + + /* Drop Zone background color rgb */ + --spectrum-drop-zone-background-color-rgb: var( + --spectrum-blue-900-rgb + ); /* var(--spectrum-accent-color-900);*/ + + /* Drop Indicator color rgb */ + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --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); + + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); +} diff --git a/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css new file mode 100644 index 0000000000..9b137abd32 --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-darkest-vars.css @@ -0,0 +1,109 @@ +: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 + ); + + /* Drop Zone background color rgb */ + --spectrum-drop-zone-background-color-rgb: var( + --spectrum-blue-900-rgb + ); /* var(--spectrum-accent-color-900);*/ + + /* Drop Indicator color rgb */ + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-down: rgba( + var(--spectrum-white-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --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); + + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.08 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); +} diff --git a/tools/styles/tokens-v2/spectrum/custom-large-vars.css b/tools/styles/tokens-v2/spectrum/custom-large-vars.css new file mode 100644 index 0000000000..b21332805f --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-large-vars.css @@ -0,0 +1,120 @@ +:host, +:root { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 5px; + --spectrum-edge-to-visual-only-100: 9px; + --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); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-200 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + + --spectrum-well-padding: 20px; + --spectrum-well-margin-top: 5px; + --spectrum-well-min-width: 300px; + --spectrum-well-border-radius: 5px; + + --spectrum-icon-chevron-size-50: 8px; + /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --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 new file mode 100644 index 0000000000..05529d7727 --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-light-vars.css @@ -0,0 +1,108 @@ +: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 + ); + + /* Drop Zone background color rgb */ + --spectrum-drop-zone-background-color-rgb: var( + --spectrum-blue-800-rgb + ); /* var(--spectrum-accent-color-800);*/ + + /* Drop Indicator color rgb */ + --spectrum-dropindicator-color: var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --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); + + --spectrum-well-border-color: var(--spectrum-black-rgb); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-800 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1100 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); +} diff --git a/tools/styles/tokens-v2/spectrum/custom-medium-vars.css b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css new file mode 100644 index 0000000000..487524757b --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-medium-vars.css @@ -0,0 +1,121 @@ +:host, +:root { + /* edge-to-visual-only is used for icon-only buttons */ + --spectrum-edge-to-visual-only-75: 4px; + --spectrum-edge-to-visual-only-100: 7px; + --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); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-100 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-min-width: 240px; + --spectrum-well-border-radius: var(--spectrum-spacing-75); + + --spectrum-icon-chevron-size-50: 6px; + /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var( + --spectrum-spacing-400 + ); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --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/custom-vars.css b/tools/styles/tokens-v2/spectrum/custom-vars.css new file mode 100644 index 0000000000..7dfeb222c0 --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/custom-vars.css @@ -0,0 +1,52 @@ +:host, +:root { + --system: spectrum; + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', + 'Lucida Grande', sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + + /* static white / black background color for docs containers */ + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 206, 247, 243; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000: 9999px; +} diff --git a/tools/styles/tokens-v2/spectrum/global-vars.css b/tools/styles/tokens-v2/spectrum/global-vars.css new file mode 100644 index 0000000000..b1f103b24e --- /dev/null +++ b/tools/styles/tokens-v2/spectrum/global-vars.css @@ -0,0 +1,5411 @@ +: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 + ); +} + +: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/exports.json b/tools/theme/exports.json old mode 100644 new mode 100755 index c0ca8d8a41..e6f90d2a41 --- a/tools/theme/exports.json +++ b/tools/theme/exports.json @@ -1,7 +1,9 @@ { "./src/*": "./src/*", "./express/*": "./express/*", + "./spectrum-two/*": "./spectrum-two/*", "./src/express/*": "./src/express/*", + "./src/spectrum-two/*": "./src/spectrum-two/*", "./core.js": "./core.js", "./sp-theme.js": "./sp-theme.js", "./scale-medium.js": "./scale-medium.js", diff --git a/tools/theme/package.json b/tools/theme/package.json old mode 100644 new mode 100755 index e9de6c1468..9b5105bff9 --- a/tools/theme/package.json +++ b/tools/theme/package.json @@ -104,6 +104,22 @@ "development": "./express/theme-lightest.dev.js", "default": "./express/theme-lightest.js" }, + "./spectrum-two/scale-large-core-tokens.js": { + "development": "./spectrum-two/scale-large-core-tokens.dev.js", + "default": "./spectrum-two/scale-large-core-tokens.js" + }, + "./spectrum-two/scale-medium-core-tokens.js": { + "development": "./spectrum-two/scale-medium-core-tokens.dev.js", + "default": "./spectrum-two/scale-medium-core-tokens.js" + }, + "./spectrum-two/theme-dark-core-tokens.js": { + "development": "./spectrum-two/theme-dark-core-tokens.dev.js", + "default": "./spectrum-two/theme-dark-core-tokens.js" + }, + "./spectrum-two/theme-light-core-tokens.js": { + "development": "./spectrum-two/theme-light-core-tokens.dev.js", + "default": "./spectrum-two/theme-light-core-tokens.js" + }, "./src/express/core-tokens.js": { "development": "./src/express/core-tokens.dev.js", "default": "./src/express/core-tokens.js" @@ -130,6 +146,18 @@ "development": "./src/express/themes.dev.js", "default": "./src/express/themes.js" }, + "./src/spectrum-two/core-tokens.js": { + "development": "./src/spectrum-two/core-tokens.dev.js", + "default": "./src/spectrum-two/core-tokens.js" + }, + "./src/spectrum-two/core.js": { + "development": "./src/spectrum-two/core.dev.js", + "default": "./src/spectrum-two/core.js" + }, + "./src/spectrum-two/themes-core-tokens.js": { + "development": "./src/spectrum-two/themes-core-tokens.dev.js", + "default": "./src/spectrum-two/themes-core-tokens.js" + }, "./core.js": { "development": "./core.dev.js", "default": "./core.js" @@ -218,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", @@ -225,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" ] } diff --git a/tools/theme/spectrum-two/scale-large-core-tokens.ts b/tools/theme/spectrum-two/scale-large-core-tokens.ts new file mode 100755 index 0000000000..cfa83cd9c1 --- /dev/null +++ b/tools/theme/spectrum-two/scale-large-core-tokens.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 largeStyles from '../src/spectrum-two/scale-large-core-tokens.css.js'; +import { Theme } from '../src/Theme.js'; +import '../src/spectrum-two/core-tokens.js'; + +Theme.registerThemeFragment('large-spectrum-two', 'scale', largeStyles); diff --git a/tools/theme/spectrum-two/scale-medium-core-tokens.ts b/tools/theme/spectrum-two/scale-medium-core-tokens.ts new file mode 100755 index 0000000000..dc57abedad --- /dev/null +++ b/tools/theme/spectrum-two/scale-medium-core-tokens.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 mediumStyles from '../src/spectrum-two/scale-medium-core-tokens.css.js'; +import { Theme } from '../src/Theme.js'; +import '../src/spectrum-two/core-tokens.js'; + +Theme.registerThemeFragment('medium-spectrum-two', 'scale', mediumStyles); diff --git a/tools/theme/spectrum-two/theme-dark-core-tokens.ts b/tools/theme/spectrum-two/theme-dark-core-tokens.ts new file mode 100755 index 0000000000..d34e0962f2 --- /dev/null +++ b/tools/theme/spectrum-two/theme-dark-core-tokens.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 darkStyles from '../src/spectrum-two/theme-dark-core-tokens.css.js'; +import { Theme } from '../src/Theme.js'; +import '../src/spectrum-two/core-tokens.js'; + +Theme.registerThemeFragment('dark-spectrum-two', 'color', darkStyles); diff --git a/tools/theme/spectrum-two/theme-light-core-tokens.ts b/tools/theme/spectrum-two/theme-light-core-tokens.ts new file mode 100755 index 0000000000..2ffb551580 --- /dev/null +++ b/tools/theme/spectrum-two/theme-light-core-tokens.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 lightStyles from '../src/spectrum-two/theme-light-core-tokens.css.js'; +import { Theme } from '../src/Theme.js'; +import '../src/spectrum-two/core-tokens.js'; + +Theme.registerThemeFragment('light-spectrum-two', 'color', lightStyles); diff --git a/tools/theme/src/Theme.ts b/tools/theme/src/Theme.ts old mode 100644 new mode 100755 index bdb3d2d179..bb538b267a --- a/tools/theme/src/Theme.ts +++ b/tools/theme/src/Theme.ts @@ -53,12 +53,27 @@ export type Color = | 'light-express' | 'lightest-express' | 'dark-express' - | 'darkest-express'; -export type Scale = 'medium' | 'large' | 'medium-express' | 'large-express'; -export type ThemeVariant = 'spectrum' | 'express'; -export type SystemVariant = 'spectrum' | 'express'; -const SystemVariantValues = ['spectrum', 'express']; -const ScaleValues = ['medium', 'large', 'medium-express', 'large-express']; + | '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 = + | 'medium' + | 'large' + | 'medium-express' + | 'large-express' + | 'medium-spectrum-two' + | 'large-spectrum-two'; +const ScaleValues = [ + 'medium', + 'large', + 'medium-express', + 'large-express', + 'medium-spectrum-two', + 'large-spectrum-two', +]; const ColorValues = [ 'light', 'lightest', @@ -68,6 +83,8 @@ const ColorValues = [ 'lightest-express', 'dark-express', 'darkest-express', + 'light-spectrum-two', + 'dark-spectrum-two', ]; type FragmentName = | Color @@ -163,14 +180,34 @@ export class Theme extends HTMLElement implements ThemeKindProvider { this._provideContext(); } else if (attrName === 'theme') { this.theme = value as SystemVariant; - window.__swc.warn( - this, - 'property theme in has been deprecated. Please use system instead like this ', - 'https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation', - { level: 'deprecation' } - ); + if (window.__swc.DEBUG) { + window.__swc.warn( + this, + 'property theme in has been deprecated. Please use system instead like this ', + 'https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation', + { level: 'deprecation' } + ); + if (value === 'spectrum-two') { + window.__swc.warn( + this, + 'You are currently using the beta version of Spectrum Two theme. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.', + 'https://s2.spectrum.adobe.com/', + { level: 'high' } + ); + } + } } else if (attrName === 'system') { this.system = value as SystemVariant; + if (window.__swc.DEBUG) { + if (value === 'spectrum-two') { + window.__swc.warn( + this, + 'You are currently using the beta version of Spectrum Two theme. Consumption of this system may be subject to unexpected changes before the 1.0 release of SWC.', + 'https://s2.spectrum.adobe.com/', + { level: 'high' } + ); + } + } } else if (attrName === 'dir') { this.dir = value as 'ltr' | 'rtl' | ''; } @@ -319,9 +356,9 @@ export class Theme extends HTMLElement implements ThemeKindProvider { kind && kind !== 'theme' && kind !== 'system' && - this.theme === 'express' && - this.system === 'express' - ? fragments.get(`${name}-express`) + this.theme !== 'spectrum' && + this.system !== 'spectrum' + ? 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 new file mode 100755 index 0000000000..9499581842 --- /dev/null +++ b/tools/theme/src/spectrum-two/core-tokens.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 { Theme } from '../Theme.js'; + +import coreStyles from './theme-core-tokens.css.js'; + +Theme.registerThemeFragment('spectrum-two', 'system', coreStyles); diff --git a/tools/theme/src/spectrum-two/core.ts b/tools/theme/src/spectrum-two/core.ts new file mode 100644 index 0000000000..0ced386df4 --- /dev/null +++ b/tools/theme/src/spectrum-two/core.ts @@ -0,0 +1,17 @@ +/* +Copyright 2020 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 { Theme } from '../Theme.js'; + +import coreStyles from './theme.css.js'; + +Theme.registerThemeFragment('spectrum-two', 'system', coreStyles); diff --git a/tools/theme/src/spectrum-two/scale-large-core-tokens.css b/tools/theme/src/spectrum-two/scale-large-core-tokens.css new file mode 100755 index 0000000000..174b11bc1b --- /dev/null +++ b/tools/theme/src/spectrum-two/scale-large-core-tokens.css @@ -0,0 +1,20 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/large-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-large-vars.css'); + +:root, +:host { + --spectrum-global-alias-appframe-border-size: 1px; + --swc-scale-factor: 1.25; +} diff --git a/tools/theme/src/spectrum-two/scale-medium-core-tokens.css b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css new file mode 100755 index 0000000000..ca8e0afdef --- /dev/null +++ b/tools/theme/src/spectrum-two/scale-medium-core-tokens.css @@ -0,0 +1,20 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/medium-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-medium-vars.css'); + +:root, +:host { + --spectrum-global-alias-appframe-border-size: 2px; + --swc-scale-factor: 1; +} diff --git a/tools/theme/src/spectrum-two/theme-core-tokens.css b/tools/theme/src/spectrum-two/theme-core-tokens.css new file mode 100755 index 0000000000..19ce09913f --- /dev/null +++ b/tools/theme/src/spectrum-two/theme-core-tokens.css @@ -0,0 +1,31 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/typography.css'); + +:host { + display: block; + + /* Workaround while https://github.com/adobe/spectrum-css/issues/2162 remains open */ + --spectrum-picker-border-width: var(--spectrum-border-width-100); + + /* end workaround */ +} + +#scale, +#theme { + width: 100%; + height: 100%; +} diff --git a/tools/theme/src/spectrum-two/theme-dark-core-tokens.css b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css new file mode 100755 index 0000000000..016fda8492 --- /dev/null +++ b/tools/theme/src/spectrum-two/theme-dark-core-tokens.css @@ -0,0 +1,19 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/dark-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-dark-vars.css'); + +:host, +:root { + color-scheme: dark; +} diff --git a/tools/theme/src/spectrum-two/theme-light-core-tokens.css b/tools/theme/src/spectrum-two/theme-light-core-tokens.css new file mode 100755 index 0000000000..a20b808f30 --- /dev/null +++ b/tools/theme/src/spectrum-two/theme-light-core-tokens.css @@ -0,0 +1,19 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/light-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-light-vars.css'); + +:host, +:root { + color-scheme: light; +} diff --git a/tools/theme/src/spectrum-two/theme.css b/tools/theme/src/spectrum-two/theme.css new file mode 100755 index 0000000000..29b7528cac --- /dev/null +++ b/tools/theme/src/spectrum-two/theme.css @@ -0,0 +1,26 @@ +/* +Copyright 2020 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 url('@spectrum-web-components/styles/tokens-v2/global-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/global-vars.css'); +@import url('@spectrum-web-components/styles/tokens-v2/spectrum/custom-vars.css'); +@import url('@spectrum-web-components/styles/typography.css'); + +:host { + display: block; +} + +#scale, +#theme { + width: 100%; + height: 100%; +} diff --git a/tools/theme/src/spectrum-two/themes-core-tokens.ts b/tools/theme/src/spectrum-two/themes-core-tokens.ts new file mode 100755 index 0000000000..89ac504b6a --- /dev/null +++ b/tools/theme/src/spectrum-two/themes-core-tokens.ts @@ -0,0 +1,16 @@ +/* +Copyright 2020 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 '../../spectrum-two/theme-light-core-tokens.js'; +import '../../spectrum-two/theme-dark-core-tokens.js'; +import '../../spectrum-two/scale-medium-core-tokens.js'; +import '../../spectrum-two/scale-large-core-tokens.js'; diff --git a/tools/theme/test/theme-devmode.test.ts b/tools/theme/test/theme-devmode.test.ts index dae8c52ae7..449e0e7d32 100644 --- a/tools/theme/test/theme-devmode.test.ts +++ b/tools/theme/test/theme-devmode.test.ts @@ -16,21 +16,30 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; import { stub } from 'sinon'; describe('Dev mode', () => { - window.__swc.verbose = true; - const consoleWarnStub = stub(console, 'warn'); + let consoleWarnStub!: ReturnType; + before(() => { + window.__swc.verbose = true; + consoleWarnStub = stub(console, 'warn'); + }); + afterEach(() => { + consoleWarnStub.resetHistory(); + }); + after(() => { + window.__swc.verbose = false; + consoleWarnStub.restore(); + }); + it('warns in Dev Mode when no attributes or fragments', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); expect(consoleWarnStub.called).to.be.true; const spyCall = consoleWarnStub.getCall(0); expect( - spyCall.args.at(0).includes('theme delivery'), + (spyCall.args.at(0) as string).includes('theme delivery'), 'confirm "theme delivery"-centric message' ).to.be.true; expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({ @@ -40,36 +49,53 @@ describe('Dev mode', () => { level: 'default', }, }); - consoleWarnStub.restore(); }); it('warns in Dev Mode when you pass a theme attribute', async () => { - const el = await fixture( - html` - - ` - ); + const el = await fixture(html` + + `); await elementUpdated(el); expect(consoleWarnStub.called).to.be.true; const spyCall = consoleWarnStub.getCall(0); - expect( - spyCall.args.at(0).includes('theme delivery'), + (spyCall.args.at(0) as string).includes('deprecated'), 'confirm "theme-deprecation"-centric message' ).to.be.true; expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({ data: { localName: 'sp-theme', type: 'api', - level: 'default', + level: 'deprecation', + }, + }); + }); + + it('warns in Dev Mode when you use Spectrum Two theme ', async () => { + const el = await fixture(html` + + `); + + await elementUpdated(el); + + expect(consoleWarnStub.called).to.be.true; + const spyCall = consoleWarnStub.getCall(0); + expect( + (spyCall.args.at(0) as string).includes('beta version'), + 'confirm "beta-theme"-centric message' + ).to.be.true; + expect(spyCall.args.at(-1), 'confirm `data` shape').to.deep.equal({ + data: { + localName: 'sp-theme', + type: 'api', + level: 'high', }, }); - consoleWarnStub.restore(); }); }); diff --git a/tools/theme/tsconfig.json b/tools/theme/tsconfig.json old mode 100644 new mode 100755 index 4302116b18..59d36d0c0f --- a/tools/theme/tsconfig.json +++ b/tools/theme/tsconfig.json @@ -4,7 +4,7 @@ "composite": true, "rootDir": "./" }, - "include": ["*.ts", "src/**/*.ts", "express/*.ts"], + "include": ["*.ts", "src/**/*.ts", "express/*.ts", "spectrum-two/*.ts"], "exclude": ["test/*.ts", "stories/*.ts"], "references": [{ "path": "../base" }] } diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js index 25a45ac164..ca745fc483 100644 --- a/web-test-runner.utils.js +++ b/web-test-runner.utils.js @@ -144,7 +144,7 @@ const vrtHTML =