diff --git a/.circleci/config.yml b/.circleci/config.yml index 9ce48a0b79c..240b5f738c2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -217,7 +217,6 @@ jobs: - run: name: Lint command: yarn lint - - run: yarn analyze - run: name: Are there changes? command: git diff-files --exit-code diff --git a/.gitignore b/.gitignore index e520ec27a5e..efba069794d 100644 --- a/.gitignore +++ b/.gitignore @@ -62,8 +62,10 @@ tools/**/*.test-vrt.ts !tools/base/src/version.js !tools/base/src/version.d.ts - +# cache directories .wireit +.eslintcache +.stylelintcache stats.html @@ -111,4 +113,4 @@ chromatic.config.json !.yarn/plugins !.yarn/releases !.yarn/sdks -!.yarn/versio;/ +!.yarn/version diff --git a/.husky/pre-commit b/.husky/pre-commit index 673e79dfafe..017e2a12451 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,16 +1 @@ -#!/usr/bin/env bash -bash << EOF - STAGED_FILES_TO_LINT=$(git diff --name-only --cached --diff-filter=d -- "*.ts" "*.js") - STAGED_FILES_TO_ANALYZE=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/*/src/**/!(*.css).ts") - STAGED_CSS_FILES=$(git diff --name-only --cached --diff-filter=d -- "{packages,tools}/**/*.css") - VERSION_FILE=$(dirname "$0")/../tools/base/src/version.js - - [ -z "$STAGED_FILES_TO_LINT" ] || yarn eslint -f pretty $STAGED_FILES_TO_LINT - [ -z "$STAGED_FILES_TO_ANALYZE" ] || yarn lit-analyzer $STAGED_FILES_TO_ANALYZE - [ -z "$STAGED_CSS_FILES" ] || yarn stylelint $STAGED_CSS_FILES - - yarn pretty-quick --staged - - yarn genversion --es6 --semi $VERSION_FILE - git add $VERSION_FILE -EOF +yarn lint-staged --allow-empty diff --git a/README.md b/README.md index 504d4aeb380..3277eb2edb9 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,16 @@ To this end, Spectrum Web Components only targets _modern_, evergreen browsers t # Requirements -- NodeJS >= 20.0.0 -- Typescript -- Supported desktop browsers: - - Last 2 versions of Chrome - - Last 2 versions of Firefox - - Last 2 versions of Safari - - Last 2 versions of Edge -- Or appropriate [polyfills](https://github.com/webcomponents/webcomponentsjs) in older browsers. -- We support all viewport sizes across supported desktop browsers. -- While our components are designed to be responsive and mobile-friendly, we do not yet fully support mobile browsers due to limited testing in mobile hardware. We advise testing updates on mobile devices before updating and are happy to address any reported issues. +- NodeJS >= 20.0.0 +- Typescript +- Supported desktop browsers: + - Last 2 versions of Chrome + - Last 2 versions of Firefox + - Last 2 versions of Safari + - Last 2 versions of Edge +- Or appropriate [polyfills](https://github.com/webcomponents/webcomponentsjs) in older browsers. +- We support all viewport sizes across supported desktop browsers. +- While our components are designed to be responsive and mobile-friendly, we do not yet fully support mobile browsers due to limited testing in mobile hardware. We advise testing updates on mobile devices before updating and are happy to address any reported issues. # Getting started @@ -34,7 +34,7 @@ Typical development will involve running `yarn storybook`, `yarn test`, and `yar Creating a new component from the command line can be done by running the following: ```bash -$ yarn new-package +yarn new-package ``` This will scaffold your component's required architecture by prompting you for 2 data points - the desired name for your package and the name of the Spectrum CSS asset from which you will be building. @@ -81,8 +81,8 @@ yarn docs:build There are two mechanisms for broadly updating SWC's Spectrum CSS dependencies: -- `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest' -- `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version +- `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest' +- `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version We aim to keep Spectrum CSS as current as possible, to track the Spectrum design system closely. The `:nonbreaking` variant lets us release patch updates quickly in cases where more work is required to be compatible with 'latest.' @@ -91,11 +91,10 @@ The `:nonbreaking` variant lets us release patch updates quickly in cases where There are several commands that can be useful in specific scenarios: -- `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process. -- `yarn spectrum-vars` to ensure that theme files are up-to-date. -- `yarn process-icons` to make sure that the most recent icons are included. -- `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages. -- `yarn build` to make sure the available JS has been built from the current TS source. +- `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process. +- `yarn process-icons` to make sure that the most recent icons are included. +- `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages. +- `yarn build` to make sure the available JS has been built from the current TS source. ## Linting @@ -179,23 +178,23 @@ This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer) There is extended documentation on adding a new component to the library in the [documentation site](https://opensource.adobe.com/spectrum-web-components/guides/generating-components). However, at a high level, you will be building the following structure: -- packages - - new-component-name - - src - - index.ts - - new-component-name.css - - new-component-name.ts - - spectrum-config.js - - spectrum-new-component-name.css - - stories - - new-component-name.stories.ts - - test - - benchmark - - test-basic.ts - - new-component-name.test.ts - - package.json - - README.md - - tsconfig.json +- packages + - new-component-name + - src + - index.ts + - new-component-name.css + - new-component-name.ts + - spectrum-config.js + - spectrum-new-component-name.css + - stories + - new-component-name.stories.ts + - test + - benchmark + - test-basic.ts + - new-component-name.test.ts + - package.json + - README.md + - tsconfig.json For a list of component waiting to be implemented, visit our [`missing components`](https://github.com/adobe/spectrum-web-components/labels/missing%20components) tag. diff --git a/lint-staged.config.js b/lint-staged.config.js new file mode 100644 index 00000000000..3306505e04a --- /dev/null +++ b/lint-staged.config.js @@ -0,0 +1,32 @@ +/* +Copyright 2025 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. +*/ + +export default { + '*.css': [ + 'stylelint --fix --cache --allow-empty-input', + 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + ], + '*.ts': [ + 'eslint --fix --format pretty --cache --no-error-on-unmatched-pattern --quiet', + 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + ], + '{packages,tools}/*/src/**/!(*.css).ts': ['yarn lit-analyzer'], + 'package.json': () => [ + 'genversion --es6 --semi tools/base/src/version.js', + 'yarn constraints --fix', + 'yarn install --refresh-lockfile', + 'git add tools/base/src/version.js yarn.lock', + ], + '!(*.css|*.ts)': [ + 'prettier --cache --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + ], +}; diff --git a/package.json b/package.json index fa650ea767f..b5bc09be325 100644 --- a/package.json +++ b/package.json @@ -36,17 +36,11 @@ "docs:review": "alex packages/**/*.md", "docs:start": "yarn workspace documentation serve --watch", "find": "test -f custom-elements.json", - "format:css": "yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\"", "gen-react-wrapper": "node ./tasks/gen-react-wrapper.js", "icons": "wireit", "icons:ui": "wireit", "icons:workflow": "wireit", - "lint": "run-p lint:js lint:docs lint:ts lint:css lint:packagejson", - "lint:css": "stylelint \"packages/**/*.css\" \"tools/**/*.css\"", - "lint:docs": "eslint -f pretty \"projects/documentation/**/*.ts\"", - "lint:js": "pretty-quick --pattern \"tasks/**/*.js\" && pretty-quick --pattern \"scripts/**/*.js\"", - "lint:packagejson": "pretty-quick --pattern package.json --pattern \"packages/*/package.json\" --pattern \"projects/*/package.json\" --pattern \"tools/*/package.json\" --pattern \"react/*/package.json\"", - "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"", + "lint": "git status --porcelain && git add . && lint-staged --allow-empty", "lint:versions": "node ./scripts/lint-versions.js", "new-package": "cd projects/templates && plop", "postcustom-element-json": "node ./tasks/run-check-cem.js", @@ -90,7 +84,7 @@ "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --", "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --", "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup", - "update:spectrum-css:cleanup": "yarn lint:packagejson && yarn --ignore-scripts && yarn process-spectrum", + "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint", "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup", "verify-build-artifacts": "node ./scripts/verify-build-artifacts.js", "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js", @@ -175,6 +169,7 @@ "husky": "^9.0.10", "latest-version": "^9.0.0", "lightningcss": "1.19.0", + "lint-staged": "^15.5.1", "lit": "^2.5.0 || ^3.1.3", "lit-analyzer": "^2.0.3", "lit-html": "^2.4.0 || ^3.1.3", @@ -185,10 +180,9 @@ "npm-run-all2": "^8.0.1", "patch-package": "^8.0.0", "pinst": "^3.0.0", - "prettier": "^3.0.0", + "prettier": "^3.5.3", "prettier-plugin-package": "^1.3.0", "pretty-bytes": "^6.1.1", - "pretty-quick": "^4.1.1", "re-template-tag": "^2.0.1", "rimraf": "^5.0.1", "rollup": "^4.12.0", @@ -321,7 +315,7 @@ ] }, "icons": { - "command": "node ./scripts/process-icons.js && pretty-quick --pattern \"packages/**/*.svg.ts\" && eslint -f pretty --fix \"packages/**/*.svg.ts\"", + "command": "node ./scripts/process-icons.js && yarn lint", "files": [ "scripts/process-icons.js" ], @@ -386,7 +380,7 @@ ] }, "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn format:css", + "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint", "files": [ "tasks/process-spectrum.js", "packages/**/spectrum-config.js", diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json index 5939faca9f8..351bc9848da 100644 --- a/packages/.eslintrc.json +++ b/packages/.eslintrc.json @@ -6,13 +6,26 @@ "es6": true }, "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint", "notice", "@spectrum-web-components"], + "plugins": [ + "@typescript-eslint", + "notice", + "@spectrum-web-components", + "import" + ], "extends": [ "plugin:@typescript-eslint/recommended", "prettier", "plugin:lit-a11y/recommended" ], "rules": { + "import/no-extraneous-dependencies": [ + "error", + { + "devDependencies": false, + "optionalDependencies": false, + "peerDependencies": false + } + ], "no-debugger": 2, "no-console": [ "error", diff --git a/tools/styles/tokens-v2/global-vars.css b/tools/styles/tokens-v2/global-vars.css index c768d12220c..6c3cd84c537 100644 --- a/tools/styles/tokens-v2/global-vars.css +++ b/tools/styles/tokens-v2/global-vars.css @@ -12,29 +12,15 @@ --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-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-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-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; @@ -42,83 +28,45 @@ --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-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-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-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-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-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-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-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-negative-border-color-key-focus: var(--spectrum-negative-color-1000); --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); + --spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); --spectrum-static-black-text-color: var(--spectrum-black); --spectrum-static-white-text-color: var(--spectrum-white); --spectrum-track-color: var(--spectrum-gray-300); --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); + --spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900); + --spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900); --spectrum-swatch-border-color: var(--spectrum-gray-900); --spectrum-swatch-border-opacity: 0.51; --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); @@ -132,9 +80,7 @@ --spectrum-color-area-border-opacity: 0.1; --spectrum-color-slider-border-color: var(--spectrum-gray-900); --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); + --spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300); --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); @@ -146,27 +92,15 @@ --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-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-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-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; @@ -174,13 +108,9 @@ --spectrum-black-rgb: 0, 0, 0; --spectrum-black: rgba(var(--spectrum-black-rgb)); --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); + --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-icon-color-primary-default: var(--spectrum-neutral-content-color-default); --spectrum-asterisk-icon-size-75: 8px; --spectrum-radio-button-selection-indicator: 4px; --spectrum-field-label-top-margin-small: 0px; @@ -212,9 +142,7 @@ --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-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; @@ -229,24 +157,14 @@ --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-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-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-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; @@ -262,20 +180,12 @@ --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-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-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; @@ -288,62 +198,28 @@ --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-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-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; @@ -360,18 +236,10 @@ --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-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-corner-radius-0: 0px; --spectrum-corner-radius-75: 4px; --spectrum-corner-radius-100: 8px; @@ -387,35 +255,17 @@ --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-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-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-drop-shadow-x: 0px; --spectrum-spacing-50: 2px; --spectrum-spacing-75: 4px; @@ -521,15 +371,9 @@ --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-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-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; @@ -547,209 +391,81 @@ --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-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-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-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-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-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); @@ -771,9 +487,7 @@ --spectrum-heading-margin-top-multiplier: 0.888889; --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-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); @@ -782,52 +496,24 @@ --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-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-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); @@ -839,9 +525,7 @@ --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-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); @@ -850,124 +534,48 @@ --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-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-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-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); @@ -992,24 +600,12 @@ --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-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); @@ -1038,34 +634,21 @@ --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-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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --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); --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-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens-v2/index.css b/tools/styles/tokens-v2/index.css index f107cb2d1fa..d0b40ddc542 100644 --- a/tools/styles/tokens-v2/index.css +++ b/tools/styles/tokens-v2/index.css @@ -2,68 +2,32 @@ :root { --spectrum-overlay-opacity: 0.6; --spectrum-background-layer-2-color: var(--spectrum-gray-75); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-500 - ); + --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-800 - ); + --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-400); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-800); --spectrum-accent-background-color-hover: var(--spectrum-accent-color-700); --spectrum-accent-background-color-down: var(--spectrum-accent-color-700); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-700 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-800 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-700 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-700 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-800 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-700 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-700 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-800 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-700 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-700 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-900 - ); + --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-700); + --spectrum-informative-background-color-default: var(--spectrum-informative-color-800); + --spectrum-informative-background-color-hover: var(--spectrum-informative-color-700); + --spectrum-informative-background-color-down: var(--spectrum-informative-color-700); + --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-700); + --spectrum-negative-background-color-default: var(--spectrum-negative-color-800); + --spectrum-negative-background-color-hover: var(--spectrum-negative-color-700); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-700); + --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-700); + --spectrum-positive-background-color-default: var(--spectrum-positive-color-800); + --spectrum-positive-background-color-hover: var(--spectrum-positive-color-700); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-700); + --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-700); + --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-800); --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-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-800); --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-800); @@ -104,224 +68,113 @@ --spectrum-cinnamon-background-color-default: var(--spectrum-cinnamon-800); --spectrum-pink-background-color-default: var(--spectrum-pink-800); --spectrum-silver-background-color-default: var(--spectrum-silver-800); - --spectrum-turquoise-background-color-default: var( - --spectrum-turquoise-800 - ); + --spectrum-turquoise-background-color-default: var(--spectrum-turquoise-800); --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; --spectrum-drop-shadow-color-100-opacity: 0.36; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); + --spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; --spectrum-drop-shadow-color-200-opacity: 0.48; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); + --spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; --spectrum-drop-shadow-color-300-opacity: 0.6; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-300 - ); + --spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity)); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-300); --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-300); --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-300); --spectrum-green-subtle-background-color-default: var(--spectrum-green-300); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-300 - ); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-300); --spectrum-red-subtle-background-color-default: var(--spectrum-red-300); --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-300); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-300 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-300 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-300 - ); + --spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-300); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-300); + --spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-300); --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-300); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-300 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-300 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-300 - ); + --spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-300); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-300); + --spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-300); --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-300); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-300 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-300 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-300 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-300 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-300 - ); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-300); + --spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-300); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-300); + --spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-300); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-300); --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-800); --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-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-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-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-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-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-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-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-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-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-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-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-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-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-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-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-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-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-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-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-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-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-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-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-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-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-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); --spectrum-gray-25-rgb: 17, 17, 17; --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); --spectrum-gray-50-rgb: 27, 27, 27; @@ -928,69 +781,29 @@ --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); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-300 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-300 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-300 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-300 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-300 - ); + --spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default); + --spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-300); + --spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-300); + --spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-300); + --spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-300); + --spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-300); --color-scheme: dark; --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-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-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); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - --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-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-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -998,39 +811,21 @@ --spectrum-dropindicator-color: var(--spectrum-blue-700); --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-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-background-color-hover: var(--spectrum-magenta-900); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-700 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); --spectrum-swatch-border-color-rgb: 255, 255, 255; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 255, 255, 255; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); - --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-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); + --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); } :host, :root { @@ -1046,29 +841,15 @@ --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-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-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-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; @@ -1076,83 +857,45 @@ --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-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-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-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-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-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-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-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-negative-border-color-key-focus: var(--spectrum-negative-color-1000); --spectrum-title-color: var(--spectrum-gray-900); - --spectrum-drop-shadow-emphasized-default-color: var( - --spectrum-drop-shadow-color-100 - ); - --spectrum-drop-shadow-emphasized-hover-color: var( - --spectrum-drop-shadow-color-200 - ); - --spectrum-drop-shadow-elevated-color: var( - --spectrum-drop-shadow-color-200 - ); + --spectrum-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); --spectrum-drop-shadow-dragged-color: var(--spectrum-drop-shadow-color-300); --spectrum-static-black-text-color: var(--spectrum-black); --spectrum-static-white-text-color: var(--spectrum-white); --spectrum-track-color: var(--spectrum-gray-300); --spectrum-static-black-track-color: var(--spectrum-transparent-black-300); --spectrum-static-white-track-color: var(--spectrum-transparent-white-300); - --spectrum-static-black-track-indicator-color: var( - --spectrum-transparent-black-900 - ); - --spectrum-static-white-track-indicator-color: var( - --spectrum-transparent-white-900 - ); + --spectrum-static-black-track-indicator-color: var(--spectrum-transparent-black-900); + --spectrum-static-white-track-indicator-color: var(--spectrum-transparent-white-900); --spectrum-swatch-border-color: var(--spectrum-gray-900); --spectrum-swatch-border-opacity: 0.51; --spectrum-swatch-disabled-icon-border-color: var(--spectrum-black); @@ -1166,9 +909,7 @@ --spectrum-color-area-border-opacity: 0.1; --spectrum-color-slider-border-color: var(--spectrum-gray-900); --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); + --spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300); --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); @@ -1180,27 +921,15 @@ --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-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-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-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; @@ -1208,13 +937,9 @@ --spectrum-black-rgb: 0, 0, 0; --spectrum-black: rgba(var(--spectrum-black-rgb)); --spectrum-transparent-black-1000-rgb: 0, 0, 0; - --spectrum-transparent-black-1000: rgba( - var(--spectrum-transparent-black-1000-rgb) - ); + --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-icon-color-primary-default: var(--spectrum-neutral-content-color-default); --spectrum-asterisk-icon-size-75: 8px; --spectrum-radio-button-selection-indicator: 4px; --spectrum-field-label-top-margin-small: 0px; @@ -1246,9 +971,7 @@ --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-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; @@ -1263,24 +986,14 @@ --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-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-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-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; @@ -1296,20 +1009,12 @@ --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-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-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; @@ -1322,62 +1027,28 @@ --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-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-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; @@ -1394,18 +1065,10 @@ --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-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-corner-radius-0: 0px; --spectrum-corner-radius-75: 4px; --spectrum-corner-radius-100: 8px; @@ -1421,35 +1084,17 @@ --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-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-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-drop-shadow-x: 0px; --spectrum-spacing-50: 2px; --spectrum-spacing-75: 4px; @@ -1555,15 +1200,9 @@ --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-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-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; @@ -1581,209 +1220,81 @@ --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-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-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-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-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-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); @@ -1805,9 +1316,7 @@ --spectrum-heading-margin-top-multiplier: 0.888889; --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-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); @@ -1816,52 +1325,24 @@ --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-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-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); @@ -1873,9 +1354,7 @@ --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-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); @@ -1884,124 +1363,48 @@ --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-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-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-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); @@ -2026,24 +1429,12 @@ --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-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); @@ -2072,35 +1463,22 @@ --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-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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --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); --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-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } :host, @@ -2345,9 +1723,7 @@ --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-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; @@ -2647,17 +2023,13 @@ --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-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-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-header-content-font-size: var(--spectrum-heading-size-xxs); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); --spectrum-button-top-to-text-small: 6px; --spectrum-button-bottom-to-text-small: 5px; @@ -2674,8 +2046,8 @@ --spectrum-coachmark-buttongroup-mobile-display: flex; --spectrum-coachmark-menu-display: none; --spectrum-coachmark-menu-mobile-display: inline-flex; - --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-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-contextual-help-content-spacing: var(--spectrum-spacing-200); @@ -2738,68 +2110,32 @@ :root { --spectrum-overlay-opacity: 0.4; --spectrum-background-layer-2-color: var(--spectrum-gray-25); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-700 - ); + --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-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-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-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); @@ -2840,224 +2176,113 @@ --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-turquoise-background-color-default: var(--spectrum-turquoise-900); --spectrum-drop-shadow-color-100-rgb: 0, 0, 0; --spectrum-drop-shadow-color-100-opacity: 0.12; - --spectrum-drop-shadow-color-100: rgba( - var(--spectrum-drop-shadow-color-100-rgb), - var(--spectrum-drop-shadow-color-100-opacity) - ); + --spectrum-drop-shadow-color-100: rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); --spectrum-drop-shadow-color-200-rgb: 0, 0, 0; --spectrum-drop-shadow-color-200-opacity: 0.16; - --spectrum-drop-shadow-color-200: rgba( - var(--spectrum-drop-shadow-color-200-rgb), - var(--spectrum-drop-shadow-color-200-opacity) - ); + --spectrum-drop-shadow-color-200: rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --spectrum-drop-shadow-color-300-rgb: 0, 0, 0; --spectrum-drop-shadow-color-300-opacity: 0.2; - --spectrum-drop-shadow-color-300: rgba( - var(--spectrum-drop-shadow-color-300-rgb), - var(--spectrum-drop-shadow-color-300-opacity) - ); - --spectrum-neutral-subtle-background-color-default: var( - --spectrum-gray-100 - ); + --spectrum-drop-shadow-color-300: rgba(var(--spectrum-drop-shadow-color-300-rgb), var(--spectrum-drop-shadow-color-300-opacity)); + --spectrum-neutral-subtle-background-color-default: var(--spectrum-gray-100); --spectrum-gray-subtle-background-color-default: var(--spectrum-gray-100); --spectrum-blue-subtle-background-color-default: var(--spectrum-blue-200); --spectrum-green-subtle-background-color-default: var(--spectrum-green-200); - --spectrum-orange-subtle-background-color-default: var( - --spectrum-orange-200 - ); + --spectrum-orange-subtle-background-color-default: var(--spectrum-orange-200); --spectrum-red-subtle-background-color-default: var(--spectrum-red-200); --spectrum-brown-subtle-background-color-default: var(--spectrum-brown-200); - --spectrum-cinnamon-subtle-background-color-default: var( - --spectrum-cinnamon-200 - ); - --spectrum-celery-subtle-background-color-default: var( - --spectrum-celery-200 - ); - --spectrum-chartreuse-subtle-background-color-default: var( - --spectrum-chartreuse-200 - ); + --spectrum-cinnamon-subtle-background-color-default: var(--spectrum-cinnamon-200); + --spectrum-celery-subtle-background-color-default: var(--spectrum-celery-200); + --spectrum-chartreuse-subtle-background-color-default: var(--spectrum-chartreuse-200); --spectrum-cyan-subtle-background-color-default: var(--spectrum-cyan-200); - --spectrum-fuchsia-subtle-background-color-default: var( - --spectrum-fuchsia-200 - ); - --spectrum-indigo-subtle-background-color-default: var( - --spectrum-indigo-200 - ); - --spectrum-magenta-subtle-background-color-default: var( - --spectrum-magenta-200 - ); + --spectrum-fuchsia-subtle-background-color-default: var(--spectrum-fuchsia-200); + --spectrum-indigo-subtle-background-color-default: var(--spectrum-indigo-200); + --spectrum-magenta-subtle-background-color-default: var(--spectrum-magenta-200); --spectrum-pink-subtle-background-color-default: var(--spectrum-pink-200); - --spectrum-purple-subtle-background-color-default: var( - --spectrum-purple-200 - ); - --spectrum-seafoam-subtle-background-color-default: var( - --spectrum-seafoam-200 - ); - --spectrum-silver-subtle-background-color-default: var( - --spectrum-silver-200 - ); - --spectrum-turquoise-subtle-background-color-default: var( - --spectrum-turquoise-200 - ); - --spectrum-yellow-subtle-background-color-default: var( - --spectrum-yellow-200 - ); + --spectrum-purple-subtle-background-color-default: var(--spectrum-purple-200); + --spectrum-seafoam-subtle-background-color-default: var(--spectrum-seafoam-200); + --spectrum-silver-subtle-background-color-default: var(--spectrum-silver-200); + --spectrum-turquoise-subtle-background-color-default: var(--spectrum-turquoise-200); + --spectrum-yellow-subtle-background-color-default: var(--spectrum-yellow-200); --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200); --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-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-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-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-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-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-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-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-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-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-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-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-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-transparent-white-1000: rgba(var(--spectrum-transparent-white-1000-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-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-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-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-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-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-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-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-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-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-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-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-900: rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); --spectrum-gray-25-rgb: 255, 255, 255; --spectrum-gray-25: rgba(var(--spectrum-gray-25-rgb)); --spectrum-gray-50-rgb: 248, 248, 248; @@ -3664,69 +2889,29 @@ --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); - --spectrum-negative-subdued-background-color-default: var( - --spectrum-negative-subtle-background-color-default - ); - --spectrum-accent-subtle-background-color-default: var( - --spectrum-accent-color-200 - ); - --spectrum-informative-subtle-background-color-default: var( - --spectrum-informative-color-200 - ); - --spectrum-positive-subtle-background-color-default: var( - --spectrum-positive-color-200 - ); - --spectrum-notice-subtle-background-color-default: var( - --spectrum-notice-color-200 - ); - --spectrum-negative-subtle-background-color-default: var( - --spectrum-negative-color-200 - ); + --spectrum-negative-subdued-background-color-default: var(--spectrum-negative-subtle-background-color-default); + --spectrum-accent-subtle-background-color-default: var(--spectrum-accent-color-200); + --spectrum-informative-subtle-background-color-default: var(--spectrum-informative-color-200); + --spectrum-positive-subtle-background-color-default: var(--spectrum-positive-color-200); + --spectrum-notice-subtle-background-color-default: var(--spectrum-notice-color-200); + --spectrum-negative-subtle-background-color-default: var(--spectrum-negative-color-200); --color-scheme: light; --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-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-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); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - --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-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-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); @@ -3734,39 +2919,21 @@ --spectrum-dropindicator-color: var(--spectrum-blue-800); --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-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-background-color-hover: var(--spectrum-magenta-1100); --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - --spectrum-steplist-current-marker-color-key-focus: var( - --spectrum-blue-800 - ); + --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); --spectrum-swatch-border-color-rgb: 0, 0, 0; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 0, 0, 0; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); - --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-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); + --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); } :host, :root { @@ -4010,9 +3177,7 @@ --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-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; @@ -4312,16 +3477,12 @@ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var( - --spectrum-spacing-100 - ); + --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-header-content-font-size: var( - --spectrum-heading-size-xs - ); + --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); --spectrum-assetcard-selectionindicator-margin: 12px; --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); --spectrum-button-bottom-to-text-small: 4px; @@ -4341,8 +3502,8 @@ --spectrum-coachmark-menu-mobile-display: none; --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); --spectrum-colorwheel-colorarea-container-size: 144px; - --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-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-contextual-help-content-spacing: var(--spectrum-spacing-100); --spectrum-datepicker-dash-line-height: 24px; --spectrum-datepicker-datetime-width-first: 36px; @@ -4387,9 +3548,7 @@ --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var( - --spectrum-spacing-400 - ); + --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); --spectrum-ui-icon-medium-display: block; diff --git a/tools/styles/tokens/index.css b/tools/styles/tokens/index.css index 611deff1991..36da06b0a4d 100644 --- a/tools/styles/tokens/index.css +++ b/tools/styles/tokens/index.css @@ -3,10 +3,7 @@ --spectrum-overlay-opacity: 0.5; --spectrum-drop-shadow-color-rgb: 0, 0, 0; --spectrum-drop-shadow-color-opacity: 0.5; - --spectrum-drop-shadow-color: rgba( - var(--spectrum-drop-shadow-color-rgb), - var(--spectrum-drop-shadow-color-opacity) - ); + --spectrum-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); --spectrum-background-base-color: var(--spectrum-gray-50); --spectrum-background-layer-1-color: var(--spectrum-gray-75); --spectrum-background-layer-2-color: var(--spectrum-gray-100); @@ -14,68 +11,32 @@ --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); --spectrum-neutral-background-color-down: var(--spectrum-gray-200); --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-400 - ); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-500 - ); + --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-500); --spectrum-accent-background-color-hover: var(--spectrum-accent-color-400); --spectrum-accent-background-color-down: var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-400 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-300 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-400 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-300 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-400 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-300 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-400 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-800 - ); + --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-400); + --spectrum-informative-background-color-default: var(--spectrum-informative-color-500); + --spectrum-informative-background-color-hover: var(--spectrum-informative-color-400); + --spectrum-informative-background-color-down: var(--spectrum-informative-color-300); + --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-400); + --spectrum-negative-background-color-default: var(--spectrum-negative-color-500); + --spectrum-negative-background-color-hover: var(--spectrum-negative-color-400); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-300); + --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-400); + --spectrum-positive-background-color-default: var(--spectrum-positive-color-500); + --spectrum-positive-background-color-hover: var(--spectrum-positive-color-400); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-300); + --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-400); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); --spectrum-gray-background-color-default: var(--spectrum-gray-700); --spectrum-red-background-color-default: var(--spectrum-red-700); --spectrum-orange-background-color-default: var(--spectrum-orange-800); --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); + --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900); --spectrum-celery-background-color-default: var(--spectrum-celery-800); --spectrum-green-background-color-default: var(--spectrum-green-700); --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); @@ -502,10 +463,7 @@ --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-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); --spectrum-background-base-color: var(--spectrum-gray-50); --spectrum-background-layer-1-color: var(--spectrum-gray-75); --spectrum-background-layer-2-color: var(--spectrum-gray-100); @@ -513,68 +471,32 @@ --spectrum-neutral-background-color-hover: var(--spectrum-gray-300); --spectrum-neutral-background-color-down: var(--spectrum-gray-200); --spectrum-neutral-background-color-key-focus: var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default: var( - --spectrum-gray-400 - ); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-400); --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-300); --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-300 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-600 - ); + --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-accent-background-color-default: var(--spectrum-accent-color-600); --spectrum-accent-background-color-hover: var(--spectrum-accent-color-500); --spectrum-accent-background-color-down: var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus: var( - --spectrum-accent-color-500 - ); - --spectrum-informative-background-color-default: var( - --spectrum-informative-color-600 - ); - --spectrum-informative-background-color-hover: var( - --spectrum-informative-color-500 - ); - --spectrum-informative-background-color-down: var( - --spectrum-informative-color-400 - ); - --spectrum-informative-background-color-key-focus: var( - --spectrum-informative-color-500 - ); - --spectrum-negative-background-color-default: var( - --spectrum-negative-color-600 - ); - --spectrum-negative-background-color-hover: var( - --spectrum-negative-color-500 - ); - --spectrum-negative-background-color-down: var( - --spectrum-negative-color-400 - ); - --spectrum-negative-background-color-key-focus: var( - --spectrum-negative-color-500 - ); - --spectrum-positive-background-color-default: var( - --spectrum-positive-color-600 - ); - --spectrum-positive-background-color-hover: var( - --spectrum-positive-color-500 - ); - --spectrum-positive-background-color-down: var( - --spectrum-positive-color-400 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-500 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-800 - ); + --spectrum-accent-background-color-key-focus: var(--spectrum-accent-color-500); + --spectrum-informative-background-color-default: var(--spectrum-informative-color-600); + --spectrum-informative-background-color-hover: var(--spectrum-informative-color-500); + --spectrum-informative-background-color-down: var(--spectrum-informative-color-400); + --spectrum-informative-background-color-key-focus: var(--spectrum-informative-color-500); + --spectrum-negative-background-color-default: var(--spectrum-negative-color-600); + --spectrum-negative-background-color-hover: var(--spectrum-negative-color-500); + --spectrum-negative-background-color-down: var(--spectrum-negative-color-400); + --spectrum-negative-background-color-key-focus: var(--spectrum-negative-color-500); + --spectrum-positive-background-color-default: var(--spectrum-positive-color-600); + --spectrum-positive-background-color-hover: var(--spectrum-positive-color-500); + --spectrum-positive-background-color-down: var(--spectrum-positive-color-400); + --spectrum-positive-background-color-key-focus: var(--spectrum-positive-color-500); + --spectrum-notice-background-color-default: var(--spectrum-notice-color-800); --spectrum-gray-background-color-default: var(--spectrum-gray-700); --spectrum-red-background-color-default: var(--spectrum-red-700); --spectrum-orange-background-color-default: var(--spectrum-orange-800); --spectrum-yellow-background-color-default: var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default: var( - --spectrum-chartreuse-900 - ); + --spectrum-chartreuse-background-color-default: var(--spectrum-chartreuse-900); --spectrum-celery-background-color-default: var(--spectrum-celery-800); --spectrum-green-background-color-default: var(--spectrum-green-700); --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-700); @@ -1003,19 +925,11 @@ --spectrum-static-black-focus-indicator-color: var(--spectrum-black); --spectrum-overlay-color: var(--spectrum-black); --spectrum-opacity-disabled: 0.3; - --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-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-200); - --spectrum-disabled-static-white-background-color: var( - --spectrum-transparent-white-200 - ); - --spectrum-disabled-static-black-background-color: var( - --spectrum-transparent-black-200 - ); + --spectrum-disabled-static-white-background-color: var(--spectrum-transparent-white-200); + --spectrum-disabled-static-black-background-color: var(--spectrum-transparent-black-200); --spectrum-background-opacity-default: 0; --spectrum-background-opacity-hover: 0.1; --spectrum-background-opacity-down: 0.1; @@ -1023,61 +937,33 @@ --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-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-900); - --spectrum-neutral-subdued-content-color-key-focus: 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-1100); - --spectrum-accent-content-color-key-focus: var( - --spectrum-accent-color-1000 - ); - --spectrum-negative-content-color-default: var( - --spectrum-negative-color-900 - ); - --spectrum-negative-content-color-hover: var( - --spectrum-negative-color-1000 - ); + --spectrum-accent-content-color-key-focus: var(--spectrum-accent-color-1000); + --spectrum-negative-content-color-default: var(--spectrum-negative-color-900); + --spectrum-negative-content-color-hover: var(--spectrum-negative-color-1000); --spectrum-negative-content-color-down: var(--spectrum-negative-color-1100); - --spectrum-negative-content-color-key-focus: var( - --spectrum-negative-color-1000 - ); + --spectrum-negative-content-color-key-focus: var(--spectrum-negative-color-1000); --spectrum-disabled-content-color: var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color: var( - --spectrum-transparent-white-500 - ); - --spectrum-disabled-static-black-content-color: var( - --spectrum-transparent-black-500 - ); + --spectrum-disabled-static-white-content-color: var(--spectrum-transparent-white-500); + --spectrum-disabled-static-black-content-color: var(--spectrum-transparent-black-500); --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-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-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-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); @@ -1091,9 +977,7 @@ --spectrum-color-area-border-opacity: 0.1; --spectrum-color-slider-border-color: var(--spectrum-gray-900); --spectrum-color-slider-border-opacity: 0.1; - --spectrum-color-loupe-drop-shadow-color: var( - --spectrum-transparent-black-300 - ); + --spectrum-color-loupe-drop-shadow-color: var(--spectrum-transparent-black-300); --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); @@ -1105,27 +989,15 @@ --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-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-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-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; @@ -1134,114 +1006,60 @@ --spectrum-white: rgba(var(--spectrum-white-rgb)); --spectrum-transparent-white-100-rgb: 255, 255, 255; --spectrum-transparent-white-100-opacity: 0; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); + --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.1; - --spectrum-transparent-white-200: rgba( - var(--spectrum-transparent-white-200-rgb), - var(--spectrum-transparent-white-200-opacity) - ); + --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.25; - --spectrum-transparent-white-300: rgba( - var(--spectrum-transparent-white-300-rgb), - var(--spectrum-transparent-white-300-opacity) - ); + --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.4; - --spectrum-transparent-white-400: rgba( - var(--spectrum-transparent-white-400-rgb), - var(--spectrum-transparent-white-400-opacity) - ); + --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.55; - --spectrum-transparent-white-500: rgba( - var(--spectrum-transparent-white-500-rgb), - var(--spectrum-transparent-white-500-opacity) - ); + --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.7; - --spectrum-transparent-white-600: rgba( - var(--spectrum-transparent-white-600-rgb), - var(--spectrum-transparent-white-600-opacity) - ); + --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.8; - --spectrum-transparent-white-700: rgba( - var(--spectrum-transparent-white-700-rgb), - var(--spectrum-transparent-white-700-opacity) - ); + --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.9; - --spectrum-transparent-white-800: rgba( - var(--spectrum-transparent-white-800-rgb), - var(--spectrum-transparent-white-800-opacity) - ); + --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: rgba( - var(--spectrum-transparent-white-900-rgb) - ); + --spectrum-transparent-white-900: rgba(var(--spectrum-transparent-white-900-rgb)); --spectrum-black-rgb: 0, 0, 0; --spectrum-black: rgba(var(--spectrum-black-rgb)); --spectrum-transparent-black-100-rgb: 0, 0, 0; --spectrum-transparent-black-100-opacity: 0; - --spectrum-transparent-black-100: rgba( - var(--spectrum-transparent-black-100-rgb), - var(--spectrum-transparent-black-100-opacity) - ); + --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.1; - --spectrum-transparent-black-200: rgba( - var(--spectrum-transparent-black-200-rgb), - var(--spectrum-transparent-black-200-opacity) - ); + --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.25; - --spectrum-transparent-black-300: rgba( - var(--spectrum-transparent-black-300-rgb), - var(--spectrum-transparent-black-300-opacity) - ); + --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.4; - --spectrum-transparent-black-400: rgba( - var(--spectrum-transparent-black-400-rgb), - var(--spectrum-transparent-black-400-opacity) - ); + --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.55; - --spectrum-transparent-black-500: rgba( - var(--spectrum-transparent-black-500-rgb), - var(--spectrum-transparent-black-500-opacity) - ); + --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.7; - --spectrum-transparent-black-600: rgba( - var(--spectrum-transparent-black-600-rgb), - var(--spectrum-transparent-black-600-opacity) - ); + --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.8; - --spectrum-transparent-black-700: rgba( - var(--spectrum-transparent-black-700-rgb), - var(--spectrum-transparent-black-700-opacity) - ); + --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.9; - --spectrum-transparent-black-800: rgba( - var(--spectrum-transparent-black-800-rgb), - var(--spectrum-transparent-black-800-opacity) - ); + --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: rgba( - var(--spectrum-transparent-black-900-rgb) - ); + --spectrum-transparent-black-900: rgba(var(--spectrum-transparent-black-900-rgb)); --spectrum-icon-color-inverse: var(--spectrum-gray-50); - --spectrum-icon-color-primary-default: var( - --spectrum-neutral-content-color-default - ); + --spectrum-icon-color-primary-default: var(--spectrum-neutral-content-color-default); --spectrum-asterisk-icon-size-75: 8px; --spectrum-radio-button-selection-indicator: 4px; --spectrum-field-label-top-margin-small: 0px; @@ -1270,9 +1088,7 @@ --spectrum-menu-item-label-to-description: 1px; --spectrum-menu-item-section-divider-height: 8px; --spectrum-picker-minimum-width-multiplier: 2; - --spectrum-picker-end-edge-to-disclousure-icon-quiet: var( - --spectrum-picker-end-edge-to-disclosure-icon-quiet - ); + --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; @@ -1287,15 +1103,9 @@ --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-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-100); --spectrum-color-wheel-color-area-margin: 12px; @@ -1316,20 +1126,12 @@ --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-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-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; @@ -1342,62 +1144,28 @@ --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-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-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; @@ -1505,200 +1273,76 @@ --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-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-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-style: var( - --spectrum-default-font-style - ); + --spectrum-heading-sans-serif-font-style: var(--spectrum-default-font-style); --spectrum-heading-serif-font-style: var(--spectrum-default-font-style); --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-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-style: var( - --spectrum-italic-font-style - ); - --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-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-style: var(--spectrum-italic-font-style); + --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); @@ -1720,9 +1364,7 @@ --spectrum-heading-margin-top-multiplier: 0.888889; --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-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); @@ -1731,52 +1373,24 @@ --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-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-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); @@ -1788,9 +1402,7 @@ --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-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); @@ -1799,124 +1411,48 @@ --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-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-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-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); @@ -1941,24 +1477,12 @@ --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-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); @@ -2166,9 +1690,7 @@ --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-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; @@ -2467,10 +1989,7 @@ --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-drop-shadow-color: rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); --spectrum-background-base-color: var(--spectrum-gray-200); --spectrum-background-layer-1-color: var(--spectrum-gray-100); --spectrum-background-layer-2-color: var(--spectrum-gray-50); @@ -2478,68 +1997,32 @@ --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-subdued-background-color-default: var( - --spectrum-gray-600 - ); + --spectrum-neutral-subdued-background-color-default: var(--spectrum-gray-600); --spectrum-neutral-subdued-background-color-hover: var(--spectrum-gray-700); --spectrum-neutral-subdued-background-color-down: var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus: var( - --spectrum-gray-700 - ); - --spectrum-accent-background-color-default: var( - --spectrum-accent-color-900 - ); + --spectrum-neutral-subdued-background-color-key-focus: var(--spectrum-gray-700); + --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-1100); - --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-1100 - ); - --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-1100 - ); - --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-1100 - ); - --spectrum-positive-background-color-key-focus: var( - --spectrum-positive-color-1000 - ); - --spectrum-notice-background-color-default: var( - --spectrum-notice-color-600 - ); + --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-1100); + --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-1100); + --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-1100); + --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-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); @@ -3159,9 +2642,7 @@ --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-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; @@ -3459,48 +2940,19 @@ :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-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-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-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -3508,105 +2960,49 @@ --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 255, 255, 255; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 255, 255, 255; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :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-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-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-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -3614,70 +3010,38 @@ --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 255, 255, 255; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 255, 255, 255; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :host, :root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800); --spectrum-slider-track-thickness: 2px; --spectrum-slider-handle-gap: 4px; --spectrum-picker-border-width: var(--spectrum-border-width-100); @@ -3687,18 +3051,10 @@ --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-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-corner-radius-75: 2px; --spectrum-drop-shadow-x: 0px; --spectrum-border-width-100: 1px; @@ -3719,12 +3075,8 @@ --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); + --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0: 0s; @@ -3745,35 +3097,22 @@ --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-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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --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); --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-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } :host, @@ -3828,8 +3167,8 @@ --spectrum-drop-shadow-blur: 6px; --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-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-contextual-help-content-spacing: var(--spectrum-spacing-200); @@ -3857,9 +3196,7 @@ --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-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; @@ -3908,9 +3245,7 @@ --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-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; @@ -3920,48 +3255,19 @@ :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-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-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-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-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); @@ -3969,57 +3275,31 @@ --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); - --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 0, 0, 0; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 0, 0, 0; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :host, :root { @@ -4073,8 +3353,8 @@ --spectrum-drop-shadow-blur: 4px; --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-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-contextual-help-content-spacing: var(--spectrum-spacing-100); @@ -4102,9 +3382,7 @@ --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-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; @@ -4123,9 +3401,7 @@ --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-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; @@ -4155,9 +3431,7 @@ --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-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; @@ -4168,26 +3442,16 @@ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb); --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-700); --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-700 - ); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-700); } :host, :root { - --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-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-background-color-selected-key-focus: var(--spectrum-gray-900); --spectrum-slider-track-thickness: 4px; --spectrum-slider-handle-gap: 0px; --spectrum-picker-border-width: 0; @@ -4216,17 +3480,11 @@ --spectrum-accent-color-1200: var(--spectrum-indigo-1200); --spectrum-accent-color-1300: var(--spectrum-indigo-1300); --spectrum-accent-color-1400: var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight: var( - --spectrum-black-font-weight - ); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-black-font-weight); --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight); --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-black-font-weight - ); + --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-black-font-weight); + --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-black-font-weight); --system: express; } :host, @@ -4267,18 +3525,10 @@ --spectrum-slider-handle-size-medium: 24px; --spectrum-slider-handle-size-large: 28px; --spectrum-slider-handle-size-extra-large: 30px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); + --spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200); --spectrum-slider-bottom-to-handle-small: 4px; --spectrum-slider-bottom-to-handle-medium: 8px; --spectrum-slider-bottom-to-handle-large: 12px; @@ -4289,8 +3539,8 @@ --spectrum-drop-shadow-x: 0px; --spectrum-drop-shadow-y: 4px; --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 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-path: "M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 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-dialog-confirm-border-radius: 8px; --spectrum-dial-border-radius: 15px; --spectrum-assetcard-focus-ring-border-radius: 12px; @@ -4300,15 +3550,9 @@ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb); --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05); --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900); - --spectrum-assetcard-border-color-selected-hover: var( - --spectrum-indigo-900 - ); - --spectrum-assetcard-border-color-selected-down: var( - --spectrum-indigo-1000 - ); - --spectrum-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-indigo-900 - ); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-indigo-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-indigo-900); } :host, :root { @@ -4348,18 +3592,10 @@ --spectrum-slider-handle-size-medium: 20px; --spectrum-slider-handle-size-large: 22px; --spectrum-slider-handle-size-extra-large: 24px; - --spectrum-slider-handle-border-width-down-small: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-medium: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-large: var( - --spectrum-border-width-200 - ); - --spectrum-slider-handle-border-width-down-extra-large: var( - --spectrum-border-width-200 - ); + --spectrum-slider-handle-border-width-down-small: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-medium: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-large: var(--spectrum-border-width-200); + --spectrum-slider-handle-border-width-down-extra-large: var(--spectrum-border-width-200); --spectrum-slider-bottom-to-handle-small: 3px; --spectrum-slider-bottom-to-handle-medium: 6px; --spectrum-slider-bottom-to-handle-large: 9px; @@ -4370,8 +3606,8 @@ --spectrum-drop-shadow-x: 0px; --spectrum-drop-shadow-y: 4px; --spectrum-drop-shadow-blur: 16px; - --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 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-path: "M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 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-dialog-confirm-border-radius: 6px; --spectrum-dial-border-radius: 12px; --spectrum-assetcard-focus-ring-border-radius: 10px; diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 00942cc11f8..0a32bcc8698 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -1,15 +1,9 @@ :host, :root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800); --spectrum-slider-track-thickness: 2px; --spectrum-slider-handle-gap: 4px; --spectrum-picker-border-width: var(--spectrum-border-width-100); @@ -19,18 +13,10 @@ --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-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-corner-radius-75: 2px; --spectrum-drop-shadow-x: 0px; --spectrum-border-width-100: 1px; @@ -51,12 +37,8 @@ --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); + --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0: 0s; @@ -77,34 +59,21 @@ --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-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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --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); --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-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css index d10ed7bb136..0a16089550c 100644 --- a/tools/styles/tokens/spectrum/index.css +++ b/tools/styles/tokens/spectrum/index.css @@ -2,48 +2,19 @@ :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-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-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-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -51,105 +22,49 @@ --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 255, 255, 255; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 255, 255, 255; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :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-menu-item-background-color-hover: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-white-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-white-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-white-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-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-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-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-black); @@ -157,70 +72,38 @@ --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 255, 255, 255; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 255, 255, 255; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :host, :root { - --spectrum-neutral-background-color-selected-default: var( - --spectrum-gray-700 - ); - --spectrum-neutral-background-color-selected-hover: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700); + --spectrum-neutral-background-color-selected-hover: var(--spectrum-gray-800); --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus: var( - --spectrum-gray-800 - ); + --spectrum-neutral-background-color-selected-key-focus: var(--spectrum-gray-800); --spectrum-slider-track-thickness: 2px; --spectrum-slider-handle-gap: 4px; --spectrum-picker-border-width: var(--spectrum-border-width-100); @@ -230,18 +113,10 @@ --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-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-corner-radius-75: 2px; --spectrum-drop-shadow-x: 0px; --spectrum-border-width-100: 1px; @@ -262,12 +137,8 @@ --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); - --spectrum-heading-serif-emphasized-font-weight: var( - --spectrum-bold-font-weight - ); + --spectrum-heading-sans-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-emphasized-font-weight: var(--spectrum-bold-font-weight); --system: spectrum; --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0: 0s; @@ -288,35 +159,22 @@ --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-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-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-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', - -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, - var(--spectrum-cjk-font-family), sans-serif; + --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); --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-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; - --spectrum-docs-static-black-background-color: rgba( - var(--spectrum-docs-static-black-background-color-rgb) - ); + --spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } :host, @@ -371,8 +229,8 @@ --spectrum-drop-shadow-blur: 6px; --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-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-contextual-help-content-spacing: var(--spectrum-spacing-200); @@ -400,9 +258,7 @@ --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-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; @@ -451,9 +307,7 @@ --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-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; @@ -463,48 +317,19 @@ :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-menu-item-background-color-hover: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-down: var( - --spectrum-transparent-black-200 - ); - --spectrum-menu-item-background-color-key-focus: var( - --spectrum-transparent-black-200 - ); + --spectrum-menu-item-background-color-default: rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); + --spectrum-menu-item-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-menu-item-background-color-key-focus: var(--spectrum-transparent-black-200); --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-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-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-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --spectrum-badge-label-icon-color-primary: var(--spectrum-white); @@ -512,57 +337,31 @@ --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); - --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-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-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-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-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-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); --spectrum-swatch-border-color-rgb: 0, 0, 0; --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba( - var(--spectrum-swatch-border-color-rgb), - var(--spectrum-swatch-border-color-opacity) - ); + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); --spectrum-swatch-border-color-light-rgb: 0, 0, 0; --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba( - var(--spectrum-swatch-border-color-light-rgb), - var(--spectrum-swatch-border-color-light-opacity) - ); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } :host, :root { @@ -616,8 +415,8 @@ --spectrum-drop-shadow-blur: 4px; --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-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-contextual-help-content-spacing: var(--spectrum-spacing-100); @@ -645,9 +444,7 @@ --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-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; @@ -666,9 +463,7 @@ --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-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; @@ -698,9 +493,7 @@ --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-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; diff --git a/yarn.lock b/yarn.lock index 4189a4376c5..0d8eaa8507a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -284,6 +284,7 @@ __metadata: husky: "npm:^9.0.10" latest-version: "npm:^9.0.0" lightningcss: "npm:1.19.0" + lint-staged: "npm:^15.5.1" lit: "npm:^2.5.0 || ^3.1.3" lit-analyzer: "npm:^2.0.3" lit-html: "npm:^2.4.0 || ^3.1.3" @@ -294,10 +295,9 @@ __metadata: npm-run-all2: "npm:^8.0.1" patch-package: "npm:^8.0.0" pinst: "npm:^3.0.0" - prettier: "npm:^3.0.0" + prettier: "npm:^3.5.3" prettier-plugin-package: "npm:^1.3.0" pretty-bytes: "npm:^6.1.1" - pretty-quick: "npm:^4.1.1" re-template-tag: "npm:^2.0.1" rimraf: "npm:^5.0.1" rollup: "npm:^4.12.0" @@ -13692,6 +13692,13 @@ __metadata: languageName: node linkType: hard +"chalk@npm:^5.4.1": + version: 5.4.1 + resolution: "chalk@npm:5.4.1" + checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef + languageName: node + linkType: hard + "change-case@npm:^4.1.2": version: 4.1.2 resolution: "change-case@npm:4.1.2" @@ -14416,6 +14423,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^13.1.0": + version: 13.1.0 + resolution: "commander@npm:13.1.0" + checksum: 10c0/7b8c5544bba704fbe84b7cab2e043df8586d5c114a4c5b607f83ae5060708940ed0b5bd5838cf8ce27539cde265c1cbd59ce3c8c6b017ed3eec8943e3a415164 + languageName: node + linkType: hard + "commander@npm:^2.19.0, commander@npm:^2.20.0, commander@npm:^2.20.3, commander@npm:^2.8.1": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -23360,6 +23374,13 @@ __metadata: languageName: node linkType: hard +"lilconfig@npm:^3.1.3": + version: 3.1.3 + resolution: "lilconfig@npm:3.1.3" + checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc + languageName: node + linkType: hard + "limit-spawn@npm:0.0.3": version: 0.0.3 resolution: "limit-spawn@npm:0.0.3" @@ -23390,6 +23411,26 @@ __metadata: languageName: node linkType: hard +"lint-staged@npm:^15.5.1": + version: 15.5.1 + resolution: "lint-staged@npm:15.5.1" + dependencies: + chalk: "npm:^5.4.1" + commander: "npm:^13.1.0" + debug: "npm:^4.4.0" + execa: "npm:^8.0.1" + lilconfig: "npm:^3.1.3" + listr2: "npm:^8.2.5" + micromatch: "npm:^4.0.8" + pidtree: "npm:^0.6.0" + string-argv: "npm:^0.3.2" + yaml: "npm:^2.7.0" + bin: + lint-staged: bin/lint-staged.js + checksum: 10c0/86deddb08bf10428f2eb96c02326a9ee403360729225f0b12afb0c0f13c287a75daa01e179d86f64e3432576446d8643d204a47417296f9ef0aa56f1340ff2af + languageName: node + linkType: hard + "liquidjs@npm:^10.17.0": version: 10.18.0 resolution: "liquidjs@npm:10.18.0" @@ -23452,6 +23493,20 @@ __metadata: languageName: node linkType: hard +"listr2@npm:^8.2.5": + version: 8.3.2 + resolution: "listr2@npm:8.3.2" + dependencies: + cli-truncate: "npm:^4.0.0" + colorette: "npm:^2.0.20" + eventemitter3: "npm:^5.0.1" + log-update: "npm:^6.1.0" + rfdc: "npm:^1.4.1" + wrap-ansi: "npm:^9.0.0" + checksum: 10c0/6b6378e28debda863d31f03ffe880a76b45c07388c74e8e0676fc957de7f2aff24fdea7f48b17d12808440f64680215c36df388c79d2b367c7866dd66f75fb09 + languageName: node + linkType: hard + "lit-analyzer@npm:^2.0.3": version: 2.0.3 resolution: "lit-analyzer@npm:2.0.3" @@ -27778,13 +27833,6 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^4.0.2": - version: 4.0.2 - resolution: "picomatch@npm:4.0.2" - checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc - languageName: node - linkType: hard - "pidtree@npm:^0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" @@ -29004,6 +29052,15 @@ __metadata: languageName: node linkType: hard +"prettier@npm:^3.5.3": + version: 3.5.3 + resolution: "prettier@npm:3.5.3" + bin: + prettier: bin/prettier.cjs + checksum: 10c0/3880cb90b9dc0635819ab52ff571518c35bd7f15a6e80a2054c05dbc8a3aa6e74f135519e91197de63705bcb38388ded7e7230e2178432a1468005406238b877 + languageName: node + linkType: hard + "pretty-bytes@npm:^5.3.0, pretty-bytes@npm:^5.5.0": version: 5.6.0 resolution: "pretty-bytes@npm:5.6.0" @@ -29055,25 +29112,6 @@ __metadata: languageName: node linkType: hard -"pretty-quick@npm:^4.1.1": - version: 4.1.1 - resolution: "pretty-quick@npm:4.1.1" - dependencies: - find-up: "npm:^5.0.0" - ignore: "npm:^7.0.3" - mri: "npm:^1.2.0" - picocolors: "npm:^1.1.1" - picomatch: "npm:^4.0.2" - tinyexec: "npm:^0.3.2" - tslib: "npm:^2.8.1" - peerDependencies: - prettier: ^3.0.0 - bin: - pretty-quick: lib/cli.mjs - checksum: 10c0/c0362aff7d7679f58c044891047e7bbb03d461543aa30b1c57fef9400fa8c4d1daef4aa2b146a9c9072ce050c60860a88eb64b3fd722826dc56616f7cd1d6011 - languageName: node - linkType: hard - "prettyjson@npm:1.2.5": version: 1.2.5 resolution: "prettyjson@npm:1.2.5" @@ -32024,6 +32062,13 @@ __metadata: languageName: node linkType: hard +"string-argv@npm:^0.3.2": + version: 0.3.2 + resolution: "string-argv@npm:0.3.2" + checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82 + languageName: node + linkType: hard + "string-similarity@npm:^4.0.4": version: 4.0.4 resolution: "string-similarity@npm:4.0.4" @@ -33207,7 +33252,7 @@ __metadata: languageName: node linkType: hard -"tinyexec@npm:^0.3.0, tinyexec@npm:^0.3.2": +"tinyexec@npm:^0.3.0": version: 0.3.2 resolution: "tinyexec@npm:0.3.2" checksum: 10c0/3efbf791a911be0bf0821eab37a3445c2ba07acc1522b1fa84ae1e55f10425076f1290f680286345ed919549ad67527d07281f1c19d584df3b74326909eb1f90 @@ -33513,7 +33558,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:2, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2, tslib@npm:^2.8.1": +"tslib@npm:2, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 @@ -35975,6 +36020,15 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.7.0": + version: 2.7.1 + resolution: "yaml@npm:2.7.1" + bin: + yaml: bin.mjs + checksum: 10c0/ee2126398ab7d1fdde566b4013b68e36930b9e6d8e68b6db356875c99614c10d678b6f45597a145ff6d63814961221fc305bf9242af8bf7450177f8a68537590 + languageName: node + linkType: hard + "yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1"