From 13904943ae185e05754ef668edffbb46ffcf58a8 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 10 Jan 2025 13:22:46 -0500 Subject: [PATCH] build: remove the build task from postinstall --- .eslintrc.json | 7 + .github/actions/setup-job/action.yml | 4 + .gitignore | 2 + .husky/pre-commit | 13 +- .stylelintrc.json | 28 - COPYRIGHT | 9 + README.md | 3 +- config/license.js | 22 +- lint-staged.config.js | 24 + linters/stylelint-header/CHANGELOG.md | 148 - linters/stylelint-header/README.md | 36 - linters/stylelint-header/index.js | 121 - linters/stylelint-header/package.json | 39 - linters/stylelint-header/test/fail.css | 3 - linters/stylelint-header/test/fixed.css | 5 - linters/stylelint-header/test/input.txt | 2 - linters/stylelint-header/test/pass.css | 5 - .../test/stylelint-header.test.js | 77 - package.json | 33 +- .../src/accordion-item-overrides.css | 51 +- .../accordion/src/accordion-overrides.css | 429 +- .../accordion/src/spectrum-accordion-item.css | 389 +- packages/accordion/src/spectrum-accordion.css | 70 +- .../action-bar/src/action-bar-overrides.css | 103 +- .../action-bar/src/spectrum-action-bar.css | 203 +- .../src/action-button-overrides.css | 803 +-- .../src/spectrum-action-button.css | 620 +-- .../src/action-group-overrides.css | 103 +- .../src/spectrum-action-group.css | 238 +- .../src/alert-banner-overrides.css | 69 +- .../src/spectrum-alert-banner.css | 194 +- .../src/alert-dialog-overrides.css | 93 +- .../src/spectrum-alert-dialog.css | 180 +- packages/asset/src/asset-overrides.css | 37 +- packages/asset/src/spectrum-asset.css | 89 +- packages/avatar/src/avatar-overrides.css | 99 +- packages/avatar/src/spectrum-avatar.css | 157 +- packages/badge/src/badge-overrides.css | 339 +- packages/badge/src/spectrum-badge.css | 320 +- .../breadcrumbs/src/breadcrumbs-overrides.css | 223 +- packages/breadcrumbs/src/breadcrumbs.css | 32 +- .../src/spectrum-breadcrumbs-item.css | 308 +- .../breadcrumbs/src/spectrum-breadcrumbs.css | 114 +- .../src/button-group-overrides.css | 69 +- .../src/spectrum-button-group.css | 47 +- packages/button/src/button-overrides.css | 1469 ++---- packages/button/src/spectrum-button.css | 765 +-- packages/card/src/card-overrides.css | 155 +- packages/card/src/spectrum-card.css | 1004 ++-- packages/checkbox/src/checkbox-overrides.css | 211 +- packages/checkbox/src/spectrum-checkbox.css | 915 +--- .../src/clear-button-overrides.css | 146 +- .../src/spectrum-clear-button.css | 150 +- .../src/close-button-overrides.css | 151 +- .../src/spectrum-close-button.css | 477 +- .../src/coach-indicator-overrides.css | 127 +- .../coachmark/src/coachmark-overrides.css | 133 +- .../src/spectrum-coach-indicator.css | 275 +- packages/coachmark/src/spectrum-coachmark.css | 273 +- .../color-area/src/color-area-overrides.css | 49 +- .../color-area/src/spectrum-color-area.css | 145 +- .../src/color-handle-overrides.css | 73 +- .../src/spectrum-color-handle.css | 192 +- .../color-loupe/src/color-loupe-overrides.css | 73 +- .../color-loupe/src/spectrum-color-loupe.css | 123 +- .../src/color-slider-overrides.css | 43 +- .../src/spectrum-color-slider.css | 183 +- .../color-wheel/src/color-wheel-overrides.css | 47 +- .../color-wheel/src/spectrum-color-wheel.css | 192 +- packages/combobox/src/combobox-overrides.css | 327 +- packages/combobox/src/spectrum-combobox.css | 682 +-- .../src/contextual-help-overrides.css | 45 +- .../src/spectrum-contextual-help.css | 93 +- packages/dialog/src/dialog-overrides.css | 99 +- packages/dialog/src/spectrum-dialog.css | 647 +-- packages/divider/src/divider-overrides.css | 59 +- packages/divider/src/spectrum-divider.css | 132 +- packages/dropzone/src/dropzone-overrides.css | 145 +- packages/dropzone/src/spectrum-dropzone.css | 315 +- .../field-group/src/field-group-overrides.css | 29 +- .../field-group/src/spectrum-field-group.css | 43 +- .../field-label/src/field-label-overrides.css | 177 +- .../field-label/src/spectrum-field-label.css | 146 +- .../help-text/src/help-text-overrides.css | 165 +- packages/help-text/src/spectrum-help-text.css | 170 +- packages/icon/src/icon-arrow-overrides.css | 79 +- packages/icon/src/icon-asterisk-overrides.css | 31 +- .../icon/src/icon-checkmark-overrides.css | 39 +- packages/icon/src/icon-chevron-overrides.css | 79 +- .../src/icon-corner-triangle-overrides.css | 31 +- packages/icon/src/icon-cross-overrides.css | 37 +- packages/icon/src/icon-dash-overrides.css | 39 +- packages/icon/src/icon-overrides.css | 37 +- packages/icon/src/spectrum-icon-arrow.css | 53 +- packages/icon/src/spectrum-icon-asterisk.css | 24 +- packages/icon/src/spectrum-icon-checkmark.css | 24 +- packages/icon/src/spectrum-icon-chevron.css | 53 +- .../src/spectrum-icon-corner-triangle.css | 24 +- packages/icon/src/spectrum-icon-cross.css | 24 +- packages/icon/src/spectrum-icon-dash.css | 24 +- .../icon/src/spectrum-icon-double-gripper.css | 24 +- .../icon/src/spectrum-icon-single-gripper.css | 24 +- .../icon/src/spectrum-icon-triple-gripper.css | 24 +- packages/icon/src/spectrum-icon.css | 91 +- packages/icons/src/icons-large.svg.ts | 14 +- packages/icons/src/icons-medium.svg.ts | 14 +- .../src/illustratedmessage-overrides.css | 107 +- .../src/spectrum-illustratedmessage.css | 172 +- .../src/infield-button-overrides.css | 287 +- .../src/spectrum-infield-button.css | 477 +- packages/link/src/link-overrides.css | 61 +- packages/link/src/spectrum-link.css | 216 +- packages/menu/src/menu-overrides.css | 541 +- packages/menu/src/spectrum-checkmark.css | 176 +- packages/menu/src/spectrum-chevron.css | 136 +- packages/menu/src/spectrum-menu-divider.css | 145 +- packages/menu/src/spectrum-menu-item.css | 1061 +--- .../menu/src/spectrum-menu-sectionHeading.css | 178 +- packages/menu/src/spectrum-menu.css | 289 +- packages/meter/src/meter-overrides.css | 65 +- packages/meter/src/progress-bar-overrides.css | 157 +- packages/meter/src/spectrum-meter.css | 65 +- packages/meter/src/spectrum-progress-bar.css | 293 +- packages/modal/src/modal-overrides.css | 55 +- packages/modal/src/spectrum-modal-wrapper.css | 82 +- packages/modal/src/spectrum-modal.css | 221 +- .../src/number-field-overrides.css | 175 +- .../src/spectrum-number-field.css | 655 +-- .../src/picker-button-overrides.css | 217 +- .../src/spectrum-picker-button.css | 412 +- packages/picker/src/picker-overrides.css | 389 +- packages/picker/src/spectrum-picker.css | 997 +--- packages/popover/src/popover-overrides.css | 61 +- packages/popover/src/spectrum-popover.css | 619 +-- .../src/progress-bar-overrides.css | 163 +- .../src/spectrum-progress-bar.css | 293 +- .../src/progress-circle-overrides.css | 65 +- .../src/spectrum-progress-circle.css | 931 ++-- packages/radio/src/radio-overrides.css | 267 +- packages/radio/src/spectrum-radio.css | 510 +- packages/search/src/search-overrides.css | 181 +- packages/search/src/spectrum-search.css | 339 +- .../sidenav/src/sidenav-heading-overrides.css | 245 +- .../sidenav/src/sidenav-item-overrides.css | 245 +- packages/sidenav/src/sidenav-overrides.css | 245 +- .../sidenav/src/spectrum-sidenav-heading.css | 81 +- .../sidenav/src/spectrum-sidenav-item.css | 415 +- packages/sidenav/src/spectrum-sidenav.css | 39 +- packages/slider/src/slider-overrides.css | 295 +- packages/slider/src/spectrum-slider.css | 1269 ++--- .../split-view/src/spectrum-split-view.css | 433 +- .../split-view/src/split-view-overrides.css | 81 +- .../src/spectrum-status-light.css | 281 +- .../src/status-light-overrides.css | 253 +- packages/swatch/src/spectrum-swatch-group.css | 50 +- packages/swatch/src/spectrum-swatch.css | 470 +- .../swatch/src/swatch-group-overrides.css | 35 +- packages/swatch/src/swatch-overrides.css | 133 +- packages/switch/src/spectrum-switch.css | 803 +-- packages/switch/src/switch-overrides.css | 241 +- packages/table/src/spectrum-table-body.css | 51 +- packages/table/src/spectrum-table-cell.css | 155 +- .../src/spectrum-table-checkbox-cell.css | 271 +- .../table/src/spectrum-table-head-cell.css | 267 +- packages/table/src/spectrum-table-head.css | 33 +- packages/table/src/spectrum-table-row.css | 596 +-- packages/table/src/spectrum-table.css | 404 +- packages/table/src/table-overrides.css | 627 +-- packages/tabs/src/spectrum-tab.css | 191 +- packages/tabs/src/spectrum-tabs-sizes.css | 89 +- packages/tabs/src/spectrum-tabs.css | 339 +- packages/tabs/src/tabs-overrides.css | 115 +- packages/tabs/src/tabs-sizes-overrides.css | 113 +- packages/tags/src/spectrum-tag.css | 902 +--- packages/tags/src/spectrum-tags.css | 43 +- packages/tags/src/tag-overrides.css | 493 +- packages/tags/src/tags-overrides.css | 31 +- packages/textfield/src/spectrum-textfield.css | 1022 ++-- .../textfield/src/textfield-overrides.css | 555 +- packages/thumbnail/src/spectrum-thumbnail.css | 354 +- .../thumbnail/src/thumbnail-overrides.css | 25 +- packages/toast/src/spectrum-toast.css | 305 +- packages/toast/src/toast-overrides.css | 107 +- packages/tooltip/src/spectrum-tooltip.css | 963 +--- packages/tooltip/src/tooltip-overrides.css | 109 +- packages/tray/src/spectrum-tray-wrapper.css | 35 +- packages/tray/src/spectrum-tray.css | 165 +- packages/tray/src/tray-overrides.css | 49 +- packages/underlay/src/spectrum-underlay.css | 123 +- packages/underlay/src/underlay-overrides.css | 51 +- stylelint.config.js | 48 + tasks/process-spectrum.js | 98 +- .../src/is-opacity-checkerboard-overrides.css | 39 +- .../src/opacity-checkerboard-overrides.css | 39 +- .../src/spectrum-is-opacity-checkerboard.css | 58 +- .../src/spectrum-opacity-checkerboard.css | 58 +- tools/styles/express/spectrum-core-global.css | 4553 +++++------------ tools/styles/express/spectrum-scale-large.css | 425 +- .../styles/express/spectrum-scale-medium.css | 427 +- tools/styles/express/spectrum-theme-dark.css | 467 +- tools/styles/express/spectrum-theme-light.css | 467 +- tools/styles/fonts.css | 1744 ++----- tools/styles/spectrum-core-global.css | 4549 +++++----------- tools/styles/spectrum-scale-large.css | 439 +- tools/styles/spectrum-scale-medium.css | 435 +- tools/styles/spectrum-theme-dark.css | 451 +- tools/styles/spectrum-theme-darkest.css | 451 +- tools/styles/spectrum-theme-light.css | 451 +- tools/styles/spectrum-theme-lightest.css | 451 +- .../spectrum-two/spectrum-core-global.css | 4549 +++++----------- .../spectrum-two/spectrum-scale-large.css | 439 +- .../spectrum-two/spectrum-scale-medium.css | 435 +- .../spectrum-two/spectrum-theme-dark.css | 451 +- .../spectrum-two/spectrum-theme-light.css | 451 +- tools/styles/src/body-overrides.css | 51 +- tools/styles/src/code-overrides.css | 41 +- tools/styles/src/detail-overrides.css | 43 +- tools/styles/src/heading-overrides.css | 91 +- tools/styles/src/spectrum-body.css | 313 +- tools/styles/src/spectrum-code.css | 177 +- tools/styles/src/spectrum-detail.css | 422 +- tools/styles/src/spectrum-heading.css | 723 +-- tools/styles/src/spectrum-lang.css | 566 +- tools/styles/src/spectrum-typography.css | 58 +- .../tokens/express/custom-large-vars.css | 13 + .../tokens/express/custom-medium-vars.css | 13 + tools/styles/tokens/express/custom-vars.css | 13 + .../tokens/spectrum/custom-large-vars.css | 13 + .../tokens/spectrum/custom-medium-vars.css | 13 + tools/styles/tokens/spectrum/custom-vars.css | 13 + tools/styles/typography.css | 1744 ++----- yarn.lock | 1779 ++----- 232 files changed, 20985 insertions(+), 49725 deletions(-) delete mode 100755 .stylelintrc.json create mode 100644 COPYRIGHT create mode 100644 lint-staged.config.js delete mode 100644 linters/stylelint-header/CHANGELOG.md delete mode 100644 linters/stylelint-header/README.md delete mode 100755 linters/stylelint-header/index.js delete mode 100644 linters/stylelint-header/package.json delete mode 100644 linters/stylelint-header/test/fail.css delete mode 100644 linters/stylelint-header/test/fixed.css delete mode 100644 linters/stylelint-header/test/input.txt delete mode 100644 linters/stylelint-header/test/pass.css delete mode 100644 linters/stylelint-header/test/stylelint-header.test.js create mode 100755 stylelint.config.js diff --git a/.eslintrc.json b/.eslintrc.json index f85a33242f..913e1bebf7 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -83,6 +83,13 @@ "rules": { "no-console": ["off"] } + }, + { + "files": ["*.json"], + "parser": "jsonc-eslint-parser", + "rules": { + "notice/notice": "off" + } } ] } diff --git a/.github/actions/setup-job/action.yml b/.github/actions/setup-job/action.yml index bd0c72ca81..bbe69d5a92 100644 --- a/.github/actions/setup-job/action.yml +++ b/.github/actions/setup-job/action.yml @@ -17,3 +17,7 @@ runs: - name: Install dependencies shell: bash run: yarn --immutable + + - name: Build the project + shell: bash + run: yarn build diff --git a/.gitignore b/.gitignore index e2b4356859..ef1eeb2389 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,8 @@ build-storybook.log .devcontainer tach-results.* .gitconfig +.eslintcache +.stylelintcache .netlify/plugins # documentation diff --git a/.husky/pre-commit b/.husky/pre-commit index 9723a0611a..5340c2b685 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,8 +1,11 @@ -STAGED_FILES_TO_LINT=$(git diff --name-only --cached --diff-filter=d -- "*.ts" "*.js") +STAGED_SCRIPTS_TO_LINT=$(git diff --name-only --cached --diff-filter=d -- "*.ts") + VERSION_FILE=$(dirname "$0")/../tools/base/src/version.js -yarn eslint -f pretty $STAGED_FILES_TO_LINT -yarn analyze -yarn lint:css -yarn pretty-quick --staged + +# Only run yarn analyze if updates have been made to the typescript files +if [ -n "$STAGED_SCRIPTS_TO_LINT" ]; then + yarn analyze +fi + yarn genversion --es6 --semi $VERSION_FILE git add $VERSION_FILE diff --git a/.stylelintrc.json b/.stylelintrc.json deleted file mode 100755 index 4af5a2a752..0000000000 --- a/.stylelintrc.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "plugins": ["./linters/stylelint-header"], - "extends": ["stylelint-config-standard"], - "rules": { - "header/header": ["config/license.js", {}], - "length-zero-no-unit": [true, { "ignore": "custom-properties" }], - "selector-type-no-unknown": [true, { "ignore": ["custom-elements"] }], - "selector-pseudo-element-colon-notation": ["single", {}], - "custom-property-pattern": "^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$", - "no-duplicate-selectors": null, - "selector-class-pattern": null, - "no-descending-specificity": null, - "declaration-block-no-redundant-longhand-properties": null - }, - "overrides": [ - { - "files": [ - "packages/**/src/spectrum-*.css", - "tools/**/src/spectrum-*.css", - "tools/styles/**/*.css" - ], - "extends": [], - "rules": { - "header/header": ["config/license.js", {}] - } - } - ] -} diff --git a/COPYRIGHT b/COPYRIGHT new file mode 100644 index 0000000000..007d73b728 --- /dev/null +++ b/COPYRIGHT @@ -0,0 +1,9 @@ +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. diff --git a/README.md b/README.md index d197971e93..d92a4b5985 100644 --- a/README.md +++ b/README.md @@ -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. @@ -92,7 +92,6 @@ 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. diff --git a/config/license.js b/config/license.js index ae3852628d..e9dec38984 100755 --- a/config/license.js +++ b/config/license.js @@ -1,11 +1,11 @@ -/* -Copyright <%= YEAR %> 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. -*/ +/*! + * Copyright <%= YEAR %> 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. + */ diff --git a/lint-staged.config.js b/lint-staged.config.js new file mode 100644 index 0000000000..7e932c3090 --- /dev/null +++ b/lint-staged.config.js @@ -0,0 +1,24 @@ +/*! + * 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 --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables', + 'prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + ], + '*.{ts,js,json}': [ + 'eslint --fix --cache --no-error-on-unmatched-pattern --quiet', + ], + '*.{md,html}': [ + 'prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write', + ], +}; diff --git a/linters/stylelint-header/CHANGELOG.md b/linters/stylelint-header/CHANGELOG.md deleted file mode 100644 index e54bd69c48..0000000000 --- a/linters/stylelint-header/CHANGELOG.md +++ /dev/null @@ -1,148 +0,0 @@ -# Change Log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## [1.0.1](https://github.com/adobe/spectrum-web-components/compare/v1.0.0...v1.0.1) (2024-11-11) - -**Note:** Version bump only for package stylelint-header - -# [1.0.0](https://github.com/adobe/spectrum-web-components/compare/v0.49.0...v1.0.0) (2024-10-31) - -**Note:** Version bump only for package stylelint-header - -# [0.49.0](https://github.com/adobe/spectrum-web-components/compare/v0.48.1...v0.49.0) (2024-10-15) - -**Note:** Version bump only for package stylelint-header - -## [0.48.1](https://github.com/adobe/spectrum-web-components/compare/v0.48.0...v0.48.1) (2024-10-01) - -**Note:** Version bump only for package stylelint-header - -# [0.48.0](https://github.com/adobe/spectrum-web-components/compare/v0.47.2...v0.48.0) (2024-09-17) - -**Note:** Version bump only for package stylelint-header - -## [0.47.2](https://github.com/adobe/spectrum-web-components/compare/v0.47.1...v0.47.2) (2024-09-03) - -**Note:** Version bump only for package stylelint-header - -## [0.47.1](https://github.com/adobe/spectrum-web-components/compare/v0.47.0...v0.47.1) (2024-08-27) - -**Note:** Version bump only for package stylelint-header - -# [0.47.0](https://github.com/adobe/spectrum-web-components/compare/v0.46.0...v0.47.0) (2024-08-20) - -**Note:** Version bump only for package stylelint-header - -# [0.46.0](https://github.com/adobe/spectrum-web-components/compare/v0.45.0...v0.46.0) (2024-08-08) - -**Note:** Version bump only for package stylelint-header - -# [0.45.0](https://github.com/adobe/spectrum-web-components/compare/v0.44.0...v0.45.0) (2024-07-30) - -**Note:** Version bump only for package stylelint-header - -# [0.44.0](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.44.0) (2024-07-15) - -**Note:** Version bump only for package stylelint-header - -# [0.43.0](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.43.0) (2024-06-11) - -**Note:** Version bump only for package stylelint-header - -## [0.42.5](https://github.com/adobe/spectrum-web-components/compare/v0.42.4...v0.42.5) (2024-05-24) - -**Note:** Version bump only for package stylelint-header - -## [0.42.4](https://github.com/adobe/spectrum-web-components/compare/v0.42.2...v0.42.4) (2024-05-14) - -**Note:** Version bump only for package stylelint-header - -## [0.42.3](https://github.com/adobe/spectrum-web-components/compare/v0.42.2...v0.42.3) (2024-05-01) - -**Note:** Version bump only for package stylelint-header - -## [0.42.2](https://github.com/adobe/spectrum-web-components/compare/v0.42.1...v0.42.2) (2024-04-03) - -**Note:** Version bump only for package stylelint-header - -## [0.42.1](https://github.com/adobe/spectrum-web-components/compare/v0.42.0...v0.42.1) (2024-04-02) - -**Note:** Version bump only for package stylelint-header - -# [0.42.0](https://github.com/adobe/spectrum-web-components/compare/v0.41.2...v0.42.0) (2024-03-19) - -**Note:** Version bump only for package stylelint-header - -## [0.41.2](https://github.com/adobe/spectrum-web-components/compare/v0.41.1...v0.41.2) (2024-03-05) - -**Note:** Version bump only for package stylelint-header - -## [0.41.1](https://github.com/adobe/spectrum-web-components/compare/v0.41.0...v0.41.1) (2024-02-22) - -**Note:** Version bump only for package stylelint-header - -# [0.41.0](https://github.com/adobe/spectrum-web-components/compare/v0.40.5...v0.41.0) (2024-02-13) - -**Note:** Version bump only for package stylelint-header - -## [0.40.5](https://github.com/adobe/spectrum-web-components/compare/v0.40.4...v0.40.5) (2024-02-05) - -**Note:** Version bump only for package stylelint-header - -## [0.40.4](https://github.com/adobe/spectrum-web-components/compare/v0.40.3...v0.40.4) (2024-01-29) - -**Note:** Version bump only for package stylelint-header - -## [0.40.3](https://github.com/adobe/spectrum-web-components/compare/v0.40.2...v0.40.3) (2024-01-11) - -**Note:** Version bump only for package stylelint-header - -## [0.40.2](https://github.com/adobe/spectrum-web-components/compare/v0.40.1...v0.40.2) (2023-12-18) - -**Note:** Version bump only for package stylelint-header - -## [0.40.1](https://github.com/adobe/spectrum-web-components/compare/v0.40.0...v0.40.1) (2023-12-05) - -**Note:** Version bump only for package stylelint-header - -# [0.40.0](https://github.com/adobe/spectrum-web-components/compare/v0.39.4...v0.40.0) (2023-11-16) - -**Note:** Version bump only for package stylelint-header - -## [0.39.4](https://github.com/adobe/spectrum-web-components/compare/v0.39.3...v0.39.4) (2023-11-02) - -**Note:** Version bump only for package stylelint-header - -## [0.39.3](https://github.com/adobe/spectrum-web-components/compare/v0.39.2...v0.39.3) (2023-10-18) - -**Note:** Version bump only for package stylelint-header - -## [0.39.2](https://github.com/adobe/spectrum-web-components/compare/v0.39.1...v0.39.2) (2023-10-13) - -**Note:** Version bump only for package stylelint-header - -## [0.39.1](https://github.com/adobe/spectrum-web-components/compare/v0.39.0...v0.39.1) (2023-10-06) - -**Note:** Version bump only for package stylelint-header - -# [0.39.0](https://github.com/adobe/spectrum-web-components/compare/v0.38.0...v0.39.0) (2023-09-25) - -**Note:** Version bump only for package stylelint-header - -# [0.38.0](https://github.com/adobe/spectrum-web-components/compare/v0.37.0...v0.38.0) (2023-09-05) - -**Note:** Version bump only for package stylelint-header - -# [0.37.0](https://github.com/adobe/spectrum-web-components/compare/v0.36.0...v0.37.0) (2023-08-18) - -**Note:** Version bump only for package stylelint-header - -# [0.36.0](https://github.com/adobe/spectrum-web-components/compare/v0.35.0...v0.36.0) (2023-08-18) - -**Note:** Version bump only for package stylelint-header - -# [0.35.0](https://github.com/adobe/spectrum-web-components/compare/v0.34.0...v0.35.0) (2023-07-31) - -**Note:** Version bump only for package stylelint-header diff --git a/linters/stylelint-header/README.md b/linters/stylelint-header/README.md deleted file mode 100644 index 69a27744b2..0000000000 --- a/linters/stylelint-header/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# stylelint-header - -A [stylelint](https://github.com/stylelint/stylelint) custom rule to check for a header comment (i.e., copyright notice). - -This rule will cause stylelint to throw an error if no header exists in the file or if autofix is enabled, it will prepend the header to the document. - -## Installation - -``` -yarn add stylelint-header -``` - -### Options - -#### nonMatchingTolerance - -Type `numeric`; Default 0.98 - -This is a number between 0 and 1 representing the percentage of allowed difference between a found comment in the file and the provided header. Uses `` to determine value. - -## Usage - -Add it to your stylelint config `plugins` array, then add '`header/header` to your rules, specifying a string or file location for the header template. - -Like so: - -```js -{ - "plugins": [ - "stylelint-header" - ], - "rules": { - "header/header": ["Copyright <%= YEAR %>.", { nonMatchingTolerance: 0.8 }], - }, -}; -``` diff --git a/linters/stylelint-header/index.js b/linters/stylelint-header/index.js deleted file mode 100755 index 77476204ff..0000000000 --- a/linters/stylelint-header/index.js +++ /dev/null @@ -1,121 +0,0 @@ -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -const { existsSync, readFileSync } = require('fs'); -const { createPlugin, utils } = require('stylelint'); -const { compareTwoStrings } = require('string-similarity'); -const { template } = require('lodash'); - -const ruleName = 'header/header'; - -const messages = utils.ruleMessages(ruleName, { - rejected: 'Header not found', -}); - -const rule = createPlugin( - ruleName, - (pathOrString, options = {}, context = {}) => - (root, result) => { - if (typeof pathOrString === 'boolean' && !pathOrString) return; - - let headerTemplate = existsSync(pathOrString) - ? readFileSync(pathOrString, 'utf8') - : pathOrString; - - if (!headerTemplate) return; - - // Trim any comment tags from the string and remove whitespace - headerTemplate = headerTemplate.replace(/(\/\*|\*\/)/g, '').trim(); - - const validOptions = utils.validateOptions( - result, - ruleName, - { - actual: pathOrString, - possible: [ - false, - (x) => typeof x === 'string' && existsSync(x), - ], - }, - { - optional: true, - actual: options, - possible: { - nonMatchingTolerance: [ - (x) => typeof x === 'number' && (x >= 0 || x <= 1), - ], - templateInputs: [(x) => typeof x === 'object'], - }, - } - ); - - if (!validOptions) return; - - const getHeader = template(headerTemplate); - const header = getHeader({ - YEAR: new Date().getFullYear(), - ...options.templateInputs, - }); - - const nonMatchingTolerance = options?.nonMatchingTolerance || 0.98; - - // Walk comments on root to find if header exists - let found = false; - root.walkComments((comment, _idx) => { - // Remove any asterisks and whitespace from the texts before comparing - const clean = (text) => text.replace(/(\*|\n|\s)/g, '').trim(); - // If the two strings are at least 98% alike, it's a match - if ( - compareTwoStrings(clean(comment.text), clean(header)) >= - nonMatchingTolerance - ) { - found = true; - } - - // This escapes the loop if found, continues if not found - return !found; - }); - - if (found) return; - - if (context.fix) { - const lineLength = header.split('\n').length; - let raws = {}; - if (lineLength > 1) { - raws = { - left: context.newline, - right: context.newline, - }; - } - // Add the provided header to the top of the file - root.prepend({ - text: header, - raws, - }); - // Put a few newlines between the comment and the first property - root.nodes[1].raws.before = context.newline + context.newline; - } else { - // Just report the issue - utils.report({ - ruleName: ruleName, - result: result, - message: messages.rejected, - node: root, - }); - } - } -); - -rule.ruleName = ruleName; -rule.messages = messages; - -module.exports = rule; diff --git a/linters/stylelint-header/package.json b/linters/stylelint-header/package.json deleted file mode 100644 index 3c57190488..0000000000 --- a/linters/stylelint-header/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "stylelint-header", - "version": "1.0.3", - "private": true, - "license": "Apache-2.0", - "author": "Adobe", - "main": "index.js", - "scripts": { - "coverage": "jest --coverage", - "test": "jest", - "watch": "jest --watch" - }, - "files": [ - "index.js", - "!test/*" - ], - "keywords": [ - "stylelint", - "header", - "stylelint-plugin", - "css", - "linter" - ], - "peerDependencies": { - "stylelint": "^13.0.0 || ^14.0.0 || ^16.0.0" - }, - "dependencies": { - "string-similarity": "^4.0.4" - }, - "devDependencies": { - "jest": "^27.0.1", - "jest-preset-stylelint": "^7.0.0", - "lodash": "^4.17.21", - "stylelint": "^16.0.0" - }, - "jest": { - "preset": "jest-preset-stylelint" - } -} diff --git a/linters/stylelint-header/test/fail.css b/linters/stylelint-header/test/fail.css deleted file mode 100644 index 009eec5ac5..0000000000 --- a/linters/stylelint-header/test/fail.css +++ /dev/null @@ -1,3 +0,0 @@ -.foo { - position: relative; -} diff --git a/linters/stylelint-header/test/fixed.css b/linters/stylelint-header/test/fixed.css deleted file mode 100644 index a335197859..0000000000 --- a/linters/stylelint-header/test/fixed.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Copyright 2022 Adobe. */ - -.foo { - position: relative; -} diff --git a/linters/stylelint-header/test/input.txt b/linters/stylelint-header/test/input.txt deleted file mode 100644 index 15100ccd20..0000000000 --- a/linters/stylelint-header/test/input.txt +++ /dev/null @@ -1,2 +0,0 @@ -/* Copyright <%= YEAR %> <%= company %>. */ - diff --git a/linters/stylelint-header/test/pass.css b/linters/stylelint-header/test/pass.css deleted file mode 100644 index a335197859..0000000000 --- a/linters/stylelint-header/test/pass.css +++ /dev/null @@ -1,5 +0,0 @@ -/* Copyright 2022 Adobe. */ - -.foo { - position: relative; -} diff --git a/linters/stylelint-header/test/stylelint-header.test.js b/linters/stylelint-header/test/stylelint-header.test.js deleted file mode 100644 index abd42086ab..0000000000 --- a/linters/stylelint-header/test/stylelint-header.test.js +++ /dev/null @@ -1,77 +0,0 @@ -/* -Copyright 2022 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -const { readFileSync } = require('fs'); -const { getTestRule } = require('jest-preset-stylelint'); - -const plugin = require('..'); -const { messages, ruleName } = plugin; - -const testRule = getTestRule({ plugins: ['.'] }); - -testRule({ - ruleName, - config: [ - './input.txt', - { - nonMatchingTolerance: 1, - templateVariables: { - company: 'Adobe', - }, - }, - ], - fix: true, - - accept: [ - { - code: readFileSync('test/pass.css', { encoding: 'utf-8' }), - description: 'Simple CSS with header included', - }, - ], - - reject: [ - { - code: readFileSync('test/fail.css', { encoding: 'utf-8' }), - fixed: readFileSync('test/fixed.css', { encoding: 'utf-8' }), - description: 'Auto-fix file missing header', - message: messages.rejected, - }, - ], -}); - -testRule({ - ruleName, - config: [ - 'Copyright <%= YEAR %> <%= company %>.', - { - nonMatchingTolerance: 1, - templateVariables: { - company: 'Adobe', - }, - }, - ], - - accept: [ - { - code: readFileSync('test/pass.css', { encoding: 'utf-8' }), - description: 'Simple CSS with header included', - }, - ], - - reject: [ - { - code: readFileSync('test/fail.css', { encoding: 'utf-8' }), - description: 'Error if missing header', - message: messages.rejected, - }, - ], -}); diff --git a/package.json b/package.json index d5d7f315ee..727f4ed680 100755 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "build": "wireit", "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo", "build:component-inventory": "node ./tasks/build-component-inventory.js", - "build:confirm": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,iconset,modal,opacity-shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.js", + "build:confirm": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,close-button,clear-button,iconset,modal,opacity-shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- test -f src/index.js", "build:css": "wireit", "build:css:watch": "wireit", "build:react": "yarn gen-react-wrapper && node ./tasks/build-react.js && yarn tsc --build tsconfig-react-wrapper.json", @@ -23,7 +23,7 @@ "build:types": "wireit", "build:watch": "wireit", "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", - "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,modal,iconset,shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson", + "custom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,modal,iconset,shared,opacity-checkerboard,styles,custom-vars-viewer,eslint-plugin},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../custom-elements-manifest.config.js --packagejson", "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement", "docs:build": "yarn workspace documentation build", "docs:ci": "yarn docs:analyze && run-p docs:production storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", @@ -32,8 +32,7 @@ "docs:review": "alex packages/**/*.md", "docs:start": "yarn workspace documentation serve --watch", "find": "test -f custom-elements.json", - "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", - "get-ready": "yarn build", + "gen-react-wrapper": "rm -fr react && lerna exec --ignore \"{@spectrum-web-components/{base,bundle,custom-vars-viewer,modal,iconset,shared,opacity-checkerboard,styles,reactive-controllers,eslint-plugin},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- cem analyze --config ../../cem-react-wrapper.config.js && node ./scripts/generate-icon-react-wrapper.js", "icons": "wireit", "icons:ui": "wireit", "icons:workflow": "wireit", @@ -46,14 +45,15 @@ "lint:ts": "pretty-quick --pattern \"packages/**/*.ts\" && eslint -f pretty \"packages/**/*.ts\" && pretty-quick --pattern \"tools/**/*.ts\" && eslint -f pretty \"tools/**/*.ts\"", "lint:versions": "node ./scripts/lint-versions.js", "new-package": "cd projects/templates && plop", - "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js", + "postcustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,clear-button,close-button,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,vrt-compare,eslint-plugin},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- node ../../tasks/check-cem.js", "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"", - "postinstall": "patch-package && yarn get-ready", + "postinstall": "patch-package", "postlerna-publish": "yarn publish:react", "postpublish:react": "git reset --hard HEAD^ && git prune", - "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},stylelint-header,@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:", + "precommit": "lint-staged --allow-empty --config lint-staged.config.js", + "precustom-element-json": "lerna exec --ignore \"{@spectrum-web-components/{base,bundle,iconset,modal,shared,opacity-checkerboard,styles,custom-vars-viewer,reactive-controllers,eslint-plugin},@swc-react/*,documentation,example-project-rollup,example-project-webpack,swc-templates,@types/swc}\" -- rm custom-elements.json ||:", "preeleventy": "yarn docs:analyze", - "prelerna-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm", + "prelerna-publish": "rimraf react && yarn build && yarn custom-element-json && yarn build:confirm", "prepare": "husky", "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify", "prestorybook": "wireit", @@ -63,9 +63,6 @@ "process-icons": "wireit", "process-spectrum": "wireit", "publish:react": "lerna publish from-package --message \"chore: release new Reach Wrapper versions #publish\"", - "spectrum-css": "wireit", - "spectrum-tokens": "wireit", - "spectrum-vars": "wireit", "start": "yarn storybook", "storybook": "wireit", "storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook", @@ -168,9 +165,11 @@ "gh-pages": "^6.0.0", "gunzip-maybe": "^1.4.2", "husky": "^9.0.10", + "jsonc-eslint-parser": "^2.4.0", "latest-version": "^9.0.0", "lerna": "^8.1.2", "lightningcss": "1.19.0", + "lint-staged": "^15.3.0", "lit": "^2.5.0 || ^3.1.3", "lit-analyzer": "^2.0.3", "lit-html": "^2.4.0 || ^3.1.3", @@ -191,8 +190,9 @@ "rollup": "^4.12.0", "sinon": "^17.0.1", "storybook": "^7.5.0", - "stylelint": "^16.4.0", - "stylelint-config-standard": "^36.0.0", + "stylelint": "^16.9.0", + "stylelint-config-standard": "^36.0.1", + "stylelint-header": "^2.0.1", "tachometer": "^0.7.0", "tar-stream": "^3.0.0", "terser": "^4.8.1", @@ -316,7 +316,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", "files": [ "scripts/process-icons.js" ], @@ -381,7 +381,7 @@ ] }, "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix && pretty-quick --pattern \"{packages,tools}/**/*.css\" && pretty-quick --pattern \"packages/dialog/src/spectrum-dialog.css\"", + "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint:css --fix", "files": [ "tasks/process-spectrum.js", "packages/**/spectrum-config.js", @@ -391,7 +391,8 @@ "scripts/generate-tokens-wrapper.js", "node_modules/@spectrum-css/**/*.css", "scripts/spectrum-vars.js", - "tools/styles/package.json" + "tools/styles/package.json", + "stylelint.config.js" ], "output": [ "packages/*/src/spectrum-*.css", diff --git a/packages/accordion/src/accordion-item-overrides.css b/packages/accordion/src/accordion-item-overrides.css index 278b1f0dea..2b8d591152 100644 --- a/packages/accordion/src/accordion-item-overrides.css +++ b/packages/accordion/src/accordion-item-overrides.css @@ -1,36 +1,23 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-size-m-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-m-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-m-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-m-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-m-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-m-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-height: var(--system-accordion-size-m-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-m-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-m-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-m-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-m-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-size-m-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-size-m-item-header-bottom-to-text-space); } + diff --git a/packages/accordion/src/accordion-overrides.css b/packages/accordion/src/accordion-overrides.css index 89b5f63fb9..dce25ae76c 100644 --- a/packages/accordion/src/accordion-overrides.css +++ b/packages/accordion/src/accordion-overrides.css @@ -1,340 +1,155 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-item-width: var(--system-accordion-item-width); - --spectrum-accordion-disclosure-indicator-to-text-space: var( - --system-accordion-disclosure-indicator-to-text-space - ); - --spectrum-accordion-edge-to-disclosure-indicator-space: var( - --system-accordion-edge-to-disclosure-indicator-space - ); - --spectrum-accordion-edge-to-text-space: var( - --system-accordion-edge-to-text-space - ); - --spectrum-accordion-focus-indicator-gap: var( - --system-accordion-focus-indicator-gap - ); - --spectrum-accordion-focus-indicator-thickness: var( - --system-accordion-focus-indicator-thickness - ); - --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); - --spectrum-accordion-item-content-area-top-to-content: var( - --system-accordion-item-content-area-top-to-content - ); - --spectrum-accordion-item-content-area-bottom-to-content: var( - --system-accordion-item-content-area-bottom-to-content - ); - --spectrum-accordion-item-header-font: var( - --system-accordion-item-header-font - ); - --spectrum-accordion-item-header-font-weight: var( - --system-accordion-item-header-font-weight - ); - --spectrum-accordion-item-header-font-style: var( - --system-accordion-item-header-font-style - ); - --spectrum-accordion-item-header-line-height: var( - --system-accordion-item-header-line-height - ); - --spectrum-accordion-item-content-font: var( - --system-accordion-item-content-font - ); - --spectrum-accordion-item-content-font-weight: var( - --system-accordion-item-content-font-weight - ); - --spectrum-accordion-item-content-font-style: var( - --system-accordion-item-content-font-style - ); - --spectrum-accordion-item-content-line-height: var( - --system-accordion-item-content-line-height - ); - --spectrum-accordion-background-color-default: var( - --system-accordion-background-color-default - ); - --spectrum-accordion-background-color-hover: var( - --system-accordion-background-color-hover - ); - --spectrum-accordion-background-color-down: var( - --system-accordion-background-color-down - ); - --spectrum-accordion-background-color-key-focus: var( - --system-accordion-background-color-key-focus - ); - --spectrum-accordion-item-header-color-default: var( - --system-accordion-item-header-color-default - ); - --spectrum-accordion-item-header-color-hover: var( - --system-accordion-item-header-color-hover - ); - --spectrum-accordion-item-header-color-down: var( - --system-accordion-item-header-color-down - ); - --spectrum-accordion-item-header-color-key-focus: var( - --system-accordion-item-header-color-key-focus - ); - --spectrum-accordion-item-header-disabled-color: var( - --system-accordion-item-header-disabled-color - ); - --spectrum-accordion-item-content-disabled-color: var( - --system-accordion-item-content-disabled-color - ); - --spectrum-accordion-item-content-color: var( - --system-accordion-item-content-color - ); - --spectrum-accordion-focus-indicator-color: var( - --system-accordion-focus-indicator-color - ); - --spectrum-accordion-divider-color: var(--system-accordion-divider-color); - --spectrum-accordion-item-header-line-height-cjk: var( - --system-accordion-item-header-line-height-cjk - ); - --spectrum-accordion-item-content-line-height-cjk: var( - --system-accordion-item-content-line-height-cjk - ); - --spectrum-accordion-item-height: var(--system-accordion-item-height); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-width: var(--system-accordion-item-width); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--system-accordion-disclosure-indicator-to-text-space); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--system-accordion-edge-to-disclosure-indicator-space); + --spectrum-accordion-edge-to-text-space: var(--system-accordion-edge-to-text-space); + --spectrum-accordion-focus-indicator-gap: var(--system-accordion-focus-indicator-gap); + --spectrum-accordion-focus-indicator-thickness: var(--system-accordion-focus-indicator-thickness); + --spectrum-accordion-corner-radius: var(--system-accordion-corner-radius); + --spectrum-accordion-item-content-area-top-to-content: var(--system-accordion-item-content-area-top-to-content); + --spectrum-accordion-item-content-area-bottom-to-content: var(--system-accordion-item-content-area-bottom-to-content); + --spectrum-accordion-item-header-font: var(--system-accordion-item-header-font); + --spectrum-accordion-item-header-font-weight: var(--system-accordion-item-header-font-weight); + --spectrum-accordion-item-header-font-style: var(--system-accordion-item-header-font-style); + --spectrum-accordion-item-header-line-height: var(--system-accordion-item-header-line-height); + --spectrum-accordion-item-content-font: var(--system-accordion-item-content-font); + --spectrum-accordion-item-content-font-weight: var(--system-accordion-item-content-font-weight); + --spectrum-accordion-item-content-font-style: var(--system-accordion-item-content-font-style); + --spectrum-accordion-item-content-line-height: var(--system-accordion-item-content-line-height); + --spectrum-accordion-background-color-default: var(--system-accordion-background-color-default); + --spectrum-accordion-background-color-hover: var(--system-accordion-background-color-hover); + --spectrum-accordion-background-color-down: var(--system-accordion-background-color-down); + --spectrum-accordion-background-color-key-focus: var(--system-accordion-background-color-key-focus); + --spectrum-accordion-item-header-color-default: var(--system-accordion-item-header-color-default); + --spectrum-accordion-item-header-color-hover: var(--system-accordion-item-header-color-hover); + --spectrum-accordion-item-header-color-down: var(--system-accordion-item-header-color-down); + --spectrum-accordion-item-header-color-key-focus: var(--system-accordion-item-header-color-key-focus); + --spectrum-accordion-item-header-disabled-color: var(--system-accordion-item-header-disabled-color); + --spectrum-accordion-item-content-disabled-color: var(--system-accordion-item-content-disabled-color); + --spectrum-accordion-item-content-color: var(--system-accordion-item-content-color); + --spectrum-accordion-focus-indicator-color: var(--system-accordion-focus-indicator-color); + --spectrum-accordion-divider-color: var(--system-accordion-divider-color); + --spectrum-accordion-item-header-line-height-cjk: var(--system-accordion-item-header-line-height-cjk); + --spectrum-accordion-item-content-line-height-cjk: var(--system-accordion-item-content-line-height-cjk); + --spectrum-accordion-item-height: var(--system-accordion-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-item-header-bottom-to-text-space); } -:host([size='s']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-s-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-s-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-s-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-s-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-s-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-s-item-header-bottom-to-text-space - ); +:host([size="s"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-s-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-s-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-s-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-s-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-s-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-size-s-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-size-s-item-header-bottom-to-text-space); } .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-size-m-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-m-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-m-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-m-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-m-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-m-item-header-bottom-to-text-space - ); + --spectrum-accordion-item-height: var(--system-accordion-size-m-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-m-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-m-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-m-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-m-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-size-m-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-size-m-item-header-bottom-to-text-space); } -:host([size='l']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-l-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-l-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-l-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-l-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-l-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-l-item-header-bottom-to-text-space - ); +:host([size="l"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-l-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-l-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-l-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-l-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-l-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-size-l-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-size-l-item-header-bottom-to-text-space); } -:host([size='xl']) { - --spectrum-accordion-item-height: var( - --system-accordion-size-xl-item-height - ); - --spectrum-accordion-disclosure-indicator-height: var( - --system-accordion-size-xl-disclosure-indicator-height - ); - --spectrum-accordion-component-edge-to-text: var( - --system-accordion-size-xl-component-edge-to-text - ); - --spectrum-accordion-item-header-font-size: var( - --system-accordion-size-xl-item-header-font-size - ); - --spectrum-accordion-item-content-font-size: var( - --system-accordion-size-xl-item-content-font-size - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-size-xl-item-header-bottom-to-text-space - ); +:host([size="xl"]) { + --spectrum-accordion-item-height: var(--system-accordion-size-xl-item-height); + --spectrum-accordion-disclosure-indicator-height: var(--system-accordion-size-xl-disclosure-indicator-height); + --spectrum-accordion-component-edge-to-text: var(--system-accordion-size-xl-component-edge-to-text); + --spectrum-accordion-item-header-font-size: var(--system-accordion-size-xl-item-header-font-size); + --spectrum-accordion-item-content-font-size: var(--system-accordion-size-xl-item-content-font-size); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-size-xl-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-size-xl-item-header-bottom-to-text-space); } -:host([density='compact'][size='s']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-s-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-s-item-header-bottom-to-text-space - ); +:host([density="compact"][size="s"]) { + --spectrum-accordion-item-height: var(--system-accordion-compact-size-s-item-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-compact-size-s-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-compact-size-s-item-header-bottom-to-text-space); } -:host([density='compact']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-item-header-bottom-to-text-space - ); +:host([density="compact"]) { + --spectrum-accordion-item-height: var(--system-accordion-compact-item-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-compact-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-compact-item-header-bottom-to-text-space); } -:host([density='compact']) .spectrum-Accordion--sizeM { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-m-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-m-item-header-bottom-to-text-space - ); +:host([density="compact"]) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-height: var(--system-accordion-compact-size-m-item-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-compact-size-m-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-compact-size-m-item-header-bottom-to-text-space); } -:host([density='compact'][size='l']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-l-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-l-item-header-bottom-to-text-space - ); +:host([density="compact"][size="l"]) { + --spectrum-accordion-item-height: var(--system-accordion-compact-size-l-item-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-compact-size-l-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-compact-size-l-item-header-bottom-to-text-space); } -:host([density='compact'][size='xl']) { - --spectrum-accordion-item-height: var( - --system-accordion-compact-size-xl-item-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-compact-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-compact-size-xl-item-header-bottom-to-text-space - ); +:host([density="compact"][size="xl"]) { + --spectrum-accordion-item-height: var(--system-accordion-compact-size-xl-item-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-compact-size-xl-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-compact-size-xl-item-header-bottom-to-text-space); } -:host([density='spacious'][size='s']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-s-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-s-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-s-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="s"]) { + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-s-item-header-line-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-s-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-s-item-header-bottom-to-text-space); } -:host([density='spacious']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-item-header-bottom-to-text-space - ); +:host([density="spacious"]) { + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-item-header-line-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-item-header-bottom-to-text-space); } -:host([density='spacious']) .spectrum-Accordion--sizeM { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-m-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-m-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-m-item-header-bottom-to-text-space - ); +:host([density="spacious"]) .spectrum-Accordion--sizeM { + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-m-item-header-line-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-m-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-m-item-header-bottom-to-text-space); } -:host([density='spacious'][size='l']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-l-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-l-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-l-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="l"]) { + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-l-item-header-line-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-l-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-l-item-header-bottom-to-text-space); } -:host([density='spacious'][size='xl']) { - --spectrum-accordion-item-header-line-height: var( - --system-accordion-spacious-size-xl-item-header-line-height - ); - --spectrum-accordion-item-header-top-to-text-space: var( - --system-accordion-spacious-size-xl-item-header-top-to-text-space - ); - --spectrum-accordion-item-header-bottom-to-text-space: var( - --system-accordion-spacious-size-xl-item-header-bottom-to-text-space - ); +:host([density="spacious"][size="xl"]) { + --spectrum-accordion-item-header-line-height: var(--system-accordion-spacious-size-xl-item-header-line-height); + --spectrum-accordion-item-header-top-to-text-space: var(--system-accordion-spacious-size-xl-item-header-top-to-text-space); + --spectrum-accordion-item-header-bottom-to-text-space: var(--system-accordion-spacious-size-xl-item-header-bottom-to-text-space); } + diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index 62b4a13c44..a2bc735928 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -1,339 +1,166 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - z-index: inherit; - min-block-size: var( - --mod-accordion-item-height, - var(--spectrum-accordion-item-height) - ); - min-inline-size: var( - --mod-accordion-item-width, - var(--spectrum-accordion-item-width) - ); - border-block-end: 1px solid #0000; - border-color: var( - --mod-accordion-divider-color, - var(--spectrum-accordion-divider-color) - ); - border-width: var( - --mod-accordion-divider-thickness, - var(--spectrum-divider-thickness-small) - ); - margin: 0; - position: relative; + z-index: inherit; + min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)); + min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + border-block-end: 1px solid #0000; + border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); + border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); + margin: 0; + position: relative; } :host(:first-child) { - border-block-start: 1px solid #0000; - border-color: var( - --mod-accordion-divider-color, - var(--spectrum-accordion-divider-color) - ); - border-width: var( - --mod-accordion-divider-thickness, - var(--spectrum-divider-thickness-small) - ); + border-block-start: 1px solid #0000; + border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); + border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); } #heading { - box-sizing: border-box; - margin: 0; - position: relative; + box-sizing: border-box; + margin: 0; + position: relative; } .iconContainer { - inline-size: var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ); - block-size: var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ); - color: var( - --mod-accordion-item-header-color-default, - var(--spectrum-accordion-item-header-color-default) - ); - justify-content: center; - align-items: center; - padding-inline-start: var( - --mod-accordion-edge-to-disclosure-indicator-space, - var(--spectrum-accordion-edge-to-disclosure-indicator-space) - ); - display: flex; - position: absolute; - inset-block-start: max( - 0px, - calc( - ( - var( - --mod-accordion-min-block-size, - var(--spectrum-accordion-min-block-size) - ) - - var( - --mod-accordion-disclosure-indicator-height, - var( - --spectrum-accordion-disclosure-indicator-height - ) - ) - ) / 2 - ) - ); + inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); + block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); + color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); + justify-content: center; + align-items: center; + padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)); + display: flex; + position: absolute; + inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2)); } -.iconContainer:dir(rtl), -:host([dir='rtl']) .iconContainer { - transform: scaleX(-1); +.iconContainer:dir(rtl), :host([dir="rtl"]) .iconContainer { + transform: scaleX(-1); } #content { - padding-block: var( - --mod-accordion-item-content-area-top-to-content, - var(--spectrum-accordion-item-content-area-top-to-content) - ) - var( - --mod-accordion-item-content-area-bottom-to-content, - var(--spectrum-accordion-item-content-area-bottom-to-content) - ); - padding-inline: var( - --mod-accordion-component-edge-to-text, - var(--spectrum-accordion-component-edge-to-text) - ) - var( - --mod-accordion-component-edge-to-text, - var(--spectrum-accordion-component-edge-to-text) - ); - color: var( - --mod-accordion-item-content-color, - var(--spectrum-accordion-item-content-color) - ); - font-weight: var( - --mod-accordion-item-content-font-weight, - var(--spectrum-accordion-item-content-font-weight) - ); - font-style: var( - --mod-accordion-item-content-font-style, - var(--spectrum-accordion-item-content-font-style) - ); - font-size: var( - --mod-accordion-item-content-font-size, - var(--spectrum-accordion-item-content-font-size) - ); - font-family: var( - --mod-accordion-item-content-font, - var(--spectrum-accordion-item-content-font) - ); - line-height: var( - --mod-accordion-item-content-line-height, - var(--spectrum-accordion-item-content-line-height) - ); - display: none; + padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); + padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)); + color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color)); + font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); + font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); + font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); + font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font)); + line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); + display: none; } #header { - box-sizing: border-box; - padding-block: var( - --mod-accordion-item-header-top-to-text-space, - var(--spectrum-accordion-item-header-top-to-text-space) - ) - var( - --mod-accordion-item-header-bottom-to-text-space, - var(--spectrum-accordion-item-header-bottom-to-text-space) - ); - min-block-size: var( - --mod-accordion-min-block-size, - var(--spectrum-accordion-min-block-size) - ); - line-height: var( - --mod-accordion-item-header-line-height, - var(--spectrum-accordion-item-header-line-height) - ); - text-overflow: ellipsis; - cursor: pointer; - font-size: var( - --mod-accordion-item-header-font-size, - var(--spectrum-accordion-item-header-font-size) - ); - font-weight: var( - --mod-accordion-item-header-font-weight, - var(--spectrum-accordion-item-header-font-weight) - ); - font-style: var( - --mod-accordion-item-header-font-style, - var(--spectrum-accordion-item-header-font-style) - ); - font-family: var( - --mod-accordion-item-header-font, - var(--spectrum-accordion-item-header-font) - ); - appearance: none; - text-align: start; - inline-size: 100%; - color: var( - --mod-accordion-item-header-color-default, - var(--spectrum-accordion-item-header-color-default) - ); - background-color: var( - --mod-accordion-background-color-default, - var(--spectrum-accordion-background-color-default) - ); - border: 0; - justify-content: flex-start; - align-items: center; - padding-inline-start: calc( - var( - --mod-accordion-disclosure-indicator-to-text-space, - var(--spectrum-accordion-disclosure-indicator-to-text-space) - ) + - var( - --mod-accordion-disclosure-indicator-height, - var(--spectrum-accordion-disclosure-indicator-height) - ) - ); - padding-inline-end: var( - --mod-accordion-edge-to-text-space, - var(--spectrum-accordion-edge-to-text-space) - ); - display: flex; - position: relative; + box-sizing: border-box; + padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); + min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)); + line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); + text-overflow: ellipsis; + cursor: pointer; + font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); + font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); + font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); + font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); + appearance: none; + text-align: start; + inline-size: 100%; + color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); + background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); + border: 0; + justify-content: flex-start; + align-items: center; + padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))); + padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); + display: flex; + position: relative; } #header:focus { - outline: none; + outline: none; } #header:focus:after { - content: ''; - position: absolute; - inset-inline-start: 0; + content: ""; + position: absolute; + inset-inline-start: 0; } #header:focus-visible { - border-radius: var( - --mod-accordion-corner-radius, - var(--spectrum-accordion-corner-radius) - ); - outline: var( - --mod-accordion-focus-indicator-thickness, - var(--spectrum-accordion-focus-indicator-thickness) - ) - solid - var( - --mod-accordion-focus-indicator-color, - var(--spectrum-accordion-focus-indicator-color) - ); - background-color: var( - --mod-accordion-background-color-key-focus, - var(--spectrum-accordion-background-color-key-focus) - ); - color: var( - --mod-accordion-item-header-color-key-focus, - var(--spectrum-accordion-item-header-color-key-focus) - ); - outline-offset: calc( - var( - --mod-accordion-focus-indicator-gap, - var(--spectrum-accordion-focus-indicator-gap) - ) * -1 - ); + border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); + background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus)); + color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus)); + outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1); } #header:active { - background-color: var( - --mod-accordion-background-color-down, - var(--spectrum-accordion-background-color-down) - ); - color: var( - --mod-accordion-item-header-color-down, - var(--spectrum-accordion-item-header-color-down) - ); + background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down)); + color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down)); } -:host([disabled]) #header, -:host([disabled]) #header:focus-visible { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); - background-color: initial; +:host([disabled]) #header, :host([disabled]) #header:focus-visible { + color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); + background-color: initial; } @media (hover: hover) { - #header:hover { - background-color: var( - --mod-accordion-background-color-hover, - var(--spectrum-accordion-background-color-hover) - ); - } + #header:hover { + background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); + } - #header:hover, - #header:hover + .iconContainer { - color: var( - --mod-accordion-item-header-color-hover, - var(--spectrum-accordion-item-header-color-hover) - ); - } + #header:hover, #header:hover + .iconContainer { + color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); + } - :host([open]) #header:hover { - background-color: var( - --mod-accordion-background-color-hover, - var(--spectrum-accordion-background-color-hover) - ); - } + :host([open]) #header:hover { + background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); + } - :host([disabled]) #header:hover { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); - background-color: initial; - } + :host([disabled]) #header:hover { + color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); + background-color: initial; + } } :host([disabled]) #header + .iconContainer { - color: var( - --mod-accordion-item-header-disabled-color, - var(--spectrum-accordion-item-header-disabled-color) - ); + color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); } :host([disabled]) #content { - color: var( - --mod-accordion-item-content-disabled-color, - var(--spectrum-accordion-item-content-disabled-color) - ); + color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); } -:host([open]) > #heading > .iconContainer > .indicator, -:host([open]) > .iconContainer > .indicator { - transform: rotate(90deg); - transform: var(--spectrum-logical-rotation,) rotate(90deg); +:host([open]) > #heading > .iconContainer > .indicator, :host([open]) > .iconContainer > .indicator { + transform: rotate(90deg); + transform: var(--spectrum-logical-rotation, ) rotate(90deg); } :host([open]) > #content { - display: block; + display: block; } :host([disabled]) #header { - cursor: default; + cursor: default; } @media (forced-colors: active) { - #header:after { - forced-color-adjust: none; - content: ''; - position: absolute; - inset-inline-start: 0; - } + #header:after { + forced-color-adjust: none; + content: ""; + position: absolute; + inset-inline-start: 0; + } } + diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css index c86c1c4862..979f1a7051 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -1,56 +1,30 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-min-block-size: max( - var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), - calc( - var( - --mod-accordion-item-header-top-to-text-space, - var(--spectrum-accordion-item-header-top-to-text-space) - ) + - var( - --mod-accordion-item-header-bottom-to-text-space, - var(--spectrum-accordion-item-header-bottom-to-text-space) - ) + - var( - --mod-accordion-item-header-font-size, - var(--spectrum-accordion-item-header-font-size) - ) * - var( - --mod-accordion-item-header-line-height, - var(--spectrum-accordion-item-header-line-height) - ) - ) - ); - margin: 0; - padding: 0; - list-style: none; - display: block; + --spectrum-accordion-min-block-size: max(var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)))); + margin: 0; + padding: 0; + list-style: none; + display: block; } -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-accordion-item-header-line-height: var( - --spectrum-accordion-item-header-line-height-cjk - ); - --spectrum-accordion-item-content-line-height: var( - --spectrum-accordion-item-content-line-height-cjk - ); +:host:lang(ja), :host:lang(ko), :host:lang(zh) { + --spectrum-accordion-item-header-line-height: var(--spectrum-accordion-item-header-line-height-cjk); + --spectrum-accordion-item-content-line-height: var(--spectrum-accordion-item-content-line-height-cjk); } -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host:dir(rtl), :host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } + diff --git a/packages/action-bar/src/action-bar-overrides.css b/packages/action-bar/src/action-bar-overrides.css index 704eb774f8..92a7a753fc 100644 --- a/packages/action-bar/src/action-bar-overrides.css +++ b/packages/action-bar/src/action-bar-overrides.css @@ -1,73 +1,38 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actionbar-height: var(--system-action-bar-height); - --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); - --spectrum-actionbar-item-counter-font-size: var( - --system-action-bar-item-counter-font-size - ); - --spectrum-actionbar-item-counter-line-height: var( - --system-action-bar-item-counter-line-height - ); - --spectrum-actionbar-item-counter-color: var( - --system-action-bar-item-counter-color - ); - --spectrum-actionbar-item-counter-line-height-cjk: var( - --system-action-bar-item-counter-line-height-cjk - ); - --spectrum-actionbar-popover-background-color: var( - --system-action-bar-popover-background-color - ); - --spectrum-actionbar-popover-border-color: var( - --system-action-bar-popover-border-color - ); - --spectrum-actionbar-emphasized-background-color: var( - --system-action-bar-emphasized-background-color - ); - --spectrum-actionbar-emphasized-item-counter-color: var( - --system-action-bar-emphasized-item-counter-color - ); - --spectrum-actionbar-spacing-outer-edge: var( - --system-action-bar-spacing-outer-edge - ); - --spectrum-actionbar-spacing-close-button-top: var( - --system-action-bar-spacing-close-button-top - ); - --spectrum-actionbar-spacing-close-button-start: var( - --system-action-bar-spacing-close-button-start - ); - --spectrum-actionbar-spacing-close-button-end: var( - --system-action-bar-spacing-close-button-end - ); - --spectrum-actionbar-spacing-item-counter-top: var( - --system-action-bar-spacing-item-counter-top - ); - --spectrum-actionbar-spacing-item-counter-end: var( - --system-action-bar-spacing-item-counter-end - ); - --spectrum-actionbar-spacing-action-group-top: var( - --system-action-bar-spacing-action-group-top - ); - --spectrum-actionbar-spacing-action-group-end: var( - --system-action-bar-spacing-action-group-end - ); - --spectrum-actionbar-shadow-horizontal: var( - --system-action-bar-shadow-horizontal - ); - --spectrum-actionbar-shadow-vertical: var( - --system-action-bar-shadow-vertical - ); - --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); - --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); + --spectrum-actionbar-height: var(--system-action-bar-height); + --spectrum-actionbar-corner-radius: var(--system-action-bar-corner-radius); + --spectrum-actionbar-item-counter-font-size: var(--system-action-bar-item-counter-font-size); + --spectrum-actionbar-item-counter-line-height: var(--system-action-bar-item-counter-line-height); + --spectrum-actionbar-item-counter-color: var(--system-action-bar-item-counter-color); + --spectrum-actionbar-item-counter-line-height-cjk: var(--system-action-bar-item-counter-line-height-cjk); + --spectrum-actionbar-popover-background-color: var(--system-action-bar-popover-background-color); + --spectrum-actionbar-popover-border-color: var(--system-action-bar-popover-border-color); + --spectrum-actionbar-emphasized-background-color: var(--system-action-bar-emphasized-background-color); + --spectrum-actionbar-emphasized-item-counter-color: var(--system-action-bar-emphasized-item-counter-color); + --spectrum-actionbar-spacing-outer-edge: var(--system-action-bar-spacing-outer-edge); + --spectrum-actionbar-spacing-close-button-top: var(--system-action-bar-spacing-close-button-top); + --spectrum-actionbar-spacing-close-button-start: var(--system-action-bar-spacing-close-button-start); + --spectrum-actionbar-spacing-close-button-end: var(--system-action-bar-spacing-close-button-end); + --spectrum-actionbar-spacing-item-counter-top: var(--system-action-bar-spacing-item-counter-top); + --spectrum-actionbar-spacing-item-counter-end: var(--system-action-bar-spacing-item-counter-end); + --spectrum-actionbar-spacing-action-group-top: var(--system-action-bar-spacing-action-group-top); + --spectrum-actionbar-spacing-action-group-end: var(--system-action-bar-spacing-action-group-end); + --spectrum-actionbar-shadow-horizontal: var(--system-action-bar-shadow-horizontal); + --spectrum-actionbar-shadow-vertical: var(--system-action-bar-shadow-vertical); + --spectrum-actionbar-shadow-blur: var(--system-action-bar-shadow-blur); + --spectrum-actionbar-shadow-color: var(--system-action-bar-shadow-color); } + diff --git a/packages/action-bar/src/spectrum-action-bar.css b/packages/action-bar/src/spectrum-action-bar.css index d12552d3d2..8c14c3a92a 100644 --- a/packages/action-bar/src/spectrum-action-bar.css +++ b/packages/action-bar/src/spectrum-action-bar.css @@ -1,178 +1,99 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host, - :host([emphasized]) #popover { - --highcontrast-actionbar-popover-border-color: CanvasText; - } + :host, :host([emphasized]) #popover { + --highcontrast-actionbar-popover-border-color: CanvasText; + } } :host { - padding: 0 - var( - --mod-actionbar-spacing-outer-edge, - var(--spectrum-actionbar-spacing-outer-edge) - ); - z-index: 1; - box-sizing: border-box; - pointer-events: none; - block-size: 0; - opacity: 0; - inset-block-end: 0; + padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)); + z-index: 1; + box-sizing: border-box; + pointer-events: none; + block-size: 0; + opacity: 0; + inset-block-end: 0; } :host([open]) { - block-size: calc( - var( - --mod-actionbar-spacing-outer-edge, - var(--spectrum-actionbar-spacing-outer-edge) - ) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)) - ); - opacity: 1; + block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height))); + opacity: 1; } #popover { - block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); - box-sizing: border-box; - inline-size: 100%; - border-radius: var( - --mod-actionbar-corner-radius, - var(--spectrum-actionbar-corner-radius) - ); - border-color: var( - --highcontrast-actionbar-popover-border-color, - var( - --mod-actionbar-popover-border-color, - var(--spectrum-actionbar-popover-border-color) - ) - ); - background-color: var( - --mod-actionbar-popover-background-color, - var(--spectrum-actionbar-popover-background-color) - ); - filter: drop-shadow( - var( - --mod-actionbar-shadow-horizontal, - var(--spectrum-actionbar-shadow-horizontal) - ) - var( - --mod-actionbar-shadow-vertical, - var(--spectrum-actionbar-shadow-vertical) - ) - var( - --mod-actionbar-shadow-blur, - var(--spectrum-actionbar-shadow-blur) - ) - var( - --mod-actionbar-shadow-color, - var(--spectrum-actionbar-shadow-color) - ) - ); - pointer-events: auto; - flex-direction: row; - margin: auto; - padding-block: 0; - display: flex; - position: relative; + block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); + box-sizing: border-box; + inline-size: 100%; + border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius)); + border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))); + background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color)); + filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color))); + pointer-events: auto; + flex-direction: row; + margin: auto; + padding-block: 0; + display: flex; + position: relative; } .close-button { - flex-shrink: 0; - margin-block-start: var( - --mod-actionbar-spacing-close-button-top, - var(--spectrum-actionbar-spacing-close-button-top) - ); - margin-inline-start: var( - --mod-actionbar-spacing-close-button-start, - var(--spectrum-actionbar-spacing-close-button-start) - ); - margin-inline-end: var( - --mod-actionbar-spacing-close-button-end, - var(--spectrum-actionbar-spacing-close-button-end) - ); + flex-shrink: 0; + margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top)); + margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start)); + margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end)); } .field-label { - font-size: var( - --mod-actionbar-item-counter-font-size, - var(--spectrum-actionbar-item-counter-font-size) - ); - color: var( - --mod-actionbar-item-counter-color, - var(--spectrum-actionbar-item-counter-color) - ); - line-height: var( - --mod-actionbar-item-counter-line-height, - var(--spectrum-actionbar-item-counter-line-height) - ); - margin-block-start: var( - --mod-actionbar-spacing-item-counter-top, - var(--spectrum-actionbar-spacing-item-counter-top) - ); - margin-inline-end: var( - --mod-actionbar-spacing-item-counter-end, - var(--spectrum-actionbar-spacing-item-counter-end) - ); - padding: 0; + font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size)); + color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); + line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height)); + margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top)); + margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end)); + padding: 0; } -.field-label:lang(ja), -.field-label:lang(ko), -.field-label:lang(zh) { - line-height: var( - --mod-actionbar-item-counter-line-height-cjk, - var(--spectrum-actionbar-item-counter-line-height-cjk) - ); +.field-label:lang(ja), .field-label:lang(ko), .field-label:lang(zh) { + line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk)); } .action-group { - margin-block-start: var( - --mod-actionbar-spacing-action-group-top, - var(--spectrum-actionbar-spacing-action-group-top) - ); - margin-inline-start: auto; - margin-inline-end: var( - --mod-actionbar-spacing-action-group-end, - var(--spectrum-actionbar-spacing-action-group-end) - ); + margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top)); + margin-inline-start: auto; + margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end)); } :host([emphasized]) #popover { - filter: none; - background-color: var( - --mod-actionbar-emphasized-background-color, - var(--spectrum-actionbar-emphasized-background-color) - ); - border-color: #0000; + filter: none; + background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color)); + border-color: #0000; } :host([emphasized]) .field-label { - color: var( - --mod-actionbar-emphasized-item-counter-color, - var(--spectrum-actionbar-emphasized-item-counter-color) - ); + color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color)); } -:host([variant='sticky']) { - position: sticky; - inset-inline: 0; +:host([variant="sticky"]) { + position: sticky; + inset-inline: 0; } -:host([variant='fixed']) { - position: fixed; +:host([variant="fixed"]) { + position: fixed; } :host([flexible]) #popover { - inline-size: auto; + inline-size: auto; } + diff --git a/packages/action-button/src/action-button-overrides.css b/packages/action-button/src/action-button-overrides.css index 18725b2d1a..7eae159e6c 100644 --- a/packages/action-button/src/action-button-overrides.css +++ b/packages/action-button/src/action-button-overrides.css @@ -1,591 +1,246 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actionbutton-animation-duration: var( - --system-action-button-animation-duration - ); - --spectrum-actionbutton-border-radius: var( - --system-action-button-border-radius - ); - --spectrum-actionbutton-border-width: var( - --system-action-button-border-width - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-content-color-focus - ); - --spectrum-actionbutton-focus-indicator-gap: var( - --system-action-button-focus-indicator-gap - ); - --spectrum-actionbutton-focus-indicator-thickness: var( - --system-action-button-focus-indicator-thickness - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-focus-indicator-color - ); - --spectrum-actionbutton-background-color-default: var( - --system-action-button-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-background-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-border-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-border-color-disabled - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-content-color-disabled - ); - --spectrum-actionbutton-min-width: var(--system-action-button-min-width); - --spectrum-actionbutton-height: var(--system-action-button-height); - --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); - --spectrum-actionbutton-font-size: var(--system-action-button-font-size); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-edge-to-text-size - ); + --spectrum-actionbutton-animation-duration: var(--system-action-button-animation-duration); + --spectrum-actionbutton-border-radius: var(--system-action-button-border-radius); + --spectrum-actionbutton-border-width: var(--system-action-button-border-width); + --spectrum-actionbutton-content-color-default: var(--system-action-button-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-content-color-focus); + --spectrum-actionbutton-focus-indicator-gap: var(--system-action-button-focus-indicator-gap); + --spectrum-actionbutton-focus-indicator-thickness: var(--system-action-button-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-focus-indicator-color); + --spectrum-actionbutton-background-color-default: var(--system-action-button-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-background-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-action-button-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-border-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-border-color-disabled); + --spectrum-actionbutton-content-color-disabled: var(--system-action-button-content-color-disabled); + --spectrum-actionbutton-min-width: var(--system-action-button-min-width); + --spectrum-actionbutton-height: var(--system-action-button-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-edge-to-text-size); } :host([quiet]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-quiet-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-quiet-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-quiet-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-quiet-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-quiet-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-quiet-border-color-disabled - ); + --spectrum-actionbutton-background-color-default: var(--system-action-button-quiet-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-quiet-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-quiet-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-quiet-background-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-quiet-background-color-disabled); + --spectrum-actionbutton-border-color-default: var(--system-action-button-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-quiet-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-quiet-border-color-disabled); } :host([selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-selected-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-selected-content-color-focus - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-selected-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-selected-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-selected-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-selected-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-selected-border-color-disabled - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-selected-background-color-disabled - ); + --spectrum-actionbutton-background-color-default: var(--system-action-button-selected-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-selected-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-selected-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-selected-background-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-action-button-selected-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-selected-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-selected-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-selected-content-color-focus); + --spectrum-actionbutton-border-color-default: var(--system-action-button-selected-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-selected-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-selected-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-selected-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-selected-border-color-disabled); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-selected-background-color-disabled); } :host([selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-selected-emphasized-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-selected-emphasized-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-selected-emphasized-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-selected-emphasized-content-color-focus - ); -} - -:host([static-color='black'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-black-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-black-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-black-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-black-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-quiet-border-color-disabled - ); -} - -:host([static-color='white'][quiet]) { - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-white-quiet-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-white-quiet-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-white-quiet-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-white-quiet-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-quiet-border-color-disabled - ); -} - -:host([static-color='black']) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-black-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-black-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-black-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-black-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-black-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-content-color-focus - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-static-black-content-color-disabled - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-black-focus-indicator-color - ); -} - -:host([static-color='black'][selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-selected-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-black-selected-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-black-selected-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-selected-content-color-focus - ); -} - -:host([static-color='black'][selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-black-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-black-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-black-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-black-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-black-selected-emphasized-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-black-selected-emphasized-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-black-selected-emphasized-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-black-selected-emphasized-content-color-focus - ); -} - -:host([static-color='white']) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-white-background-color-disabled - ); - --spectrum-actionbutton-border-color-default: var( - --system-action-button-static-white-border-color-default - ); - --spectrum-actionbutton-border-color-hover: var( - --system-action-button-static-white-border-color-hover - ); - --spectrum-actionbutton-border-color-down: var( - --system-action-button-static-white-border-color-down - ); - --spectrum-actionbutton-border-color-focus: var( - --system-action-button-static-white-border-color-focus - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-white-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-white-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-white-content-color-focus - ); - --spectrum-actionbutton-content-color-disabled: var( - --system-action-button-static-white-content-color-disabled - ); - --spectrum-actionbutton-focus-indicator-color: var( - --system-action-button-static-white-focus-indicator-color - ); -} - -:host([static-color='white'][selected]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-selected-background-color-focus - ); - --spectrum-actionbutton-background-color-disabled: var( - --system-action-button-static-white-selected-background-color-disabled - ); - --spectrum-actionbutton-border-color-disabled: var( - --system-action-button-static-white-selected-border-color-disabled - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-selected-content-color-default - ); - --spectrum-actionbutton-content-color-hover: var( - --system-action-button-static-white-selected-content-color-hover - ); - --spectrum-actionbutton-content-color-down: var( - --system-action-button-static-white-selected-content-color-down - ); - --spectrum-actionbutton-content-color-focus: var( - --system-action-button-static-white-selected-content-color-focus - ); -} - -:host([static-color='white'][selected][emphasized]) { - --spectrum-actionbutton-background-color-default: var( - --system-action-button-static-white-selected-emphasized-background-color-default - ); - --spectrum-actionbutton-background-color-hover: var( - --system-action-button-static-white-selected-emphasized-background-color-hover - ); - --spectrum-actionbutton-background-color-down: var( - --system-action-button-static-white-selected-emphasized-background-color-down - ); - --spectrum-actionbutton-background-color-focus: var( - --system-action-button-static-white-selected-emphasized-background-color-focus - ); - --spectrum-actionbutton-content-color-default: var( - --system-action-button-static-white-selected-emphasized-content-color-default - ); + --spectrum-actionbutton-background-color-default: var(--system-action-button-selected-emphasized-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-selected-emphasized-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-selected-emphasized-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-selected-emphasized-background-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-action-button-selected-emphasized-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-selected-emphasized-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-selected-emphasized-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-selected-emphasized-content-color-focus); +} + +:host([static-color="black"][quiet]) { + --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-quiet-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-quiet-border-color-disabled); +} + +:host([static-color="white"][quiet]) { + --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-quiet-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-quiet-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-quiet-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-quiet-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-quiet-border-color-disabled); +} + +:host([static-color="black"]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-background-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-black-background-color-disabled); + --spectrum-actionbutton-border-color-default: var(--system-action-button-static-black-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-black-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-static-black-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-black-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-border-color-disabled); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-black-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-black-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-black-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-black-content-color-focus); + --spectrum-actionbutton-content-color-disabled: var(--system-action-button-static-black-content-color-disabled); + --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-static-black-focus-indicator-color); +} + +:host([static-color="black"][selected]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-selected-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-selected-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-selected-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-selected-background-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-black-selected-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-black-selected-border-color-disabled); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-black-selected-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-black-selected-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-black-selected-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-black-selected-content-color-focus); +} + +:host([static-color="black"][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-black-selected-emphasized-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-black-selected-emphasized-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-black-selected-emphasized-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-black-selected-emphasized-background-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-black-selected-emphasized-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-black-selected-emphasized-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-black-selected-emphasized-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-black-selected-emphasized-content-color-focus); +} + +:host([static-color="white"]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-background-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-background-color-disabled); + --spectrum-actionbutton-border-color-default: var(--system-action-button-static-white-border-color-default); + --spectrum-actionbutton-border-color-hover: var(--system-action-button-static-white-border-color-hover); + --spectrum-actionbutton-border-color-down: var(--system-action-button-static-white-border-color-down); + --spectrum-actionbutton-border-color-focus: var(--system-action-button-static-white-border-color-focus); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-border-color-disabled); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-white-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-white-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-white-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-white-content-color-focus); + --spectrum-actionbutton-content-color-disabled: var(--system-action-button-static-white-content-color-disabled); + --spectrum-actionbutton-focus-indicator-color: var(--system-action-button-static-white-focus-indicator-color); +} + +:host([static-color="white"][selected]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-selected-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-selected-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-selected-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-selected-background-color-focus); + --spectrum-actionbutton-background-color-disabled: var(--system-action-button-static-white-selected-background-color-disabled); + --spectrum-actionbutton-border-color-disabled: var(--system-action-button-static-white-selected-border-color-disabled); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-white-selected-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--system-action-button-static-white-selected-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--system-action-button-static-white-selected-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--system-action-button-static-white-selected-content-color-focus); +} + +:host([static-color="white"][selected][emphasized]) { + --spectrum-actionbutton-background-color-default: var(--system-action-button-static-white-selected-emphasized-background-color-default); + --spectrum-actionbutton-background-color-hover: var(--system-action-button-static-white-selected-emphasized-background-color-hover); + --spectrum-actionbutton-background-color-down: var(--system-action-button-static-white-selected-emphasized-background-color-down); + --spectrum-actionbutton-background-color-focus: var(--system-action-button-static-white-selected-emphasized-background-color-focus); + --spectrum-actionbutton-content-color-default: var(--system-action-button-static-white-selected-emphasized-content-color-default); } :host { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-m-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-m-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-m-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-m-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-m-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-m-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-m-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-m-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-m-edge-to-text-size - ); -} - -:host([size='xs']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-xs-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-xs-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-xs-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-xs-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-xs-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-xs-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-xs-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-xs-edge-to-text-size - ); -} - -:host([size='s']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-s-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-s-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-s-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-s-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-s-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-s-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-s-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-s-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-s-edge-to-text-size - ); + --spectrum-actionbutton-min-width: var(--system-action-button-size-m-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-m-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-m-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-m-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-m-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-m-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-m-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-m-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-m-edge-to-text-size); +} + +:host([size="xs"]) { + --spectrum-actionbutton-min-width: var(--system-action-button-size-xs-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-xs-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-xs-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-xs-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-xs-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-xs-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-xs-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-xs-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-xs-edge-to-text-size); +} + +:host([size="s"]) { + --spectrum-actionbutton-min-width: var(--system-action-button-size-s-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-s-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-s-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-s-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-s-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-s-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-s-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-s-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-s-edge-to-text-size); +} + +:host([size="l"]) { + --spectrum-actionbutton-min-width: var(--system-action-button-size-l-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-l-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-l-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-l-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-l-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-l-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-l-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-l-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-l-edge-to-text-size); +} + +:host([size="xl"]) { + --spectrum-actionbutton-min-width: var(--system-action-button-size-xl-min-width); + --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); + --spectrum-actionbutton-icon-size: var(--system-action-button-size-xl-icon-size); + --spectrum-actionbutton-font-size: var(--system-action-button-size-xl-font-size); + --spectrum-actionbutton-text-to-visual: var(--system-action-button-size-xl-text-to-visual); + --spectrum-actionbutton-edge-to-hold-icon: var(--system-action-button-size-xl-edge-to-hold-icon); + --spectrum-actionbutton-edge-to-visual-size: var(--system-action-button-size-xl-edge-to-visual-size); + --spectrum-actionbutton-edge-to-visual-only-size: var(--system-action-button-size-xl-edge-to-visual-only-size); + --spectrum-actionbutton-edge-to-text-size: var(--system-action-button-size-xl-edge-to-text-size); } -:host([size='l']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-l-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-l-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-l-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-l-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-l-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-l-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-l-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-l-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-l-edge-to-text-size - ); -} - -:host([size='xl']) { - --spectrum-actionbutton-min-width: var( - --system-action-button-size-xl-min-width - ); - --spectrum-actionbutton-height: var(--system-action-button-size-xl-height); - --spectrum-actionbutton-icon-size: var( - --system-action-button-size-xl-icon-size - ); - --spectrum-actionbutton-font-size: var( - --system-action-button-size-xl-font-size - ); - --spectrum-actionbutton-text-to-visual: var( - --system-action-button-size-xl-text-to-visual - ); - --spectrum-actionbutton-edge-to-hold-icon: var( - --system-action-button-size-xl-edge-to-hold-icon - ); - --spectrum-actionbutton-edge-to-visual-size: var( - --system-action-button-size-xl-edge-to-visual-size - ); - --spectrum-actionbutton-edge-to-visual-only-size: var( - --system-action-button-size-xl-edge-to-visual-only-size - ); - --spectrum-actionbutton-edge-to-text-size: var( - --system-action-button-size-xl-edge-to-text-size - ); -} diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css index 0555c62e68..6d487daf13 100644 --- a/packages/action-button/src/spectrum-action-button.css +++ b/packages/action-button/src/spectrum-action-button.css @@ -1,529 +1,219 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - border-style: solid; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + border-style: solid; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } -:host([disabled]), -:host([disabled]) { - cursor: default; +:host([disabled]), :host([disabled]) { + cursor: default; } -::slotted([slot='icon']) { - max-block-size: 100%; - flex-shrink: 0; +::slotted([slot="icon"]) { + max-block-size: 100%; + flex-shrink: 0; } #label { - text-align: center; - place-self: center; + text-align: center; + place-self: center; } #label:empty { - display: none; + display: none; } @media (forced-colors: active) { - :host { - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - } - - :host:after { - forced-color-adjust: none; - } - - :host([selected]) { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - } - - :host([selected]) .hold-affordance, - :host([selected]) ::slotted([slot='icon']), - :host([selected]) #label { - forced-color-adjust: none; - } + :host { + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + } + + :host:after { + forced-color-adjust: none; + } + + :host([selected]) { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + } + + :host([selected]) .hold-affordance, :host([selected]) ::slotted([slot="icon"]), :host([selected]) #label { + forced-color-adjust: none; + } } :host { - --spectrum-actionbutton-focus-indicator-border-radius: calc( - var(--spectrum-actionbutton-border-radius) + - var(--spectrum-actionbutton-focus-indicator-gap) - ); - --spectrum-actionbutton-edge-to-visual: calc( - var(--spectrum-actionbutton-edge-to-visual-size) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-text: calc( - var(--spectrum-actionbutton-edge-to-text-size) - - var(--spectrum-actionbutton-border-width) - ); - --spectrum-actionbutton-edge-to-visual-only: calc( - var(--spectrum-actionbutton-edge-to-visual-only-size) - - var(--spectrum-actionbutton-border-width) - ); - min-inline-size: var( - --mod-actionbutton-min-width, - var(--spectrum-actionbutton-min-width) - ); - block-size: var( - --mod-actionbutton-height, - var(--spectrum-actionbutton-height) - ); - border-radius: var( - --mod-actionbutton-border-radius, - var(--spectrum-actionbutton-border-radius) - ); - border-width: var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ); - gap: calc( - var( - --mod-actionbutton-text-to-visual, - var(--spectrum-actionbutton-text-to-visual) - ) + - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ); - padding-inline: var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ); - background-color: var( - --highcontrast-actionbutton-background-color-default, - var( - --mod-actionbutton-background-color-default, - var(--spectrum-actionbutton-background-color-default) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-default, - var( - --mod-actionbutton-border-color-default, - var(--spectrum-actionbutton-border-color-default) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-default, - var( - --mod-actionbutton-content-color-default, - var(--spectrum-actionbutton-content-color-default) - ) - ); - position: relative; -} - -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + --spectrum-actionbutton-edge-to-visual: calc(var(--spectrum-actionbutton-edge-to-visual-size) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-text: calc(var(--spectrum-actionbutton-edge-to-text-size) - var(--spectrum-actionbutton-border-width)); + --spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-actionbutton-edge-to-visual-only-size) - var(--spectrum-actionbutton-border-width)); + min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); + border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + border-width: var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width)); + gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))); + padding-inline: var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + border-color: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); + position: relative; +} + +:host:dir(rtl), :host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } @media (hover: hover) { - :host(:hover) { - background-color: var( - --highcontrast-actionbutton-background-color-hover, - var( - --mod-actionbutton-background-color-hover, - var(--spectrum-actionbutton-background-color-hover) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-hover, - var( - --mod-actionbutton-border-color-hover, - var(--spectrum-actionbutton-border-color-hover) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-hover, - var( - --mod-actionbutton-content-color-hover, - var(--spectrum-actionbutton-content-color-hover) - ) - ); - } + :host(:hover) { + background-color: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + border-color: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover))); + color: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); + } } :host(:focus-visible) { - background-color: var( - --highcontrast-actionbutton-background-color-focus, - var( - --mod-actionbutton-background-color-focus, - var(--spectrum-actionbutton-background-color-focus) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-focus, - var( - --mod-actionbutton-border-color-focus, - var(--spectrum-actionbutton-border-color-focus) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-focus, - var( - --mod-actionbutton-content-color-focus, - var(--spectrum-actionbutton-content-color-focus) - ) - ); + background-color: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + border-color: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus))); + color: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-actionbutton-background-color-down, - var( - --mod-actionbutton-background-color-down, - var(--spectrum-actionbutton-background-color-down) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-down, - var( - --mod-actionbutton-border-color-down, - var(--spectrum-actionbutton-border-color-down) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-down, - var( - --mod-actionbutton-content-color-down, - var(--spectrum-actionbutton-content-color-down) - ) - ); + background-color: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + border-color: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down))); + color: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); } -:host([disabled]), -:host([disabled]) { - background-color: var( - --highcontrast-actionbutton-background-color-disabled, - var( - --mod-actionbutton-background-color-disabled, - var(--spectrum-actionbutton-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-actionbutton-border-color-disabled, - var( - --mod-actionbutton-border-color-disabled, - var(--spectrum-actionbutton-border-color-disabled) - ) - ); - color: var( - --highcontrast-actionbutton-content-color-disabled, - var( - --mod-actionbutton-content-color-disabled, - var(--spectrum-actionbutton-content-color-disabled) - ) - ); +:host([disabled]), :host([disabled]) { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } :host([selected]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected - ); + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected); } :host([selected][emphasized]) { - --mod-actionbutton-background-color-default: var( - --mod-actionbutton-background-color-default-selected-emphasized - ); - --mod-actionbutton-background-color-hover: var( - --mod-actionbutton-background-color-hover-selected-emphasized - ); - --mod-actionbutton-background-color-down: var( - --mod-actionbutton-background-color-down-selected-emphasized - ); - --mod-actionbutton-background-color-focus: var( - --mod-actionbutton-background-color-focus-selected-emphasized - ); - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-content-color-default-selected-emphasized - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-content-color-hover-selected-emphasized - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-content-color-down-selected-emphasized - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-content-color-focus-selected-emphasized - ); + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized); } -:host([selected][static-color='black']), -:host([selected][static-color='white']) { - --mod-actionbutton-content-color-default: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-hover: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-down: var( - --mod-actionbutton-static-content-color - ); - --mod-actionbutton-content-color-focus: var( - --mod-actionbutton-static-content-color - ); +:host([selected][static-color="black"]), :host([selected][static-color="white"]) { + --mod-actionbutton-content-color-default: var(--mod-actionbutton-static-content-color); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-static-content-color); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-static-content-color); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-static-content-color); } -::slotted([slot='icon']) { - inline-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) - ); - block-size: var( - --mod-actionbutton-icon-size, - var(--spectrum-actionbutton-icon-size) - ); - color: inherit; - margin-inline-start: calc( - var( - --mod-actionbutton-edge-to-visual, - var(--spectrum-actionbutton-edge-to-visual) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); - margin-inline-end: calc( - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); +::slotted([slot="icon"]) { + inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + color: inherit; + margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); + margin-inline-end: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); } -.hold-affordance + ::slotted([slot='icon']), -[icon-only]::slotted([slot='icon']) { - margin-inline-start: calc( - var( - --mod-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - - var( - --mod-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - ); +.hold-affordance + ::slotted([slot="icon"]), [icon-only]::slotted([slot="icon"]) { + margin-inline-start: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text))); } #label { - pointer-events: none; - font-size: var( - --mod-actionbutton-font-size, - var(--spectrum-actionbutton-font-size) - ); - white-space: nowrap; - color: inherit; - color: var(--mod-actionbutton-label-color, inherit); - text-overflow: ellipsis; - overflow: hidden; + pointer-events: none; + font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); + white-space: nowrap; + color: inherit; + color: var(--mod-actionbutton-label-color, inherit); + text-overflow: ellipsis; + overflow: hidden; } .hold-affordance { - color: inherit; - transform: var(--spectrum-logical-rotation); - position: absolute; - inset-block-end: calc( - var( - --mod-actionbutton-edge-to-hold-icon, - var(--spectrum-actionbutton-edge-to-hold-icon) - ) - - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ); - inset-inline-end: calc( - var( - --mod-actionbutton-edge-to-hold-icon, - var(--spectrum-actionbutton-edge-to-hold-icon) - ) - - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ); + color: inherit; + transform: var(--spectrum-logical-rotation); + position: absolute; + inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); + inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))); } :host { - transition: border-color - var( - --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) - ) - ease-in-out; + transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; } :host:after { - margin: calc( - ( - var( - --mod-actionbutton-focus-indicator-gap, - var(--spectrum-actionbutton-focus-indicator-gap) - ) + - var( - --mod-actionbutton-border-width, - var(--spectrum-actionbutton-border-width) - ) - ) * -1 - ); - border-radius: var( - --mod-actionbutton-focus-indicator-border-radius, - var(--spectrum-actionbutton-focus-indicator-border-radius) - ); - transition: box-shadow - var( - --mod-actionbutton-animation-duration, - var(--spectrum-actionbutton-animation-duration) - ) - ease-in-out; - pointer-events: none; - content: ''; - position: absolute; - inset: 0; + margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--mod-actionbutton-border-width, var(--spectrum-actionbutton-border-width))) * -1); + border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); + transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out; + pointer-events: none; + content: ""; + position: absolute; + inset: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-actionbutton-focus-indicator-thickness, - var(--spectrum-actionbutton-focus-indicator-thickness) - ) - var( - --highcontrast-actionbutton-focus-indicator-color, - var( - --mod-actionbutton-focus-indicator-color, - var(--spectrum-actionbutton-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); } + diff --git a/packages/action-group/src/action-group-overrides.css b/packages/action-group/src/action-group-overrides.css index 35cd126ebc..0143fc69c4 100644 --- a/packages/action-group/src/action-group-overrides.css +++ b/packages/action-group/src/action-group-overrides.css @@ -1,84 +1,49 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-actiongroup-gap-size-compact: var( - --system-action-group-gap-size-compact - ); - --spectrum-actiongroup-horizontal-spacing-compact: var( - --system-action-group-horizontal-spacing-compact - ); - --spectrum-actiongroup-vertical-spacing-compact: var( - --system-action-group-vertical-spacing-compact - ); - --spectrum-actiongroup-button-spacing-reset: var( - --system-action-group-button-spacing-reset - ); - --spectrum-actiongroup-border-radius-reset: var( - --system-action-group-border-radius-reset - ); - --spectrum-actiongroup-border-radius: var( - --system-action-group-border-radius - ); - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-vertical-spacing-regular - ); + --spectrum-actiongroup-gap-size-compact: var(--system-action-group-gap-size-compact); + --spectrum-actiongroup-horizontal-spacing-compact: var(--system-action-group-horizontal-spacing-compact); + --spectrum-actiongroup-vertical-spacing-compact: var(--system-action-group-vertical-spacing-compact); + --spectrum-actiongroup-button-spacing-reset: var(--system-action-group-button-spacing-reset); + --spectrum-actiongroup-border-radius-reset: var(--system-action-group-border-radius-reset); + --spectrum-actiongroup-border-radius: var(--system-action-group-border-radius); + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-vertical-spacing-regular); } -:host([size='xs']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-xs-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-xs-vertical-spacing-regular - ); +:host([size="xs"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-xs-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-xs-vertical-spacing-regular); } -:host([size='s']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-s-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-s-vertical-spacing-regular - ); +:host([size="s"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-s-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-s-vertical-spacing-regular); } :host { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-m-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-m-vertical-spacing-regular - ); + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-m-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-m-vertical-spacing-regular); } -:host([size='l']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-l-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-l-vertical-spacing-regular - ); +:host([size="l"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-l-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-l-vertical-spacing-regular); } -:host([size='xl']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --system-action-group-size-xl-horizontal-spacing-regular - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --system-action-group-size-xl-vertical-spacing-regular - ); +:host([size="xl"]) { + --spectrum-actiongroup-horizontal-spacing-regular: var(--system-action-group-size-xl-horizontal-spacing-regular); + --spectrum-actiongroup-vertical-spacing-regular: var(--system-action-group-size-xl-vertical-spacing-regular); } + diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 462d1c72e2..f45ba3b6e2 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -1,238 +1,122 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - gap: var( - --mod-actiongroup-horizontal-spacing-regular, - var(--spectrum-actiongroup-horizontal-spacing-regular) - ); - flex-wrap: wrap; - display: flex; + gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular)); + flex-wrap: wrap; + display: flex; } ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } ::slotted(:focus-visible) { - z-index: 3; + z-index: 3; } :host(:not([vertical]):not([compact])) ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } :host([vertical]) { - gap: var( - --mod-actiongroup-vertical-spacing-regular, - var(--spectrum-actiongroup-vertical-spacing-regular) - ); - flex-direction: column; - display: inline-flex; + gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular)); + flex-direction: column; + display: inline-flex; } :host([compact]) { - gap: var( - --mod-actiongroup-gap-size-compact, - var(--spectrum-actiongroup-gap-size-compact) - ); + gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); } :host([compact]:not([quiet])) { - flex-wrap: nowrap; + flex-wrap: nowrap; } :host([compact]:not([quiet])) ::slotted(*) { - border-radius: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); - z-index: 0; - position: relative; + border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); + z-index: 0; + position: relative; } :host([compact]:not([quiet])) ::slotted(:first-child) { - --mod-actionbutton-focus-indicator-border-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-start-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-inline-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } :host([compact]:not([quiet])) ::slotted(:not(:first-child)) { - --mod-actionbutton-focus-indicator-border-radius: 0px; - margin-inline-start: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px; + margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); } :host([compact]:not([quiet])) ::slotted(:last-child) { - --mod-actionbutton-focus-indicator-border-radius: 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px; - border-start-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-inline-start: var( - --mod-actiongroup-horizontal-spacing-compact, - var(--spectrum-actiongroup-horizontal-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; + border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); + margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); } :host([compact]:not([quiet])) ::slotted([selected]) { - z-index: 1; + z-index: 1; } @media (hover: hover) { - :host([compact]:not([quiet])) ::slotted(:hover) { - z-index: 2; - } + :host([compact]:not([quiet])) ::slotted(:hover) { + z-index: 2; + } } :host([compact]:not([quiet])) ::slotted(:focus-visible) { - z-index: 3; + z-index: 3; } :host([compact]:not([quiet])[vertical]) { - gap: var( - --mod-actiongroup-gap-size-compact, - var(--spectrum-actiongroup-gap-size-compact) - ); + gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact)); } :host([compact][vertical]:not([quiet])) ::slotted(*) { - border-radius: var( - --mod-actiongroup-border-radius-reset, - var(--spectrum-actiongroup-border-radius-reset) - ); + border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); } :host([compact][vertical]:not([quiet])) ::slotted(:first-child) { - --mod-actionbutton-focus-indicator-border-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - 0px 0px; - border-start-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-start-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-block-start: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-block-end: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-inline-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; + border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } :host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)) { - margin-block-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); - margin-block-end: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-inline-start: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); - margin-inline-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); + margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } :host([compact][vertical]:not([quiet])) ::slotted(:last-child) { - --mod-actionbutton-focus-indicator-border-radius: 0px 0px - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ) - var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-end-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - border-end-start-radius: var( - --mod-actiongroup-border-radius, - var(--spectrum-actiongroup-border-radius) - ); - margin-block-start: var( - --mod-actiongroup-vertical-spacing-compact, - var(--spectrum-actiongroup-vertical-spacing-compact) - ); - margin-block-end: var( - --mod-actiongroup-button-spacing-reset, - var(--spectrum-actiongroup-button-spacing-reset) - ); + --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); + margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } :host([justified]) ::slotted(*) { - flex: 1; + flex: 1; } + diff --git a/packages/alert-banner/src/alert-banner-overrides.css b/packages/alert-banner/src/alert-banner-overrides.css index 9277a33b05..eeb346aa71 100644 --- a/packages/alert-banner/src/alert-banner-overrides.css +++ b/packages/alert-banner/src/alert-banner-overrides.css @@ -1,45 +1,32 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-banner-neutral-background: var( - --system-alert-banner-neutral-background - ); - --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); - --spectrum-alert-banner-max-inline-size: var( - --system-alert-banner-max-inline-size - ); - --spectrum-alert-banner-size: var(--system-alert-banner-size); - --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); - --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); - --spectrum-alert-banner-icon-to-text: var( - --system-alert-banner-icon-to-text - ); - --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); - --spectrum-alert-banner-text-to-button-horizontal: var( - --system-alert-banner-text-to-button-horizontal - ); - --spectrum-alert-banner-text-to-divider: var( - --system-alert-banner-text-to-divider - ); - --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); - --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); - --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); - --spectrum-alert-banner-informative-background: var( - --system-alert-banner-informative-background - ); - --spectrum-alert-banner-negative-background: var( - --system-alert-banner-negative-background - ); - --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); + --spectrum-alert-banner-neutral-background: var(--system-alert-banner-neutral-background); + --spectrum-alert-banner-min-height: var(--system-alert-banner-min-height); + --spectrum-alert-banner-max-inline-size: var(--system-alert-banner-max-inline-size); + --spectrum-alert-banner-size: var(--system-alert-banner-size); + --spectrum-alert-banner-font-size: var(--system-alert-banner-font-size); + --spectrum-alert-banner-icon-size: var(--system-alert-banner-icon-size); + --spectrum-alert-banner-icon-to-text: var(--system-alert-banner-icon-to-text); + --spectrum-alert-banner-start-edge: var(--system-alert-banner-start-edge); + --spectrum-alert-banner-text-to-button-horizontal: var(--system-alert-banner-text-to-button-horizontal); + --spectrum-alert-banner-text-to-divider: var(--system-alert-banner-text-to-divider); + --spectrum-alert-banner-top-icon: var(--system-alert-banner-top-icon); + --spectrum-alert-banner-top-text: var(--system-alert-banner-top-text); + --spectrum-alert-banner-bottom-text: var(--system-alert-banner-bottom-text); + --spectrum-alert-banner-informative-background: var(--system-alert-banner-informative-background); + --spectrum-alert-banner-negative-background: var(--system-alert-banner-negative-background); + --spectrum-alert-banner-font-color: var(--system-alert-banner-font-color); } + diff --git a/packages/alert-banner/src/spectrum-alert-banner.css b/packages/alert-banner/src/spectrum-alert-banner.css index 49c1693029..eda50a3c0e 100644 --- a/packages/alert-banner/src/spectrum-alert-banner.css +++ b/packages/alert-banner/src/spectrum-alert-banner.css @@ -1,166 +1,86 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-divider-vertical-margin: var( - --mod-alert-banner-edge-to-divider, - var(--spectrum-alert-banner-edge-to-divider) - ); - --mod-divider-vertical-height: auto; - --mod-divider-vertical-align: stretch; - --mod-button-margin-block: var( - --mod-alert-banner-edge-to-button, - var(--spectrum-alert-banner-edge-to-button) - ); - --mod-button-margin-right: var( - --mod-alert-banner-text-to-divider, - var(--spectrum-alert-banner-text-to-divider) - ); - --mod-button-margin-left: auto; - --mod-closebutton-margin-inline: var( - --mod-alert-banner-close-button-spacing, - var(--spectrum-alert-banner-close-button-spacing) - ); - --mod-closebutton-margin-top: var( - --mod-alert-banner-close-button-spacing, - var(--spectrum-alert-banner-close-button-spacing) - ); - --mod-closebutton-align-self: flex-start; - inline-size: var( - --mod-alert-banner-size, - var(--spectrum-alert-banner-size) - ); - max-inline-size: var( - --mod-alert-banner-max-inline-size, - var(--spectrum-alert-banner-max-inline-size) - ); - min-block-size: var( - --mod-alert-banner-min-height, - var(--spectrum-alert-banner-min-height) - ); - font-size: var( - --mod-alert-banner-font-size, - var(--spectrum-alert-banner-font-size) - ); - color: var( - --mod-alert-banner-font-color, - var(--spectrum-alert-banner-font-color) - ); - background-color: var( - --mod-alert-banner-neutral-background, - var( - --mod-alert-banner-neutral-background, - var(--spectrum-alert-banner-neutral-background) - ) - ); - border: 0 solid #0000; - border: var(--highcontrast-alert-banner-border-width, 0) solid - var(--highcontrast-alert-banner-border-color, transparent); - justify-content: space-between; - display: none; + --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); + --mod-divider-vertical-height: auto; + --mod-divider-vertical-align: stretch; + --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); + --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider)); + --mod-button-margin-left: auto; + --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); + --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); + --mod-closebutton-align-self: flex-start; + inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); + max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size)); + min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); + font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); + color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); + background-color: var(--mod-alert-banner-neutral-background, var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background))); + border: 0 solid #0000; + border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); + justify-content: space-between; + display: none; } :host([open]) { - display: flex; + display: flex; } -:host([variant='info']) { - background-color: var( - --mod-alert-banner-informative-background, - var(--spectrum-alert-banner-informative-background) - ); +:host([variant="info"]) { + background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background)); } -:host([variant='negative']) { - background-color: var( - --mod-alert-banner-negative-background, - var(--spectrum-alert-banner-negative-background) - ); +:host([variant="negative"]) { + background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background)); } .body { - inline-size: 100%; - gap: max( - calc( - var( - --mod-alert-banner-text-to-button-vertical, - var(--spectrum-alert-banner-text-to-button-vertical) - ) - - var( - --mod-alert-banner-edge-to-button, - var(--spectrum-alert-banner-edge-to-button) - ) - ), - 0px - ); - flex-wrap: wrap; - align-items: center; - margin-inline-start: var( - --mod-alert-banner-start-edge, - var(--spectrum-alert-banner-start-edge) - ); - display: flex; + inline-size: 100%; + gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px); + flex-wrap: wrap; + align-items: center; + margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge)); + display: flex; } .content { - display: flex; + display: flex; } .end { - align-items: center; - display: flex; + align-items: center; + display: flex; } .type { - inline-size: var( - --mod-alert-banner-icon-size, - var(--spectrum-alert-banner-icon-size) - ); - block-size: var( - --mod-alert-banner-icon-size, - var(--spectrum-alert-banner-icon-size) - ); - flex-shrink: 0; - margin-block-start: var( - --mod-alert-banner-top-icon, - var(--spectrum-alert-banner-top-icon) - ); - margin-inline-end: var( - --mod-alert-banner-icon-to-text, - var(--spectrum-alert-banner-icon-to-text) - ); + inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + flex-shrink: 0; + margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon)); + margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); } .text { - margin-block-start: var( - --mod-alert-banner-top-text, - var(--spectrum-alert-banner-top-text) - ); - margin-block-end: var( - --mod-alert-banner-bottom-text, - var(--spectrum-alert-banner-bottom-text) - ); - margin-inline-end: var( - --mod-alert-banner-text-to-button-horizontal, - var(--spectrum-alert-banner-text-to-button-horizontal) - ); + margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text)); + margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text)); + margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); } @media (forced-colors: active) { - :host { - --highcontrast-alert-banner-border-color: CanvasText; - --highcontrast-alert-banner-border-width: var( - --spectrum-border-width-100 - ); - } + :host { + --highcontrast-alert-banner-border-color: CanvasText; + --highcontrast-alert-banner-border-width: var(--spectrum-border-width-100); + } } + diff --git a/packages/alert-dialog/src/alert-dialog-overrides.css b/packages/alert-dialog/src/alert-dialog-overrides.css index 4e2a4ac214..06da52830f 100644 --- a/packages/alert-dialog/src/alert-dialog-overrides.css +++ b/packages/alert-dialog/src/alert-dialog-overrides.css @@ -1,65 +1,36 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); - --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); - --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); - --spectrum-alert-dialog-warning-icon-color: var( - --system-alert-dialog-warning-icon-color - ); - --spectrum-alert-dialog-error-icon-color: var( - --system-alert-dialog-error-icon-color - ); - --spectrum-alert-dialog-title-font-family: var( - --system-alert-dialog-title-font-family - ); - --spectrum-alert-dialog-title-font-weight: var( - --system-alert-dialog-title-font-weight - ); - --spectrum-alert-dialog-title-font-style: var( - --system-alert-dialog-title-font-style - ); - --spectrum-alert-dialog-title-font-size: var( - --system-alert-dialog-title-font-size - ); - --spectrum-alert-dialog-title-line-height: var( - --system-alert-dialog-title-line-height - ); - --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); - --spectrum-alert-dialog-body-font-family: var( - --system-alert-dialog-body-font-family - ); - --spectrum-alert-dialog-body-font-weight: var( - --system-alert-dialog-body-font-weight - ); - --spectrum-alert-dialog-body-font-style: var( - --system-alert-dialog-body-font-style - ); - --spectrum-alert-dialog-body-font-size: var( - --system-alert-dialog-body-font-size - ); - --spectrum-alert-dialog-body-line-height: var( - --system-alert-dialog-body-line-height - ); - --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); - --spectrum-alert-dialog-title-to-divider: var( - --system-alert-dialog-title-to-divider - ); - --spectrum-alert-dialog-divider-to-description: var( - --system-alert-dialog-divider-to-description - ); - --spectrum-alert-dialog-title-to-icon: var( - --system-alert-dialog-title-to-icon - ); + --spectrum-alert-dialog-min-width: var(--system-alert-dialog-min-width); + --spectrum-alert-dialog-max-width: var(--system-alert-dialog-max-width); + --spectrum-alert-dialog-icon-size: var(--system-alert-dialog-icon-size); + --spectrum-alert-dialog-warning-icon-color: var(--system-alert-dialog-warning-icon-color); + --spectrum-alert-dialog-error-icon-color: var(--system-alert-dialog-error-icon-color); + --spectrum-alert-dialog-title-font-family: var(--system-alert-dialog-title-font-family); + --spectrum-alert-dialog-title-font-weight: var(--system-alert-dialog-title-font-weight); + --spectrum-alert-dialog-title-font-style: var(--system-alert-dialog-title-font-style); + --spectrum-alert-dialog-title-font-size: var(--system-alert-dialog-title-font-size); + --spectrum-alert-dialog-title-line-height: var(--system-alert-dialog-title-line-height); + --spectrum-alert-dialog-title-color: var(--system-alert-dialog-title-color); + --spectrum-alert-dialog-body-font-family: var(--system-alert-dialog-body-font-family); + --spectrum-alert-dialog-body-font-weight: var(--system-alert-dialog-body-font-weight); + --spectrum-alert-dialog-body-font-style: var(--system-alert-dialog-body-font-style); + --spectrum-alert-dialog-body-font-size: var(--system-alert-dialog-body-font-size); + --spectrum-alert-dialog-body-line-height: var(--system-alert-dialog-body-line-height); + --spectrum-alert-dialog-body-color: var(--system-alert-dialog-body-color); + --spectrum-alert-dialog-title-to-divider: var(--system-alert-dialog-title-to-divider); + --spectrum-alert-dialog-divider-to-description: var(--system-alert-dialog-divider-to-description); + --spectrum-alert-dialog-title-to-icon: var(--system-alert-dialog-title-to-icon); } + diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css index c9ac8a1f7e..8ec378dbba 100644 --- a/packages/alert-dialog/src/spectrum-alert-dialog.css +++ b/packages/alert-dialog/src/spectrum-alert-dialog.css @@ -1,149 +1,81 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-buttongroup-justify-content: flex-end; - box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var( - --mod-alert-dialog-min-width, - var(--spectrum-alert-dialog-min-width) - ); - max-inline-size: var( - --mod-alert-dialog-max-width, - var(--spectrum-alert-dialog-max-width) - ); - max-block-size: inherit; - padding: var( - --mod-alert-dialog-padding, - var(--spectrum-alert-dialog-padding) - ); - outline: none; - display: flex; + --mod-buttongroup-justify-content: flex-end; + box-sizing: border-box; + inline-size: fit-content; + min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width)); + max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width)); + max-block-size: inherit; + padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding)); + outline: none; + display: flex; } .icon { - inline-size: var( - --mod-alert-dialog-icon-size, - var(--spectrum-alert-dialog-icon-size) - ); - block-size: var( - --mod-alert-dialog-icon-size, - var(--spectrum-alert-dialog-icon-size) - ); - flex-shrink: 0; - margin-inline-start: var( - --mod-alert-dialog-title-to-icon, - var(--spectrum-alert-dialog-title-to-icon) - ); + inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); + block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); + flex-shrink: 0; + margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon)); } -:host([variant='warning']) { - --mod-icon-color: var( - --mod-alert-dialog-warning-icon-color, - var(--spectrum-alert-dialog-warning-icon-color) - ); +:host([variant="warning"]) { + --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color)); } -:host([variant='error']) { - --mod-icon-color: var( - --mod-alert-dialog-error-icon-color, - var(--spectrum-alert-dialog-error-icon-color) - ); +:host([variant="error"]) { + --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color)); } .grid { - display: grid; + display: grid; } .header { - justify-content: space-between; - align-items: baseline; - display: flex; + justify-content: space-between; + align-items: baseline; + display: flex; } -::slotted([slot='heading']) { - font-family: var( - --mod-alert-dialog-title-font-family, - var(--spectrum-alert-dialog-title-font-family) - ); - font-weight: var( - --mod-alert-dialog-title-font-weight, - var(--spectrum-alert-dialog-title-font-weight) - ); - font-style: var( - --mod-alert-dialog-title-font-style, - var(--spectrum-alert-dialog-title-font-style) - ); - font-size: var( - --mod-alert-dialog-title-font-size, - var(--spectrum-alert-dialog-title-font-size) - ); - line-height: var( - --mod-alert-dialog-title-line-height, - var(--spectrum-alert-dialog-title-line-height) - ); - color: var( - --mod-alert-dialog-title-color, - var(--spectrum-alert-dialog-title-color) - ); - margin: 0; - margin-block-end: var( - --mod-alert-dialog-title-to-divider, - var(--spectrum-alert-dialog-title-to-divider) - ); +::slotted([slot="heading"]) { + font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family)); + font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight)); + font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style)); + font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size)); + line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height)); + color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color)); + margin: 0; + margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider)); } .content { - font-family: var( - --mod-alert-dialog-body-font-family, - var(--spectrum-alert-dialog-body-font-family) - ); - font-weight: var( - --mod-alert-dialog-body-font-weight, - var(--spectrum-alert-dialog-body-font-weight) - ); - font-style: var( - --mod-alert-dialog-body-font-style, - var(--spectrum-alert-dialog-body-font-style) - ); - font-size: var( - --mod-alert-dialog-body-font-size, - var(--spectrum-alert-dialog-body-font-size) - ); - line-height: var( - --mod-alert-dialog-body-line-height, - var(--spectrum-alert-dialog-body-line-height) - ); - color: var( - --mod-alert-dialog-body-color, - var(--spectrum-alert-dialog-body-color) - ); - -webkit-overflow-scrolling: touch; - margin: 0; - margin-block-start: var( - --mod-alert-dialog-divider-to-description, - var(--spectrum-alert-dialog-divider-to-description) - ); - margin-block-end: var( - --mod-alert-dialog-description-to-buttons, - var(--spectrum-alert-dialog-description-to-buttons) - ); - overflow-y: auto; + font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family)); + font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight)); + font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style)); + font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size)); + line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height)); + color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color)); + -webkit-overflow-scrolling: touch; + margin: 0; + margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description)); + margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons)); + overflow-y: auto; } @media (forced-colors: active) { - :host { - border: solid; - } + :host { + border: solid; + } } + diff --git a/packages/asset/src/asset-overrides.css b/packages/asset/src/asset-overrides.css index 41267b0876..980eadb4b8 100644 --- a/packages/asset/src/asset-overrides.css +++ b/packages/asset/src/asset-overrides.css @@ -1,25 +1,20 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-asset-transition-duration: var( - --system-asset-transition-duration - ); - --spectrum-asset-folder-background-color: var( - --system-asset-folder-background-color - ); - --spectrum-asset-file-background-color: var( - --system-asset-file-background-color - ); - --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); + --spectrum-asset-transition-duration: var(--system-asset-transition-duration); + --spectrum-asset-folder-background-color: var(--system-asset-folder-background-color); + --spectrum-asset-file-background-color: var(--system-asset-file-background-color); + --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); } + diff --git a/packages/asset/src/spectrum-asset.css b/packages/asset/src/spectrum-asset.css index 06229170f6..bf7ced9d9e 100644 --- a/packages/asset/src/spectrum-asset.css +++ b/packages/asset/src/spectrum-asset.css @@ -1,74 +1,55 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: 100%; - block-size: 100%; - justify-content: center; - align-items: center; - display: flex; + inline-size: 100%; + block-size: 100%; + justify-content: center; + align-items: center; + display: flex; } ::slotted(*) { - max-inline-size: 100%; - max-block-size: 100%; - object-fit: contain; - transition: opacity var(--spectrum-asset-transition-duration); + max-inline-size: 100%; + max-block-size: 100%; + object-fit: contain; + transition: opacity var(--spectrum-asset-transition-duration); } -.file, -.folder { - inline-size: max(48px, min(100%, 80px)); - inline-size: max( - var(--mod-asset-icon-min-width, 48px), - min(100%, var(--mod-asset-icon-max-width, 80px)) - ); - block-size: 100%; - margin: 20px; - margin: var(--mod-asset-icon-margin, 20px); +.file, .folder { + inline-size: max(48px, min(100%, 80px)); + inline-size: max(var(--mod-asset-icon-min-width, 48px), min(100.0%, var(--mod-asset-icon-max-width, 80px))); + block-size: 100%; + margin: 20px; + margin: var(--mod-asset-icon-margin, 20px); } .folderBackground { - fill: var( - --highcontrast-asset-folder-background-color, - var( - --mod-asset-folder-background-color, - var(--spectrum-asset-folder-background-color) - ) - ); + fill: var(--highcontrast-asset-folder-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); } .fileBackground { - fill: var( - --highcontrast-asset-file-background-color, - var( - --mod-asset-file-background-color, - var(--spectrum-asset-file-background-color) - ) - ); + fill: var(--highcontrast-asset-file-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); } -.fileOutline, -.folderOutline { - fill: var( - --mod-asset-icon-outline-color, - var(--spectrum-asset-icon-outline-color) - ); +.fileOutline, .folderOutline { + fill: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); } @media (forced-colors: active) { - :host { - --highcontrast-asset-folder-background-color: currentColor; - --highcontrast-asset-file-background-color: currentColor; - } + :host { + --highcontrast-asset-folder-background-color: currentColor; + --highcontrast-asset-file-background-color: currentColor; + } } + diff --git a/packages/avatar/src/avatar-overrides.css b/packages/avatar/src/avatar-overrides.css index fca1f4c577..727f22a211 100644 --- a/packages/avatar/src/avatar-overrides.css +++ b/packages/avatar/src/avatar-overrides.css @@ -1,75 +1,68 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); - --spectrum-avatar-inline-size: var(--system-avatar-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-block-size); - --spectrum-avatar-focus-indicator-thickness: var( - --system-avatar-focus-indicator-thickness - ); - --spectrum-avatar-focus-indicator-gap: var( - --system-avatar-focus-indicator-gap - ); - --spectrum-avatar-focus-indicator-color: var( - --system-avatar-focus-indicator-color - ); - --spectrum-avatar-color-opacity-disabled: var( - --system-avatar-color-opacity-disabled - ); + --spectrum-avatar-color-opacity: var(--system-avatar-color-opacity); + --spectrum-avatar-inline-size: var(--system-avatar-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-block-size); + --spectrum-avatar-focus-indicator-thickness: var(--system-avatar-focus-indicator-thickness); + --spectrum-avatar-focus-indicator-gap: var(--system-avatar-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var(--system-avatar-focus-indicator-color); + --spectrum-avatar-color-opacity-disabled: var(--system-avatar-color-opacity-disabled); } -:host([size='50']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size); +:host([size="50"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-50-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-50-block-size); } -:host([size='75']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size); +:host([size="75"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-75-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-75-block-size); } -:host([size='100']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size); +:host([size="100"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-100-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-100-block-size); } -:host([size='200']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size); +:host([size="200"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-200-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-200-block-size); } -:host([size='300']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size); +:host([size="300"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-300-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-300-block-size); } -:host([size='400']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size); +:host([size="400"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-400-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-400-block-size); } -:host([size='500']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size); +:host([size="500"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-500-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-500-block-size); } -:host([size='600']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size); +:host([size="600"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-600-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-600-block-size); } -:host([size='700']) { - --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); - --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); +:host([size="700"]) { + --spectrum-avatar-inline-size: var(--system-avatar-size-700-inline-size); + --spectrum-avatar-block-size: var(--system-avatar-size-700-block-size); } + diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index 07aff46824..a3a8787a67 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -1,130 +1,63 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-avatar-focus-indicator-color: CanvasText; - } + :host { + --highcontrast-avatar-focus-indicator-color: CanvasText; + } } :host { - --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); - inline-size: var( - --mod-avatar-inline-size, - var(--spectrum-avatar-inline-size) - ); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); - -webkit-user-drag: none; - -webkit-user-select: none; - user-select: none; - opacity: var( - --mod-avatar-color-opacity, - var(--spectrum-avatar-color-opacity) - ); - border-width: 0; - outline: none; - display: inline-block; - position: relative; - overflow: visible; + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + -webkit-user-drag: none; + -webkit-user-select: none; + user-select: none; + opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); + border-width: 0; + outline: none; + display: inline-block; + position: relative; + overflow: visible; } :host([disabled]) { - opacity: var( - --highcontrast-avatar-color-opacity-disabled, - var( - --mod-avatar-color-opacity-disabled, - var(--spectrum-avatar-color-opacity-disabled) - ) - ); + opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); } -:host(:not([disabled])) .is-focused:after, -:host(:not([disabled])) .link:focus-visible:after { - pointer-events: none; - content: ''; - inline-size: calc( - var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) * 2 - ); - block-size: calc( - var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) * 2 - ); - border-style: solid; - border-width: var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-avatar-focus-indicator-color, - var( - --mod-avatar-focus-indicator-color, - var(--spectrum-avatar-focus-indicator-color) - ) - ); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); - position: absolute; - inset-block-start: calc( - ( - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) + - var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ) - ) * -1 - ); - inset-inline-start: calc( - ( - var( - --mod-avatar-focus-indicator-gap, - var(--spectrum-avatar-focus-indicator-gap) - ) + - var( - --mod-avatar-focus-indicator-thickness, - var(--spectrum-avatar-focus-indicator-thickness) - ) - ) * -1 - ); +:host(:not([disabled])) .is-focused:after, :host(:not([disabled])) .link:focus-visible:after { + pointer-events: none; + content: ""; + inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2); + block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2); + border-style: solid; + border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); + border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); + position: absolute; + inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); } .link { - outline: 0; + outline: 0; } .image { - inline-size: var( - --mod-avatar-inline-size, - var(--spectrum-avatar-inline-size) - ); - block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var( - --mod-avatar-border-radius, - var(--spectrum-avatar-border-radius) - ); + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); } + diff --git a/packages/badge/src/badge-overrides.css b/packages/badge/src/badge-overrides.css index 1877a797ff..260cdf5bfb 100644 --- a/packages/badge/src/badge-overrides.css +++ b/packages/badge/src/badge-overrides.css @@ -1,270 +1,145 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-badge-corner-radius: var(--system-badge-corner-radius); - --spectrum-badge-line-height: var(--system-badge-line-height); - --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); - --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color); - --spectrum-badge-background-color-default: var( - --system-badge-background-color-default - ); - --spectrum-badge-background-color-accent: var( - --system-badge-background-color-accent - ); - --spectrum-badge-background-color-informative: var( - --system-badge-background-color-informative - ); - --spectrum-badge-background-color-negative: var( - --system-badge-background-color-negative - ); - --spectrum-badge-background-color-positive: var( - --system-badge-background-color-positive - ); - --spectrum-badge-background-color-notice: var( - --system-badge-background-color-notice - ); - --spectrum-badge-background-color-gray: var( - --system-badge-background-color-gray - ); - --spectrum-badge-background-color-red: var( - --system-badge-background-color-red - ); - --spectrum-badge-background-color-orange: var( - --system-badge-background-color-orange - ); - --spectrum-badge-background-color-yellow: var( - --system-badge-background-color-yellow - ); - --spectrum-badge-background-color-chartreuse: var( - --system-badge-background-color-chartreuse - ); - --spectrum-badge-background-color-celery: var( - --system-badge-background-color-celery - ); - --spectrum-badge-background-color-green: var( - --system-badge-background-color-green - ); - --spectrum-badge-background-color-seafoam: var( - --system-badge-background-color-seafoam - ); - --spectrum-badge-background-color-cyan: var( - --system-badge-background-color-cyan - ); - --spectrum-badge-background-color-blue: var( - --system-badge-background-color-blue - ); - --spectrum-badge-background-color-indigo: var( - --system-badge-background-color-indigo - ); - --spectrum-badge-background-color-purple: var( - --system-badge-background-color-purple - ); - --spectrum-badge-background-color-fuchsia: var( - --system-badge-background-color-fuchsia - ); - --spectrum-badge-background-color-magenta: var( - --system-badge-background-color-magenta - ); - --spectrum-badge-height: var(--system-badge-height); - --spectrum-badge-font-size: var(--system-badge-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size); - --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-icon-only-spacing-horizontal - ); + --spectrum-badge-corner-radius: var(--system-badge-corner-radius); + --spectrum-badge-line-height: var(--system-badge-line-height); + --spectrum-badge-line-height-cjk: var(--system-badge-line-height-cjk); + --spectrum-badge-label-icon-color: var(--system-badge-label-icon-color); + --spectrum-badge-background-color-default: var(--system-badge-background-color-default); + --spectrum-badge-background-color-accent: var(--system-badge-background-color-accent); + --spectrum-badge-background-color-informative: var(--system-badge-background-color-informative); + --spectrum-badge-background-color-negative: var(--system-badge-background-color-negative); + --spectrum-badge-background-color-positive: var(--system-badge-background-color-positive); + --spectrum-badge-background-color-notice: var(--system-badge-background-color-notice); + --spectrum-badge-background-color-gray: var(--system-badge-background-color-gray); + --spectrum-badge-background-color-red: var(--system-badge-background-color-red); + --spectrum-badge-background-color-orange: var(--system-badge-background-color-orange); + --spectrum-badge-background-color-yellow: var(--system-badge-background-color-yellow); + --spectrum-badge-background-color-chartreuse: var(--system-badge-background-color-chartreuse); + --spectrum-badge-background-color-celery: var(--system-badge-background-color-celery); + --spectrum-badge-background-color-green: var(--system-badge-background-color-green); + --spectrum-badge-background-color-seafoam: var(--system-badge-background-color-seafoam); + --spectrum-badge-background-color-cyan: var(--system-badge-background-color-cyan); + --spectrum-badge-background-color-blue: var(--system-badge-background-color-blue); + --spectrum-badge-background-color-indigo: var(--system-badge-background-color-indigo); + --spectrum-badge-background-color-purple: var(--system-badge-background-color-purple); + --spectrum-badge-background-color-fuchsia: var(--system-badge-background-color-fuchsia); + --spectrum-badge-background-color-magenta: var(--system-badge-background-color-magenta); + --spectrum-badge-height: var(--system-badge-height); + --spectrum-badge-font-size: var(--system-badge-font-size); + --spectrum-badge-label-spacing-vertical-top: var(--system-badge-label-spacing-vertical-top); + --spectrum-badge-label-spacing-vertical-bottom: var(--system-badge-label-spacing-vertical-bottom); + --spectrum-badge-label-spacing-horizontal: var(--system-badge-label-spacing-horizontal); + --spectrum-badge-workflow-icon-size: var(--system-badge-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var(--system-badge-icon-spacing-horizontal); + --spectrum-badge-icon-spacing-vertical-top: var(--system-badge-icon-spacing-vertical-top); + --spectrum-badge-icon-only-spacing-horizontal: var(--system-badge-icon-only-spacing-horizontal); } -:host([variant='orange']) { - --spectrum-badge-label-icon-color: var( - --system-badge-orange-label-icon-color - ); +:host([variant="orange"]) { + --spectrum-badge-label-icon-color: var(--system-badge-orange-label-icon-color); } -:host([variant='yellow']) { - --spectrum-badge-label-icon-color: var( - --system-badge-yellow-label-icon-color - ); +:host([variant="yellow"]) { + --spectrum-badge-label-icon-color: var(--system-badge-yellow-label-icon-color); } -:host([variant='chartreuse']) { - --spectrum-badge-label-icon-color: var( - --system-badge-chartreuse-label-icon-color - ); +:host([variant="chartreuse"]) { + --spectrum-badge-label-icon-color: var(--system-badge-chartreuse-label-icon-color); } -:host([variant='celery']) { - --spectrum-badge-label-icon-color: var( - --system-badge-celery-label-icon-color - ); +:host([variant="celery"]) { + --spectrum-badge-label-icon-color: var(--system-badge-celery-label-icon-color); } -:host([variant='gray']) { - --spectrum-badge-label-icon-color: var( - --system-badge-gray-label-icon-color - ); +:host([variant="gray"]) { + --spectrum-badge-label-icon-color: var(--system-badge-gray-label-icon-color); } -:host([variant='red']) { - --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color); +:host([variant="red"]) { + --spectrum-badge-label-icon-color: var(--system-badge-red-label-icon-color); } -:host([variant='green']) { - --spectrum-badge-label-icon-color: var( - --system-badge-green-label-icon-color - ); +:host([variant="green"]) { + --spectrum-badge-label-icon-color: var(--system-badge-green-label-icon-color); } -:host([variant='seafoam']) { - --spectrum-badge-label-icon-color: var( - --system-badge-seafoam-label-icon-color - ); +:host([variant="seafoam"]) { + --spectrum-badge-label-icon-color: var(--system-badge-seafoam-label-icon-color); } -:host([variant='cyan']) { - --spectrum-badge-label-icon-color: var( - --system-badge-cyan-label-icon-color - ); +:host([variant="cyan"]) { + --spectrum-badge-label-icon-color: var(--system-badge-cyan-label-icon-color); } -:host([variant='blue']) { - --spectrum-badge-label-icon-color: var( - --system-badge-blue-label-icon-color - ); +:host([variant="blue"]) { + --spectrum-badge-label-icon-color: var(--system-badge-blue-label-icon-color); } -:host([variant='indigo']) { - --spectrum-badge-label-icon-color: var( - --system-badge-indigo-label-icon-color - ); +:host([variant="indigo"]) { + --spectrum-badge-label-icon-color: var(--system-badge-indigo-label-icon-color); } -:host([variant='purple']) { - --spectrum-badge-label-icon-color: var( - --system-badge-purple-label-icon-color - ); +:host([variant="purple"]) { + --spectrum-badge-label-icon-color: var(--system-badge-purple-label-icon-color); } -:host([variant='fuchsia']) { - --spectrum-badge-label-icon-color: var( - --system-badge-fuchsia-label-icon-color - ); +:host([variant="fuchsia"]) { + --spectrum-badge-label-icon-color: var(--system-badge-fuchsia-label-icon-color); } -:host([variant='magenta']) { - --spectrum-badge-label-icon-color: var( - --system-badge-magenta-label-icon-color - ); +:host([variant="magenta"]) { + --spectrum-badge-label-icon-color: var(--system-badge-magenta-label-icon-color); } -:host([size='s']) { - --spectrum-badge-height: var(--system-badge-size-s-height); - --spectrum-badge-font-size: var(--system-badge-size-s-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-s-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-s-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-s-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-s-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-s-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-s-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-s-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-s-icon-only-spacing-horizontal - ); +:host([size="s"]) { + --spectrum-badge-height: var(--system-badge-size-s-height); + --spectrum-badge-font-size: var(--system-badge-size-s-font-size); + --spectrum-badge-label-spacing-vertical-top: var(--system-badge-size-s-label-spacing-vertical-top); + --spectrum-badge-label-spacing-vertical-bottom: var(--system-badge-size-s-label-spacing-vertical-bottom); + --spectrum-badge-label-spacing-horizontal: var(--system-badge-size-s-label-spacing-horizontal); + --spectrum-badge-workflow-icon-size: var(--system-badge-size-s-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-size-s-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var(--system-badge-size-s-icon-spacing-horizontal); + --spectrum-badge-icon-spacing-vertical-top: var(--system-badge-size-s-icon-spacing-vertical-top); + --spectrum-badge-icon-only-spacing-horizontal: var(--system-badge-size-s-icon-only-spacing-horizontal); } -:host([size='l']) { - --spectrum-badge-height: var(--system-badge-size-l-height); - --spectrum-badge-font-size: var(--system-badge-size-l-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-l-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-l-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-l-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-l-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-l-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-l-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-l-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-l-icon-only-spacing-horizontal - ); +:host([size="l"]) { + --spectrum-badge-height: var(--system-badge-size-l-height); + --spectrum-badge-font-size: var(--system-badge-size-l-font-size); + --spectrum-badge-label-spacing-vertical-top: var(--system-badge-size-l-label-spacing-vertical-top); + --spectrum-badge-label-spacing-vertical-bottom: var(--system-badge-size-l-label-spacing-vertical-bottom); + --spectrum-badge-label-spacing-horizontal: var(--system-badge-size-l-label-spacing-horizontal); + --spectrum-badge-workflow-icon-size: var(--system-badge-size-l-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-size-l-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var(--system-badge-size-l-icon-spacing-horizontal); + --spectrum-badge-icon-spacing-vertical-top: var(--system-badge-size-l-icon-spacing-vertical-top); + --spectrum-badge-icon-only-spacing-horizontal: var(--system-badge-size-l-icon-only-spacing-horizontal); } -:host([size='xl']) { - --spectrum-badge-height: var(--system-badge-size-xl-height); - --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); - --spectrum-badge-label-spacing-vertical-top: var( - --system-badge-size-xl-label-spacing-vertical-top - ); - --spectrum-badge-label-spacing-vertical-bottom: var( - --system-badge-size-xl-label-spacing-vertical-bottom - ); - --spectrum-badge-label-spacing-horizontal: var( - --system-badge-size-xl-label-spacing-horizontal - ); - --spectrum-badge-workflow-icon-size: var( - --system-badge-size-xl-workflow-icon-size - ); - --spectrum-badge-icon-text-spacing: var( - --system-badge-size-xl-icon-text-spacing - ); - --spectrum-badge-icon-spacing-horizontal: var( - --system-badge-size-xl-icon-spacing-horizontal - ); - --spectrum-badge-icon-spacing-vertical-top: var( - --system-badge-size-xl-icon-spacing-vertical-top - ); - --spectrum-badge-icon-only-spacing-horizontal: var( - --system-badge-size-xl-icon-only-spacing-horizontal - ); +:host([size="xl"]) { + --spectrum-badge-height: var(--system-badge-size-xl-height); + --spectrum-badge-font-size: var(--system-badge-size-xl-font-size); + --spectrum-badge-label-spacing-vertical-top: var(--system-badge-size-xl-label-spacing-vertical-top); + --spectrum-badge-label-spacing-vertical-bottom: var(--system-badge-size-xl-label-spacing-vertical-bottom); + --spectrum-badge-label-spacing-horizontal: var(--system-badge-size-xl-label-spacing-horizontal); + --spectrum-badge-workflow-icon-size: var(--system-badge-size-xl-workflow-icon-size); + --spectrum-badge-icon-text-spacing: var(--system-badge-size-xl-icon-text-spacing); + --spectrum-badge-icon-spacing-horizontal: var(--system-badge-size-xl-icon-spacing-horizontal); + --spectrum-badge-icon-spacing-vertical-top: var(--system-badge-size-xl-icon-spacing-vertical-top); + --spectrum-badge-icon-only-spacing-horizontal: var(--system-badge-size-xl-icon-only-spacing-horizontal); } + diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css index a69ad6cec0..ffef1f0b38 100644 --- a/packages/badge/src/spectrum-badge.css +++ b/packages/badge/src/spectrum-badge.css @@ -1,287 +1,167 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - border-color: CanvasText; - } + :host { + border-color: CanvasText; + } } :host { - min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); - inline-size: auto; - vertical-align: middle; - cursor: default; - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - border-radius: var( - --mod-badge-corner-radius, - var(--spectrum-badge-corner-radius) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - border: 1px solid #0000; - display: inline-flex; - position: relative; + min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + inline-size: auto; + vertical-align: middle; + cursor: default; + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + border: 1px solid #0000; + display: inline-flex; + position: relative; } -:host, -:host([variant='neutral']) { - background: var( - --mod-badge-background-color-default, - var(--spectrum-badge-background-color-default) - ); +:host, :host([variant="neutral"]) { + background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); } -:host([variant='accent']) { - background: var( - --mod-badge-background-color-accent, - var(--spectrum-badge-background-color-accent) - ); +:host([variant="accent"]) { + background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent)); } -:host([variant='informative']) { - background: var( - --mod-badge-background-color-informative, - var(--spectrum-badge-background-color-informative) - ); +:host([variant="informative"]) { + background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative)); } -:host([variant='negative']) { - background: var( - --mod-badge-background-color-negative, - var(--spectrum-badge-background-color-negative) - ); +:host([variant="negative"]) { + background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative)); } -:host([variant='positive']) { - background: var( - --mod-badge-background-color-positive, - var(--spectrum-badge-background-color-positive) - ); +:host([variant="positive"]) { + background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); } -:host([variant='notice']) { - background: var( - --mod-badge-background-color-notice, - var(--spectrum-badge-background-color-notice) - ); +:host([variant="notice"]) { + background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); } -:host([variant='gray']) { - background: var( - --mod-badge-background-color-gray, - var(--spectrum-badge-background-color-gray) - ); +:host([variant="gray"]) { + background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); } -:host([variant='red']) { - background: var( - --mod-badge-background-color-red, - var(--spectrum-badge-background-color-red) - ); +:host([variant="red"]) { + background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); } -:host([variant='orange']) { - background: var( - --mod-badge-background-color-orange, - var(--spectrum-badge-background-color-orange) - ); +:host([variant="orange"]) { + background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); } -:host([variant='yellow']) { - background: var( - --mod-badge-background-color-yellow, - var(--spectrum-badge-background-color-yellow) - ); +:host([variant="yellow"]) { + background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); } -:host([variant='chartreuse']) { - background: var( - --mod-badge-background-color-chartreuse, - var(--spectrum-badge-background-color-chartreuse) - ); +:host([variant="chartreuse"]) { + background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); } -:host([variant='celery']) { - background: var( - --mod-badge-background-color-celery, - var(--spectrum-badge-background-color-celery) - ); +:host([variant="celery"]) { + background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); } -:host([variant='green']) { - background: var( - --mod-badge-background-color-green, - var(--spectrum-badge-background-color-green) - ); +:host([variant="green"]) { + background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); } -:host([variant='seafoam']) { - background: var( - --mod-badge-background-color-seafoam, - var(--spectrum-badge-background-color-seafoam) - ); +:host([variant="seafoam"]) { + background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); } -:host([variant='cyan']) { - background: var( - --mod-badge-background-color-cyan, - var(--spectrum-badge-background-color-cyan) - ); +:host([variant="cyan"]) { + background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); } -:host([variant='blue']) { - background: var( - --mod-badge-background-color-blue, - var(--spectrum-badge-background-color-blue) - ); +:host([variant="blue"]) { + background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); } -:host([variant='indigo']) { - background: var( - --mod-badge-background-color-indigo, - var(--spectrum-badge-background-color-indigo) - ); +:host([variant="indigo"]) { + background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); } -:host([variant='purple']) { - background: var( - --mod-badge-background-color-purple, - var(--spectrum-badge-background-color-purple) - ); +:host([variant="purple"]) { + background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); } -:host([variant='fuchsia']) { - background: var( - --mod-badge-background-color-fuchsia, - var(--spectrum-badge-background-color-fuchsia) - ); +:host([variant="fuchsia"]) { + background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); } -:host([variant='magenta']) { - background: var( - --mod-badge-background-color-magenta, - var(--spectrum-badge-background-color-magenta) - ); +:host([variant="magenta"]) { + background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); } -:host([fixed='inline-start']) { - border-start-start-radius: 0; - border-end-start-radius: 0; +:host([fixed="inline-start"]) { + border-start-start-radius: 0; + border-end-start-radius: 0; } -:host([fixed='inline-end']) { - border-start-end-radius: 0; - border-end-end-radius: 0; +:host([fixed="inline-end"]) { + border-start-end-radius: 0; + border-end-end-radius: 0; } -:host([fixed='block-start']) { - border-start-start-radius: 0; - border-start-end-radius: 0; +:host([fixed="block-start"]) { + border-start-start-radius: 0; + border-start-end-radius: 0; } -:host([fixed='block-end']) { - border-end-end-radius: 0; - border-end-start-radius: 0; +:host([fixed="block-end"]) { + border-end-end-radius: 0; + border-end-start-radius: 0; } .label { - font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); - line-height: var( - --mod-badge-line-height, - var(--spectrum-badge-line-height) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - padding-block-start: var( - --mod-badge-label-spacing-vertical-top, - var(--spectrum-badge-label-spacing-vertical-top) - ); - padding-block-end: var( - --mod-badge-label-spacing-vertical-bottom, - var(--spectrum-badge-label-spacing-vertical-bottom) - ); - padding-inline-start: var( - --mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-label-spacing-horizontal, - var(--spectrum-badge-label-spacing-horizontal) - ); + font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); + line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)); + padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)); + padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); + padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); } -.label:lang(ja), -.label:lang(ko), -.label:lang(zh) { - line-height: var( - --mod-badge-line-height-cjk, - var(--spectrum-badge-line-height-cjk) - ); +.label:lang(ja), .label:lang(ko), .label:lang(zh) { + line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk)); } -[name='icon'] + .label { - padding-inline-start: 0; +[name="icon"] + .label { + padding-inline-start: 0; } -::slotted([slot='icon']) { - block-size: var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - inline-size: var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - flex: 0 0 - var( - --mod-badge-workflow-icon-size, - var(--spectrum-badge-workflow-icon-size) - ); - color: var( - --mod-badge-label-icon-color, - var(--spectrum-badge-label-icon-color) - ); - padding-block-start: var( - --mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top) - ); - padding-block-end: var( - --mod-badge-icon-spacing-vertical-top, - var(--spectrum-badge-icon-spacing-vertical-top) - ); - padding-inline-start: var( - --mod-badge-icon-spacing-horizontal, - var(--spectrum-badge-icon-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-icon-text-spacing, - var(--spectrum-badge-icon-text-spacing) - ); +::slotted([slot="icon"]) { + block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); + padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); + padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)); + padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); } [icon-only]::slotted(*) { - padding-inline-start: var( - --mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal) - ); - padding-inline-end: var( - --mod-badge-icon-only-spacing-horizontal, - var(--spectrum-badge-icon-only-spacing-horizontal) - ); + padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); + padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); } + diff --git a/packages/breadcrumbs/src/breadcrumbs-overrides.css b/packages/breadcrumbs/src/breadcrumbs-overrides.css index c84e3dca39..5577f73c0f 100644 --- a/packages/breadcrumbs/src/breadcrumbs-overrides.css +++ b/packages/breadcrumbs/src/breadcrumbs-overrides.css @@ -1,161 +1,70 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); - --spectrum-breadcrumbs-block-size-compact: var( - --system-breadcrumbs-block-size-compact - ); - --spectrum-breadcrumbs-block-size-multiline: var( - --system-breadcrumbs-block-size-multiline - ); - --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); - --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); - --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); - --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); - --spectrum-breadcrumbs-font-size-current: var( - --system-breadcrumbs-font-size-current - ); - --spectrum-breadcrumbs-font-family-current: var( - --system-breadcrumbs-font-family-current - ); - --spectrum-breadcrumbs-font-weight-current: var( - --system-breadcrumbs-font-weight-current - ); - --spectrum-breadcrumbs-font-size-compact: var( - --system-breadcrumbs-font-size-compact - ); - --spectrum-breadcrumbs-font-family-compact: var( - --system-breadcrumbs-font-family-compact - ); - --spectrum-breadcrumbs-font-weight-compact: var( - --system-breadcrumbs-font-weight-compact - ); - --spectrum-breadcrumbs-font-size-compact-current: var( - --system-breadcrumbs-font-size-compact-current - ); - --spectrum-breadcrumbs-font-family-compact-current: var( - --system-breadcrumbs-font-family-compact-current - ); - --spectrum-breadcrumbs-font-weight-compact-current: var( - --system-breadcrumbs-font-weight-compact-current - ); - --spectrum-breadcrumbs-font-size-multiline: var( - --system-breadcrumbs-font-size-multiline - ); - --spectrum-breadcrumbs-font-family-multiline: var( - --system-breadcrumbs-font-family-multiline - ); - --spectrum-breadcrumbs-font-weight-multiline: var( - --system-breadcrumbs-font-weight-multiline - ); - --spectrum-breadcrumbs-font-size-multiline-current: var( - --system-breadcrumbs-font-size-multiline-current - ); - --spectrum-breadcrumbs-font-family-multiline-current: var( - --system-breadcrumbs-font-family-multiline-current - ); - --spectrum-breadcrumbs-font-weight-multiline-current: var( - --system-breadcrumbs-font-weight-multiline-current - ); - --spectrum-breadcrumbs-text-decoration-thickness: var( - --system-breadcrumbs-text-decoration-thickness - ); - --spectrum-breadcrumbs-text-decoration-gap: var( - --system-breadcrumbs-text-decoration-gap - ); - --spectrum-breadcrumbs-separator-spacing-inline: var( - --system-breadcrumbs-separator-spacing-inline - ); - --spectrum-breadcrumbs-text-spacing-block-start: var( - --system-breadcrumbs-text-spacing-block-start - ); - --spectrum-breadcrumbs-text-spacing-block-end: var( - --system-breadcrumbs-text-spacing-block-end - ); - --spectrum-breadcrumbs-icon-spacing-block: var( - --system-breadcrumbs-icon-spacing-block - ); - --spectrum-breadcrumbs-text-spacing-block-start-compact: var( - --system-breadcrumbs-text-spacing-block-start-compact - ); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var( - --system-breadcrumbs-text-spacing-block-end-compact - ); - --spectrum-breadcrumbs-icon-spacing-block-compact: var( - --system-breadcrumbs-icon-spacing-block-compact - ); - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var( - --system-breadcrumbs-text-spacing-block-start-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var( - --system-breadcrumbs-text-spacing-block-end-multiline - ); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var( - --system-breadcrumbs-text-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var( - --system-breadcrumbs-icon-spacing-block-start-multiline - ); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var( - --system-breadcrumbs-icon-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); - --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); - --spectrum-breadcrumbs-action-button-spacing-inline: var( - --system-breadcrumbs-action-button-spacing-inline - ); - --spectrum-breadcrumbs-action-button-spacing-block: var( - --system-breadcrumbs-action-button-spacing-block - ); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var( - --system-breadcrumbs-action-button-spacing-block-compact - ); - --spectrum-breadcrumbs-action-button-spacing-inline-start: var( - --system-breadcrumbs-action-button-spacing-inline-start - ); - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var( - --system-breadcrumbs-action-button-spacing-block-multiline - ); - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var( - --system-breadcrumbs-action-button-spacing-block-between-multiline - ); - --spectrum-breadcrumbs-focus-indicator-thickness: var( - --system-breadcrumbs-focus-indicator-thickness - ); - --spectrum-breadcrumbs-focus-indicator-gap: var( - --system-breadcrumbs-focus-indicator-gap - ); - --spectrum-breadcrumbs-item-link-border-radius: var( - --system-breadcrumbs-item-link-border-radius - ); - --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); - --spectrum-breadcrumbs-text-color-current: var( - --system-breadcrumbs-text-color-current - ); - --spectrum-breadcrumbs-text-color-disabled: var( - --system-breadcrumbs-text-color-disabled - ); - --spectrum-breadcrumbs-separator-color: var( - --system-breadcrumbs-separator-color - ); - --spectrum-breadcrumbs-action-button-color: var( - --system-breadcrumbs-action-button-color - ); - --spectrum-breadcrumbs-action-button-color-disabled: var( - --system-breadcrumbs-action-button-color-disabled - ); - --spectrum-breadcrumbs-focus-indicator-color: var( - --system-breadcrumbs-focus-indicator-color - ); + --spectrum-breadcrumbs-block-size: var(--system-breadcrumbs-block-size); + --spectrum-breadcrumbs-block-size-compact: var(--system-breadcrumbs-block-size-compact); + --spectrum-breadcrumbs-block-size-multiline: var(--system-breadcrumbs-block-size-multiline); + --spectrum-breadcrumbs-line-height: var(--system-breadcrumbs-line-height); + --spectrum-breadcrumbs-font-size: var(--system-breadcrumbs-font-size); + --spectrum-breadcrumbs-font-family: var(--system-breadcrumbs-font-family); + --spectrum-breadcrumbs-font-weight: var(--system-breadcrumbs-font-weight); + --spectrum-breadcrumbs-font-size-current: var(--system-breadcrumbs-font-size-current); + --spectrum-breadcrumbs-font-family-current: var(--system-breadcrumbs-font-family-current); + --spectrum-breadcrumbs-font-weight-current: var(--system-breadcrumbs-font-weight-current); + --spectrum-breadcrumbs-font-size-compact: var(--system-breadcrumbs-font-size-compact); + --spectrum-breadcrumbs-font-family-compact: var(--system-breadcrumbs-font-family-compact); + --spectrum-breadcrumbs-font-weight-compact: var(--system-breadcrumbs-font-weight-compact); + --spectrum-breadcrumbs-font-size-compact-current: var(--system-breadcrumbs-font-size-compact-current); + --spectrum-breadcrumbs-font-family-compact-current: var(--system-breadcrumbs-font-family-compact-current); + --spectrum-breadcrumbs-font-weight-compact-current: var(--system-breadcrumbs-font-weight-compact-current); + --spectrum-breadcrumbs-font-size-multiline: var(--system-breadcrumbs-font-size-multiline); + --spectrum-breadcrumbs-font-family-multiline: var(--system-breadcrumbs-font-family-multiline); + --spectrum-breadcrumbs-font-weight-multiline: var(--system-breadcrumbs-font-weight-multiline); + --spectrum-breadcrumbs-font-size-multiline-current: var(--system-breadcrumbs-font-size-multiline-current); + --spectrum-breadcrumbs-font-family-multiline-current: var(--system-breadcrumbs-font-family-multiline-current); + --spectrum-breadcrumbs-font-weight-multiline-current: var(--system-breadcrumbs-font-weight-multiline-current); + --spectrum-breadcrumbs-text-decoration-thickness: var(--system-breadcrumbs-text-decoration-thickness); + --spectrum-breadcrumbs-text-decoration-gap: var(--system-breadcrumbs-text-decoration-gap); + --spectrum-breadcrumbs-separator-spacing-inline: var(--system-breadcrumbs-separator-spacing-inline); + --spectrum-breadcrumbs-text-spacing-block-start: var(--system-breadcrumbs-text-spacing-block-start); + --spectrum-breadcrumbs-text-spacing-block-end: var(--system-breadcrumbs-text-spacing-block-end); + --spectrum-breadcrumbs-icon-spacing-block: var(--system-breadcrumbs-icon-spacing-block); + --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--system-breadcrumbs-text-spacing-block-start-compact); + --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--system-breadcrumbs-text-spacing-block-end-compact); + --spectrum-breadcrumbs-icon-spacing-block-compact: var(--system-breadcrumbs-icon-spacing-block-compact); + --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--system-breadcrumbs-text-spacing-block-start-multiline); + --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--system-breadcrumbs-text-spacing-block-end-multiline); + --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--system-breadcrumbs-text-spacing-block-between-multiline); + --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--system-breadcrumbs-icon-spacing-block-start-multiline); + --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--system-breadcrumbs-icon-spacing-block-between-multiline); + --spectrum-breadcrumbs-inline-start: var(--system-breadcrumbs-inline-start); + --spectrum-breadcrumbs-inline-end: var(--system-breadcrumbs-inline-end); + --spectrum-breadcrumbs-action-button-spacing-inline: var(--system-breadcrumbs-action-button-spacing-inline); + --spectrum-breadcrumbs-action-button-spacing-block: var(--system-breadcrumbs-action-button-spacing-block); + --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--system-breadcrumbs-action-button-spacing-block-compact); + --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--system-breadcrumbs-action-button-spacing-inline-start); + --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--system-breadcrumbs-action-button-spacing-block-multiline); + --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--system-breadcrumbs-action-button-spacing-block-between-multiline); + --spectrum-breadcrumbs-focus-indicator-thickness: var(--system-breadcrumbs-focus-indicator-thickness); + --spectrum-breadcrumbs-focus-indicator-gap: var(--system-breadcrumbs-focus-indicator-gap); + --spectrum-breadcrumbs-item-link-border-radius: var(--system-breadcrumbs-item-link-border-radius); + --spectrum-breadcrumbs-text-color: var(--system-breadcrumbs-text-color); + --spectrum-breadcrumbs-text-color-current: var(--system-breadcrumbs-text-color-current); + --spectrum-breadcrumbs-text-color-disabled: var(--system-breadcrumbs-text-color-disabled); + --spectrum-breadcrumbs-separator-color: var(--system-breadcrumbs-separator-color); + --spectrum-breadcrumbs-action-button-color: var(--system-breadcrumbs-action-button-color); + --spectrum-breadcrumbs-action-button-color-disabled: var(--system-breadcrumbs-action-button-color-disabled); + --spectrum-breadcrumbs-focus-indicator-color: var(--system-breadcrumbs-focus-indicator-color); } + diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/packages/breadcrumbs/src/breadcrumbs.css index 15c7acd07e..9cfaa4e9f7 100644 --- a/packages/breadcrumbs/src/breadcrumbs.css +++ b/packages/breadcrumbs/src/breadcrumbs.css @@ -39,27 +39,15 @@ governing permissions and limitations under the License. :host([dir]) slot[slot='icon']::slotted([slot='icon']), :host([dir]) slot[slot='icon'] .icon { margin-inline: calc( - ( + ( + var( + --custom-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) - var( - --custom-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --custom-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ) * -1 - ) - calc( - ( - var( - --custom-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --custom-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ) * -1 - ); + --custom-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-edge-to-visual-only) + ) + ) * -1 + ); } diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css index 13bf7cc2f5..31d2a2c8bf 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css @@ -1,271 +1,119 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #separator { - margin-block: var( - --mod-breadcrumbs-icon-spacing-block, - var(--spectrum-breadcrumbs-icon-spacing-block) - ); - margin-inline: var( - --mod-breadcrumbs-separator-spacing-inline, - var(--spectrum-breadcrumbs-separator-spacing-inline) - ); - opacity: 1; - color: var( - --highcontrast-breadcrumbs-separator-color, - var( - --mod-breadcrumbs-separator-color, - var(--spectrum-breadcrumbs-separator-color) - ) - ); - position: relative; + margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); + margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); + opacity: 1; + color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); + position: relative; } -#separator:dir(rtl), -:host([dir='rtl']) #separator { - transform: scaleX(-1); +#separator:dir(rtl), :host([dir="rtl"]) #separator { + transform: scaleX(-1); } :host { - box-sizing: border-box; - white-space: nowrap; - font-family: var( - --mod-breadcrumbs-font-family, - var(--spectrum-breadcrumbs-font-family) - ); - font-size: var( - --mod-breadcrumbs-font-size, - var(--spectrum-breadcrumbs-font-size) - ); - font-weight: var( - --mod-breadcrumbs-font-weight, - var(--spectrum-breadcrumbs-font-weight) - ); - line-height: var( - --mod-breadcrumbs-line-height, - var(--spectrum-breadcrumbs-line-height) - ); - align-items: center; - display: inline-flex; - position: relative; + box-sizing: border-box; + white-space: nowrap; + font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); + font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); + font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); + line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); + align-items: center; + display: inline-flex; + position: relative; } :host(:not(.is-menu):last-of-type) { - font-family: var( - --mod-breadcrumbs-font-family-current, - var(--spectrum-breadcrumbs-font-family-current) - ); - font-size: var( - --mod-breadcrumbs-font-size-current, - var(--spectrum-breadcrumbs-font-size-current) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-current, - var(--spectrum-breadcrumbs-font-weight-current) - ); + font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); + font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); + font-weight: var(--mod-breadcrumbs-font-weight-current, var(--spectrum-breadcrumbs-font-weight-current)); } :host(:not(.is-menu):last-of-type) #separator { - display: none; + display: none; } ::slotted(sp-action-menu) { - margin-inline: var( - --mod-breadcrumbs-action-button-spacing-inline, - var(--spectrum-breadcrumbs-action-button-spacing-inline) - ); - margin-block: var( - --mod-breadcrumbs-action-button-spacing-block, - var(--spectrum-breadcrumbs-action-button-spacing-block) - ); - color: var( - --highcontrast-breadcrumbs-action-button-color, - var( - --mod-breadcrumbs-action-button-color, - var(--spectrum-breadcrumbs-action-button-color) - ) - ); + margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); + margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); + color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); } ::slotted(sp-action-menu[disabled]) { - color: var( - --highcontrast-breadcrumbs-action-button-color-disabled, - var( - --mod-breadcrumbs-action-button-color-disabled, - var(--spectrum-breadcrumbs-action-button-color-disabled) - ) - ); + color: var(--highcontrast-breadcrumbs-action-button-color-disabled, var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))); } :host(:first-of-type) > ::slotted(sp-action-menu) { - margin-inline-start: var( - --mod-breadcrumbs-action-button-spacing-inline-start, - var(--spectrum-breadcrumbs-action-button-spacing-inline-start) - ); + margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); } #item-link { - cursor: default; - box-sizing: border-box; - border-radius: var( - --mod-breadcrumbs-item-link-border-radius, - var(--spectrum-breadcrumbs-item-link-border-radius) - ); - color: var( - --highcontrast-breadcrumbs-text-color, - var( - --mod-breadcrumbs-text-color, - var(--spectrum-breadcrumbs-text-color) - ) - ); - outline: none; - margin-block-start: var( - --mod-breadcrumbs-text-spacing-block-start, - var(--spectrum-breadcrumbs-text-spacing-block-start) - ); - margin-block-end: var( - --mod-breadcrumbs-text-spacing-block-end, - var(--spectrum-breadcrumbs-text-spacing-block-end) - ); - -webkit-text-decoration: none; - text-decoration: none; - display: block; - position: relative; + cursor: default; + box-sizing: border-box; + border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + outline: none; + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); + margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); + -webkit-text-decoration: none; + text-decoration: none; + display: block; + position: relative; } -#item-link.is-disabled, -:host([aria-disabled='true']) #item-link { - color: var( - --highcontrast-breadcrumbs-text-color-disabled, - var( - --mod-breadcrumbs-text-color-disabled, - var(--spectrum-breadcrumbs-text-color-disabled) - ) - ); +#item-link.is-disabled, :host([aria-disabled="true"]) #item-link { + color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); } :host(:not(.is-menu):last-of-type) #item-link { - color: var( - --highcontrast-breadcrumbs-text-color-current, - var( - --mod-breadcrumbs-text-color-current, - var(--spectrum-breadcrumbs-text-color-current) - ) - ); + color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); } -#item-link[href], -#item-link[tabindex] { - cursor: pointer; +#item-link[href], #item-link[tabindex] { + cursor: pointer; } -#item-link[href]:focus-visible, -#item-link[tabindex]:focus-visible { - -webkit-text-decoration: underline; - text-decoration: underline; - text-decoration-thickness: var( - --mod-breadcrumbs-text-decoration-thickness, - var(--spectrum-breadcrumbs-text-decoration-thickness) - ); - text-underline-offset: var( - --mod-breadcrumbs-text-decoration-gap, - var(--spectrum-breadcrumbs-text-decoration-gap) - ); +#item-link[href]:focus-visible, #item-link[tabindex]:focus-visible { + -webkit-text-decoration: underline; + text-decoration: underline; + text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); + text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap)); } @media (hover: hover) { - #item-link[href]:hover, - #item-link[tabindex]:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - text-decoration-thickness: var( - --mod-breadcrumbs-text-decoration-thickness, - var(--spectrum-breadcrumbs-text-decoration-thickness) - ); - text-underline-offset: var( - --mod-breadcrumbs-text-decoration-gap, - var(--spectrum-breadcrumbs-text-decoration-gap) - ); - } + #item-link[href]:hover, #item-link[tabindex]:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); + text-underline-offset: var(--mod-breadcrumbs-text-decoration-gap, var(--spectrum-breadcrumbs-text-decoration-gap)); + } } -:host .is-dragged #item-link:before, -#item-link:focus-visible:before { - box-sizing: border-box; - inline-size: calc( - 100% + - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) * 2 + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) * 2 - ); - block-size: calc( - 100% + - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) * 2 + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) * 2 - ); - border-width: var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ); - border-radius: var( - --mod-breadcrumbs-item-link-border-radius, - var(--spectrum-breadcrumbs-item-link-border-radius) - ); - content: ''; - pointer-events: none; - border-style: solid; - border-color: var( - --highcontrast-breadcrumbs-focus-indicator-color, - var( - --mod-breadcrumbs-focus-indicator-color, - var(--spectrum-breadcrumbs-focus-indicator-color) - ) - ); - margin-block-start: calc( - ( - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) - ) * -1 - ); - margin-inline-start: calc( - ( - var( - --mod-breadcrumbs-focus-indicator-gap, - var(--spectrum-breadcrumbs-focus-indicator-gap) - ) + - var( - --mod-breadcrumbs-focus-indicator-thickness, - var(--spectrum-breadcrumbs-focus-indicator-thickness) - ) - ) * -1 - ); - display: block; - position: absolute; +:host .is-dragged #item-link:before, #item-link:focus-visible:before { + box-sizing: border-box; + inline-size: calc(100.0% + var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2); + block-size: calc(100.0% + var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) * 2 + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)) * 2); + border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); + border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + content: ""; + pointer-events: none; + border-style: solid; + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); + margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); + display: block; + position: absolute; } + diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs.css b/packages/breadcrumbs/src/spectrum-breadcrumbs.css index 1156522da0..df50ce88fd 100644 --- a/packages/breadcrumbs/src/spectrum-breadcrumbs.css +++ b/packages/breadcrumbs/src/spectrum-breadcrumbs.css @@ -1,92 +1,60 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + :host { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } #list { - block-size: var( - --mod-breadcrumbs-block-size, - var(--spectrum-breadcrumbs-block-size) - ); - flex-flow: row; - flex: 1 0; - justify-content: flex-start; - align-items: center; - margin: 0; - padding-inline-start: var( - --mod-breadcrumbs-inline-start, - var(--spectrum-breadcrumbs-inline-start) - ); - padding-inline-end: var( - --mod-breadcrumbs-inline-end, - var(--spectrum-breadcrumbs-inline-end) - ); - list-style-type: none; - display: flex; + block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); + flex-flow: row; + flex: 1 0; + justify-content: flex-start; + align-items: center; + margin: 0; + padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + list-style-type: none; + display: flex; } :host([compact]) #list { - block-size: var( - --mod-breadcrumbs-block-size-compact, - var(--spectrum-breadcrumbs-block-size-compact) - ); + block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); } .spectrum-Breadcrumbs--multiline { - block-size: var( - --mod-breadcrumbs-block-size-multiline, - var(--spectrum-breadcrumbs-block-size-multiline) - ); - flex-wrap: wrap; - align-content: center; + block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); + flex-wrap: wrap; + align-content: center; } :host([compact]) ::slotted(sp-breadcrumb-item) { - font-family: var( - --mod-breadcrumbs-font-family-compact, - var(--spectrum-breadcrumbs-font-family-compact) - ); - font-size: var( - --mod-breadcrumbs-font-size-compact, - var(--spectrum-breadcrumbs-font-size-compact) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-compact, - var(--spectrum-breadcrumbs-font-weight-compact) - ); + font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); + font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); + font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); } :host([compact]) ::slotted(:last-of-type) { - font-family: var( - --mod-breadcrumbs-font-family-compact-current, - var(--spectrum-breadcrumbs-font-family-compact-current) - ); - font-size: var( - --mod-breadcrumbs-font-size-compact-current, - var(--spectrum-breadcrumbs-font-size-compact-current) - ); - font-weight: var( - --mod-breadcrumbs-font-weight-compact-current, - var(--spectrum-breadcrumbs-font-weight-compact-current) - ); + font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); + font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); + font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); } + diff --git a/packages/button-group/src/button-group-overrides.css b/packages/button-group/src/button-group-overrides.css index 91a028431c..f6d540bcd4 100644 --- a/packages/button-group/src/button-group-overrides.css +++ b/packages/button-group/src/button-group-overrides.css @@ -1,57 +1,38 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-spacing-vertical - ); + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-spacing-vertical); } -:host([size='s']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-s-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-s-spacing-vertical - ); +:host([size="s"]) { + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-size-s-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-size-s-spacing-vertical); } :host { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-m-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-m-spacing-vertical - ); + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-size-m-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-size-m-spacing-vertical); } -:host([size='l']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-l-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-l-spacing-vertical - ); +:host([size="l"]) { + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-size-l-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-size-l-spacing-vertical); } -:host([size='xl']) { - --spectrum-buttongroup-spacing-horizontal: var( - --system-button-group-size-xl-spacing-horizontal - ); - --spectrum-buttongroup-spacing-vertical: var( - --system-button-group-size-xl-spacing-vertical - ); +:host([size="xl"]) { + --spectrum-buttongroup-spacing-horizontal: var(--system-button-group-size-xl-spacing-horizontal); + --spectrum-buttongroup-spacing-vertical: var(--system-button-group-size-xl-spacing-vertical); } + diff --git a/packages/button-group/src/spectrum-button-group.css b/packages/button-group/src/spectrum-button-group.css index af5598e9f1..450783a9c4 100644 --- a/packages/button-group/src/spectrum-button-group.css +++ b/packages/button-group/src/spectrum-button-group.css @@ -1,36 +1,31 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - gap: var( - --mod-buttongroup-spacing-horizontal, - var(--spectrum-buttongroup-spacing-horizontal) - ); - justify-content: normal; - justify-content: var(--mod-buttongroup-justify-content, normal); - flex-wrap: wrap; - display: flex; + gap: var(--mod-buttongroup-spacing-horizontal, var(--spectrum-buttongroup-spacing-horizontal)); + justify-content: normal; + justify-content: var(--mod-buttongroup-justify-content, normal); + flex-wrap: wrap; + display: flex; } ::slotted(*) { - flex-shrink: 0; + flex-shrink: 0; } :host([vertical]) { - gap: var( - --mod-buttongroup-spacing-vertical, - var(--spectrum-buttongroup-spacing-vertical) - ); - flex-direction: column; - display: inline-flex; + gap: var(--mod-buttongroup-spacing-vertical, var(--spectrum-buttongroup-spacing-vertical)); + flex-direction: column; + display: inline-flex; } + diff --git a/packages/button/src/button-overrides.css b/packages/button/src/button-overrides.css index f5827dcfef..dd28c346c8 100644 --- a/packages/button/src/button-overrides.css +++ b/packages/button/src/button-overrides.css @@ -1,1128 +1,461 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-button-animation-duration: var( - --system-button-animation-duration - ); - --spectrum-button-border-radius: var(--system-button-border-radius); - --spectrum-button-border-width: var(--system-button-border-width); - --spectrum-button-line-height: var(--system-button-line-height); - --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); - --spectrum-button-focus-ring-thickness: var( - --system-button-focus-ring-thickness - ); - --spectrum-button-focus-indicator-color: var( - --system-button-focus-indicator-color - ); - --spectrum-button-intended-icon-size: var( - --system-button-intended-icon-size - ); - --spectrum-button-background-color-default: var( - --system-button-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-border-color-hover - ); - --spectrum-button-border-color-down: var(--system-button-border-color-down); - --spectrum-button-border-color-focus: var( - --system-button-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-content-color-disabled - ); + --spectrum-button-animation-duration: var(--system-button-animation-duration); + --spectrum-button-border-radius: var(--system-button-border-radius); + --spectrum-button-border-width: var(--system-button-border-width); + --spectrum-button-line-height: var(--system-button-line-height); + --spectrum-button-focus-ring-gap: var(--system-button-focus-ring-gap); + --spectrum-button-focus-ring-thickness: var(--system-button-focus-ring-thickness); + --spectrum-button-focus-indicator-color: var(--system-button-focus-indicator-color); + --spectrum-button-intended-icon-size: var(--system-button-intended-icon-size); + --spectrum-button-background-color-default: var(--system-button-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-content-color-disabled); } -:host([variant='accent']) { - --spectrum-button-background-color-default: var( - --system-button-accent-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-accent-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-accent-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-accent-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-accent-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-accent-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-accent-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-accent-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-accent-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-accent-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-accent-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-accent-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-accent-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-accent-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-accent-content-color-disabled - ); +:host([variant="accent"]) { + --spectrum-button-background-color-default: var(--system-button-accent-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-accent-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-accent-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-accent-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-accent-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-accent-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-accent-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-accent-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-accent-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-accent-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-accent-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-accent-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-accent-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-accent-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-accent-content-color-disabled); } -:host([variant='accent'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-accent-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-accent-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-accent-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-accent-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-accent-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-accent-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-accent-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-accent-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-accent-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-accent-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-accent-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-accent-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-accent-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-accent-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-accent-outline-content-color-disabled - ); +:host([variant="accent"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-accent-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-accent-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-accent-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-accent-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-accent-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-accent-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-accent-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-accent-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-accent-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-accent-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-accent-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-accent-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-accent-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-accent-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-accent-outline-content-color-disabled); } -:host([variant='negative']) { - --spectrum-button-background-color-default: var( - --system-button-negative-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-negative-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-negative-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-negative-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-negative-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-negative-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-negative-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-negative-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-negative-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-negative-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-negative-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-negative-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-negative-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-negative-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-negative-content-color-disabled - ); +:host([variant="negative"]) { + --spectrum-button-background-color-default: var(--system-button-negative-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-negative-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-negative-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-negative-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-negative-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-negative-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-negative-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-negative-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-negative-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-negative-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-negative-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-negative-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-negative-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-negative-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-negative-content-color-disabled); } -:host([variant='negative'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-negative-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-negative-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-negative-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-negative-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-negative-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-negative-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-negative-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-negative-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-negative-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-negative-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-negative-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-negative-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-negative-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-negative-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-negative-outline-content-color-disabled - ); +:host([variant="negative"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-negative-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-negative-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-negative-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-negative-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-negative-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-negative-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-negative-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-negative-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-negative-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-negative-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-negative-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-negative-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-negative-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-negative-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-negative-outline-content-color-disabled); } -:host([variant='primary']) { - --spectrum-button-background-color-default: var( - --system-button-primary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-primary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-primary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-primary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-primary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-primary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-primary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-primary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-primary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-primary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-primary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-primary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-primary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-primary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-primary-content-color-disabled - ); +:host([variant="primary"]) { + --spectrum-button-background-color-default: var(--system-button-primary-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-primary-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-primary-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-primary-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-primary-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-primary-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-primary-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-primary-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-primary-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-primary-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-primary-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-primary-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-primary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-primary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-primary-content-color-disabled); } -:host([variant='primary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-primary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-primary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-primary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-primary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-primary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-primary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-primary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-primary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-primary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-primary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-primary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-primary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-primary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-primary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-primary-outline-content-color-disabled - ); +:host([variant="primary"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-primary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-primary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-primary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-primary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-primary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-primary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-primary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-primary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-primary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-primary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-primary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-primary-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-primary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-primary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-primary-outline-content-color-disabled); } -:host([variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-secondary-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-secondary-content-color-disabled - ); +:host([variant="secondary"]) { + --spectrum-button-background-color-default: var(--system-button-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-secondary-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-secondary-content-color-disabled); } -:host([variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-secondary-outline-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-secondary-outline-content-color-disabled - ); +:host([variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-secondary-outline-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-secondary-outline-content-color-disabled); } :host([quiet]) { - --spectrum-button-background-color-default: var( - --system-button-quiet-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-quiet-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-quiet-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-quiet-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-quiet-border-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-quiet-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-quiet-border-color-disabled - ); + --spectrum-button-background-color-default: var(--system-button-quiet-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-quiet-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-quiet-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-quiet-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-quiet-border-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-quiet-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-quiet-border-color-disabled); } :host([selected]) { - --spectrum-button-background-color-default: var( - --system-button-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-selected-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-selected-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-selected-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-selected-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-selected-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-selected-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-selected-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-selected-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-selected-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-selected-border-color-disabled - ); + --spectrum-button-background-color-default: var(--system-button-selected-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-selected-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-selected-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-selected-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-selected-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-selected-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-selected-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-selected-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-selected-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-selected-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-selected-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-selected-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-selected-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-selected-border-color-disabled); } :host([selected][emphasized]) { - --spectrum-button-background-color-default: var( - --system-button-selected-emphasized-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-selected-emphasized-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-selected-emphasized-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-selected-emphasized-background-color-focus - ); + --spectrum-button-background-color-default: var(--system-button-selected-emphasized-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-selected-emphasized-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-selected-emphasized-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-selected-emphasized-background-color-focus); } -:host([static-color='black'][quiet]) { - --spectrum-button-border-color-default: var( - --system-button-static-black-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-quiet-border-color-disabled - ); +:host([static-color="black"][quiet]) { + --spectrum-button-border-color-default: var(--system-button-static-black-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-quiet-border-color-focus); + --spectrum-button-border-color-disabled: var(--system-button-static-black-quiet-border-color-disabled); } -:host([static-color='white'][quiet]) { - --spectrum-button-border-color-default: var( - --system-button-static-white-quiet-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-quiet-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-quiet-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-quiet-border-color-focus - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-quiet-border-color-disabled - ); +:host([static-color="white"][quiet]) { + --spectrum-button-border-color-default: var(--system-button-static-white-quiet-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-white-quiet-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-white-quiet-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-white-quiet-border-color-focus); + --spectrum-button-border-color-disabled: var(--system-button-static-white-quiet-border-color-disabled); } -:host([static-color='white']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-content-color-disabled - ); +:host([static-color="white"]) { + --spectrum-button-background-color-default: var(--system-button-static-white-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-white-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-white-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-white-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-white-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-white-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-white-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-white-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-white-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-white-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-white-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-white-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-white-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-white-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-white-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-white-content-color-disabled); } -:host([static-color='white'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-outline-content-color-disabled - ); +:host([static-color="white"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-static-white-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-white-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-white-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-white-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-white-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-white-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-white-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-white-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-white-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-white-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-white-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-white-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-white-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-white-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-white-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-white-outline-content-color-disabled); } -:host([static-color='white'][selected]) { - --spectrum-button-background-color-default: var( - --system-button-static-white-selected-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-selected-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-selected-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-selected-background-color-focus - ); - --spectrum-button-static-white-content-color-default: var( - --system-button-static-white-selected-static-white-content-color-default - ); - --spectrum-button-static-white-content-color-hover: var( - --system-button-static-white-selected-static-white-content-color-hover - ); - --spectrum-button-static-white-content-color-down: var( - --system-button-static-white-selected-static-white-content-color-down - ); - --spectrum-button-static-white-content-color-focus: var( - --system-button-static-white-selected-static-white-content-color-focus - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-selected-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-selected-border-color-disabled - ); +:host([static-color="white"][selected]) { + --spectrum-button-background-color-default: var(--system-button-static-white-selected-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-white-selected-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-white-selected-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-white-selected-background-color-focus); + --spectrum-button-static-white-content-color-default: var(--system-button-static-white-selected-static-white-content-color-default); + --spectrum-button-static-white-content-color-hover: var(--system-button-static-white-selected-static-white-content-color-hover); + --spectrum-button-static-white-content-color-down: var(--system-button-static-white-selected-static-white-content-color-down); + --spectrum-button-static-white-content-color-focus: var(--system-button-static-white-selected-static-white-content-color-focus); + --spectrum-button-background-color-disabled: var(--system-button-static-white-selected-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-white-selected-border-color-disabled); } -:host([static-color='white'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-content-color-disabled - ); +:host([static-color="white"][variant="secondary"]) { + --spectrum-button-background-color-default: var(--system-button-static-white-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-white-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-white-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-white-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-white-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-white-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-white-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-white-secondary-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-white-secondary-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-white-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-white-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-white-secondary-content-color-disabled); } -:host([static-color='white'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-white-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-white-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-white-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-white-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-white-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-white-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-white-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-white-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-white-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-white-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-white-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-white-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-white-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-white-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-white-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-white-secondary-outline-content-color-disabled - ); +:host([static-color="white"][variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-static-white-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-white-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-white-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-white-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-white-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-white-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-white-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-white-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-white-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-white-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-white-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-white-secondary-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-white-secondary-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-white-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-white-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-white-secondary-outline-content-color-disabled); } -:host([static-color='black']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-content-color-disabled - ); +:host([static-color="black"]) { + --spectrum-button-background-color-default: var(--system-button-static-black-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-black-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-black-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-black-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-black-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-black-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-black-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-black-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-black-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-black-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-black-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-black-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-black-content-color-disabled); } -:host([static-color='black'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-outline-content-color-disabled - ); +:host([static-color="black"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-static-black-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-black-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-black-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-black-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-black-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-black-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-black-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-black-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-black-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-black-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-black-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-black-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-black-outline-content-color-disabled); } -:host([static-color='black'][variant='secondary']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-secondary-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-secondary-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-secondary-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-secondary-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-secondary-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-secondary-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-secondary-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-secondary-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-secondary-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-secondary-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-secondary-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-secondary-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-secondary-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-secondary-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-secondary-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-secondary-content-color-disabled - ); +:host([static-color="black"][variant="secondary"]) { + --spectrum-button-background-color-default: var(--system-button-static-black-secondary-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-black-secondary-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-black-secondary-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-secondary-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-black-secondary-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-black-secondary-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-black-secondary-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-black-secondary-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-black-secondary-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-black-secondary-content-color-disabled); } -:host([static-color='black'][variant='secondary'][treatment='outline']) { - --spectrum-button-background-color-default: var( - --system-button-static-black-secondary-outline-background-color-default - ); - --spectrum-button-background-color-hover: var( - --system-button-static-black-secondary-outline-background-color-hover - ); - --spectrum-button-background-color-down: var( - --system-button-static-black-secondary-outline-background-color-down - ); - --spectrum-button-background-color-focus: var( - --system-button-static-black-secondary-outline-background-color-focus - ); - --spectrum-button-border-color-default: var( - --system-button-static-black-secondary-outline-border-color-default - ); - --spectrum-button-border-color-hover: var( - --system-button-static-black-secondary-outline-border-color-hover - ); - --spectrum-button-border-color-down: var( - --system-button-static-black-secondary-outline-border-color-down - ); - --spectrum-button-border-color-focus: var( - --system-button-static-black-secondary-outline-border-color-focus - ); - --spectrum-button-content-color-default: var( - --system-button-static-black-secondary-outline-content-color-default - ); - --spectrum-button-content-color-hover: var( - --system-button-static-black-secondary-outline-content-color-hover - ); - --spectrum-button-content-color-down: var( - --system-button-static-black-secondary-outline-content-color-down - ); - --spectrum-button-content-color-focus: var( - --system-button-static-black-secondary-outline-content-color-focus - ); - --spectrum-button-focus-indicator-color: var( - --system-button-static-black-secondary-outline-focus-indicator-color - ); - --spectrum-button-background-color-disabled: var( - --system-button-static-black-secondary-outline-background-color-disabled - ); - --spectrum-button-border-color-disabled: var( - --system-button-static-black-secondary-outline-border-color-disabled - ); - --spectrum-button-content-color-disabled: var( - --system-button-static-black-secondary-outline-content-color-disabled - ); +:host([static-color="black"][variant="secondary"][treatment="outline"]) { + --spectrum-button-background-color-default: var(--system-button-static-black-secondary-outline-background-color-default); + --spectrum-button-background-color-hover: var(--system-button-static-black-secondary-outline-background-color-hover); + --spectrum-button-background-color-down: var(--system-button-static-black-secondary-outline-background-color-down); + --spectrum-button-background-color-focus: var(--system-button-static-black-secondary-outline-background-color-focus); + --spectrum-button-border-color-default: var(--system-button-static-black-secondary-outline-border-color-default); + --spectrum-button-border-color-hover: var(--system-button-static-black-secondary-outline-border-color-hover); + --spectrum-button-border-color-down: var(--system-button-static-black-secondary-outline-border-color-down); + --spectrum-button-border-color-focus: var(--system-button-static-black-secondary-outline-border-color-focus); + --spectrum-button-content-color-default: var(--system-button-static-black-secondary-outline-content-color-default); + --spectrum-button-content-color-hover: var(--system-button-static-black-secondary-outline-content-color-hover); + --spectrum-button-content-color-down: var(--system-button-static-black-secondary-outline-content-color-down); + --spectrum-button-content-color-focus: var(--system-button-static-black-secondary-outline-content-color-focus); + --spectrum-button-focus-indicator-color: var(--system-button-static-black-secondary-outline-focus-indicator-color); + --spectrum-button-background-color-disabled: var(--system-button-static-black-secondary-outline-background-color-disabled); + --spectrum-button-border-color-disabled: var(--system-button-static-black-secondary-outline-border-color-disabled); + --spectrum-button-content-color-disabled: var(--system-button-static-black-secondary-outline-content-color-disabled); } -:host([size='s']) { - --spectrum-button-min-width: var(--system-button-size-s-min-width); - --spectrum-button-border-radius: var(--system-button-size-s-border-radius); - --spectrum-button-height: var(--system-button-size-s-height); - --spectrum-button-font-size: var(--system-button-size-s-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-s-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-s-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-s-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-s-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-s-intended-icon-size - ); +:host([size="s"]) { + --spectrum-button-min-width: var(--system-button-size-s-min-width); + --spectrum-button-border-radius: var(--system-button-size-s-border-radius); + --spectrum-button-height: var(--system-button-size-s-height); + --spectrum-button-font-size: var(--system-button-size-s-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-s-edge-to-visual); + --spectrum-button-edge-to-visual-only: var(--system-button-size-s-edge-to-visual-only); + --spectrum-button-edge-to-text: var(--system-button-size-s-edge-to-text); + --spectrum-button-padding-label-to-icon: var(--system-button-size-s-padding-label-to-icon); + --spectrum-button-top-to-text: var(--system-button-size-s-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-s-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-s-top-to-icon); + --spectrum-button-intended-icon-size: var(--system-button-size-s-intended-icon-size); } :host { - --spectrum-button-min-width: var(--system-button-size-m-min-width); - --spectrum-button-border-radius: var(--system-button-size-m-border-radius); - --spectrum-button-height: var(--system-button-size-m-height); - --spectrum-button-font-size: var(--system-button-size-m-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-m-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-m-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-m-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-m-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-m-intended-icon-size - ); + --spectrum-button-min-width: var(--system-button-size-m-min-width); + --spectrum-button-border-radius: var(--system-button-size-m-border-radius); + --spectrum-button-height: var(--system-button-size-m-height); + --spectrum-button-font-size: var(--system-button-size-m-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-m-edge-to-visual); + --spectrum-button-edge-to-visual-only: var(--system-button-size-m-edge-to-visual-only); + --spectrum-button-edge-to-text: var(--system-button-size-m-edge-to-text); + --spectrum-button-padding-label-to-icon: var(--system-button-size-m-padding-label-to-icon); + --spectrum-button-top-to-text: var(--system-button-size-m-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-m-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-m-top-to-icon); + --spectrum-button-intended-icon-size: var(--system-button-size-m-intended-icon-size); } -:host([size='l']) { - --spectrum-button-min-width: var(--system-button-size-l-min-width); - --spectrum-button-border-radius: var(--system-button-size-l-border-radius); - --spectrum-button-height: var(--system-button-size-l-height); - --spectrum-button-font-size: var(--system-button-size-l-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-l-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-l-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-l-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-l-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-l-intended-icon-size - ); +:host([size="l"]) { + --spectrum-button-min-width: var(--system-button-size-l-min-width); + --spectrum-button-border-radius: var(--system-button-size-l-border-radius); + --spectrum-button-height: var(--system-button-size-l-height); + --spectrum-button-font-size: var(--system-button-size-l-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-l-edge-to-visual); + --spectrum-button-edge-to-visual-only: var(--system-button-size-l-edge-to-visual-only); + --spectrum-button-edge-to-text: var(--system-button-size-l-edge-to-text); + --spectrum-button-padding-label-to-icon: var(--system-button-size-l-padding-label-to-icon); + --spectrum-button-top-to-text: var(--system-button-size-l-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-l-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-l-top-to-icon); + --spectrum-button-intended-icon-size: var(--system-button-size-l-intended-icon-size); } -:host([size='xl']) { - --spectrum-button-min-width: var(--system-button-size-xl-min-width); - --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); - --spectrum-button-height: var(--system-button-size-xl-height); - --spectrum-button-font-size: var(--system-button-size-xl-font-size); - --spectrum-button-edge-to-visual: var( - --system-button-size-xl-edge-to-visual - ); - --spectrum-button-edge-to-visual-only: var( - --system-button-size-xl-edge-to-visual-only - ); - --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); - --spectrum-button-padding-label-to-icon: var( - --system-button-size-xl-padding-label-to-icon - ); - --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); - --spectrum-button-bottom-to-text: var( - --system-button-size-xl-bottom-to-text - ); - --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); - --spectrum-button-intended-icon-size: var( - --system-button-size-xl-intended-icon-size - ); +:host([size="xl"]) { + --spectrum-button-min-width: var(--system-button-size-xl-min-width); + --spectrum-button-border-radius: var(--system-button-size-xl-border-radius); + --spectrum-button-height: var(--system-button-size-xl-height); + --spectrum-button-font-size: var(--system-button-size-xl-font-size); + --spectrum-button-edge-to-visual: var(--system-button-size-xl-edge-to-visual); + --spectrum-button-edge-to-visual-only: var(--system-button-size-xl-edge-to-visual-only); + --spectrum-button-edge-to-text: var(--system-button-size-xl-edge-to-text); + --spectrum-button-padding-label-to-icon: var(--system-button-size-xl-padding-label-to-icon); + --spectrum-button-top-to-text: var(--system-button-size-xl-top-to-text); + --spectrum-button-bottom-to-text: var(--system-button-size-xl-bottom-to-text); + --spectrum-button-top-to-icon: var(--system-button-size-xl-top-to-icon); + --spectrum-button-intended-icon-size: var(--system-button-size-xl-intended-icon-size); } + diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 0fcd8d9ebf..ddbb0919e4 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -1,626 +1,285 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } -:host .is-disabled, -:host([disabled]) { - cursor: default; +:host .is-disabled, :host([disabled]) { + cursor: default; } :host:after { - margin: calc( - -1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) - ); - transition: - opacity - var( - --mod-button-animation-duration, - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ) - ease-out, - margin - var( - --mod-button-animation-duration, - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ) - ease-out; - display: block; - inset-block: 0; - inset-inline: 0; + margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)))); + transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out, margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out; + display: block; + inset-block: 0; + inset-inline: 0; } :host(:focus-visible):after { - margin: calc( - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2 - ); + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); } #label { - place-self: center; + place-self: center; } #label[hidden] { - display: none; + display: none; } :host { - --mod-progress-circle-position: absolute; - border-radius: var( - --mod-button-border-radius, - var(--spectrum-button-border-radius) - ); - border-width: var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ); - font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); - gap: var( - --mod-button-padding-label-to-icon, - var(--spectrum-button-padding-label-to-icon) - ); - max-inline-size: none; - max-inline-size: var(--mod-button-max-inline-size, none); - min-inline-size: var( - --mod-button-min-width, - var(--spectrum-button-min-width) - ); - min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - padding-block: 0; - padding-inline: var( - --mod-button-edge-to-text, - var(--spectrum-button-edge-to-text) - ); - color: inherit; - margin-block: 0; - margin-block: var(--mod-button-margin-block, 0); - border-style: solid; - margin-inline-start: var(--mod-button-margin-left, 0); - margin-inline-end: var(--mod-button-margin-right, 0); - position: relative; + --mod-progress-circle-position: absolute; + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); + max-inline-size: none; + max-inline-size: var(--mod-button-max-inline-size, none); + min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); + min-block-size: var(--mod-button-height, var(--spectrum-button-height)); + padding-block: 0; + padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); + color: inherit; + margin-block: 0; + margin-block: var(--mod-button-margin-block, 0); + border-style: solid; + margin-inline-start: var(--mod-button-margin-left, 0); + margin-inline-end: var(--mod-button-margin-right, 0); + position: relative; } :host(:is(:active, [active])) { - box-shadow: none; + box-shadow: none; } -::slotted([slot='icon']) { - --_icon-size-difference: max( - 0px, - var(--spectrum-button-intended-icon-size) - - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size)) - ); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - margin-block-start: var( - --mod-button-icon-margin-block-start, - max( - 0px, - var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - - var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ) + (var(--_icon-size-difference, 0px) / 2) - ) - ); - margin-inline-start: calc( - var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)) - ); +::slotted([slot="icon"]) { + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-size, var(--spectrum-button-intended-icon-size))); + color: inherit; + flex-shrink: 0; + align-self: flex-start; + margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); + margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); } :host([icon-only]) { - min-inline-size: unset; - padding: calc( - var( - --mod-button-edge-to-visual-only, - var(--spectrum-button-edge-to-visual-only) - ) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); - border-radius: 50%; + min-inline-size: unset; + padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + border-radius: 50%; } -:host([icon-only]) ::slotted([slot='icon']) { - align-self: center; - margin-block-start: 0; - margin-inline-start: 0; +:host([icon-only]) ::slotted([slot="icon"]) { + align-self: center; + margin-block-start: 0; + margin-inline-start: 0; } :host([icon-only]):after { - border-radius: 50%; + border-radius: 50%; } #label { - line-height: var( - --mod-button-line-height, - var(--spectrum-button-line-height) - ); - text-align: center; - text-align: var(--mod-button-text-align, center); - align-self: start; - padding-block-start: calc( - var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); - padding-block-end: calc( - var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - - var(--mod-button-border-width, var(--spectrum-button-border-width)) - ); -} - -[name='icon'] + #label { - text-align: start; - text-align: var(--mod-button-text-align-with-icon, start); -} - -:host([focused]):after, -:host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - var( - --mod-button-focus-ring-color, - var(--spectrum-button-focus-indicator-color) - ); + line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); + text-align: center; + text-align: var(--mod-button-text-align, center); + align-self: start; + padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); +} + +[name="icon"] + #label { + text-align: start; + text-align: var(--mod-button-text-align-with-icon, start); +} + +:host([focused]):after, :host(:focus-visible):after { + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); } :host { - transition: border-color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; + transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; } :host:after { - margin: calc( - ( - var( - --mod-button-focus-ring-gap, - var(--spectrum-button-focus-ring-gap) - ) + - var( - --mod-button-border-width, - var(--spectrum-button-border-width) - ) - ) * -1 - ); - border-radius: var( - --mod-button-focus-ring-border-radius, - calc( - var( - --mod-button-border-radius, - var(--spectrum-button-border-radius) - ) + - var( - --mod-focus-indicator-gap, - var(--spectrum-focus-indicator-gap) - ) - ) - ); - transition: box-shadow - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration) - ) - ease-in-out; - pointer-events: none; - content: ''; - position: absolute; - inset: 0; + margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); + border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)))); + transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + pointer-events: none; + content: ""; + position: absolute; + inset: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - var( - --highcontrast-button-focus-ring-color, - var( - --mod-button-focus-ring-color, - var( - --mod-button-focus-ring-color, - var(--spectrum-button-focus-indicator-color) - ) - ) - ); + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); } :host { - background-color: var( - --highcontrast-button-background-color-default, - var( - --mod-button-background-color-default, - var(--spectrum-button-background-color-default) - ) - ); - border-color: var( - --highcontrast-button-border-color-default, - var( - --mod-button-border-color-default, - var(--spectrum-button-border-color-default) - ) - ); - color: var( - --highcontrast-button-content-color-default, - var( - --mod-button-content-color-default, - var(--spectrum-button-content-color-default) - ) - ); - transition: - border 0.13s linear, - color 0.13s linear, - background-color 0.13s linear; - transition: - border - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear, - color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear, - background-color - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - linear; + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + transition: border .13s linear, color .13s linear, background-color .13s linear; + transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) linear, color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) linear, background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) linear; } @media (hover: hover) { - :host(:hover) { - box-shadow: none; - background-color: var( - --highcontrast-button-background-color-hover, - var( - --mod-button-background-color-hover, - var(--spectrum-button-background-color-hover) - ) - ); - border-color: var( - --highcontrast-button-border-color-hover, - var( - --mod-button-border-color-hover, - var(--spectrum-button-border-color-hover) - ) - ); - color: var( - --highcontrast-button-content-color-hover, - var( - --mod-button-content-color-hover, - var(--spectrum-button-content-color-hover) - ) - ); - } + :host(:hover) { + box-shadow: none; + background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); + border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); + color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); + } } :host(:focus-visible) { - background-color: var( - --highcontrast-button-background-color-focus, - var( - --mod-button-background-color-focus, - var(--spectrum-button-background-color-focus) - ) - ); - border-color: var( - --highcontrast-button-border-color-focus, - var( - --mod-button-border-color-focus, - var(--spectrum-button-border-color-focus) - ) - ); - color: var( - --highcontrast-button-content-color-focus, - var( - --mod-button-content-color-focus, - var(--spectrum-button-content-color-focus) - ) - ); + background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); + border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); + color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-button-background-color-down, - var( - --mod-button-background-color-down, - var(--spectrum-button-background-color-down) - ) - ); - border-color: var( - --highcontrast-button-border-color-down, - var( - --mod-button-border-color-down, - var(--spectrum-button-border-color-down) - ) - ); - color: var( - --highcontrast-button-content-color-down, - var( - --mod-button-content-color-down, - var(--spectrum-button-content-color-down) - ) - ); -} - -:host .is-disabled, -:host([pending]), -:host([disabled]), -:host([pending]) { - background-color: var( - --highcontrast-button-background-color-disabled, - var( - --mod-button-background-color-disabled, - var(--spectrum-button-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-button-border-color-disabled, - var( - --mod-button-border-color-disabled, - var(--spectrum-button-border-color-disabled) - ) - ); - color: var( - --highcontrast-button-content-color-disabled, - var( - --mod-button-content-color-disabled, - var(--spectrum-button-content-color-disabled) - ) - ); -} - -#label, -::slotted([slot='icon']) { - visibility: visible; - opacity: 1; - transition: opacity 0.13s ease-in-out; - transition: opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out; + background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); + border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); + color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); +} + +:host .is-disabled, :host([pending]), :host([disabled]), :host([pending]) { + background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); + border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); + color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); +} + +#label, ::slotted([slot="icon"]) { + visibility: visible; + opacity: 1; + transition: opacity .13s ease-in-out; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) ease-in-out; } .spectrum-ProgressCircle { - visibility: hidden; - opacity: 0; - transition: - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ); -} - -:host([pending]), -:host([pending]) { - cursor: default; -} - -:host([pending]) .spectrum-ProgressCircle, -:host([pending]) .spectrum-ProgressCircle { - visibility: visible; - opacity: 1; - transition: opacity 0.13s ease-in-out; - transition: opacity - var( - --mod-button-animation-duration, - var(--spectrum-button-animation-duration, 0.13s) - ) - ease-in-out; + visibility: hidden; + opacity: 0; + transition: opacity .13s ease-in-out, visibility 0s linear .13s; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) ease-in-out, visibility 0s linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)); +} + +:host([pending]), :host([pending]) { + cursor: default; +} + +:host([pending]) .spectrum-ProgressCircle, :host([pending]) .spectrum-ProgressCircle { + visibility: visible; + opacity: 1; + transition: opacity .13s ease-in-out; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, .13s)) ease-in-out; } :host([no-wrap]) #label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -:host([static-color='white']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) - ); -} - -:host([static-color='white'][selected]) { - --spectrum-button-content-color-default: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-default) - ); - --spectrum-button-content-color-hover: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-hover) - ); - --spectrum-button-content-color-down: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-down) - ); - --spectrum-button-content-color-focus: var( - --mod-button-static-content-color, - var(--spectrum-button-static-white-content-color-focus) - ); -} - -:host([static-color='black']) { - --spectrum-button-focus-indicator-color: var( - --mod-static-black-focus-indicator-color, - var(--spectrum-static-black-focus-indicator-color) - ); + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +:host([static-color="white"]) { + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +} + +:host([static-color="white"][selected]) { + --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-default)); + --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-hover)); + --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-down)); + --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-button-static-white-content-color-focus)); +} + +:host([static-color="black"]) { + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); } @media (forced-colors: active) { - :host { - --highcontrast-button-content-color-default: ButtonText; - --highcontrast-button-content-color-hover: ButtonText; - --highcontrast-button-content-color-focus: ButtonText; - --highcontrast-button-content-color-down: ButtonText; - --highcontrast-button-border-color-default: ButtonBorder; - --highcontrast-button-border-color-hover: ButtonBorder; - --highcontrast-button-border-color-focus: ButtonBorder; - --highcontrast-button-border-color-down: ButtonBorder; - --highcontrast-button-background-color-default: ButtonFace; - --highcontrast-button-background-color-hover: ButtonFace; - --highcontrast-button-background-color-down: ButtonFace; - --highcontrast-button-background-color-focus: ButtonFace; - --highcontrast-button-background-color-disabled: ButtonFace; - --highcontrast-button-content-color-disabled: GrayText; - --highcontrast-button-border-color-disabled: GrayText; - --mod-progress-circle-track-border-color: ButtonText; - --mod-progress-circle-track-border-color-over-background: ButtonText; - --mod-progress-circle-thickness: var( - --spectrum-progress-circle-thickness-medium - ); - --mod-button-animation-duration: 0s; - } - - #label { - forced-color-adjust: none; - } - - :host(:focus-visible):after { - forced-color-adjust: none; - box-shadow: 0 0 0 - var( - --mod-button-focus-ring-thickness, - var(--spectrum-button-focus-ring-thickness) - ) - ButtonText; - } - - :host([variant='accent'][treatment='fill']) { - --highcontrast-button-background-color-default: ButtonText; - --highcontrast-button-content-color-default: ButtonFace; - --highcontrast-button-content-color-hover: HighlightText; - --highcontrast-button-content-color-down: HighlightText; - --highcontrast-button-content-color-focus: HighlightText; - --highcontrast-button-background-color-disabled: ButtonFace; - --highcontrast-button-background-color-hover: Highlight; - --highcontrast-button-background-color-down: Highlight; - --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-border-color-default: ButtonText; - --highcontrast-button-border-color-hover: Highlight; - --highcontrast-button-border-color-focus: Highlight; - --highcontrast-button-border-color-down: Highlight; - } + :host { + --highcontrast-button-content-color-default: ButtonText; + --highcontrast-button-content-color-hover: ButtonText; + --highcontrast-button-content-color-focus: ButtonText; + --highcontrast-button-content-color-down: ButtonText; + --highcontrast-button-border-color-default: ButtonBorder; + --highcontrast-button-border-color-hover: ButtonBorder; + --highcontrast-button-border-color-focus: ButtonBorder; + --highcontrast-button-border-color-down: ButtonBorder; + --highcontrast-button-background-color-default: ButtonFace; + --highcontrast-button-background-color-hover: ButtonFace; + --highcontrast-button-background-color-down: ButtonFace; + --highcontrast-button-background-color-focus: ButtonFace; + --highcontrast-button-background-color-disabled: ButtonFace; + --highcontrast-button-content-color-disabled: GrayText; + --highcontrast-button-border-color-disabled: GrayText; + --mod-progress-circle-track-border-color: ButtonText; + --mod-progress-circle-track-border-color-over-background: ButtonText; + --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --mod-button-animation-duration: 0s; + } + + #label { + forced-color-adjust: none; + } + + :host(:focus-visible):after { + forced-color-adjust: none; + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText; + } + + :host([variant="accent"][treatment="fill"]) { + --highcontrast-button-background-color-default: ButtonText; + --highcontrast-button-content-color-default: ButtonFace; + --highcontrast-button-content-color-hover: HighlightText; + --highcontrast-button-content-color-down: HighlightText; + --highcontrast-button-content-color-focus: HighlightText; + --highcontrast-button-background-color-disabled: ButtonFace; + --highcontrast-button-background-color-hover: Highlight; + --highcontrast-button-background-color-down: Highlight; + --highcontrast-button-background-color-focus: Highlight; + --highcontrast-button-border-color-default: ButtonText; + --highcontrast-button-border-color-hover: Highlight; + --highcontrast-button-border-color-focus: Highlight; + --highcontrast-button-border-color-down: Highlight; + } } + diff --git a/packages/card/src/card-overrides.css b/packages/card/src/card-overrides.css index e08c07aff1..04b69cd217 100644 --- a/packages/card/src/card-overrides.css +++ b/packages/card/src/card-overrides.css @@ -1,101 +1,62 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-card-background-color: var(--system-card-background-color); - --spectrum-card-body-spacing: var(--system-card-body-spacing); - --spectrum-card-title-padding-top: var(--system-card-title-padding-top); - --spectrum-card-title-padding-right: var(--system-card-title-padding-right); - --spectrum-card-content-margin-top: var(--system-card-content-margin-top); - --spectrum-card-content-margin-bottom: var( - --system-card-content-margin-bottom - ); - --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); - --spectrum-card-subtitle-padding-right: var( - --system-card-subtitle-padding-right - ); - --spectrum-card-border-width: var(--system-card-border-width); - --spectrum-card-corner-radius: var(--system-card-corner-radius); - --spectrum-card-border-color: var(--system-card-border-color); - --spectrum-card-border-color-hover: var(--system-card-border-color-hover); - --spectrum-card-border-color-selected: var( - --system-card-border-color-selected - ); - --spectrum-card-divider-color: var(--system-card-divider-color); - --spectrum-card-title-font-family: var(--system-card-title-font-family); - --spectrum-card-title-font-size: var(--system-card-title-font-size); - --spectrum-card-title-font-weight: var(--system-card-title-font-weight); - --spectrum-card-title-font-style: var(--system-card-title-font-style); - --spectrum-card-title-line-height: var(--system-card-title-line-height); - --spectrum-card-title-font-color: var(--system-card-title-font-color); - --spectrum-card-body-font-family: var(--system-card-body-font-family); - --spectrum-card-body-font-size: var(--system-card-body-font-size); - --spectrum-card-body-font-weight: var(--system-card-body-font-weight); - --spectrum-card-body-font-style: var(--system-card-body-font-style); - --spectrum-card-body-line-height: var(--system-card-body-line-height); - --spectrum-card-body-font-color: var(--system-card-body-font-color); - --spectrum-card-actions-spacing: var(--system-card-actions-spacing); - --spectrum-card-actions-size: var(--system-card-actions-size); - --spectrum-card-actions-border-radius: var( - --system-card-actions-border-radius - ); - --spectrum-card-actions-background-color-rgb: var( - --system-card-actions-background-color-rgb - ); - --spectrum-card-actions-background-color-opacity: var( - --system-card-actions-background-color-opacity - ); - --spectrum-card-actions-drop-shadow-color: var( - --system-card-actions-drop-shadow-color - ); - --spectrum-card-actions-drop-shadow-x: var( - --system-card-actions-drop-shadow-x - ); - --spectrum-card-actions-drop-shadow-y: var( - --system-card-actions-drop-shadow-y - ); - --spectrum-card-actions-drop-shadow-blur: var( - --system-card-actions-drop-shadow-blur - ); - --spectrum-card-focus-indicator-color: var( - --system-card-focus-indicator-color - ); - --spectrum-card-focus-indicator-width: var( - --system-card-focus-indicator-width - ); - --spectrum-card-selected-background-opacity: var( - --system-card-selected-background-opacity - ); - --spectrum-card-preview-border-width-selected: var( - --system-card-preview-border-width-selected - ); - --spectrum-card-preview-background-color: var( - --system-card-preview-background-color - ); - --spectrum-card-preview-background-color-hover: var( - --system-card-preview-background-color-hover - ); - --spectrum-card-horizontal-body-padding: var( - --system-card-horizontal-body-padding - ); - --spectrum-card-horizontal-preview-padding: var( - --system-card-horizontal-preview-padding - ); - --spectrum-card-content-margin-top-quiet: var( - --system-card-content-margin-top-quiet - ); - --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); - --spectrum-card-background-color-quiet: var( - --system-card-background-color-quiet - ); + --spectrum-card-background-color: var(--system-card-background-color); + --spectrum-card-body-spacing: var(--system-card-body-spacing); + --spectrum-card-title-padding-top: var(--system-card-title-padding-top); + --spectrum-card-title-padding-right: var(--system-card-title-padding-right); + --spectrum-card-content-margin-top: var(--system-card-content-margin-top); + --spectrum-card-content-margin-bottom: var(--system-card-content-margin-bottom); + --spectrum-card-footer-padding-top: var(--system-card-footer-padding-top); + --spectrum-card-subtitle-padding-right: var(--system-card-subtitle-padding-right); + --spectrum-card-border-width: var(--system-card-border-width); + --spectrum-card-corner-radius: var(--system-card-corner-radius); + --spectrum-card-border-color: var(--system-card-border-color); + --spectrum-card-border-color-hover: var(--system-card-border-color-hover); + --spectrum-card-border-color-selected: var(--system-card-border-color-selected); + --spectrum-card-divider-color: var(--system-card-divider-color); + --spectrum-card-title-font-family: var(--system-card-title-font-family); + --spectrum-card-title-font-size: var(--system-card-title-font-size); + --spectrum-card-title-font-weight: var(--system-card-title-font-weight); + --spectrum-card-title-font-style: var(--system-card-title-font-style); + --spectrum-card-title-line-height: var(--system-card-title-line-height); + --spectrum-card-title-font-color: var(--system-card-title-font-color); + --spectrum-card-body-font-family: var(--system-card-body-font-family); + --spectrum-card-body-font-size: var(--system-card-body-font-size); + --spectrum-card-body-font-weight: var(--system-card-body-font-weight); + --spectrum-card-body-font-style: var(--system-card-body-font-style); + --spectrum-card-body-line-height: var(--system-card-body-line-height); + --spectrum-card-body-font-color: var(--system-card-body-font-color); + --spectrum-card-actions-spacing: var(--system-card-actions-spacing); + --spectrum-card-actions-size: var(--system-card-actions-size); + --spectrum-card-actions-border-radius: var(--system-card-actions-border-radius); + --spectrum-card-actions-background-color-rgb: var(--system-card-actions-background-color-rgb); + --spectrum-card-actions-background-color-opacity: var(--system-card-actions-background-color-opacity); + --spectrum-card-actions-drop-shadow-color: var(--system-card-actions-drop-shadow-color); + --spectrum-card-actions-drop-shadow-x: var(--system-card-actions-drop-shadow-x); + --spectrum-card-actions-drop-shadow-y: var(--system-card-actions-drop-shadow-y); + --spectrum-card-actions-drop-shadow-blur: var(--system-card-actions-drop-shadow-blur); + --spectrum-card-focus-indicator-color: var(--system-card-focus-indicator-color); + --spectrum-card-focus-indicator-width: var(--system-card-focus-indicator-width); + --spectrum-card-selected-background-opacity: var(--system-card-selected-background-opacity); + --spectrum-card-preview-border-width-selected: var(--system-card-preview-border-width-selected); + --spectrum-card-preview-background-color: var(--system-card-preview-background-color); + --spectrum-card-preview-background-color-hover: var(--system-card-preview-background-color-hover); + --spectrum-card-horizontal-body-padding: var(--system-card-horizontal-body-padding); + --spectrum-card-horizontal-preview-padding: var(--system-card-horizontal-preview-padding); + --spectrum-card-content-margin-top-quiet: var(--system-card-content-margin-top-quiet); + --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); + --spectrum-card-background-color-quiet: var(--system-card-background-color-quiet); } + diff --git a/packages/card/src/spectrum-card.css b/packages/card/src/spectrum-card.css index 8dde8d5e3e..4f4a3be718 100644 --- a/packages/card/src/spectrum-card.css +++ b/packages/card/src/spectrum-card.css @@ -1,789 +1,373 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - min-inline-size: var( - --mod-card-minimum-width, - var(--spectrum-card-minimum-width) - ); - border: var(--mod-card-border-width, var(--spectrum-card-border-width)) - solid transparent; - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-color: var( - --highcontrast-card-border-color, - var(--mod-card-border-color, var(--spectrum-card-border-color)) - ); - background-color: var( - --highcontrast-card-background-color, - var(--mod-card-background-color, var(--spectrum-card-background-color)) - ); - flex-direction: column; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; -} - -:host:after, -:host:before { - content: ''; - block-size: 100%; - inline-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + box-sizing: border-box; + min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); + border: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid transparent; + border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-color: var(--highcontrast-card-border-color, var(--mod-card-border-color, var(--spectrum-card-border-color))); + background-color: var(--highcontrast-card-background-color, var(--mod-card-background-color, var(--spectrum-card-background-color))); + flex-direction: column; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; +} + +:host:after, :host:before { + content: ""; + block-size: 100%; + inline-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } :host:after { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border: 0 solid #0000; - margin-block-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - margin-inline-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - inset-inline-end: 0; + border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border: 0 solid #0000; + margin-block-start: calc(var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) * -1); + margin-inline-start: calc(var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) * -1); + inset-inline-end: 0; } :host(:focus-visible) { - outline: none; + outline: none; } :host(:focus-visible):after { - border-width: var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ); - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); -} - -:host(:focus-visible) #cover-photo, -:host(:focus-visible) #preview { - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); - border-start-end-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); + border-width: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)); + border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); +} + +:host(:focus-visible) #cover-photo, :host(:focus-visible) #preview { + border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); + border-start-end-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); } :host([selected]) { - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); + border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); } :host([selected]):before { - background-color: rgba( - var( - --mod-card-selected-background-color-rgb, - var(--spectrum-card-selected-background-color-rgb) - ), - var( - --mod-card-selected-background-opacity, - var(--spectrum-card-selected-background-opacity) - ) - ); + background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity))); } :host([drop-target]) { - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); - box-shadow: 0 0 0 1px - var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); - background-color: var( - --mod-card-background-color, - var(--spectrum-card-background-color-quiet) - ); -} - -:host([focused]) .actions, -:host([focused]) .checkbox-toggle, -:host([selected]) .actions, -:host([selected]) .checkbox-toggle, -:host(:focus) .actions, -:host(:focus) .checkbox-toggle { - visibility: visible; - opacity: 1; - pointer-events: all; + border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); + box-shadow: 0 0 0 1px var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); + background-color: var(--mod-card-background-color, var(--spectrum-card-background-color-quiet)); +} + +:host([focused]) .actions, :host([focused]) .checkbox-toggle, :host([selected]) .actions, :host([selected]) .checkbox-toggle, :host(:focus) .actions, :host(:focus) .checkbox-toggle { + visibility: visible; + opacity: 1; + pointer-events: all; } .checkbox-toggle { - visibility: hidden; - box-shadow: var( - --mod-card-actions-drop-shadow-x, - var(--spectrum-card-actions-drop-shadow-x) - ) - var( - --mod-card-actions-drop-shadow-y, - var(--spectrum-card-actions-drop-shadow-y) - ) - var( - --mod-card-actions-drop-shadow-blur, - var(--spectrum-card-actions-drop-shadow-blur) - ) - var( - --mod-card-actions-drop-shadow-color, - var(--spectrum-card-actions-drop-shadow-color) - ); - inline-size: var( - --mod-card-actions-size, - var(--spectrum-card-actions-size) - ); - block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); - border-radius: var( - --mod-card-actions-border-radius, - var(--spectrum-card-actions-border-radius) - ); - background-color: rgba( - var( - --mod-card-actions-background-color-rgb, - var(--spectrum-card-actions-background-color-rgb) - ), - var( - --mod-card-actions-background-color-opacity, - var(--spectrum-card-actions-background-color-opacity) - ) - ); - pointer-events: auto; - box-sizing: border-box; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); - justify-content: center; - align-items: center; - display: inline-flex; - position: absolute; - inset-block-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - inset-inline-start: calc( - var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); + visibility: hidden; + box-shadow: var(--mod-card-actions-drop-shadow-x, var(--spectrum-card-actions-drop-shadow-x)) var(--mod-card-actions-drop-shadow-y, var(--spectrum-card-actions-drop-shadow-y)) var(--mod-card-actions-drop-shadow-blur, var(--spectrum-card-actions-drop-shadow-blur)) var(--mod-card-actions-drop-shadow-color, var(--spectrum-card-actions-drop-shadow-color)); + inline-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); + block-size: var(--mod-card-actions-size, var(--spectrum-card-actions-size)); + border-radius: var(--mod-card-actions-border-radius, var(--spectrum-card-actions-border-radius)); + background-color: rgba(var(--mod-card-actions-background-color-rgb, var(--spectrum-card-actions-background-color-rgb)), var(--mod-card-actions-background-color-opacity, var(--spectrum-card-actions-background-color-opacity))); + pointer-events: auto; + box-sizing: border-box; + transition: transform .13s ease-in-out, opacity .13s ease-in-out, visibility 0s linear .13s; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)); + justify-content: center; + align-items: center; + display: inline-flex; + position: absolute; + inset-block-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + inset-inline-start: calc(var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); } .actions { - inset-block-start: var( - --mod-card-actions-spacing, - var(--spectrum-card-actions-spacing) - ); - inset-inline-end: var( - --mod-card-actions-spacing, - var(--spectrum-card-actions-spacing) - ); + inset-block-start: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)); + inset-inline-end: var(--mod-card-actions-spacing, var(--spectrum-card-actions-spacing)); } #cover-photo { - block-size: var( - --mod-card-preview-minimum-height, - var(--spectrum-card-preview-minimum-height) - ); - box-sizing: border-box; - background-position: 50%; - background-size: cover; - background-color: var( - --mod-card-preview-background-color, - var(--spectrum-card-preview-background-color) - ); - border-block-end-color: var( - --mod-card-border-color, - var(--spectrum-card-border-color) - ); - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-start-end-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-end-end-radius: 0; - border-end-start-radius: 0; - justify-content: center; - align-items: center; - display: flex; - position: relative; - overflow: hidden; + block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); + box-sizing: border-box; + background-position: 50%; + background-size: cover; + background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color)); + border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-start-end-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-end-end-radius: 0; + border-end-start-radius: 0; + justify-content: center; + align-items: center; + display: flex; + position: relative; + overflow: hidden; } .spectrum-Divider { - margin: 0; + margin: 0; } .content { - align-items: center; - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); - display: flex; + align-items: center; + margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top)); + display: flex; } .body { - padding-block-start: var( - --mod-card-body-padding-block-start, - var( - --mod-card-title-padding-top, - var(--spectrum-card-title-padding-top) - ) - ); - padding-block-end: var( - --mod-card-body-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-inline-start: var( - --mod-card-body-padding-inline-start, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); - padding-inline-end: var( - --mod-card-body-padding-inline-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); + padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top))); + padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); + padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); + padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); } #preview { - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); - border-start-start-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-start-end-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - border-end-end-radius: 0; - border-end-start-radius: 0; - align-items: center; - display: flex; - overflow: hidden; + color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))); + border-start-start-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-start-end-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + border-end-end-radius: 0; + border-end-start-radius: 0; + align-items: center; + display: flex; + overflow: hidden; } .title { - font-family: var( - --mod-card-title-font-family, - var(--spectrum-card-title-font-family) - ); - font-size: var( - --mod-card-title-font-size, - var(--spectrum-card-title-font-size) - ); - font-weight: var( - --mod-card-title-font-weight, - var(--spectrum-card-title-font-weight) - ); - font-style: var( - --mod-card-title-font-style, - var(--spectrum-card-title-font-style) - ); - line-height: var( - --mod-card-title-line-height, - var(--spectrum-card-title-line-height) - ); - padding-inline-end: var( - --mod-card-title-padding-right, - var(--spectrum-card-title-padding-right) - ); -} - -.subtitle, -.title { - color: var( - --highcontrast-card-title-font-color, - var(--mod-card-title-font-color, var(--spectrum-card-title-font-color)) - ); + font-family: var(--mod-card-title-font-family, var(--spectrum-card-title-font-family)); + font-size: var(--mod-card-title-font-size, var(--spectrum-card-title-font-size)); + font-weight: var(--mod-card-title-font-weight, var(--spectrum-card-title-font-weight)); + font-style: var(--mod-card-title-font-style, var(--spectrum-card-title-font-style)); + line-height: var(--mod-card-title-line-height, var(--spectrum-card-title-line-height)); + padding-inline-end: var(--mod-card-title-padding-right, var(--spectrum-card-title-padding-right)); +} + +.subtitle, .title { + color: var(--highcontrast-card-title-font-color, var(--mod-card-title-font-color, var(--spectrum-card-title-font-color))); } .subtitle { - text-transform: none; -} - -.subtitle, -.subtitle + ::slotted([slot='description']):before { - padding-inline-end: var( - --mod-card-subtitle-padding-right, - var(--spectrum-card-subtitle-padding-right) - ); -} - -.subtitle + ::slotted([slot='description']):before { - content: '•'; -} - -::slotted([slot='description']) { - font-family: var( - --mod-card-body-font-family, - var(--spectrum-card-body-font-family) - ); - font-size: var( - --mod-card-body-font-size, - var(--spectrum-card-body-font-size) - ); - font-weight: var( - --mod-card-body-font-weight, - var(--spectrum-card-body-font-weight) - ); - font-style: var( - --mod-card-body-font-style, - var(--spectrum-card-body-font-style) - ); -} - -::slotted([slot='description']), -::slotted([slot='footer']) { - line-height: var( - --mod-card-body-line-height, - var(--spectrum-card-body-line-height) - ); - color: var( - --highcontrast-card-body-font-color, - var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)) - ); -} - -::slotted([slot='footer']) { - border-block-start: var( - --mod-card-border-width, - var(--spectrum-card-border-width) - ) - solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); - margin-block-start: var( - --mod-card-footer-margin-block-start, - calc( - ( - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) - - var( - --mod-card-content-margin-bottom, - var(--spectrum-card-content-margin-bottom) - ) - ) * -1 - ) - ); - margin-inline-start: var( - --mod-card-footer-margin-inline-start, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - ); - margin-inline-end: var( - --mod-card-footer-margin-inline-end, - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - ); - padding-block-start: var( - --mod-card-footer-padding-block-start, - var( - --mod-card-footer-margin-top, - var(--spectrum-card-footer-padding-top) - ) - ); - padding-block-end: var( - --mod-card-footer-padding-block-end, - calc( - var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ) - ); + text-transform: none; +} + +.subtitle, .subtitle + ::slotted([slot="description"]):before { + padding-inline-end: var(--mod-card-subtitle-padding-right, var(--spectrum-card-subtitle-padding-right)); +} + +.subtitle + ::slotted([slot="description"]):before { + content: "•"; +} + +::slotted([slot="description"]) { + font-family: var(--mod-card-body-font-family, var(--spectrum-card-body-font-family)); + font-size: var(--mod-card-body-font-size, var(--spectrum-card-body-font-size)); + font-weight: var(--mod-card-body-font-weight, var(--spectrum-card-body-font-weight)); + font-style: var(--mod-card-body-font-style, var(--spectrum-card-body-font-style)); +} + +::slotted([slot="description"]), ::slotted([slot="footer"]) { + line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height)); + color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))); +} + +::slotted([slot="footer"]) { + border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); + margin-block-start: var(--mod-card-footer-margin-block-start, calc((var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom))) * -1)); + margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))); + margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing))); + padding-block-start: var(--mod-card-footer-padding-block-start, var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top))); + padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width)))); } .header { - justify-content: space-between; - align-items: center; - display: flex; + justify-content: space-between; + align-items: center; + display: flex; } .action-button { - z-index: 1; - justify-content: flex-end; - align-self: center; - display: flex; -} - -:host([variant='quiet']) #preview { - border: var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - solid transparent; -} - -:host([variant='quiet'][focused]):after, -:host([variant='quiet']:focus):after { - border-width: 0; -} - -:host([variant='quiet'][focused]) #preview:after, -:host([variant='quiet']:focus) #preview:after { - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); -} - -:host([variant='quiet'][selected]) #preview { - border: var( - --mod-card-preview-border-width-selected, - var( - --mod-card-preview-border-width, - var(--spectrum-card-preview-border-width-selected) - ) - ) - solid; - border-color: var( - --highcontrast-card-border-color-selected, - var( - --mod-card-border-color-selected, - var(--spectrum-card-border-color-selected) - ) - ); -} - -:host([variant='gallery']), -:host([variant='quiet']) { - --spectrum-card-content-margin-top: var( - --mod-card-content-margin-top-quiet, - var(--spectrum-card-content-margin-top-quiet) - ); - --spectrum-card-minimum-width: var( - --mod-card-minimum-width-quiet, - var(--spectrum-card-minimum-width-quiet) - ); - block-size: 100%; - min-inline-size: var( - --mod-card-minimum-width, - var(--spectrum-card-minimum-width) - ); - background-color: initial; - border-width: 0; - border-color: #0000; - border-radius: 0; - overflow: visible; -} - -:host([variant='gallery']):before, -:host([variant='quiet']):before { - display: none; -} - -:host([variant='gallery']) #preview, -:host([variant='quiet']) #preview { - border-radius: var( - --mod-card-corner-radius, - var(--spectrum-card-corner-radius) - ); - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); - min-block-size: var( - --mod-card-preview-minimum-height, - var(--spectrum-card-preview-minimum-height) - ); - inline-size: 100%; - box-sizing: border-box; - transition: background-color - var( - --mod-card-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ); - flex: 1; - margin: 0 auto; - position: relative; - overflow: visible; -} - -:host([variant='gallery']) #preview:after, -:host([variant='gallery']) #preview:before, -:host([variant='quiet']) #preview:after, -:host([variant='quiet']) #preview:before { - content: ''; - block-size: 100%; - inline-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; -} - -:host([variant='gallery']) #preview:after, -:host([variant='quiet']) #preview:after { - border-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) - ); - border: 0 solid #0000; - margin-block-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - margin-inline-start: calc( - var( - --mod-card-focus-indicator-width, - var(--spectrum-card-focus-indicator-width) - ) * -1 - ); - inset-inline-end: 0; -} - -:host([variant='gallery'][drop-target]), -:host([variant='quiet'][drop-target]) { - background-color: initial; - box-shadow: none; - border-color: #0000; + z-index: 1; + justify-content: flex-end; + align-self: center; + display: flex; +} + +:host([variant="quiet"]) #preview { + border: var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) solid transparent; } -:host([variant='gallery'][drop-target]) #preview, -:host([variant='quiet'][drop-target]) #preview { - background-color: var( - --mod-card-preview-background-color, - var( - --mod-card-background-color, - var(--spectrum-card-preview-background-color) - ) - ); - transition: none; -} - -:host([variant='gallery'][drop-target]) #preview:before, -:host([variant='quiet'][drop-target]) #preview:before { - border-color: var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); - box-shadow: 0 0 0 1px - var( - --mod-card-focus-indicator-color, - var(--spectrum-card-focus-indicator-color) - ); -} - -:host([variant='gallery'][selected]) #preview:before, -:host([variant='quiet'][selected]) #preview:before { - background-color: rgba( - var( - --mod-card-selected-background-color-rgb, - var(--spectrum-card-selected-background-color-rgb) - ), - var( - --mod-card-selected-background-opacity, - var(--spectrum-card-selected-background-opacity) - ) - ); -} - -:host([variant='gallery']) .body, -:host([variant='quiet']) .body { - margin-block-start: var( - --mod-card-content-margin-top, - var(--spectrum-card-content-margin-top) - ); - padding: 0; -} - -:host([variant='gallery']) ::slotted([slot='footer']), -:host([variant='quiet']) ::slotted([slot='footer']) { - margin-inline: 0; +:host([variant="quiet"][focused]):after, :host([variant="quiet"]:focus):after { + border-width: 0; +} + +:host([variant="quiet"][focused]) #preview:after, :host([variant="quiet"]:focus) #preview:after { + border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); +} + +:host([variant="quiet"][selected]) #preview { + border: var(--mod-card-preview-border-width-selected, var(--mod-card-preview-border-width, var(--spectrum-card-preview-border-width-selected))) solid; + border-color: var(--highcontrast-card-border-color-selected, var(--mod-card-border-color-selected, var(--spectrum-card-border-color-selected))); +} + +:host([variant="gallery"]), :host([variant="quiet"]) { + --spectrum-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-card-content-margin-top-quiet)); + --spectrum-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width-quiet)); + block-size: 100%; + min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width)); + background-color: initial; + border-width: 0; + border-color: #0000; + border-radius: 0; + overflow: visible; +} + +:host([variant="gallery"]):before, :host([variant="quiet"]):before { + display: none; +} + +:host([variant="gallery"]) #preview, :host([variant="quiet"]) #preview { + border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)); + background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); + min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); + inline-size: 100%; + box-sizing: border-box; + transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); + flex: 1; + margin: 0 auto; + position: relative; + overflow: visible; +} + +:host([variant="gallery"]) #preview:after, :host([variant="gallery"]) #preview:before, :host([variant="quiet"]) #preview:after, :host([variant="quiet"]) #preview:before { + content: ""; + block-size: 100%; + inline-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; +} + +:host([variant="gallery"]) #preview:after, :host([variant="quiet"]) #preview:after { + border-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) + var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))); + border: 0 solid #0000; + margin-block-start: calc(var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) * -1); + margin-inline-start: calc(var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width)) * -1); + inset-inline-end: 0; +} + +:host([variant="gallery"][drop-target]), :host([variant="quiet"][drop-target]) { + background-color: initial; + box-shadow: none; + border-color: #0000; +} + +:host([variant="gallery"][drop-target]) #preview, :host([variant="quiet"][drop-target]) #preview { + background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); + transition: none; +} + +:host([variant="gallery"][drop-target]) #preview:before, :host([variant="quiet"][drop-target]) #preview:before { + border-color: var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); + box-shadow: 0 0 0 1px var(--mod-card-focus-indicator-color, var(--spectrum-card-focus-indicator-color)); +} + +:host([variant="gallery"][selected]) #preview:before, :host([variant="quiet"][selected]) #preview:before { + background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity))); +} + +:host([variant="gallery"]) .body, :host([variant="quiet"]) .body { + margin-block-start: var(--mod-card-content-margin-top, var(--spectrum-card-content-margin-top)); + padding: 0; +} + +:host([variant="gallery"]) ::slotted([slot="footer"]), :host([variant="quiet"]) ::slotted([slot="footer"]) { + margin-inline: 0; } :host([horizontal]) { - flex-direction: row; + flex-direction: row; } @media (hover: hover) { - :host(:hover) { - border-color: var( - --highcontrast-card-border-color-hover, - var( - --mod-card-border-color-hover, - var(--spectrum-card-border-color-hover) - ) - ); - } - - :host(:hover) .actions, - :host(:hover) .checkbox-toggle { - visibility: visible; - opacity: 1; - pointer-events: all; - } - - :host([variant='gallery']:hover), - :host([variant='quiet']:hover) { - border-color: #0000; - } - - :host([variant='gallery']:hover) #preview, - :host([variant='quiet']:hover) #preview { - background-color: var( - --mod-card-preview-background-color-hover, - var( - --mod-card-background-color-hover, - var(--spectrum-card-preview-background-color-hover) - ) - ); - } - - :host([horizontal]:hover) #preview { - border-color: var( - --mod-card-border-color-hover, - var(--spectrum-card-border-color-hover) - ); - } + :host(:hover) { + border-color: var(--highcontrast-card-border-color-hover, var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover))); + } + + :host(:hover) .actions, :host(:hover) .checkbox-toggle { + visibility: visible; + opacity: 1; + pointer-events: all; + } + + :host([variant="gallery"]:hover), :host([variant="quiet"]:hover) { + border-color: #0000; + } + + :host([variant="gallery"]:hover) #preview, :host([variant="quiet"]:hover) #preview { + background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))); + } + + :host([horizontal]:hover) #preview { + border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)); + } } :host([horizontal]) #preview { - min-block-size: 0; - padding: var( - --mod-card-horizontal-preview-padding, - var(--spectrum-card-horizontal-preview-padding) - ); - background-color: var( - --mod-card-preview-background-color, - var(--spectrum-card-preview-background-color) - ); - border-color: var( - --mod-card-border-color, - var(--spectrum-card-border-color) - ); - border-start-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: calc( - var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) - ); - flex-shrink: 0; - justify-content: center; - align-items: center; - display: flex; -} - -:host([horizontal]) .content, -:host([horizontal]) .header { - block-size: auto; - margin-block-start: 0; + min-block-size: 0; + padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-card-horizontal-preview-padding)); + background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color)); + border-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + flex-shrink: 0; + justify-content: center; + align-items: center; + display: flex; +} + +:host([horizontal]) .content, :host([horizontal]) .header { + block-size: auto; + margin-block-start: 0; } :host([horizontal]) .content { - margin-block-end: 0; + margin-block-end: 0; } :host([horizontal]) .title { - padding-inline-end: 0; + padding-inline-end: 0; } :host([horizontal]) .body { - padding-block: 0; - padding-inline: var( - --mod-card-horizontal-body-padding, - var(--spectrum-card-horizontal-body-padding) - ); - flex-direction: column; - flex-shrink: 0; - justify-content: center; - display: flex; + padding-block: 0; + padding-inline: var(--mod-card-horizontal-body-padding, var(--spectrum-card-horizontal-body-padding)); + flex-direction: column; + flex-shrink: 0; + justify-content: center; + display: flex; } -:host([variant='gallery']) { - min-inline-size: 0; +:host([variant="gallery"]) { + min-inline-size: 0; } -:host([variant='gallery']) #preview { - border-radius: 0; - padding: 0; +:host([variant="gallery"]) #preview { + border-radius: 0; + padding: 0; } + diff --git a/packages/checkbox/src/checkbox-overrides.css b/packages/checkbox/src/checkbox-overrides.css index 5bc06fba2e..1826f154be 100644 --- a/packages/checkbox/src/checkbox-overrides.css +++ b/packages/checkbox/src/checkbox-overrides.css @@ -1,153 +1,84 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-checkbox-control-color-default: var( - --system-checkbox-control-color-default - ); - --spectrum-checkbox-control-color-hover: var( - --system-checkbox-control-color-hover - ); - --spectrum-checkbox-control-color-down: var( - --system-checkbox-control-color-down - ); - --spectrum-checkbox-control-color-focus: var( - --system-checkbox-control-color-focus - ); - --spectrum-checkbox-content-color-default: var( - --system-checkbox-content-color-default - ); - --spectrum-checkbox-content-color-hover: var( - --system-checkbox-content-color-hover - ); - --spectrum-checkbox-content-color-down: var( - --system-checkbox-content-color-down - ); - --spectrum-checkbox-content-color-focus: var( - --system-checkbox-content-color-focus - ); - --spectrum-checkbox-focus-indicator-color: var( - --system-checkbox-focus-indicator-color - ); - --spectrum-checkbox-content-color-disabled: var( - --system-checkbox-content-color-disabled - ); - --spectrum-checkbox-control-color-disabled: var( - --system-checkbox-control-color-disabled - ); - --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); - --spectrum-checkbox-invalid-color-default: var( - --system-checkbox-invalid-color-default - ); - --spectrum-checkbox-invalid-color-hover: var( - --system-checkbox-invalid-color-hover - ); - --spectrum-checkbox-invalid-color-down: var( - --system-checkbox-invalid-color-down - ); - --spectrum-checkbox-invalid-color-focus: var( - --system-checkbox-invalid-color-focus - ); - --spectrum-checkbox-emphasized-color-default: var( - --system-checkbox-emphasized-color-default - ); - --spectrum-checkbox-emphasized-color-hover: var( - --system-checkbox-emphasized-color-hover - ); - --spectrum-checkbox-emphasized-color-down: var( - --system-checkbox-emphasized-color-down - ); - --spectrum-checkbox-emphasized-color-focus: var( - --system-checkbox-emphasized-color-focus - ); - --spectrum-checkbox-control-selected-color-default: var( - --system-checkbox-control-selected-color-default - ); - --spectrum-checkbox-control-selected-color-hover: var( - --system-checkbox-control-selected-color-hover - ); - --spectrum-checkbox-control-selected-color-down: var( - --system-checkbox-control-selected-color-down - ); - --spectrum-checkbox-control-selected-color-focus: var( - --system-checkbox-control-selected-color-focus - ); - --spectrum-checkbox-line-height: var(--system-checkbox-line-height); - --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); - --spectrum-checkbox-control-corner-radius: var( - --system-checkbox-control-corner-radius - ); - --spectrum-checkbox-focus-indicator-gap: var( - --system-checkbox-focus-indicator-gap - ); - --spectrum-checkbox-focus-indicator-thickness: var( - --system-checkbox-focus-indicator-thickness - ); - --spectrum-checkbox-border-width: var(--system-checkbox-border-width); - --spectrum-checkbox-animation-duration: var( - --system-checkbox-animation-duration - ); - --spectrum-checkbox-font-size: var(--system-checkbox-font-size); - --spectrum-checkbox-height: var(--system-checkbox-height); - --spectrum-checkbox-control-size: var(--system-checkbox-control-size); - --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); - --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); + --spectrum-checkbox-control-color-default: var(--system-checkbox-control-color-default); + --spectrum-checkbox-control-color-hover: var(--system-checkbox-control-color-hover); + --spectrum-checkbox-control-color-down: var(--system-checkbox-control-color-down); + --spectrum-checkbox-control-color-focus: var(--system-checkbox-control-color-focus); + --spectrum-checkbox-content-color-default: var(--system-checkbox-content-color-default); + --spectrum-checkbox-content-color-hover: var(--system-checkbox-content-color-hover); + --spectrum-checkbox-content-color-down: var(--system-checkbox-content-color-down); + --spectrum-checkbox-content-color-focus: var(--system-checkbox-content-color-focus); + --spectrum-checkbox-focus-indicator-color: var(--system-checkbox-focus-indicator-color); + --spectrum-checkbox-content-color-disabled: var(--system-checkbox-content-color-disabled); + --spectrum-checkbox-control-color-disabled: var(--system-checkbox-control-color-disabled); + --spectrum-checkbox-checkmark-color: var(--system-checkbox-checkmark-color); + --spectrum-checkbox-invalid-color-default: var(--system-checkbox-invalid-color-default); + --spectrum-checkbox-invalid-color-hover: var(--system-checkbox-invalid-color-hover); + --spectrum-checkbox-invalid-color-down: var(--system-checkbox-invalid-color-down); + --spectrum-checkbox-invalid-color-focus: var(--system-checkbox-invalid-color-focus); + --spectrum-checkbox-emphasized-color-default: var(--system-checkbox-emphasized-color-default); + --spectrum-checkbox-emphasized-color-hover: var(--system-checkbox-emphasized-color-hover); + --spectrum-checkbox-emphasized-color-down: var(--system-checkbox-emphasized-color-down); + --spectrum-checkbox-emphasized-color-focus: var(--system-checkbox-emphasized-color-focus); + --spectrum-checkbox-control-selected-color-default: var(--system-checkbox-control-selected-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--system-checkbox-control-selected-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--system-checkbox-control-selected-color-down); + --spectrum-checkbox-control-selected-color-focus: var(--system-checkbox-control-selected-color-focus); + --spectrum-checkbox-line-height: var(--system-checkbox-line-height); + --spectrum-checkbox-line-height-cjk: var(--system-checkbox-line-height-cjk); + --spectrum-checkbox-control-corner-radius: var(--system-checkbox-control-corner-radius); + --spectrum-checkbox-focus-indicator-gap: var(--system-checkbox-focus-indicator-gap); + --spectrum-checkbox-focus-indicator-thickness: var(--system-checkbox-focus-indicator-thickness); + --spectrum-checkbox-border-width: var(--system-checkbox-border-width); + --spectrum-checkbox-animation-duration: var(--system-checkbox-animation-duration); + --spectrum-checkbox-font-size: var(--system-checkbox-font-size); + --spectrum-checkbox-height: var(--system-checkbox-height); + --spectrum-checkbox-control-size: var(--system-checkbox-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-text-to-control); } -:host([size='s']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-s-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-s-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-s-text-to-control - ); +:host([size="s"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-s-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-s-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-s-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-s-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-size-s-text-to-control); } :host { - --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-m-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-m-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-m-text-to-control - ); + --spectrum-checkbox-font-size: var(--system-checkbox-size-m-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-m-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-m-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-m-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-size-m-text-to-control); } -:host([size='l']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-l-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-l-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-l-text-to-control - ); +:host([size="l"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-l-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-l-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-l-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-l-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-size-l-text-to-control); } -:host([size='xl']) { - --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); - --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); - --spectrum-checkbox-control-size: var( - --system-checkbox-size-xl-control-size - ); - --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); - --spectrum-checkbox-text-to-control: var( - --system-checkbox-size-xl-text-to-control - ); +:host([size="xl"]) { + --spectrum-checkbox-font-size: var(--system-checkbox-size-xl-font-size); + --spectrum-checkbox-height: var(--system-checkbox-size-xl-height); + --spectrum-checkbox-control-size: var(--system-checkbox-size-xl-control-size); + --spectrum-checkbox-top-to-text: var(--system-checkbox-size-xl-top-to-text); + --spectrum-checkbox-text-to-control: var(--system-checkbox-size-xl-text-to-control); } + diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css index db48f2080f..53950af07b 100644 --- a/packages/checkbox/src/spectrum-checkbox.css +++ b/packages/checkbox/src/spectrum-checkbox.css @@ -1,736 +1,313 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - color: var( - --highcontrast-checkbox-content-color-default, - var( - --mod-checkbox-content-color-default, - var(--spectrum-checkbox-content-color-default) - ) - ); - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); - max-inline-size: 100%; - vertical-align: top; - align-items: flex-start; - display: inline-flex; - position: relative; + color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); + min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); + max-inline-size: 100%; + vertical-align: top; + align-items: flex-start; + display: inline-flex; + position: relative; } :host(:is(:active, [active])) #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-down, - var( - --mod-checkbox-control-color-down, - var(--spectrum-checkbox-control-color-down) - ) - ); + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-color-down, var(--spectrum-checkbox-control-color-down))); } :host(:is(:active, [active])) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-down, - var( - --mod-checkbox-control-selected-color-down, - var(--spectrum-checkbox-control-selected-color-down) - ) - ); + border-color: var(--highcontrast-checkbox-highlight-color-down, var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))); } :host(:is(:active, [active])) #label { - color: var( - --highcontrast-checkbox-content-color-down, - var( - --mod-checkbox-content-color-down, - var(--spectrum-checkbox-content-color-down) - ) - ); -} - -:host([invalid][invalid]) #box:before, -:host([invalid][invalid]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-default, - var(--spectrum-checkbox-invalid-color-default) - ) - ); -} - -:host([invalid][invalid]) #input:focus-visible + #box:before, -:host([invalid][invalid][indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); + color: var(--highcontrast-checkbox-content-color-down, var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))); +} + +:host([invalid][invalid]) #box:before, :host([invalid][invalid]) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); +} + +:host([invalid][invalid]) #input:focus-visible + #box:before, :host([invalid][invalid][indeterminate]) #input:focus-visible + #box:before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } :host([readonly]) { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); } :host([readonly]:is(:active, [active])) #box:before { - border-color: var( - --highcontrast-checkbox-selected-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); -} - -:host([readonly]) #input:checked:disabled + #box:before, -:host([readonly]) #input:disabled + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - background-color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); -} - -:host([readonly]) #input:checked:disabled ~ #label, -:host([readonly]) #input:disabled ~ #label { - forced-color-adjust: none; - color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-content-color-default, - var(--spectrum-checkbox-content-color-default) - ) - ); -} - -:host([indeterminate]) #box:before, -:host([indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); -} - -:host([indeterminate]) #box #checkmark, -:host([indeterminate]) #input:checked + #box #checkmark { - display: none; -} - -:host([indeterminate]) #box #partialCheckmark, -:host([indeterminate]) #input:checked + #box #partialCheckmark { - opacity: 1; - display: block; - transform: scale(1); + border-color: var(--highcontrast-checkbox-selected-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); +} + +:host([readonly]) #input:checked:disabled + #box:before, :host([readonly]) #input:disabled + #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); +} + +:host([readonly]) #input:checked:disabled ~ #label, :host([readonly]) #input:disabled ~ #label { + forced-color-adjust: none; + color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); +} + +:host([indeterminate]) #box:before, :host([indeterminate]) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); +} + +:host([indeterminate]) #box #checkmark, :host([indeterminate]) #input:checked + #box #checkmark { + display: none; +} + +:host([indeterminate]) #box #partialCheckmark, :host([indeterminate]) #input:checked + #box #partialCheckmark { + opacity: 1; + display: block; + transform: scale(1); } :host([indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-control-selected-color-focus, - var(--spectrum-checkbox-control-selected-color-focus) - ) - ); -} - -:host([invalid][invalid][indeterminate]) #box:before, -:host([invalid][invalid][indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-default, - var(--spectrum-checkbox-invalid-color-default) - ) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); -} - -:host([emphasized]) #input:checked + #box:before, -:host([emphasized][indeterminate]) #box:before, -:host([emphasized][indeterminate]) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-emphasized-color-default, - var(--spectrum-checkbox-emphasized-color-default) - ) - ); -} - -:host([emphasized]) #input:focus-visible:checked + #box:before, -:host([emphasized][indeterminate]) #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-emphasized-color-focus, - var(--spectrum-checkbox-emphasized-color-focus) - ) - ); -} - -:host([emphasized][invalid][invalid]) - #input:focus-visible:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-focus, - var(--spectrum-checkbox-invalid-color-focus) - ) - ); + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); +} + +:host([invalid][invalid][indeterminate]) #box:before, :host([invalid][invalid][indeterminate]) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); +} + +:host([emphasized]) #input:checked + #box:before, :host([emphasized][indeterminate]) #box:before, :host([emphasized][indeterminate]) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default))); +} + +:host([emphasized]) #input:focus-visible:checked + #box:before, :host([emphasized][indeterminate]) #input:focus-visible + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus))); +} + +:host([emphasized][invalid][invalid]) #input:focus-visible:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus))); } @media (hover: hover) { - :host(:hover) #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-color-hover, - var(--spectrum-checkbox-control-color-hover) - ) - ); - } - - :host(:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-selected-color-hover, - var(--spectrum-checkbox-control-selected-color-hover) - ) - ); - } - - :host(:hover) #label { - color: var( - --highcontrast-checkbox-content-color-hover, - var( - --mod-checkbox-content-color-hover, - var(--spectrum-checkbox-content-color-hover) - ) - ); - } - - :host([invalid][invalid]:hover) #box:before, - :host([invalid][invalid]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([readonly]:hover) #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - } - - :host([indeterminate]:hover) #box:before, - :host([indeterminate]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-control-selected-color-hover, - var(--spectrum-checkbox-control-selected-color-hover) - ) - ); - } - - :host([invalid][invalid][indeterminate]:hover) #box:before, - :host([invalid][invalid][indeterminate]:hover) - #input:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([invalid][invalid][indeterminate]:hover) #label { - color: var( - --highcontrast-checkbox-content-color-hover, - var( - --mod-checkbox-content-color-hover, - var(--spectrum-checkbox-content-color-hover) - ) - ); - } - - :host([emphasized][indeterminate]:hover) #box:before, - :host([emphasized][indeterminate]:hover) #input:checked + #box:before, - :host([emphasized]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-emphasized-color-hover, - var(--spectrum-checkbox-emphasized-color-hover) - ) - ); - } - - :host([emphasized][invalid][invalid][indeterminate]:hover) #box:before, - :host([emphasized][invalid][invalid][indeterminate]:hover) - #input:checked - + #box:before, - :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-hover, - var( - --mod-checkbox-invalid-color-hover, - var(--spectrum-checkbox-invalid-color-hover) - ) - ); - } - - :host([emphasized][indeterminate]:hover) #box:before, - :host([emphasized][indeterminate]:hover) #input:checked + #box:before, - :host([emphasized]:hover) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-hover, - var( - --mod-checkbox-emphasized-color-hover, - var(--spectrum-checkbox-emphasized-color-hover) - ) - ); - } -} - -:host([emphasized][indeterminate]:is(:active, [active])) #box:before, -:host([emphasized][indeterminate]:is(:active, [active])) - #input:checked - + #box:before, -:host([emphasized]:is(:active, [active])) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-emphasized-color-down, - var(--spectrum-checkbox-emphasized-color-down) - ) - ); -} - -:host([emphasized][invalid][invalid]:is(:active, [active])) #box:before, -:host([emphasized][invalid][invalid]:is(:active, [active])) - #input:checked - + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-invalid-color-down, - var(--spectrum-checkbox-invalid-color-down) - ) - ); -} - -:host([emphasized]:focus-visible) #box:before, -:host([emphasized]:focus-visible) #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-color-focus, - var( - --mod-checkbox-control-color-focus, - var(--spectrum-checkbox-control-color-focus) - ) - ); + :host(:hover) #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-color-hover, var(--spectrum-checkbox-control-color-hover))); + } + + :host(:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + } + + :host(:hover) #label { + color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + } + + :host([invalid][invalid]:hover) #box:before, :host([invalid][invalid]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + + :host([readonly]:hover) #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + } + + :host([indeterminate]:hover) #box:before, :host([indeterminate]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + } + + :host([invalid][invalid][indeterminate]:hover) #box:before, :host([invalid][invalid][indeterminate]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + + :host([invalid][invalid][indeterminate]:hover) #label { + color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); + } + + :host([emphasized][indeterminate]:hover) #box:before, :host([emphasized][indeterminate]:hover) #input:checked + #box:before, :host([emphasized]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); + } + + :host([emphasized][invalid][invalid][indeterminate]:hover) #box:before, :host([emphasized][invalid][invalid][indeterminate]:hover) #input:checked + #box:before, :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + } + + :host([emphasized][indeterminate]:hover) #box:before, :host([emphasized][indeterminate]:hover) #input:checked + #box:before, :host([emphasized]:hover) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); + } +} + +:host([emphasized][indeterminate]:is(:active, [active])) #box:before, :host([emphasized][indeterminate]:is(:active, [active])) #input:checked + #box:before, :host([emphasized]:is(:active, [active])) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down))); +} + +:host([emphasized][invalid][invalid]:is(:active, [active])) #box:before, :host([emphasized][invalid][invalid]:is(:active, [active])) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down))); +} + +:host([emphasized]:focus-visible) #box:before, :host([emphasized]:focus-visible) #input:checked + #box:before { + border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); } #label { - text-align: start; - font-size: var( - --mod-checkbox-font-size, - var(--spectrum-checkbox-font-size) - ); - transition: color - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - line-height: var( - --mod-checkbox-line-height, - var(--spectrum-checkbox-line-height) - ); - margin-block-start: var( - --mod-checkbox-top-to-text, - var(--spectrum-checkbox-top-to-text) - ); - margin-inline-start: var( - --mod-checkbox-text-to-control, - var(--spectrum-checkbox-text-to-control) - ); -} - -#label:lang(ja), -#label:lang(ko), -#label:lang(zh) { - line-height: var( - --mod-checkbox-line-height-cjk, - var(--spectrum-checkbox-line-height-cjk) - ); + text-align: start; + font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); + transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); + margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); + margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); +} + +#label:lang(ja), #label:lang(ko), #label:lang(zh) { + line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); } #input { - color: var( - --mod-checkbox-control-color-default, - var(--spectrum-checkbox-control-color-default) - ); - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0.0001; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - font-family: inherit; - font-size: 100%; - line-height: 1.15; - position: absolute; - overflow: visible; + color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: .0001; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + position: absolute; + overflow: visible; } #input:disabled { - cursor: default; + cursor: default; } #input:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-default, - var( - --mod-checkbox-control-selected-color-default, - var(--spectrum-checkbox-control-selected-color-default) - ) - ); - background-color: var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ); - border-width: var( - --mod-checkbox-selected-border-width, - var(--spectrum-checkbox-selected-border-width) - ); + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } #input:checked + #box #checkmark { - opacity: 1; - transform: scale(1); + opacity: 1; + transform: scale(1); } #input:focus-visible + #box:before { - border-color: var( - --highcontrast-checkbox-color-focus, - var( - --mod-checkbox-control-color-focus, - var(--spectrum-checkbox-control-color-focus) - ) - ); + border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); } #input:focus-visible + #box:after { - forced-color-adjust: none; - box-shadow: 0 0 0 - var( - --mod-checkbox-focus-indicator-thinkness, - var(--spectrum-checkbox-focus-indicator-thickness) - ) - var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - margin: calc( - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) * -1 - ); + forced-color-adjust: none; + box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); } #input:focus-visible + #label { - color: var( - --highcontrast-checkbox-content-color-focus, - var( - --mod-checkbox-content-color-focus, - var(--spectrum-checkbox-content-color-focus) - ) - ); + color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); } #input:focus-visible:checked + #box:before { - border-color: var( - --highcontrast-checkbox-highlight-color-focus, - var( - --mod-checkbox-control-selected-color-focus, - var(--spectrum-checkbox-control-selected-color-focus) - ) - ); + border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); } #box { - --spectrum-checkbox-spacing: calc( - var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - - var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ) - ); - --spectrum-checkbox-selected-border-width: calc( - var(--spectrum-checkbox-control-size) / 2 - ); - margin: calc( - var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2 - ) - 0; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - align-items: center; - display: flex; - position: relative; -} - -#box, -#box:before { - box-sizing: border-box; - inline-size: var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ); - block-size: var( - --mod-checkbox-control-size, - var(--spectrum-checkbox-control-size) - ); + --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); + --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); + margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + align-items: center; + display: flex; + position: relative; +} + +#box, #box:before { + box-sizing: border-box; + inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); } #box:before { - forced-color-adjust: none; - border-color: var( - --highcontrast-checkbox-color-default, - var( - --mod-checkbox-control-color-default, - var(--spectrum-checkbox-control-color-default) - ) - ); - z-index: 0; - content: ''; - border-radius: var( - --mod-checkbox-control-corner-radius, - var(--spectrum-checkbox-control-corner-radius) - ); - border-width: var( - --mod-checkbox-border-width, - var(--spectrum-checkbox-border-width) - ); - transition: - border - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - border-style: solid; - display: block; - position: absolute; + forced-color-adjust: none; + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); + z-index: 0; + content: ""; + border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); + border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); + transition: border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + border-style: solid; + display: block; + position: absolute; } #box:after { - border-radius: calc( - var( - --mod-checkbox-control-corner-radius, - var(--spectrum-checkbox-control-corner-radius) - ) + - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) - ); - content: ''; - margin: var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ); - transition: - box-shadow - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-out, - margin - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-out; - display: block; - position: absolute; - inset-block: 0; - inset-inline: 0; - transform: translate(0); -} - -#checkmark, -#partialCheckmark { - color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); - opacity: 0; - transition: - opacity - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out, - transform - var( - --mod-checkbox-animation-duration, - var(--spectrum-checkbox-animation-duration) - ) - ease-in-out; - transform: scale(0); + border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + content: ""; + margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); + transition: box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; + display: block; + position: absolute; + inset-block: 0; + inset-inline: 0; + transform: translate(0); +} + +#checkmark, #partialCheckmark { + color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + opacity: 0; + transition: opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + transform: scale(0); } #partialCheckmark { - display: none; -} - -#input:checked:disabled + #box:before, -#input:disabled + #box:before { - border-color: var( - --highcontrast-checkbox-disabled-color-default, - var( - --mod-checkbox-control-color-disabled, - var(--spectrum-checkbox-control-color-disabled) - ) - ); - background-color: var( - --highcontrast-checkbox-background-color-default, - var( - --mod-checkbox-checkmark-color, - var(--spectrum-checkbox-checkmark-color) - ) - ); -} - -#input:checked:disabled ~ #label, -#input:disabled ~ #label { - forced-color-adjust: none; - color: var( - --highcontrast-checkbox-disabled-color-default, - var( - --mod-checkbox-content-color-disabled, - var(--spectrum-checkbox-content-color-disabled) - ) - ); + display: none; +} + +#input:checked:disabled + #box:before, #input:disabled + #box:before { + border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); +} + +#input:checked:disabled ~ #label, #input:disabled ~ #label { + forced-color-adjust: none; + color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))); } @media (forced-colors: active) { - #input:focus-visible + #box { - forced-color-adjust: none; - outline-color: var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - outline-offset: var( - --highcontrast-checkbox-focus-indicator-gap, - var( - --mod-checkbox-focus-indicator-gap, - var(--spectrum-checkbox-focus-indicator-gap) - ) - ); - outline-style: auto; - outline-width: var( - --mod-focus-indicator-thickness, - var(--spectrum-focus-indicator-thickness) - ); - } - - #input:focus-visible + #box:after { - box-shadow: 0 0 0 0 - var( - --highcontrast-checkbox-focus-indicator-color, - var( - --mod-checkbox-focus-indicator-color, - var(--spectrum-checkbox-focus-indicator-color) - ) - ); - } - - :host { - --highcontrast-checkbox-content-color-default: CanvasText; - --highcontrast-checkbox-content-color-hover: CanvasText; - --highcontrast-checkbox-content-color-down: CanvasText; - --highcontrast-checkbox-content-color-focus: CanvasText; - --highcontrast-checkbox-background-color-default: Canvas; - --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-hover: ButtonText; - --highcontrast-checkbox-color-focus: Highlight; - --highcontrast-checkbox-highlight-color-default: Highlight; - --highcontrast-checkbox-highlight-color-hover: Highlight; - --highcontrast-checkbox-highlight-color-down: Highlight; - --highcontrast-checkbox-highlight-color-focus: Highlight; - --highcontrast-checkbox-disabled-color-default: GrayText; - --highcontrast-checkbox-focus-indicator-color: CanvasText; - } + #input:focus-visible + #box { + forced-color-adjust: none; + outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + outline-offset: var(--highcontrast-checkbox-focus-indicator-gap, var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + outline-style: auto; + outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + } + + #input:focus-visible + #box:after { + box-shadow: 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + } + + :host { + --highcontrast-checkbox-content-color-default: CanvasText; + --highcontrast-checkbox-content-color-hover: CanvasText; + --highcontrast-checkbox-content-color-down: CanvasText; + --highcontrast-checkbox-content-color-focus: CanvasText; + --highcontrast-checkbox-background-color-default: Canvas; + --highcontrast-checkbox-color-default: ButtonText; + --highcontrast-checkbox-color-hover: ButtonText; + --highcontrast-checkbox-color-focus: Highlight; + --highcontrast-checkbox-highlight-color-default: Highlight; + --highcontrast-checkbox-highlight-color-hover: Highlight; + --highcontrast-checkbox-highlight-color-down: Highlight; + --highcontrast-checkbox-highlight-color-focus: Highlight; + --highcontrast-checkbox-disabled-color-default: GrayText; + --highcontrast-checkbox-focus-indicator-color: CanvasText; + } } + diff --git a/packages/clear-button/src/clear-button-overrides.css b/packages/clear-button/src/clear-button-overrides.css index d2a1252c7b..1aafdf5dd0 100644 --- a/packages/clear-button/src/clear-button-overrides.css +++ b/packages/clear-button/src/clear-button-overrides.css @@ -1,113 +1,67 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-clear-button-background-color: var( - --system-clear-button-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-background-color-key-focus - ); - --spectrum-clear-button-height: var(--system-clear-button-height); - --spectrum-clear-button-width: var(--system-clear-button-width); - --spectrum-clear-button-padding: var(--system-clear-button-padding); - --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-icon-color-down - ); - --spectrum-clear-button-icon-color-key-focus: var( - --system-clear-button-icon-color-key-focus - ); + --spectrum-clear-button-background-color: var(--system-clear-button-background-color); + --spectrum-clear-button-background-color-hover: var(--system-clear-button-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-background-color-key-focus); + --spectrum-clear-button-height: var(--system-clear-button-height); + --spectrum-clear-button-width: var(--system-clear-button-width); + --spectrum-clear-button-padding: var(--system-clear-button-padding); + --spectrum-clear-button-icon-color: var(--system-clear-button-icon-color); + --spectrum-clear-button-icon-color-hover: var(--system-clear-button-icon-color-hover); + --spectrum-clear-button-icon-color-down: var(--system-clear-button-icon-color-down); + --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-icon-color-key-focus); } -:host([size='s']) { - --spectrum-clear-button-height: var(--system-clear-button-size-s-height); - --spectrum-clear-button-width: var(--system-clear-button-size-s-width); +:host([size="s"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-s-height); + --spectrum-clear-button-width: var(--system-clear-button-size-s-width); } -:host([size='l']) { - --spectrum-clear-button-height: var(--system-clear-button-size-l-height); - --spectrum-clear-button-width: var(--system-clear-button-size-l-width); +:host([size="l"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-l-height); + --spectrum-clear-button-width: var(--system-clear-button-size-l-width); } -:host([size='xl']) { - --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); - --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); +:host([size="xl"]) { + --spectrum-clear-button-height: var(--system-clear-button-size-xl-height); + --spectrum-clear-button-width: var(--system-clear-button-size-xl-width); } :host .spectrum-ClearButton--quiet { - --spectrum-clear-button-background-color: var( - --system-clear-button-quiet-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-quiet-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-quiet-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-quiet-background-color-key-focus - ); + --spectrum-clear-button-background-color: var(--system-clear-button-quiet-background-color); + --spectrum-clear-button-background-color-hover: var(--system-clear-button-quiet-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-quiet-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-quiet-background-color-key-focus); } -:host([variant='overBackground']) { - --spectrum-clear-button-icon-color: var( - --system-clear-button-over-background-icon-color - ); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-over-background-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-over-background-icon-color-down - ); - --spectrum-clear-button-icon-color-key-focus: var( - --system-clear-button-over-background-icon-color-key-focus - ); - --spectrum-clear-button-background-color: var( - --system-clear-button-over-background-background-color - ); - --spectrum-clear-button-background-color-hover: var( - --system-clear-button-over-background-background-color-hover - ); - --spectrum-clear-button-background-color-down: var( - --system-clear-button-over-background-background-color-down - ); - --spectrum-clear-button-background-color-key-focus: var( - --system-clear-button-over-background-background-color-key-focus - ); +:host([variant="overBackground"]) { + --spectrum-clear-button-icon-color: var(--system-clear-button-over-background-icon-color); + --spectrum-clear-button-icon-color-hover: var(--system-clear-button-over-background-icon-color-hover); + --spectrum-clear-button-icon-color-down: var(--system-clear-button-over-background-icon-color-down); + --spectrum-clear-button-icon-color-key-focus: var(--system-clear-button-over-background-icon-color-key-focus); + --spectrum-clear-button-background-color: var(--system-clear-button-over-background-background-color); + --spectrum-clear-button-background-color-hover: var(--system-clear-button-over-background-background-color-hover); + --spectrum-clear-button-background-color-down: var(--system-clear-button-over-background-background-color-down); + --spectrum-clear-button-background-color-key-focus: var(--system-clear-button-over-background-background-color-key-focus); } -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var( - --system-clear-button-disabled-icon-color - ); - --spectrum-clear-button-icon-color-hover: var( - --system-clear-button-disabled-icon-color-hover - ); - --spectrum-clear-button-icon-color-down: var( - --system-clear-button-disabled-icon-color-down - ); - --spectrum-clear-button-background-color: var( - --system-clear-button-disabled-background-color - ); +:host([disabled]), :host([disabled]) { + --spectrum-clear-button-icon-color: var(--system-clear-button-disabled-icon-color); + --spectrum-clear-button-icon-color-hover: var(--system-clear-button-disabled-icon-color-hover); + --spectrum-clear-button-icon-color-down: var(--system-clear-button-disabled-icon-color-down); + --spectrum-clear-button-background-color: var(--system-clear-button-disabled-background-color); } + diff --git a/packages/clear-button/src/spectrum-clear-button.css b/packages/clear-button/src/spectrum-clear-button.css index 3eab7a51c9..f4397ea755 100644 --- a/packages/clear-button/src/spectrum-clear-button.css +++ b/packages/clear-button/src/spectrum-clear-button.css @@ -1,130 +1,82 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - block-size: var( - --mod-clear-button-height, - var(--spectrum-clear-button-height) - ); - inline-size: var( - --mod-clear-button-width, - var(--spectrum-clear-button-width) - ); - cursor: pointer; - background-color: initial; - background-color: var(--mod-clear-button-background-color, transparent); - padding: var( - --mod-clear-button-padding, - var(--spectrum-clear-button-padding) - ); - color: var( - --mod-clear-button-icon-color, - var(--spectrum-clear-button-icon-color) - ); - border: none; - border-radius: 100%; - margin: 0; + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); + inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + cursor: pointer; + background-color: initial; + background-color: var(--mod-clear-button-background-color, transparent); + padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + border: none; + border-radius: 100%; + margin: 0; } .icon { - margin-block: 0; - margin-inline: auto; + margin-block: 0; + margin-inline: auto; } @media (hover: hover) { - :host(:hover) { - color: var( - --highcontrast-clear-button-icon-color-hover, - var( - --mod-clear-button-icon-color-hover, - var(--spectrum-clear-button-icon-color-hover) - ) - ); - } + :host(:hover) { + color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))); + } - :host(:hover) .fill { - background-color: var( - --mod-clear-button-background-color-hover, - var(--spectrum-clear-button-background-color-hover) - ); - } + :host(:hover) .fill { + background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover)); + } } :host(:is(:active, [active])) { - color: var( - --mod-clear-button-icon-color-down, - var(--spectrum-clear-button-icon-color-down) - ); + color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down)); } :host(:is(:active, [active])) .fill { - background-color: var( - --mod-clear-button-background-color-down, - var(--spectrum-clear-button-background-color-down) - ); + background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down)); } -:host([focus-within]) .js-focus-within, -:host(:focus-visible), -:host:focus-within, -:host([focus-within]) .js-focus-within { - color: var( - --mod-clear-button-icon-color-key-focus, - var(--spectrum-clear-button-icon-color-key-focus) - ); +:host([focus-within]) .js-focus-within , :host(:focus-visible), :host:focus-within, :host([focus-within]) .js-focus-within { + color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus)); } -:host([focus-within]) .js-focus-within .fill, -:host(:focus-visible) .fill, -:host:focus-within .fill, -:host([focus-within]) .js-focus-within .fill { - background-color: var( - --mod-clear-button-background-color-key-focus, - var(--spectrum-clear-button-background-color-key-focus) - ); +:host([focus-within]) .js-focus-within .fill, :host(:focus-visible) .fill, :host:focus-within .fill, :host([focus-within]) .js-focus-within .fill { + background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus)); } -:host([disabled]), -:host([disabled]) { - --spectrum-clear-button-icon-color: var( - --mod-clear-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-clear-button-background-color: var( - --mod-clear-button-background-color-disabled, - transparent - ); +:host([disabled]), :host([disabled]) { + --spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); } .fill { - background-color: var( - --mod-clear-button-background-color, - var(--spectrum-clear-button-background-color) - ); - inline-size: 100%; - block-size: 100%; - border-radius: 100%; - justify-content: center; - align-items: center; - display: flex; + background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color)); + inline-size: 100%; + block-size: 100%; + border-radius: 100%; + justify-content: center; + align-items: center; + display: flex; } -:host([variant='overBackground']:focus-visible) { - outline: none; +:host([variant="overBackground"]:focus-visible) { + outline: none; } @media (forced-colors: active) { - :host:not(:disabled) { - --highcontrast-clear-button-icon-color-hover: Highlight; - } + :host:not(:disabled) { + --highcontrast-clear-button-icon-color-hover: Highlight; + } } + diff --git a/packages/close-button/src/close-button-overrides.css b/packages/close-button/src/close-button-overrides.css index 005a7a6d0d..c9987980d5 100644 --- a/packages/close-button/src/close-button-overrides.css +++ b/packages/close-button/src/close-button-overrides.css @@ -1,119 +1,66 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-closebutton-background-color-default: var( - --system-close-button-background-color-default - ); - --spectrum-closebutton-background-color-hover: var( - --system-close-button-background-color-hover - ); - --spectrum-closebutton-background-color-down: var( - --system-close-button-background-color-down - ); - --spectrum-closebutton-background-color-focus: var( - --system-close-button-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-icon-color-default - ); - --spectrum-closebutton-icon-color-hover: var( - --system-close-button-icon-color-hover - ); - --spectrum-closebutton-icon-color-down: var( - --system-close-button-icon-color-down - ); - --spectrum-closebutton-icon-color-focus: var( - --system-close-button-icon-color-focus - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-thickness: var( - --system-close-button-focus-indicator-thickness - ); - --spectrum-closebutton-focus-indicator-gap: var( - --system-close-button-focus-indicator-gap - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-focus-indicator-color - ); - --spectrum-closebutton-animation-duration: var( - --system-close-button-animation-duration - ); - --spectrum-closebutton-size: var(--system-close-button-size); + --spectrum-closebutton-background-color-default: var(--system-close-button-background-color-default); + --spectrum-closebutton-background-color-hover: var(--system-close-button-background-color-hover); + --spectrum-closebutton-background-color-down: var(--system-close-button-background-color-down); + --spectrum-closebutton-background-color-focus: var(--system-close-button-background-color-focus); + --spectrum-closebutton-icon-color-default: var(--system-close-button-icon-color-default); + --spectrum-closebutton-icon-color-hover: var(--system-close-button-icon-color-hover); + --spectrum-closebutton-icon-color-down: var(--system-close-button-icon-color-down); + --spectrum-closebutton-icon-color-focus: var(--system-close-button-icon-color-focus); + --spectrum-closebutton-icon-color-disabled: var(--system-close-button-icon-color-disabled); + --spectrum-closebutton-focus-indicator-thickness: var(--system-close-button-focus-indicator-thickness); + --spectrum-closebutton-focus-indicator-gap: var(--system-close-button-focus-indicator-gap); + --spectrum-closebutton-focus-indicator-color: var(--system-close-button-focus-indicator-color); + --spectrum-closebutton-animation-duration: var(--system-close-button-animation-duration); + --spectrum-closebutton-size: var(--system-close-button-size); } -:host([static-color='white']) { - --spectrum-closebutton-static-background-color-default: var( - --system-close-button-static-white-static-background-color-default - ); - --spectrum-closebutton-static-background-color-hover: var( - --system-close-button-static-white-static-background-color-hover - ); - --spectrum-closebutton-static-background-color-down: var( - --system-close-button-static-white-static-background-color-down - ); - --spectrum-closebutton-static-background-color-focus: var( - --system-close-button-static-white-static-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-static-white-icon-color-default - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-static-white-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-static-white-focus-indicator-color - ); +:host([static-color="white"]) { + --spectrum-closebutton-static-background-color-default: var(--system-close-button-static-white-static-background-color-default); + --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-white-static-background-color-hover); + --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-white-static-background-color-down); + --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-white-static-background-color-focus); + --spectrum-closebutton-icon-color-default: var(--system-close-button-static-white-icon-color-default); + --spectrum-closebutton-icon-color-disabled: var(--system-close-button-static-white-icon-color-disabled); + --spectrum-closebutton-focus-indicator-color: var(--system-close-button-static-white-focus-indicator-color); } -:host([static-color='black']) { - --spectrum-closebutton-static-background-color-default: var( - --system-close-button-static-black-static-background-color-default - ); - --spectrum-closebutton-static-background-color-hover: var( - --system-close-button-static-black-static-background-color-hover - ); - --spectrum-closebutton-static-background-color-down: var( - --system-close-button-static-black-static-background-color-down - ); - --spectrum-closebutton-static-background-color-focus: var( - --system-close-button-static-black-static-background-color-focus - ); - --spectrum-closebutton-icon-color-default: var( - --system-close-button-static-black-icon-color-default - ); - --spectrum-closebutton-icon-color-disabled: var( - --system-close-button-static-black-icon-color-disabled - ); - --spectrum-closebutton-focus-indicator-color: var( - --system-close-button-static-black-focus-indicator-color - ); +:host([static-color="black"]) { + --spectrum-closebutton-static-background-color-default: var(--system-close-button-static-black-static-background-color-default); + --spectrum-closebutton-static-background-color-hover: var(--system-close-button-static-black-static-background-color-hover); + --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-black-static-background-color-down); + --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-black-static-background-color-focus); + --spectrum-closebutton-icon-color-default: var(--system-close-button-static-black-icon-color-default); + --spectrum-closebutton-icon-color-disabled: var(--system-close-button-static-black-icon-color-disabled); + --spectrum-closebutton-focus-indicator-color: var(--system-close-button-static-black-focus-indicator-color); } -:host([size='s']) { - --spectrum-closebutton-size: var(--system-close-button-size-s-size); +:host([size="s"]) { + --spectrum-closebutton-size: var(--system-close-button-size-s-size); } :host { - --spectrum-closebutton-size: var(--system-close-button-size-m-size); + --spectrum-closebutton-size: var(--system-close-button-size-m-size); } -:host([size='l']) { - --spectrum-closebutton-size: var(--system-close-button-size-l-size); +:host([size="l"]) { + --spectrum-closebutton-size: var(--system-close-button-size-l-size); } -:host([size='xl']) { - --spectrum-closebutton-size: var(--system-close-button-size-xl-size); +:host([size="xl"]) { + --spectrum-closebutton-size: var(--system-close-button-size-xl-size); } + diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index 3b68d5d511..3abbea7f03 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -1,418 +1,201 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - box-sizing: border-box; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - border-style: solid; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + box-sizing: border-box; + font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + border-style: solid; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + overflow: visible; } :host(:focus) { - outline: none; + outline: none; } -:host([disabled]), -:host([disabled]) { - cursor: default; +:host([disabled]), :host([disabled]) { + cursor: default; } :host a { - -webkit-user-select: none; - user-select: none; - -webkit-appearance: none; + -webkit-user-select: none; + user-select: none; + -webkit-appearance: none; } @media (forced-colors: active) { - :host { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - } - - :host(:focus-visible):after { - forced-color-adjust: none; - margin: var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ); - transition: - opacity - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-out, - margin - var( - --mod-closebutton-animation-duraction, - var(--spectrum-closebutton-animation-duration) - ) - ease-out; - } - - :host([static-color='black']) { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: GrayText; - } - - :host([static-color='white']) { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: Highlight; - } + :host { + --highcontrast-closebutton-icon-color-disabled: GrayText; + --highcontrast-closebutton-icon-color-down: Highlight; + --highcontrast-closebutton-icon-color-hover: Highlight; + --highcontrast-closebutton-icon-color-focus: Highlight; + --highcontrast-closebutton-background-color-default: ButtonFace; + --highcontrast-closebutton-focus-indicator-color: ButtonText; + } + + :host(:focus-visible):after { + forced-color-adjust: none; + margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); + transition: opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; + } + + :host([static-color="black"]) { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: GrayText; + } + + :host([static-color="white"]) { + --highcontrast-closebutton-static-background-color-default: ButtonFace; + --highcontrast-closebutton-icon-color-default: Highlight; + --highcontrast-closebutton-icon-color-disabled: Highlight; + } } :host { - block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); - color: inherit; - border-radius: var( - --mod-closebutton-border-radius, - var(--spectrum-closebutton-size) - ); - transition: border-color - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-in-out; - margin-inline: var(--mod-closebutton-margin-inline); - justify-content: center; - align-items: center; - align-self: var(--mod-closebutton-align-self); - border-width: 0; - border-color: #0000; - flex-direction: row; - margin-block-start: var(--mod-closebutton-margin-top); - padding: 0; - display: inline-flex; - position: relative; + block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-width, var(--spectrum-closebutton-size)); + color: inherit; + border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-size)); + transition: border-color var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + margin-inline: var(--mod-closebutton-margin-inline); + justify-content: center; + align-items: center; + align-self: var(--mod-closebutton-align-self); + border-width: 0; + border-color: #0000; + flex-direction: row; + margin-block-start: var(--mod-closebutton-margin-top); + padding: 0; + display: inline-flex; + position: relative; } :host:after { - pointer-events: none; - content: ''; - margin: calc( - var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ) * -1 - ); - border-radius: calc( - var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + - var( - --mod-closebutton-focus-indicator-gap, - var(--spectrum-closebutton-focus-indicator-gap) - ) - ); - transition: box-shadow - var( - --mod-closebutton-animation-duration, - var(--spectrum-closebutton-animation-duration) - ) - ease-in-out; - position: absolute; - inset-block: 0; - inset-inline: 0; + pointer-events: none; + content: ""; + margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); + border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); + transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; + position: absolute; + inset-block: 0; + inset-inline: 0; } :host(:focus-visible) { - box-shadow: none; - outline: none; + box-shadow: none; + outline: none; } :host(:focus-visible):after { - box-shadow: 0 0 0 - var( - --mod-closebutton-focus-indicator-thickness, - var(--spectrum-closebutton-focus-indicator-thickness) - ) - var( - --highcontrast-closebutton-focus-indicator-color, - var( - --mod-closebutton-focus-indicator-color, - var(--spectrum-closebutton-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); } :host(:not([disabled])) { - background-color: var( - --highcontrast-closebutton-background-color-default, - var( - --mod-closebutton-background-color-default, - var(--spectrum-closebutton-background-color-default) - ) - ); + background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); } :host(:not([disabled]):is(:active, [active])) { - background-color: var( - --mod-closebutton-background-color-down, - var(--spectrum-closebutton-background-color-down) - ); + background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); } :host(:not([disabled]):is(:active, [active])) .icon { - color: var( - --highcontrast-closebutton-icon-color-down, - var( - --mod-closebutton-icon-color-down, - var(--spectrum-closebutton-icon-color-down) - ) - ); + color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); } -:host([focused]:not([disabled])), -:host(:not([disabled]):focus-visible) { - background-color: var( - --mod-closebutton-background-color-focus, - var(--spectrum-closebutton-background-color-focus) - ); +:host([focused]:not([disabled])), :host(:not([disabled]):focus-visible) { + background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); } -:host([focused]:not([disabled])) .icon, -:host(:not([disabled]):focus-visible) .icon { - color: var( - --highcontrast-closebutton-icon-color-focus, - var( - --mod-closebutton-icon-color-focus, - var(--spectrum-closebutton-icon-color-focus) - ) - ); +:host([focused]:not([disabled])) .icon, :host(:not([disabled]):focus-visible) .icon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); } :host(:not([disabled])) .icon { - color: var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ); + color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); } -:host([focused]:not([disabled])) .icon, -:host(:not([disabled]):focus) .icon { - color: var( - --highcontrast-closebutton-icon-color-focus, - var( - --mod-closebutton-icon-color-focus, - var(--spectrum-closebutton-icon-color-focus) - ) - ); +:host([focused]:not([disabled])) .icon, :host(:not([disabled]):focus) .icon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); } :host([disabled]) { - background-color: var( - --mod-closebutton-background-color-default, - var(--spectrum-closebutton-background-color-default) - ); + background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); } :host([disabled]) .icon { - color: var( - --highcontrast-closebutton-icon-color-disabled, - var( - --mod-closebutton-icon-color-disabled, - var(--spectrum-closebutton-icon-color-disabled) - ) - ); + color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); } -:host([static-color='black']:not([disabled])), -:host([static-color='white']:not([disabled])) { - background-color: var( - --highcontrast-closebutton-static-background-color-default, - var( - --mod-closebutton-static-background-color-default, - var(--spectrum-closebutton-static-background-color-default) - ) - ); +:host([static-color="black"]:not([disabled])), :host([static-color="white"]:not([disabled])) { + background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))); } @media (hover: hover) { - :host(:not([disabled]):hover) { - background-color: var( - --mod-closebutton-background-color-hover, - var(--spectrum-closebutton-background-color-hover) - ); - } - - :host(:not([disabled]):hover) .icon { - color: var( - --highcontrast-closebutton-icon-color-hover, - var( - --mod-closebutton-icon-color-hover, - var(--spectrum-closebutton-icon-color-hover) - ) - ); - } - - :host([static-color='black']:not([disabled]):hover), - :host([static-color='white']:not([disabled]):hover) { - background-color: var( - --highcontrast-closebutton-static-background-color-hover, - var( - --mod-closebutton-static-background-color-hover, - var(--spectrum-closebutton-static-background-color-hover) - ) - ); - } - - :host([static-color='black']:not([disabled]):hover) .icon, - :host([static-color='white']:not([disabled]):hover) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); - } + :host(:not([disabled]):hover) { + background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); + } + + :host(:not([disabled]):hover) .icon { + color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + } + + :host([static-color="black"]:not([disabled]):hover), :host([static-color="white"]:not([disabled]):hover) { + background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover))); + } + + :host([static-color="black"]:not([disabled]):hover) .icon, :host([static-color="white"]:not([disabled]):hover) .icon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); + } } -:host([static-color='black']:not([disabled]):is(:active, [active])), -:host([static-color='white']:not([disabled]):is(:active, [active])) { - background-color: var( - --highcontrast-closebutton-static-background-color-down, - var( - --mod-closebutton-static-background-color-down, - var(--spectrum-closebutton-static-background-color-down) - ) - ); +:host([static-color="black"]:not([disabled]):is(:active, [active])), :host([static-color="white"]:not([disabled]):is(:active, [active])) { + background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down))); } -:host([static-color='black']:not([disabled]):is(:active, [active])) .icon, -:host([static-color='white']:not([disabled]):is(:active, [active])) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); +:host([static-color="black"]:not([disabled]):is(:active, [active])) .icon, :host([static-color="white"]:not([disabled]):is(:active, [active])) .icon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); } -:host([static-color='black'][focused]:not([disabled])), -:host([static-color='black']:not([disabled]):focus-visible), -:host([static-color='white'][focused]:not([disabled])), -:host([static-color='white']:not([disabled]):focus-visible) { - background-color: var( - --highcontrast-closebutton-static-background-color-focus, - var( - --mod-closebutton-static-background-color-focus, - var(--spectrum-closebutton-static-background-color-focus) - ) - ); +:host([static-color="black"][focused]:not([disabled])), :host([static-color="black"]:not([disabled]):focus-visible), :host([static-color="white"][focused]:not([disabled])), :host([static-color="white"]:not([disabled]):focus-visible) { + background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus))); } -:host([static-color='black'][focused]:not([disabled])) .icon, -:host([static-color='black'][focused]:not([disabled])) .icon, -:host([static-color='black']:not([disabled]):focus) .icon, -:host([static-color='black']:not([disabled]):focus-visible) .icon, -:host([static-color='white'][focused]:not([disabled])) .icon, -:host([static-color='white'][focused]:not([disabled])) .icon, -:host([static-color='white']:not([disabled]):focus) .icon, -:host([static-color='white']:not([disabled]):focus-visible) .icon { - color: var( - --highcontrast-closebutton-icon-color-default, - var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ) - ); +:host([static-color="black"][focused]:not([disabled])) .icon, :host([static-color="black"][focused]:not([disabled])) .icon, :host([static-color="black"]:not([disabled]):focus) .icon, :host([static-color="black"]:not([disabled]):focus-visible) .icon, :host([static-color="white"][focused]:not([disabled])) .icon, :host([static-color="white"][focused]:not([disabled])) .icon, :host([static-color="white"]:not([disabled]):focus) .icon, :host([static-color="white"]:not([disabled]):focus-visible) .icon { + color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); } -:host([static-color='black']:not([disabled])) .icon, -:host([static-color='white']:not([disabled])) .icon { - color: var( - --mod-closebutton-icon-color-default, - var(--spectrum-closebutton-icon-color-default) - ); +:host([static-color="black"]:not([disabled])) .icon, :host([static-color="white"]:not([disabled])) .icon { + color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); } -:host([static-color='black'][disabled]) .icon, -:host([static-color='white'][disabled]) .icon { - color: var( - --highcontrast-closebutton-icon-disabled, - var( - --mod-closebutton-icon-color-disabled, - var(--spectrum-closebutton-icon-color-disabled) - ) - ); +:host([static-color="black"][disabled]) .icon, :host([static-color="white"][disabled]) .icon { + color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); } .icon { - margin: 0; + margin: 0; } + diff --git a/packages/coachmark/src/coach-indicator-overrides.css b/packages/coachmark/src/coach-indicator-overrides.css index 8f1727e716..52ce6b33ee 100644 --- a/packages/coachmark/src/coach-indicator-overrides.css +++ b/packages/coachmark/src/coach-indicator-overrides.css @@ -1,95 +1,46 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coach-indicator-ring-border-size: var( - --system-coach-indicator-ring-border-size - ); - --spectrum-coach-indicator-min-inline-size: var( - --system-coach-indicator-min-inline-size - ); - --spectrum-coach-indicator-min-block-size: var( - --system-coach-indicator-min-block-size - ); - --spectrum-coach-indicator-inline-size: var( - --system-coach-indicator-inline-size - ); - --spectrum-coach-indicator-block-size: var( - --system-coach-indicator-block-size - ); - --spectrum-coach-indicator-ring-inline-size: var( - --system-coach-indicator-ring-inline-size - ); - --spectrum-coach-indicator-ring-block-size: var( - --system-coach-indicator-ring-block-size - ); - --spectrum-coach-indicator-ring-dark-color: var( - --system-coach-indicator-ring-dark-color - ); - --spectrum-coach-indicator-ring-light-color: var( - --system-coach-indicator-ring-light-color - ); - --spectrum-coach-indicator-top: var(--system-coach-indicator-top); - --spectrum-coach-indicator-left: var(--system-coach-indicator-left); - --spectrum-coach-animation-indicator-ring-duration: var( - --system-coach-indicator-coach-animation-indicator-ring-duration - ); - --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple - ); - --spectrum-coach-animation-indicator-ring-center-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple - ); - --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var( - --system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple - ); - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var( - --system-coach-indicator-quiet-animation-ring-inner-delay-multiple - ); - --spectrum-coach-indicator-animation-name: var( - --system-coach-indicator-animation-name - ); - --spectrum-coach-indicator-inner-animation-delay-multiple: var( - --system-coach-indicator-inner-animation-delay-multiple - ); - --spectrum-coach-indicator-animation-keyframe-0-scale: var( - --system-coach-indicator-animation-keyframe-0-scale - ); - --spectrum-coach-indicator-animation-keyframe-0-opacity: var( - --system-coach-indicator-animation-keyframe-0-opacity - ); - --spectrum-coach-indicator-animation-keyframe-50-scale: var( - --system-coach-indicator-animation-keyframe-50-scale - ); - --spectrum-coach-indicator-animation-keyframe-50-opacity: var( - --system-coach-indicator-animation-keyframe-50-opacity - ); - --spectrum-coach-indicator-animation-keyframe-100-scale: var( - --system-coach-indicator-animation-keyframe-100-scale - ); - --spectrum-coach-indicator-animation-keyframe-100-opacity: var( - --system-coach-indicator-animation-keyframe-100-opacity - ); - --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var( - --system-coach-indicator-quiet-animation-keyframe-0-scale - ); + --spectrum-coach-indicator-ring-border-size: var(--system-coach-indicator-ring-border-size); + --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-min-inline-size); + --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-min-block-size); + --spectrum-coach-indicator-inline-size: var(--system-coach-indicator-inline-size); + --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size); + --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size); + --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size); + --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color); + --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color); + --spectrum-coach-indicator-top: var(--system-coach-indicator-top); + --spectrum-coach-indicator-left: var(--system-coach-indicator-left); + --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration); + --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple); + --spectrum-coach-animation-indicator-ring-center-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple); + --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple); + --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(--system-coach-indicator-quiet-animation-ring-inner-delay-multiple); + --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-animation-name); + --spectrum-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-inner-animation-delay-multiple); + --spectrum-coach-indicator-animation-keyframe-0-scale: var(--system-coach-indicator-animation-keyframe-0-scale); + --spectrum-coach-indicator-animation-keyframe-0-opacity: var(--system-coach-indicator-animation-keyframe-0-opacity); + --spectrum-coach-indicator-animation-keyframe-50-scale: var(--system-coach-indicator-animation-keyframe-50-scale); + --spectrum-coach-indicator-animation-keyframe-50-opacity: var(--system-coach-indicator-animation-keyframe-50-opacity); + --spectrum-coach-indicator-animation-keyframe-100-scale: var(--system-coach-indicator-animation-keyframe-100-scale); + --spectrum-coach-indicator-animation-keyframe-100-opacity: var(--system-coach-indicator-animation-keyframe-100-opacity); + --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale); } :host([quiet]) { - --spectrum-coach-indicator-quiet-ring-diameter-size: var( - --system-coach-indicator-quiet-quiet-ring-diameter-size - ); - --spectrum-coach-indicator-animation-name: var( - --system-coach-indicator-quiet-animation-name - ); + --spectrum-coach-indicator-quiet-ring-diameter-size: var(--system-coach-indicator-quiet-quiet-ring-diameter-size); + --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-quiet-animation-name); } + diff --git a/packages/coachmark/src/coachmark-overrides.css b/packages/coachmark/src/coachmark-overrides.css index 092944c6d8..d5dc05c250 100644 --- a/packages/coachmark/src/coachmark-overrides.css +++ b/packages/coachmark/src/coachmark-overrides.css @@ -1,94 +1,47 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); - --spectrum-coachmark-width: var(--system-coach-mark-width); - --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); - --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); - --spectrum-coachmark-media-min-height: var( - --system-coach-mark-media-min-height - ); - --spectrum-coachmark-padding: var(--system-coach-mark-padding); - --spectrum-coachmark-heading-to-action-button: var( - --system-coach-mark-heading-to-action-button - ); - --spectrum-coachmark-header-to-body: var( - --system-coach-mark-header-to-body - ); - --spectrum-coachmark-body-to-footer: var( - --system-coach-mark-body-to-footer - ); - --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); - --spectrum-coachmark-title-font-family: var( - --system-coach-mark-title-font-family - ); - --spectrum-coachmark-title-font-style: var( - --system-coach-mark-title-font-style - ); - --spectrum-coachmark-title-text-font-weight: var( - --system-coach-mark-title-text-font-weight - ); - --spectrum-coachmark-title-font-size: var( - --system-coach-mark-title-font-size - ); - --spectrum-coachmark-title-text-line-height: var( - --system-coach-mark-title-text-line-height - ); - --spectrum-coachmark-content-font-color: var( - --system-coach-mark-content-font-color - ); - --spectrum-coachmark-content-font-weight: var( - --system-coach-mark-content-font-weight - ); - --spectrum-coachmark-content-font-family: var( - --system-coach-mark-content-font-family - ); - --spectrum-coachmark-content-font-style: var( - --system-coach-mark-content-font-style - ); - --spectrum-coachmark-content-line-height: var( - --system-coach-mark-content-line-height - ); - --spectrum-coachmark-content-font-size: var( - --system-coach-mark-content-font-size - ); - --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); - --spectrum-coachmark-step-font-weight: var( - --system-coach-mark-step-font-weight - ); - --spectrum-coachmark-step-font-family: var( - --system-coach-mark-step-font-family - ); - --spectrum-coachmark-step-font-style: var( - --system-coach-mark-step-font-style - ); - --spectrum-coachmark-step-line-height: var( - --system-coach-mark-step-line-height - ); - --spectrum-coachmark-step-font-size: var( - --system-coach-mark-step-font-size - ); - --spectrum-coachmark-step-to-bottom: var( - --system-coach-mark-step-to-bottom - ); - --spectrum-coachmark-popover-border-width: var( - --system-coach-mark-popover-border-width - ); - --spectrum-coachmark-popover-corner-radius: var( - --system-coach-mark-popover-corner-radius - ); - --spectrum-coachmark-buttongroup-spacing-horizontal: var( - --system-coach-mark-buttongroup-spacing-horizontal - ); + --spectrum-coachmark-min-width: var(--system-coach-mark-min-width); + --spectrum-coachmark-width: var(--system-coach-mark-width); + --spectrum-coachmark-max-width: var(--system-coach-mark-max-width); + --spectrum-coachmark-media-height: var(--system-coach-mark-media-height); + --spectrum-coachmark-media-min-height: var(--system-coach-mark-media-min-height); + --spectrum-coachmark-padding: var(--system-coach-mark-padding); + --spectrum-coachmark-heading-to-action-button: var(--system-coach-mark-heading-to-action-button); + --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body); + --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer); + --spectrum-coachmark-title-color: var(--system-coach-mark-title-color); + --spectrum-coachmark-title-font-family: var(--system-coach-mark-title-font-family); + --spectrum-coachmark-title-font-style: var(--system-coach-mark-title-font-style); + --spectrum-coachmark-title-text-font-weight: var(--system-coach-mark-title-text-font-weight); + --spectrum-coachmark-title-font-size: var(--system-coach-mark-title-font-size); + --spectrum-coachmark-title-text-line-height: var(--system-coach-mark-title-text-line-height); + --spectrum-coachmark-content-font-color: var(--system-coach-mark-content-font-color); + --spectrum-coachmark-content-font-weight: var(--system-coach-mark-content-font-weight); + --spectrum-coachmark-content-font-family: var(--system-coach-mark-content-font-family); + --spectrum-coachmark-content-font-style: var(--system-coach-mark-content-font-style); + --spectrum-coachmark-content-line-height: var(--system-coach-mark-content-line-height); + --spectrum-coachmark-content-font-size: var(--system-coach-mark-content-font-size); + --spectrum-coachmark-step-color: var(--system-coach-mark-step-color); + --spectrum-coachmark-step-font-weight: var(--system-coach-mark-step-font-weight); + --spectrum-coachmark-step-font-family: var(--system-coach-mark-step-font-family); + --spectrum-coachmark-step-font-style: var(--system-coach-mark-step-font-style); + --spectrum-coachmark-step-line-height: var(--system-coach-mark-step-line-height); + --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size); + --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom); + --spectrum-coachmark-popover-border-width: var(--system-coach-mark-popover-border-width); + --spectrum-coachmark-popover-corner-radius: var(--system-coach-mark-popover-corner-radius); + --spectrum-coachmark-buttongroup-spacing-horizontal: var(--system-coach-mark-buttongroup-spacing-horizontal); } + diff --git a/packages/coachmark/src/spectrum-coach-indicator.css b/packages/coachmark/src/spectrum-coach-indicator.css index 7021ca01c8..a2dae43af5 100644 --- a/packages/coachmark/src/spectrum-coach-indicator.css +++ b/packages/coachmark/src/spectrum-coach-indicator.css @@ -1,231 +1,108 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); - min-inline-size: var( - --mod-coach-indicator-min-inline-size, - var(--spectrum-coach-indicator-min-inline-size) - ); - min-block-size: var( - --mod-coach-indicator-min-block-size, - var(--spectrum-coach-indicator-min-block-size) - ); - inline-size: var( - --mod-coach-indicator-inline-size, - var(--spectrum-coach-indicator-inline-size) - ); - block-size: var( - --mod-coach-indicator-block-size, - var(--spectrum-coach-indicator-block-size) - ); - position: relative; + margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap)); + min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size)); + min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size)); + inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size)); + block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size)); + position: relative; } :host([quiet]) { - --mod-coach-indicator-min-inline-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-min-block-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-inline-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-block-size: calc( - var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ) * 2.75 - ); - --mod-coach-indicator-ring-inline-size: var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ); - --mod-coach-indicator-ring-block-size: var( - --mod-coach-indicator-quiet-ring-diameter, - var(--spectrum-coach-indicator-quiet-ring-diameter-size) - ); - --mod-coach-indicator-top: calc( - var(--mod-coach-indicator-min-inline-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) - ); - --mod-coach-indicator-left: calc( - var(--mod-coach-indicator-min-inline-size) / 3 - - var(--spectrum-coach-indicator-ring-border-size) - ); - --mod-coach-indicator-inner-animation-delay-multiple: var( - --mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, - var( - --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple - ) - ); + --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75); + --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); + --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)); + --mod-coach-indicator-top: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-left: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)); + --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple)); } .ring { - border-style: solid; - border-width: var( - --mod-coach-indicator-ring-border-size, - var(--spectrum-coach-indicator-ring-border-size) - ); - border-color: var( - --mod-coach-indicator-ring-default-color, - var(--spectrum-coach-indicator-ring-default-color) - ); - inline-size: var( - --mod-coach-indicator-ring-inline-size, - var(--spectrum-coach-indicator-ring-inline-size) - ); - block-size: var( - --mod-coach-indicator-ring-block-size, - var(--spectrum-coach-indicator-ring-block-size) - ); - animation: var( - --mod-coach-indicator-animation-name, - var(--spectrum-coach-indicator-animation-name) - ) - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) - linear infinite; - border-radius: 50%; - display: block; - position: absolute; - inset-block-start: var( - --mod-coach-indicator-top, - var(--spectrum-coach-indicator-top) - ); - inset-inline-start: var( - --mod-coach-indicator-left, - var(--spectrum-coach-indicator-left) - ); + border-style: solid; + border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size)); + border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color)); + inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size)); + block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size)); + animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite; + border-radius: 50%; + display: block; + position: absolute; + inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top)); + inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left)); } .ring:first-child { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-indicator-inner-animation-delay-multiple, - var(--spectrum-coach-indicator-inner-animation-delay-multiple) - ) - ); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple))); } .ring:nth-child(2) { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-animation-indicator-ring-center-delay-multiple, - var( - --spectrum-coach-animation-indicator-ring-center-delay-multiple - ) - ) - ); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple))); } .ring:nth-child(3) { - animation-delay: calc( - var( - --mod-coach-animation-indicator-ring-duration, - var(--spectrum-coach-animation-indicator-ring-duration) - ) * - var( - --mod-coach-animation-indicator-ring-outer-delay-multiple, - var( - --spectrum-coach-animation-indicator-ring-outer-delay-multiple - ) - ) - ); + animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple))); } -:host([static-color='white']) .ring { - border-color: var( - --mod-coach-indicator-ring-light-color, - var(--spectrum-coach-indicator-ring-light-color) - ); +:host([static-color="white"]) .ring { + border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color)); } -:host([static-color='black']) .ring { - border-color: var( - --mod-coach-indicator-ring-dark-color, - var(--spectrum-coach-indicator-ring-dark-color) - ); +:host([static-color="black"]) .ring { + border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color)); } @media (prefers-reduced-motion: reduce) { - .ring { - animation: none; - } + .ring { + animation: none; + } } @keyframes pulse { - 0% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } + 0% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } } @keyframes pulse-quiet { - 0% { - transform: scale( - var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); - } - - 50% { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-50-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); - } - - to { - transform: scale( - var(--spectrum-coach-indicator-animation-keyframe-100-scale) - ); - opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); - } + 0% { + transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity); + } + + 50% { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity); + } + + to { + transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale)); + opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity); + } } + diff --git a/packages/coachmark/src/spectrum-coachmark.css b/packages/coachmark/src/spectrum-coachmark.css index 99446e29b8..424d036a0b 100644 --- a/packages/coachmark/src/spectrum-coachmark.css +++ b/packages/coachmark/src/spectrum-coachmark.css @@ -1,239 +1,124 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-buttongroup-justify-content: flex-end; - --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); - --mod-popover-corner-radius: var( - --spectrum-coachmark-popover-corner-radius - ); - --mod-popover-content-area-spacing-vertical: 0; - --mod-button-edge-to-visual-only: 9px; - --spectrum-coachmark-border-size: var(--mod-popover-border-width); - --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); - min-inline-size: var( - --mod-coachmark-min-width, - var(--spectrum-coachmark-min-width) - ); - max-inline-size: var( - --mod-coachmark-max-width, - var(--spectrum-coachmark-max-width) - ); - inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); - position: relative; + --mod-buttongroup-justify-content: flex-end; + --mod-popover-border-width: var(--spectrum-coachmark-popover-border-width); + --mod-popover-corner-radius: var(--spectrum-coachmark-popover-corner-radius); + --mod-popover-content-area-spacing-vertical: 0; + --mod-button-edge-to-visual-only: 9px; + --spectrum-coachmark-border-size: var(--mod-popover-border-width); + --spectrum-coachmark-border-radius: var(--mod-popover-corner-radius); + min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width)); + max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width)); + inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); + position: relative; } .buttongroup { - display: var(--spectrum-coachmark-buttongroup-display); + display: var(--spectrum-coachmark-buttongroup-display); } .buttongroup-mobile { - --mod-buttongroup-spacing-horizontal: var( - --spectrum-coachmark-buttongroup-spacing-horizontal - ); - display: var(--spectrum-coachmark-buttongroup-mobile-display); + --mod-buttongroup-spacing-horizontal: var(--spectrum-coachmark-buttongroup-spacing-horizontal); + display: var(--spectrum-coachmark-buttongroup-mobile-display); } .menu { - display: var(--spectrum-coachmark-menu-display); + display: var(--spectrum-coachmark-menu-display); } .spectrum-CoachMark-menu--mobile { - display: var(--spectrum-coachmark-menu-mobile-display); + display: var(--spectrum-coachmark-menu-mobile-display); } .image-wrapper { - block-size: var( - --mod-coachmark-media-height, - var(--spectrum-coachmark-media-height) - ); - min-block-size: var( - --mod-coachmark-media-min-height, - var(--spectrum-coachmark-media-min-height) - ); - inline-size: calc( - var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) * 2 - ); - object-fit: cover; - object-position: center; - border-start-start-radius: inherit; - border-start-end-radius: inherit; + block-size: var(--mod-coachmark-media-height, var(--spectrum-coachmark-media-height)); + min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); + inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coachmark-width)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size)) * 2); + object-fit: cover; + object-position: center; + border-start-start-radius: inherit; + border-start-end-radius: inherit; } .image { - inline-size: 100%; - block-size: 100%; - object-fit: cover; - border-start-start-radius: calc( - var( - --mod-coachmark-border-radius, - var(--spectrum-coachmark-border-radius) - ) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) - ); - border-start-end-radius: calc( - var( - --mod-coachmark-border-radius, - var(--spectrum-coachmark-border-radius) - ) - - var( - --mod-coachmark-border-size, - var(--spectrum-coachmark-border-size) - ) - ); - display: block; + inline-size: 100%; + block-size: 100%; + object-fit: cover; + border-start-start-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size))); + border-start-end-radius: calc(var(--mod-coachmark-border-radius, var(--spectrum-coachmark-border-radius)) - var(--mod-coachmark-border-size, var(--spectrum-coachmark-border-size))); + display: block; } -.content, -.footer, -.header { - padding-block: 0; - padding-inline: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); +.content, .footer, .header { + padding-block: 0; + padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); } .header { - justify-content: space-between; - align-items: center; - margin-block-end: var( - --mod-coachmark-header-to-body, - var(--spectrum-coachmark-header-to-body) - ); - padding-block-start: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); - display: flex; + justify-content: space-between; + align-items: center; + margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body)); + padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + display: flex; } .action-menu { - white-space: nowrap; - z-index: 1; - margin-inline-start: var( - --mod-coachmark-heading-to-action-button, - var(--spectrum-coachmark-heading-to-action-button) - ); + white-space: nowrap; + z-index: 1; + margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-coachmark-heading-to-action-button)); } .content { - color: var( - --mod-coachmark-content-font-color, - var(--spectrum-coachmark-content-font-color) - ); - font-size: var( - --mod-coachmark-content-font-size, - var(--spectrum-coachmark-content-font-size) - ); - font-weight: var( - --mod-coachmark-content-font-weight, - var(--spectrum-coachmark-content-font-weight) - ); - font-family: var( - --mod-coachmark-content-font-family, - var(--spectrum-coachmark-content-font-family) - ); - font-style: var( - --mod-coachmark-content-font-style, - var(--spectrum-coachmark-content-font-style) - ); - line-height: var( - --mod-coachmark-content-line-height, - var(--spectrum-coachmark-content-line-height) - ); - margin-block-end: var( - --mod-coachmark-body-to-footer, - var(--spectrum-coachmark-body-to-footer) - ); + color: var(--mod-coachmark-content-font-color, var(--spectrum-coachmark-content-font-color)); + font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size)); + font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight)); + font-family: var(--mod-coachmark-content-font-family, var(--spectrum-coachmark-content-font-family)); + font-style: var(--mod-coachmark-content-font-style, var(--spectrum-coachmark-content-font-style)); + line-height: var(--mod-coachmark-content-line-height, var(--spectrum-coachmark-content-line-height)); + margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer)); } .footer { - align-items: end; - margin-block-start: 0; - padding-block-end: var( - --mod-coachmark-padding, - var(--spectrum-coachmark-padding) - ); - display: grid; + align-items: end; + margin-block-start: 0; + padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); + display: grid; } .footer .spectrum-ButtonGroup { - grid-column-start: 2; + grid-column-start: 2; } .title { - color: var( - --mod-coachmark-title-color, - var(--spectrum-coachmark-title-color) - ); - font-size: var( - --mod-coachmark-title-font-size, - var(--spectrum-coachmark-title-font-size) - ); - font-weight: var( - --mod-coachmark-title-text-font-weight, - var(--spectrum-coachmark-title-text-font-weight) - ); - font-family: var( - --mod-coachmark-title-font-family, - var(--spectrum-coachmark-title-font-family) - ); - font-style: var( - --mod-coachmark-title-font-style, - var(--spectrum-coachmark-title-font-style) - ); - line-height: var( - --mod-coachmark-title-text-line-height, - var(--spectrum-coachmark-title-text-line-height) - ); - margin-block-end: 0; + color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color)); + font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size)); + font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight)); + font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family)); + font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style)); + line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height)); + margin-block-end: 0; } .step { - color: var( - --mod-coachmark-step-color, - var(--spectrum-coachmark-step-color) - ); - font-size: var( - --mod-coachmark-step-font-size, - var(--spectrum-coachmark-step-font-size) - ); - font-weight: var( - --mod-coachmark-step-text-font-weight, - var(--spectrum-coachmark-step-text-font-weight) - ); - font-style: var( - --mod-coachmark-step-font-style, - var(--spectrum-coachmark-step-font-style) - ); - line-height: var( - --mod-coachmark-step-text-line-height, - var(--spectrum-coachmark-step-text-line-height) - ); - white-space: nowrap; - justify-self: start; - margin-block-end: calc( - var( - --mod-coachmark-step-to-bottom, - var(--spectrum-coachmark-step-to-bottom) - ) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)) - ); + color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); + font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size)); + font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight)); + font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style)); + line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height)); + white-space: nowrap; + justify-self: start; + margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding))); } + diff --git a/packages/color-area/src/color-area-overrides.css b/packages/color-area/src/color-area-overrides.css index 2c294b19ff..70d8e8d460 100644 --- a/packages/color-area/src/color-area-overrides.css +++ b/packages/color-area/src/color-area-overrides.css @@ -1,31 +1,26 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); - --spectrum-colorarea-border-color-rgb: var( - --system-color-area-border-color-rgb - ); - --spectrum-colorarea-border-color-opacity: var( - --system-color-area-border-color-opacity - ); - --spectrum-colorarea-border-color: var(--system-color-area-border-color); - --spectrum-colorarea-disabled-background-color: var( - --system-color-area-disabled-background-color - ); - --spectrum-colorarea-border-width: var(--system-color-area-border-width); - --spectrum-colorarea-height: var(--system-color-area-height); - --spectrum-colorarea-width: var(--system-color-area-width); - --spectrum-colorarea-min-width: var(--system-color-area-min-width); - --spectrum-colorarea-min-height: var(--system-color-area-min-height); + --spectrum-colorarea-border-radius: var(--system-color-area-border-radius); + --spectrum-colorarea-border-color-rgb: var(--system-color-area-border-color-rgb); + --spectrum-colorarea-border-color-opacity: var(--system-color-area-border-color-opacity); + --spectrum-colorarea-border-color: var(--system-color-area-border-color); + --spectrum-colorarea-disabled-background-color: var(--system-color-area-disabled-background-color); + --spectrum-colorarea-border-width: var(--system-color-area-border-width); + --spectrum-colorarea-height: var(--system-color-area-height); + --spectrum-colorarea-width: var(--system-color-area-width); + --spectrum-colorarea-min-width: var(--system-color-area-min-width); + --spectrum-colorarea-min-height: var(--system-color-area-min-height); } + diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css index d176f5b7b6..8b8a786eee 100644 --- a/packages/color-area/src/spectrum-color-area.css +++ b/packages/color-area/src/spectrum-color-area.css @@ -1,120 +1,81 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - } + :host { + --highcontrast-colorarea-border-color-disabled: GrayText; + --highcontrast-colorarea-border-color: Canvas; + --highcontrast-colorarea-fill-color-disabled: Canvas; + } - .gradient, - :host([disabled]) { - forced-color-adjust: none; - } + .gradient, :host([disabled]) { + forced-color-adjust: none; + } } :host { - cursor: default; - -webkit-user-select: none; - user-select: none; - min-inline-size: var( - --mod-colorarea-min-width, - var(--spectrum-colorarea-min-width) - ); - min-block-size: var( - --mod-colorarea-min-height, - var(--spectrum-colorarea-min-height) - ); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); - box-sizing: border-box; - border-radius: var( - --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) - ); - border: var( - --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) - ) - solid - var( - --highcontrast-colorarea-border-color, - var( - --mod-colorarea-border-color, - var(--spectrum-colorarea-border-color) - ) - ); - display: inline-block; - position: relative; + cursor: default; + -webkit-user-select: none; + user-select: none; + min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); + min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); + inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + box-sizing: border-box; + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + display: inline-block; + position: relative; } :host([focused]) { - z-index: 1; + z-index: 1; } :host([disabled]) { - pointer-events: none; - background: var( - --highcontrast-colorarea-fill-color-disabled, - var( - --mod-colorarea-disabled-background-color, - var(--spectrum-colorarea-disabled-background-color) - ) - ); - border: var( - --mod-colorarea-border-width, - var(--spectrum-colorarea-border-width) - ) - solid var(--highcontrast-colorarea-border-color-disabled); + pointer-events: none; + background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); } :host([disabled]) .gradient { - display: none; + display: none; } .handle { - transform: translate( - calc( - var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - - var(--spectrum-colorarea-border-width) - ) - ); - inset-block-start: 0; + transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width))); + inset-block-start: 0; } -.handle:dir(rtl), -:host([dir='rtl']) .handle { - inset-inline-end: 0; +.handle:dir(rtl), :host([dir="rtl"]) .handle { + inset-inline-end: 0; } .gradient { - inline-size: 100%; - block-size: 100%; - border-radius: var( - --mod-colorarea-border-radius, - var(--spectrum-colorarea-border-radius) - ); + inline-size: 100%; + block-size: 100%; + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } + diff --git a/packages/color-handle/src/color-handle-overrides.css b/packages/color-handle/src/color-handle-overrides.css index de3013d195..ef42d95fac 100644 --- a/packages/color-handle/src/color-handle-overrides.css +++ b/packages/color-handle/src/color-handle-overrides.css @@ -1,52 +1,29 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorhandle-size: var(--system-color-handle-size); - --spectrum-colorhandle-focused-size: var( - --system-color-handle-focused-size - ); - --spectrum-colorhandle-hitarea-size: var( - --system-color-handle-hitarea-size - ); - --spectrum-colorhandle-animation-duration: var( - --system-color-handle-animation-duration - ); - --spectrum-colorhandle-animation-easing: var( - --system-color-handle-animation-easing - ); - --spectrum-colorhandle-outer-border-color: var( - --system-color-handle-outer-border-color - ); - --spectrum-colorhandle-outer-border-width: var( - --system-color-handle-outer-border-width - ); - --spectrum-colorhandle-inner-border-color: var( - --system-color-handle-inner-border-color - ); - --spectrum-colorhandle-inner-border-width: var( - --system-color-handle-inner-border-width - ); - --spectrum-colorhandle-border-width: var( - --system-color-handle-border-width - ); - --spectrum-colorhandle-border-color: var( - --system-color-handle-border-color - ); - --spectrum-colorhandle-border-color-disabled: var( - --system-color-handle-border-color-disabled - ); - --spectrum-colorhandle-fill-color-disabled: var( - --system-color-handle-fill-color-disabled - ); + --spectrum-colorhandle-size: var(--system-color-handle-size); + --spectrum-colorhandle-focused-size: var(--system-color-handle-focused-size); + --spectrum-colorhandle-hitarea-size: var(--system-color-handle-hitarea-size); + --spectrum-colorhandle-animation-duration: var(--system-color-handle-animation-duration); + --spectrum-colorhandle-animation-easing: var(--system-color-handle-animation-easing); + --spectrum-colorhandle-outer-border-color: var(--system-color-handle-outer-border-color); + --spectrum-colorhandle-outer-border-width: var(--system-color-handle-outer-border-width); + --spectrum-colorhandle-inner-border-color: var(--system-color-handle-inner-border-color); + --spectrum-colorhandle-inner-border-width: var(--system-color-handle-inner-border-width); + --spectrum-colorhandle-border-width: var(--system-color-handle-border-width); + --spectrum-colorhandle-border-color: var(--system-color-handle-border-color); + --spectrum-colorhandle-border-color-disabled: var(--system-color-handle-border-color-disabled); + --spectrum-colorhandle-fill-color-disabled: var(--system-color-handle-fill-color-disabled); } + diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css index 9ba6c9ad21..c1980bd1aa 100644 --- a/packages/color-handle/src/spectrum-color-handle.css +++ b/packages/color-handle/src/spectrum-color-handle.css @@ -1,159 +1,81 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-opacity-checkerboard-position: 50%; - z-index: 1; - box-sizing: border-box; - inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); - margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 - ); - margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1 - ); - border-width: var( - --mod-colorhandle-border-width, - var(--spectrum-colorhandle-border-width) - ); - border-color: var( - --highcontrast-colorhandle-border-color, - var( - --mod-colorhandle-border-color, - var(--spectrum-colorhandle-border-color) - ) - ); - box-shadow: 0 0 0 - var( - --mod-colorhandle-outer-border-width, - var(--spectrum-colorhandle-outer-border-width) - ) - var( - --mod-colorhandle-outer-border-color, - var(--spectrum-colorhandle-outer-border-color) - ); - transition: all - var( - --mod-colorhandle-animation-duration, - var(--spectrum-colorhandle-animation-duration) - ) - var( - --mod-colorhandle-animation-easing, - var(--spectrum-colorhandle-animation-easing) - ); - border-style: solid; + --mod-opacity-checkerboard-position: 50.0%; + z-index: 1; + box-sizing: border-box; + inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)); + margin-inline: calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1); + margin-block: calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2 * -1); + border-width: var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width)); + border-color: var(--highcontrast-colorhandle-border-color, var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color))); + box-shadow: 0 0 0 var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color)); + transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing)); + border-style: solid; } -:host, -:host:after { - border-radius: 100%; - display: block; - position: absolute; +:host, :host:after { + border-radius: 100%; + display: block; + position: absolute; } :host:after { - content: ''; - inset-inline: calc( - 50% - - var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ) / 2 - ); - inset-block: calc( - 50% - - var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ) / 2 - ); - inline-size: var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ); - block-size: var( - --mod-colorhandle-hitarea-size, - var(--spectrum-colorhandle-hitarea-size) - ); - border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%); + content: ""; + inset-inline: calc(50.0% - var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2); + inset-block: calc(50.0% - var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2); + inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); + block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)); + border-radius: var(--mod-colorhandle-hitarea-border-radius, 100.0%); } -:host([focused]), -:host(:focus-visible) { - inline-size: var( - --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) - ); - block-size: var( - --mod-colorhandle-focused-size, - var(--spectrum-colorhandle-focused-size) - ); - margin-inline: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 - ); - margin-block: calc( - var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 - ); - outline: none; +:host([focused]), :host(:focus-visible) { + inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); + block-size: var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size)); + margin-inline: calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1); + margin-block: calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1); + outline: none; } :host([disabled]) { - pointer-events: none; - border-color: var( - --highcontrast-colorhandle-border-color-disabled, - var( - --mod-colorhandle-border-color-disabled, - var(--spectrum-colorhandle-border-color-disabled) - ) - ); - background: var( - --highcontrast-colorhandle-fill-color-disabled, - var( - --mod-colorhandle-fill-color-disabled, - var(--spectrum-colorhandle-fill-color-disabled) - ) - ); - box-shadow: none; + pointer-events: none; + border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled))); + background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled))); + box-shadow: none; } :host([disabled]) .inner { - display: none; + display: none; } .inner { - inline-size: 100%; - block-size: 100%; - box-shadow: inset 0 0 0 - var( - --mod-colorhandle-inner-border-width, - var(--spectrum-colorhandle-inner-border-width) - ) - var( - --mod-colorhandle-inner-border-color, - var(--spectrum-colorhandle-inner-border-color) - ); - background-color: var(--spectrum-picked-color); - border-radius: 100%; + inline-size: 100%; + block-size: 100%; + box-shadow: inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color)); + background-color: var(--spectrum-picked-color); + border-radius: 100%; } @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } - :host([disabled]) { - --highcontrast-colorhandle-border-color-disabled: GrayText; - --highcontrast-colorhandle-fill-color-disabled: Canvas; - } + :host([disabled]) { + --highcontrast-colorhandle-border-color-disabled: GrayText; + --highcontrast-colorhandle-fill-color-disabled: Canvas; + } } + diff --git a/packages/color-loupe/src/color-loupe-overrides.css b/packages/color-loupe/src/color-loupe-overrides.css index 34d44a5a02..eb12dd10b1 100644 --- a/packages/color-loupe/src/color-loupe-overrides.css +++ b/packages/color-loupe/src/color-loupe-overrides.css @@ -1,51 +1,30 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorloupe-width: var(--system-color-loupe-width); - --spectrum-colorloupe-height: var(--system-color-loupe-height); - --spectrum-colorloupe-offset: var(--system-color-loupe-offset); - --spectrum-colorloupe-animation-distance: var( - --system-color-loupe-animation-distance - ); - --spectrum-colorloupe-drop-shadow-x: var( - --system-color-loupe-drop-shadow-x - ); - --spectrum-colorloupe-drop-shadow-y: var( - --system-color-loupe-drop-shadow-y - ); - --spectrum-colorloupe-drop-shadow-blur: var( - --system-color-loupe-drop-shadow-blur - ); - --spectrum-colorloupe-drop-shadow-color: var( - --system-color-loupe-drop-shadow-color - ); - --spectrum-colorloupe-outer-border-width: var( - --system-color-loupe-outer-border-width - ); - --spectrum-colorloupe-inner-border-width: var( - --system-color-loupe-inner-border-width - ); - --spectrum-colorloupe-outer-border-color: var( - --system-color-loupe-outer-border-color - ); - --spectrum-colorloupe-inner-border-color: var( - --system-color-loupe-inner-border-color - ); - --spectrum-colorloupe-checkerboard-dark-color: var( - --system-color-loupe-checkerboard-dark-color - ); - --spectrum-colorloupe-checkerboard-light-color: var( - --system-color-loupe-checkerboard-light-color - ); + --spectrum-colorloupe-width: var(--system-color-loupe-width); + --spectrum-colorloupe-height: var(--system-color-loupe-height); + --spectrum-colorloupe-offset: var(--system-color-loupe-offset); + --spectrum-colorloupe-animation-distance: var(--system-color-loupe-animation-distance); + --spectrum-colorloupe-drop-shadow-x: var(--system-color-loupe-drop-shadow-x); + --spectrum-colorloupe-drop-shadow-y: var(--system-color-loupe-drop-shadow-y); + --spectrum-colorloupe-drop-shadow-blur: var(--system-color-loupe-drop-shadow-blur); + --spectrum-colorloupe-drop-shadow-color: var(--system-color-loupe-drop-shadow-color); + --spectrum-colorloupe-outer-border-width: var(--system-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--system-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--system-color-loupe-outer-border-color); + --spectrum-colorloupe-inner-border-color: var(--system-color-loupe-inner-border-color); + --spectrum-colorloupe-checkerboard-dark-color: var(--system-color-loupe-checkerboard-dark-color); + --spectrum-colorloupe-checkerboard-light-color: var(--system-color-loupe-checkerboard-light-color); } + diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css index 2bac5afc52..57969c2e03 100644 --- a/packages/color-loupe/src/spectrum-color-loupe.css +++ b/packages/color-loupe/src/spectrum-color-loupe.css @@ -1,111 +1,66 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: var(--spectrum-colorloupe-width); - block-size: var(--spectrum-colorloupe-height); - transform: translateY( - var( - --mod-colorloupe-animation-distance, - var(--spectrum-colorloupe-animation-distance) - ) - ); - opacity: 0; - transform-origin: bottom; - pointer-events: none; - filter: drop-shadow( - var( - --mod-colorloupe-drop-shadow-x, - var(--spectrum-colorloupe-drop-shadow-x) - ) - var( - --mod-colorloupe-drop-shadow-y, - var(--spectrum-colorloupe-drop-shadow-y) - ) - var( - --mod-colorloupe-drop-shadow-blur, - var(--spectrum-colorloupe-drop-shadow-blur) - ) - var( - --mod-colorloupe-drop-shadow-color, - var(--spectrum-colorloupe-drop-shadow-color) - ) - ); - transition: - transform 0.1s ease-in-out, - opacity 0.125s ease-in-out; - position: absolute; - inset-block-end: calc( - var(--spectrum-color-handle-size) - - var(--spectrum-color-handle-outer-border-width) + - var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset)) - ); - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2); + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); + transform: translateY(var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); + opacity: 0; + transform-origin: bottom; + pointer-events: none; + filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); + transition: transform .1s ease-in-out, opacity .125s ease-in-out; + position: absolute; + inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); + inset-inline-end: calc(50.0% - var(--spectrum-colorloupe-width) / 2); } -:host:dir(rtl), -:host([dir='rtl']) { - inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 - 1px); +:host:dir(rtl), :host([dir="rtl"]) { + inset-inline-end: calc(50.0% - var(--spectrum-colorloupe-width) / 2 - 1px); } :host([open]) { - opacity: 1; - transform: translate(0); + opacity: 1; + transform: translate(0); } .spectrum-ColorLoupe-inner-border { - fill: var(--spectrum-picked-color); - stroke: var( - --mod-colorloupe-inner-border-color, - var(--spectrum-colorloupe-inner-border-color) - ); - stroke-width: var( - --mod-colorloupe-inner-border-width, - var(--spectrum-colorloupe-inner-border-width) - ); + fill: var(--spectrum-picked-color); + stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); + stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); } .spectrum-ColorLoupe-outer-border { - fill: none; - stroke: var( - --highcontrast-colorloupe-outer-border-color, - var( - --mod-colorloupe-outer-border-color, - var(--spectrum-colorloupe-outer-border-color) - ) - ); - stroke-width: calc( - var( - --mod-colorloupe-outer-border-width, - var(--spectrum-colorloupe-outer-border-width) - ) + 2px - ); + fill: none; + stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-colorloupe-checkerboard-dark-color); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-colorloupe-checkerboard-light-color); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { - fill: var(--spectrum-colorloupe-checkerboard-fill); + fill: var(--spectrum-colorloupe-checkerboard-fill); } @media (forced-colors: active) { - :host { - --highcontrast-colorloupe-outer-border-color: CanvasText; - } + :host { + --highcontrast-colorloupe-outer-border-color: CanvasText; + } } + diff --git a/packages/color-slider/src/color-slider-overrides.css b/packages/color-slider/src/color-slider-overrides.css index 69c1c5f4b7..36fe15484a 100644 --- a/packages/color-slider/src/color-slider-overrides.css +++ b/packages/color-slider/src/color-slider-overrides.css @@ -1,30 +1,21 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-color-slider-handle-margin-block: var( - --system-color-slider-handle-margin-block - ); - --spectrum-color-slider-border-color-rgba: var( - --system-color-slider-border-color-rgba - ); - --spectrum-color-slider-checkerboard-size: var( - --system-color-slider-checkerboard-size - ); - --spectrum-color-slider-checkerboard-dark-color: var( - --system-color-slider-checkerboard-dark-color - ); - --spectrum-color-slider-checkerboard-light-color: var( - --system-color-slider-checkerboard-light-color - ); + --spectrum-color-slider-handle-margin-block: var(--system-color-slider-handle-margin-block); + --spectrum-color-slider-border-color-rgba: var(--system-color-slider-border-color-rgba); + --spectrum-color-slider-checkerboard-size: var(--system-color-slider-checkerboard-size); + --spectrum-color-slider-checkerboard-dark-color: var(--system-color-slider-checkerboard-dark-color); + --spectrum-color-slider-checkerboard-light-color: var(--system-color-slider-checkerboard-light-color); } + diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css index ec2a9d54b1..1ec5c6ce50 100644 --- a/packages/color-slider/src/spectrum-color-slider.css +++ b/packages/color-slider/src/spectrum-color-slider.css @@ -1,161 +1,104 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } + :host { + --highcontrast-color-slider-border-color: CanvasText; + --highcontrast-color-slider-border-color-disabled: GrayText; + --highcontrast-color-slider-background-color-disabled: Canvas; + forced-color-adjust: none; + } } :host { - --mod-colorhandle-hitarea-border-radius: var( - --mod-color-slider-handle-hitarea-border-radius, - 0px - ); - min-inline-size: var( - --mod-color-slider-minimum-length, - var(--spectrum-color-slider-minimum-length) - ); - inline-size: var( - --mod-color-slider-length, - var(--spectrum-color-slider-length) - ); - block-size: var( - --mod-color-slider-control-track-width, - var(--spectrum-color-control-track-width) - ); - -webkit-user-select: none; - user-select: none; - cursor: default; - display: block; - position: relative; + --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); + min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)); + inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length)); + block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width)); + -webkit-user-select: none; + user-select: none; + cursor: default; + display: block; + position: relative; } :host([focused]) { - z-index: 2; + z-index: 2; } :host([disabled]) { - pointer-events: none; + pointer-events: none; } :host([disabled]) .gradient { - display: none; + display: none; } :host([vertical]) { - min-block-size: var( - --mod-color-slider-vertical-minimum-height, - var( - --mod-color-slider-minimum-length, - var(--spectrum-color-slider-minimum-length) - ) - ); - block-size: var( - --mod-color-slider-vertical-height, - var(--mod-color-slider-length, var(--spectrum-color-slider-length)) - ); - min-inline-size: 0; - inline-size: var( - --mod-color-slider-vertical-control-track-width, - var( - --mod-color-slider-control-track-height, - var(--spectrum-color-control-track-width) - ) - ); - display: inline-block; + min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))); + block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length))); + min-inline-size: 0; + inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))); + display: inline-block; } :host([vertical]) .handle { - inset-block-start: 0; - inset-inline-start: 50%; + inset-block-start: 0; + inset-inline-start: 50%; } .handle { - inset-block-start: 50%; - inset-inline-start: 0; + inset-block-start: 50%; + inset-inline-start: 0; } .checkerboard { - --spectrum-color-slider-border-color-local: var( - --highcontrast-color-slider-border-color, - var( - --mod-color-slider-border-color, - var(--spectrum-color-slider-border-color-rgba) - ) - ); + --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color, var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-rgba))); } .checkerboard:before { - content: ''; - z-index: 1; - box-shadow: inset 0 0 0 - var( - --mod-color-slider-border-width, - var(--spectrum-color-slider-border-width) - ) - var(--spectrum-color-slider-border-color-local); - border-radius: var( - --mod-color-slider-border-rounding, - var(--spectrum-color-slider-border-rounding) - ); - position: absolute; - inset: 0; + content: ""; + z-index: 1; + box-shadow: inset 0 0 0 var(--mod-color-slider-border-width, var(--spectrum-color-slider-border-width)) var(--spectrum-color-slider-border-color-local); + border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding)); + position: absolute; + inset: 0; } :host([disabled]) .checkerboard { - --spectrum-color-slider-border-color-local: var( - --highcontrast-color-slider-border-color-disabled, - var( - --mod-color-slider-border-color-disabled, - var(--spectrum-disabled-background-color) - ) - ); - background: var( - --highcontrast-color-slider-background-color-disabled, - var( - --mod-color-slider-background-color-disabled, - var(--spectrum-disabled-background-color) - ) - ); + --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))); + background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))); } -.checkerboard, -.gradient { - inline-size: 100%; - block-size: 100%; - border-radius: var( - --mod-color-slider-border-rounding, - var(--spectrum-color-slider-border-rounding) - ); +.checkerboard, .gradient { + inline-size: 100%; + block-size: 100%; + border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding)); } -.gradient:dir(rtl), -:host([dir='rtl']) .gradient { - transform: scaleX(-1); +.gradient:dir(rtl), :host([dir="rtl"]) .gradient { + transform: scaleX(-1); } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } + diff --git a/packages/color-wheel/src/color-wheel-overrides.css b/packages/color-wheel/src/color-wheel-overrides.css index cf779adff3..f96ee1d926 100644 --- a/packages/color-wheel/src/color-wheel-overrides.css +++ b/packages/color-wheel/src/color-wheel-overrides.css @@ -1,30 +1,25 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-colorwheel-width: var(--system-color-wheel-width); - --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); - --spectrum-colorwheel-height: var(--system-color-wheel-height); - --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); - --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); - --spectrum-colorwheel-fill-color-disabled: var( - --system-color-wheel-fill-color-disabled - ); - --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); - --spectrum-colorwheel-colorarea-margin: var( - --system-color-wheel-colorarea-margin - ); - --spectrum-colorwheel-colorhandle-position: var( - --system-color-wheel-colorhandle-position - ); + --spectrum-colorwheel-width: var(--system-color-wheel-width); + --spectrum-colorwheel-min-width: var(--system-color-wheel-min-width); + --spectrum-colorwheel-height: var(--system-color-wheel-height); + --spectrum-colorwheel-border-color: var(--system-color-wheel-border-color); + --spectrum-colorwheel-border-width: var(--system-color-wheel-border-width); + --spectrum-colorwheel-fill-color-disabled: var(--system-color-wheel-fill-color-disabled); + --spectrum-colorwheel-track-width: var(--system-color-wheel-track-width); + --spectrum-colorwheel-colorarea-margin: var(--system-color-wheel-colorarea-margin); + --spectrum-colorwheel-colorhandle-position: var(--system-color-wheel-colorhandle-position); } + diff --git a/packages/color-wheel/src/spectrum-color-wheel.css b/packages/color-wheel/src/spectrum-color-wheel.css index 3a3d9ffb04..e589c0e999 100644 --- a/packages/color-wheel/src/spectrum-color-wheel.css +++ b/packages/color-wheel/src/spectrum-color-wheel.css @@ -1,164 +1,108 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; - forced-color-adjust: none; - } + :host { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + forced-color-adjust: none; + } } :host { - --_track-width: var( - --mod-colorwheel-track-width, - var(--spectrum-colorwheel-track-width) - ); - --_border-width: var( - --mod-colorwheel-border-width, - var(--spectrum-colorwheel-border-width) - ); - min-inline-size: var( - --mod-colorwheel-min-width, - var(--spectrum-colorwheel-min-width) - ); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - -webkit-user-select: none; - user-select: none; - cursor: default; - display: block; - position: relative; + --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); + --_border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); + min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + -webkit-user-select: none; + user-select: none; + cursor: default; + display: block; + position: relative; } :host([focused]) { - z-index: 1; + z-index: 1; } :host([disabled]) { - pointer-events: none; + pointer-events: none; } :host([dragged]) { - z-index: 1; + z-index: 1; } .inner { - inline-size: var( - --mod-colorwheel-colorarea-container-size, - var(--spectrum-colorwheel-colorarea-container-size) - ); - block-size: var( - --mod-colorwheel-colorarea-container-size, - var(--spectrum-colorwheel-colorarea-container-size) - ); - margin: auto; - display: flex; - position: absolute; - inset-block: 0; - inset-inline: 0; + inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + margin: auto; + display: flex; + position: absolute; + inset-block: 0; + inset-inline: 0; } .colorarea-container { - block-size: auto; - inline-size: 100%; - margin: var( - --mod-colorwheel-colorarea-margin, - var(--spectrum-colorwheel-colorarea-margin) - ); - justify-content: center; - align-items: center; - display: flex; + block-size: auto; + inline-size: 100%; + margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); + justify-content: center; + align-items: center; + display: flex; } .slider { - opacity: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - pointer-events: none; - margin: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + opacity: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + pointer-events: none; + margin: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } .handle { - transform: translate(var(--spectrum-colorwheel-colorhandle-position)); - inset-block-start: 50%; - inset-inline: 50%; + transform: translate(var(--spectrum-colorwheel-colorhandle-position)); + inset-block-start: 50%; + inset-inline: 50%; } .border { - background-color: var( - --mod-colorwheel-border-color, - var(--spectrum-colorwheel-border-color) - ); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - clip-path: path( - evenodd, - var( - --mod-colorwheel-path-borders, - var(--spectrum-colorwheel-path-borders) - ) - ); - position: relative; + background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); + position: relative; } :host([disabled]) .border { - background-color: var( - --highcontrast-colorwheel-border-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) - ); + background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); } .wheel { - inset-block: var(--spectrum-colorwheel-border-width); - inset-inline: var(--spectrum-colorwheel-border-width); - clip-path: path( - evenodd, - var(--mod-colorwheel-path, var(--spectrum-colorwheel-path)) - ); - background: conic-gradient( - from 90deg, - red, - #ff8000, - #ff0, - #80ff00, - #0f0, - #00ff80, - #0ff, - #0080ff, - #00f, - #8000ff, - #f0f, - #ff0080, - red - ); - position: absolute; + inset-block: var(--spectrum-colorwheel-border-width); + inset-inline: var(--spectrum-colorwheel-border-width); + clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); + background: conic-gradient(from 90deg, red, #ff8000, #ff0, #80ff00, #0f0, #00ff80, #0ff, #0080ff, #00f, #8000ff, #f0f, #ff0080, red); + position: absolute; } :host([disabled]) .wheel { - pointer-events: none; - background: var( - --highcontrast-colorwheel-fill-color-disabled, - var( - --mod-colorwheel-fill-color-disabled, - var(--spectrum-colorwheel-fill-color-disabled) - ) - ); + pointer-events: none; + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); } + diff --git a/packages/combobox/src/combobox-overrides.css b/packages/combobox/src/combobox-overrides.css index d89e93ae3d..9b8ab5715d 100644 --- a/packages/combobox/src/combobox-overrides.css +++ b/packages/combobox/src/combobox-overrides.css @@ -1,251 +1,126 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-combobox-border-color-default: var( - --system-combobox-border-color-default - ); - --spectrum-combobox-border-color-hover: var( - --system-combobox-border-color-hover - ); - --spectrum-combobox-border-color-focus: var( - --system-combobox-border-color-focus - ); - --spectrum-combobox-border-color-focus-hover: var( - --system-combobox-border-color-focus-hover - ); - --spectrum-combobox-border-color-key-focus: var( - --system-combobox-border-color-key-focus - ); - --spectrum-combobox-inline-size: var(--system-combobox-inline-size); - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-minimum-width-multiplier - ); - --spectrum-combobox-focus-indicator-thickness: var( - --system-combobox-focus-indicator-thickness - ); - --spectrum-combobox-focus-indicator-gap: var( - --system-combobox-focus-indicator-gap - ); - --spectrum-combobox-focus-indicator-color: var( - --system-combobox-focus-indicator-color - ); - --spectrum-combobox-border-radius: var(--system-combobox-border-radius); - --spectrum-combobox-border-width: var(--system-combobox-border-width); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-spacing-label-to - ); - --spectrum-combobox-font-style: var(--system-combobox-font-style); - --spectrum-combobox-line-height: var(--system-combobox-line-height); - --spectrum-combobox-border-color-invalid-default: var( - --system-combobox-border-color-invalid-default - ); - --spectrum-combobox-border-color-invalid-hover: var( - --system-combobox-border-color-invalid-hover - ); - --spectrum-combobox-border-color-invalid-focus: var( - --system-combobox-border-color-invalid-focus - ); - --spectrum-combobox-border-color-invalid-focus-hover: var( - --system-combobox-border-color-invalid-focus-hover - ); - --spectrum-combobox-border-color-invalid-key-focus: var( - --system-combobox-border-color-invalid-key-focus - ); - --spectrum-combobox-block-size: var(--system-combobox-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-spacing-inline-end-edge-to-text - ); + --spectrum-combobox-border-color-default: var(--system-combobox-border-color-default); + --spectrum-combobox-border-color-hover: var(--system-combobox-border-color-hover); + --spectrum-combobox-border-color-focus: var(--system-combobox-border-color-focus); + --spectrum-combobox-border-color-focus-hover: var(--system-combobox-border-color-focus-hover); + --spectrum-combobox-border-color-key-focus: var(--system-combobox-border-color-key-focus); + --spectrum-combobox-inline-size: var(--system-combobox-inline-size); + --spectrum-combobox-minimum-width-multiplier: var(--system-combobox-minimum-width-multiplier); + --spectrum-combobox-focus-indicator-thickness: var(--system-combobox-focus-indicator-thickness); + --spectrum-combobox-focus-indicator-gap: var(--system-combobox-focus-indicator-gap); + --spectrum-combobox-focus-indicator-color: var(--system-combobox-focus-indicator-color); + --spectrum-combobox-border-radius: var(--system-combobox-border-radius); + --spectrum-combobox-border-width: var(--system-combobox-border-width); + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-spacing-label-to); + --spectrum-combobox-font-style: var(--system-combobox-font-style); + --spectrum-combobox-line-height: var(--system-combobox-line-height); + --spectrum-combobox-border-color-invalid-default: var(--system-combobox-border-color-invalid-default); + --spectrum-combobox-border-color-invalid-hover: var(--system-combobox-border-color-invalid-hover); + --spectrum-combobox-border-color-invalid-focus: var(--system-combobox-border-color-invalid-focus); + --spectrum-combobox-border-color-invalid-focus-hover: var(--system-combobox-border-color-invalid-focus-hover); + --spectrum-combobox-border-color-invalid-key-focus: var(--system-combobox-border-color-invalid-key-focus); + --spectrum-combobox-block-size: var(--system-combobox-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-spacing-inline-end-edge-to-text); } -:host([size='s']) { - --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-s-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-s-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-s-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-s-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-s-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-s-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-s-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-s-spacing-inline-end-edge-to-text - ); +:host([size="s"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-s-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-s-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-s-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-s-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-s-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-s-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-s-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-s-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-s-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-s-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-s-spacing-inline-end-edge-to-text); } :host { - --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-m-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-m-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-m-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-m-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-m-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-m-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-m-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-m-spacing-inline-end-edge-to-text - ); + --spectrum-combobox-block-size: var(--system-combobox-size-m-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-m-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-m-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-m-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-m-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-m-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-m-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-m-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-m-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-m-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-m-spacing-inline-end-edge-to-text); } -:host([size='l']) { - --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-l-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-l-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-l-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-l-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-l-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-l-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-l-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-l-spacing-inline-end-edge-to-text - ); +:host([size="l"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-l-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-l-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-l-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-l-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-l-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-l-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-l-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-l-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-l-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-l-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-l-spacing-inline-end-edge-to-text); } -:host([size='xl']) { - --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); - --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); - --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-size-xl-spacing-inline-icon-to-button - ); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var( - --system-combobox-size-xl-block-spacing-edge-to-progress-circle - ); - --spectrum-combobox-block-spacing-edge-to-alert: var( - --system-combobox-size-xl-block-spacing-edge-to-alert - ); - --spectrum-combobox-spacing-edge-to-menu: var( - --system-combobox-size-xl-spacing-edge-to-menu - ); - --spectrum-combobox-spacing-block-start-edge-to-text: var( - --system-combobox-size-xl-spacing-block-start-edge-to-text - ); - --spectrum-combobox-spacing-block-end-edge-to-text: var( - --system-combobox-size-xl-spacing-block-end-edge-to-text - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-inline-end-edge-to-text: var( - --system-combobox-size-xl-spacing-inline-end-edge-to-text - ); +:host([size="xl"]) { + --spectrum-combobox-block-size: var(--system-combobox-size-xl-block-size); + --spectrum-combobox-icon-size: var(--system-combobox-size-xl-icon-size); + --spectrum-combobox-font-size: var(--system-combobox-size-xl-font-size); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-size-xl-spacing-inline-icon-to-button); + --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--system-combobox-size-xl-block-spacing-edge-to-progress-circle); + --spectrum-combobox-block-spacing-edge-to-alert: var(--system-combobox-size-xl-block-spacing-edge-to-alert); + --spectrum-combobox-spacing-edge-to-menu: var(--system-combobox-size-xl-spacing-edge-to-menu); + --spectrum-combobox-spacing-block-start-edge-to-text: var(--system-combobox-size-xl-spacing-block-start-edge-to-text); + --spectrum-combobox-spacing-block-end-edge-to-text: var(--system-combobox-size-xl-spacing-block-end-edge-to-text); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-size-xl-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-xl-spacing-inline-end-edge-to-text); } :host([quiet]) { - --spectrum-combobox-minimum-width-multiplier: var( - --system-combobox-quiet-minimum-width-multiplier - ); - --spectrum-combobox-spacing-inline-icon-to-button: var( - --system-combobox-quiet-spacing-inline-icon-to-button - ); - --spectrum-combobox-spacing-inline-start-edge-to-text: var( - --system-combobox-quiet-spacing-inline-start-edge-to-text - ); - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-spacing-label-to - ); + --spectrum-combobox-minimum-width-multiplier: var(--system-combobox-quiet-minimum-width-multiplier); + --spectrum-combobox-spacing-inline-icon-to-button: var(--system-combobox-quiet-spacing-inline-icon-to-button); + --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-quiet-spacing-inline-start-edge-to-text); + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-spacing-label-to); } -:host([quiet][size='s']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-s-spacing-label-to - ); +:host([quiet][size="s"]) { + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-s-spacing-label-to); } :host([quiet]) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-m-spacing-label-to - ); + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-m-spacing-label-to); } -:host([quiet][size='l']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-l-spacing-label-to - ); +:host([quiet][size="l"]) { + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-l-spacing-label-to); } -:host([quiet][size='xl']) { - --spectrum-combobox-spacing-label-to-combobox: var( - --system-combobox-quiet-size-xl-spacing-label-to - ); +:host([quiet][size="xl"]) { + --spectrum-combobox-spacing-label-to-combobox: var(--system-combobox-quiet-size-xl-spacing-label-to); } + diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css index 7c2285c886..6159c91ebc 100644 --- a/packages/combobox/src/spectrum-combobox.css +++ b/packages/combobox/src/spectrum-combobox.css @@ -1,606 +1,224 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { - color: initial; - } + :host { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill { + forced-color-adjust: none; + } + + .button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon { + color: initial; + } } :host { - --spectrum-combobox-button-inline-offset: 0px; - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * - var(--spectrum-combobox-block-size) - ); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); - --mod-textfield-focus-indicator-gap: var( - --mod-combobox-focus-indicator-gap, - var(--spectrum-combobox-focus-indicator-gap) - ); - --mod-textfield-focus-indicator-width: var( - --mod-combobox-focus-indicator-thickness, - var(--spectrum-combobox-focus-indicator-thickness) - ); - --mod-textfield-focus-indicator-color: var( - --mod-combobox-focus-indicator-color, - var(--spectrum-combobox-focus-indicator-color) - ); - --mod-textfield-background-color: var( - --mod-combobox-background-color-default - ); - --mod-textfield-background-color-disabled: var( - --mod-combobox-background-color-disabled - ); - --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); - --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); - --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); - --mod-textfield-text-color-focus-hover: var( - --mod-combobox-font-color-focus-hover - ); - --mod-textfield-text-color-keyboard-focus: var( - --mod-combobox-font-color-key-focus - ); - --mod-textfield-text-color-disabled: var( - --mod-combobox-font-color-disabled - ); - --mod-textfield-border-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - --mod-textfield-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); - --mod-textfield-border-color-disabled: var( - --mod-combobox-border-color-disabled - ); - --mod-textfield-border-color-focus: var( - --mod-combobox-border-color-focus, - var(--spectrum-combobox-border-color-focus) - ); - --mod-textfield-border-color-focus-hover: var( - --mod-combobox-border-color-focus-hover, - var(--spectrum-combobox-border-color-focus-hover) - ); - --mod-textfield-border-color-hover: var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ); - --mod-textfield-border-color-keyboard-focus: var( - --mod-combobox-border-color-key-focus, - var(--spectrum-combobox-border-color-key-focus) - ); - --mod-textfield-border-color-invalid-default: var( - --mod-combobox-border-color-invalid-default, - var(--spectrum-combobox-border-color-invalid-default) - ); - --mod-textfield-border-color-invalid-hover: var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ); - --mod-textfield-border-color-invalid-focus: var( - --mod-combobox-border-color-invalid-focus, - var(--spectrum-combobox-border-color-invalid-focus) - ); - --mod-textfield-border-color-invalid-focus-hover: var( - --mod-combobox-border-color-invalid-focus-hover, - var(--spectrum-combobox-border-color-invalid-focus-hover) - ); - --mod-textfield-border-color-invalid-keyboard-focus: var( - --mod-combobox-border-color-invalid-key-focus, - var(--spectrum-combobox-border-color-invalid-key-focus) - ); - --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); - --mod-picker-button-border-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - --mod-picker-button-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); - --mod-picker-button-background-color: var( - --mod-combobox-background-color-default - ); - --mod-picker-button-background-color-disabled: var( - --mod-combobox-background-color-disabled - ); - --mod-picker-button-font-color-disabled: var( - --mod-combobox-font-color-disabled - ); - inline-size: var( - --mod-combobox-inline-size, - var(--spectrum-combobox-inline-size) - ); - min-inline-size: var( - --mod-combobox-min-inline-size, - var(--spectrum-combobox-min-inline-size) - ); - block-size: var( - --mod-combobox-block-size, - var(--spectrum-combobox-block-size) - ); - border-radius: var( - --mod-combobox-border-radius, - var(--spectrum-combobox-border-radius) - ); - flex-flow: row; - margin-block-start: var( - --mod-combobox-spacing-label-to-combobox, - var(--spectrum-combobox-spacing-label-to-combobox) - ); - display: inline-flex; - position: relative; + --spectrum-combobox-button-inline-offset: 0px; + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); + --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); + --mod-textfield-focus-indicator-color: var(--mod-combobox-focus-indicator-color, var(--spectrum-combobox-focus-indicator-color)); + --mod-textfield-background-color: var(--mod-combobox-background-color-default); + --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled); + --mod-textfield-font-family: var(--mod-combobox-font-family); + --mod-textfield-font-weight: var(--mod-combobox-font-weight); + --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); + --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); + --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); + --mod-textfield-text-color-focus-hover: var(--mod-combobox-font-color-focus-hover); + --mod-textfield-text-color-keyboard-focus: var(--mod-combobox-font-color-key-focus); + --mod-textfield-text-color-disabled: var(--mod-combobox-font-color-disabled); + --mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + --mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); + --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled); + --mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); + --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); + --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); + --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); + --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); + --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); + --mod-textfield-border-color-invalid-focus: var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus)); + --mod-textfield-border-color-invalid-focus-hover: var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover)); + --mod-textfield-border-color-invalid-keyboard-focus: var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus)); + --mod-textfield-icon-color-invalid: var(--mod-combobox-alert-icon-color); + --mod-picker-button-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); + --mod-picker-button-background-color: var(--mod-combobox-background-color-default); + --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); + --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); + inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); + min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); + block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); + border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); + flex-flow: row; + margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); + display: inline-flex; + position: relative; } .spectrum-Popover.is-open { - transform: translateY( - var( - --mod-combobox-spacing-edge-to-menu, - var(--spectrum-combobox-spacing-edge-to-menu) - ) - ); + transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu))); } .progress-circle { - position: absolute; - inset-block-start: var( - --mod-combobox-block-spacing-edge-to-progress-circle, - var(--spectrum-combobox-block-spacing-edge-to-progress-circle) - ); - inset-block-end: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-inline-end: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); + position: absolute; + inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); } -.progress-circle:dir(rtl), -:host([dir='rtl']) .progress-circle { - inset-inline-start: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); - inset-inline-end: inherit; +.progress-circle:dir(rtl), :host([dir="rtl"]) .progress-circle { + inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + inset-inline-end: inherit; } .button { - position: absolute; - inset-inline-end: calc( - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) * -1 - ); + position: absolute; + inset-inline-end: calc(var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)) * -1); } .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --mod-combobox-border-color-default, - var(--spectrum-combobox-border-color-default) - ); + --mod-picker-button-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); } -:host([focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), -.button:not(:disabled, .is-invalid, [quiet]):focus, -:host([focused]) .button:not(:disabled, .is-invalid, [quiet]), -:host:has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-focus, - var(--spectrum-combobox-border-color-focus) - ) - ); +:host([focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), .button:not(:disabled, .is-invalid, [quiet]):focus, :host([focused]) .button:not(:disabled, .is-invalid, [quiet]), :host:has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus))); } -:host([keyboard-focused]) - .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), -.button:not(:disabled, .is-invalid, [quiet]):focus-visible, -:host([keyboard-focused]) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --mod-combobox-border-color-key-focus, - var(--spectrum-combobox-border-color-key-focus) - ); +:host([keyboard-focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet), .button:not(:disabled, .is-invalid, [quiet]):focus-visible, :host([keyboard-focused]) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); } -.button:not(:disabled, .is-invalid, [quiet]):active, -:host:has(:active) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ) - ); +.button:not(:disabled, .is-invalid, [quiet]):active, :host:has(:active) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); } :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-default, - var(--spectrum-combobox-border-color-invalid-default) - ) - ); + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default))); } -:host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet), -:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus, -:host([focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet), -:host([invalid]):has(:focus) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-focus, - var(--spectrum-combobox-border-color-invalid-focus) - ) - ); +:host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus, :host([focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]):has(:focus) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus, var(--spectrum-combobox-border-color-invalid-focus))); } -:host([invalid][keyboard-focused]) - .button:not(:disabled, .spectrum-PickerButton--quiet), -:host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):focus-visible, -:host([keyboard-focused][invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-key-focus, - var(--spectrum-combobox-border-color-invalid-key-focus) - ) - ); +:host([invalid][keyboard-focused]) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus-visible, :host([keyboard-focused][invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-key-focus, var(--spectrum-combobox-border-color-invalid-key-focus))); } -:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):active, -:host([invalid]):has(:active) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ) - ); +:host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):active, :host([invalid]):has(:active) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover))); } #textfield { - inline-size: 100%; + inline-size: 100%; } #input { - backface-visibility: hidden; - line-height: var( - --mod-combobox-line-height, - var(--spectrum-combobox-line-height) - ); - font-size: var( - --mod-combobox-font-size, - var(--spectrum-combobox-font-size) - ); - font-style: var( - --mod-combobox-font-style, - var(--spectrum-combobox-font-style) - ); - padding-block-start: calc( - var( - --mod-combobox-spacing-block-start-edge-to-text, - var(--spectrum-combobox-spacing-block-start-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-combobox-spacing-block-end-edge-to-text, - var(--spectrum-combobox-spacing-block-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-start: calc( - var( - --mod-combobox-spacing-inline-start-edge-to-text, - var(--spectrum-combobox-spacing-inline-start-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) * 2 - ); + backface-visibility: hidden; + line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); + font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); + font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); + padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2); } #input::placeholder { - --mod-textfield-text-color-default: var( - --mod-combobox-font-color-placeholder - ); + --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); } #input:active { - --mod-textfield-background-color: var( - --mod-combobox-background-color-hover - ); + --mod-textfield-background-color: var(--mod-combobox-background-color-hover); } -#input:focus, -:host([focused]) #textfield #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-focus - ); +#input:focus, :host([focused]) #textfield #input { + --mod-textfield-background-color: var(--mod-combobox-background-color-focus); } @media (hover: hover) { - .button:not(:disabled, .is-invalid, [quiet]):hover, - :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-hover, - var(--spectrum-combobox-border-color-hover) - ) - ); - } - - :host([focused]) - .button:not( - :disabled, - .is-invalid, - .spectrum-PickerButton--quiet - ):hover, - .button:not(:disabled, .is-invalid, [quiet]):focus:hover, - :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]), - :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-highlight, - var( - --mod-combobox-border-color-focus-hover, - var(--spectrum-combobox-border-color-focus-hover) - ) - ); - } - - :host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):hover, - :host([invalid]:hover) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-hover, - var(--spectrum-combobox-border-color-invalid-hover) - ) - ); - } - - :host([invalid][focused]) - .button:not(:disabled, .spectrum-PickerButton--quiet):hover, - :host([invalid]) - .button:not(:disabled, .spectrum-PickerButton--quiet):focus:hover, - :host([focused][invalid]:hover) - .button:not(:disabled, .spectrum-PickerButton--quiet), - :host([invalid]:hover):has(:focus) - .button:not(:disabled, .spectrum-PickerButton--quiet) { - --mod-picker-button-border-color: var( - --highcontrast-combobox-border-color-invalid, - var( - --mod-combobox-border-color-invalid-focus-hover, - var(--spectrum-combobox-border-color-invalid-focus-hover) - ) - ); - } - - #input:hover, - #textfield:hover #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-hover - ); - } - - #input:focus:hover, - :host([focused]) #textfield #input:hover { - --mod-textfield-background-color: var( - --mod-combobox-background-color-focus-hover - ); - } + .button:not(:disabled, .is-invalid, [quiet]):hover, :host(:hover) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover))); + } + + :host([focused]) .button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover, .button:not(:disabled, .is-invalid, [quiet]):focus:hover, :host([focused]:hover) .button:not(:disabled, .is-invalid, [quiet]), :host(:hover):has(:focus) .button:not(:disabled, .is-invalid, [quiet]) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-highlight, var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))); + } + + :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):hover, :host([invalid]:hover) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover))); + } + + :host([invalid][focused]) .button:not(:disabled, .spectrum-PickerButton--quiet):hover, :host([invalid]) .button:not(:disabled, .spectrum-PickerButton--quiet):focus:hover, :host([focused][invalid]:hover) .button:not(:disabled, .spectrum-PickerButton--quiet), :host([invalid]:hover):has(:focus) .button:not(:disabled, .spectrum-PickerButton--quiet) { + --mod-picker-button-border-color: var(--highcontrast-combobox-border-color-invalid, var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))); + } + + #input:hover, #textfield:hover #input { + --mod-textfield-background-color: var(--mod-combobox-background-color-hover); + } + + #input:focus:hover, :host([focused]) #textfield #input:hover { + --mod-textfield-background-color: var(--mod-combobox-background-color-focus-hover); + } } :host([keyboard-focused]) #textfield #input { - --mod-textfield-background-color: var( - --mod-combobox-background-color-key-focus - ); + --mod-textfield-background-color: var(--mod-combobox-background-color-key-focus); } -:host([invalid]) #textfield #input, -:host([pending]) #textfield #input { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) * 2 - ); +:host([invalid]) #textfield #input, :host([pending]) #textfield #input { + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2); } :host([invalid]) #textfield .icon { - inline-size: var( - --mod-combobox-icon-size, - var(--spectrum-combobox-icon-size) - ); - block-size: var( - --mod-combobox-icon-size, - var(--spectrum-combobox-icon-size) - ); - inset-block-start: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-block-end: var( - --mod-combobox-block-spacing-edge-to-alert, - var(--spectrum-combobox-block-spacing-edge-to-alert) - ); - inset-inline-end: calc( - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ) - ); + inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); + block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); + inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); } -:host([disabled]) #textfield .icon, -:host([pending]) #textfield .icon, -#textfield.is-readOnly .icon { - display: none; +:host([disabled]) #textfield .icon, :host([pending]) #textfield .icon, #textfield.is-readOnly .icon { + display: none; } :host([quiet]) { - --spectrum-combobox-min-inline-size: calc( - var(--spectrum-combobox-minimum-width-multiplier) * - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) - ); - --spectrum-combobox-button-inline-offset: calc( - var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / - 2 - ); - --spectrum-combobox-border-radius: 0; - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet - ); + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combobox-minimum-width-multiplier) * var(--mod-combobox-block-size, var(--spectrum-combobox-block-size))); + --spectrum-combobox-button-inline-offset: calc(var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2 - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2); + --spectrum-combobox-border-radius: 0; + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; + --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet); } :host([quiet][invalid]) #textfield .icon { - inset-inline-end: var( - --mod-combobox-button-width, - var(--spectrum-combobox-button-width) - ); + inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); } :host([quiet]) #input { - border-block-end-width: var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ); - padding-block-start: var( - --mod-combobox-spacing-block-start-edge-to-text, - var(--spectrum-combobox-spacing-block-start-edge-to-text) - ); - padding-block-end: calc( - var( - --mod-combobox-spacing-block-end-edge-to-text, - var(--spectrum-combobox-spacing-block-end-edge-to-text) - ) - - var( - --mod-combobox-border-width, - var(--spectrum-combobox-border-width) - ) - ); - padding-inline-start: var( - --mod-combobox-spacing-inline-start-edge-to-text, - var(--spectrum-combobox-spacing-inline-start-edge-to-text) - ); - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - ); + border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); + padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); + padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset))); } -:host([quiet][invalid]) #textfield #input, -:host([quiet][pending]) #textfield #input { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + - var( - --mod-combobox-spacing-inline-icon-to-button, - var(--spectrum-combobox-spacing-inline-icon-to-button) - ) + - var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + - var( - --mod-combobox-spacing-inline-end-edge-to-text, - var(--spectrum-combobox-spacing-inline-end-edge-to-text) - ) - - var( - --mod-combobox-button-inline-offset, - var(--spectrum-combobox-button-inline-offset) - ) - ); +:host([quiet][invalid]) #textfield #input, :host([quiet][pending]) #textfield #input { + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset))); } + diff --git a/packages/contextual-help/src/contextual-help-overrides.css b/packages/contextual-help/src/contextual-help-overrides.css index e5643f439c..fe34eeef85 100644 --- a/packages/contextual-help/src/contextual-help-overrides.css +++ b/packages/contextual-help/src/contextual-help-overrides.css @@ -1,31 +1,22 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-contextual-help-padding: var(--system-contextual-help-padding); - --spectrum-contextual-help-content-spacing: var( - --system-contextual-help-content-spacing - ); - --spectrum-contextual-help-link-spacing: var( - --system-contextual-help-link-spacing - ); - --spectrum-contextual-help-heading-size: var( - --system-contextual-help-heading-size - ); - --spectrum-contextual-help-heading-color: var( - --system-contextual-help-heading-color - ); - --spectrum-contextual-help-body-color: var( - --system-contextual-help-body-color - ); + --spectrum-contextual-help-padding: var(--system-contextual-help-padding); + --spectrum-contextual-help-content-spacing: var(--system-contextual-help-content-spacing); + --spectrum-contextual-help-link-spacing: var(--system-contextual-help-link-spacing); + --spectrum-contextual-help-heading-size: var(--system-contextual-help-heading-size); + --spectrum-contextual-help-heading-color: var(--system-contextual-help-heading-color); + --spectrum-contextual-help-body-color: var(--system-contextual-help-body-color); } + diff --git a/packages/contextual-help/src/spectrum-contextual-help.css b/packages/contextual-help/src/spectrum-contextual-help.css index 76b2ff53b2..00d8e88467 100644 --- a/packages/contextual-help/src/spectrum-contextual-help.css +++ b/packages/contextual-help/src/spectrum-contextual-help.css @@ -1,76 +1,43 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .popover { - min-inline-size: var( - --mod-spectrum-contextual-help-minimum-width, - var(--spectrum-contextual-help-minimum-width) - ); - padding-block: var( - --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) - ); - padding-inline: var( - --mod-spectrum-contextual-help-padding, - var(--spectrum-contextual-help-padding) - ); - font-size: var( - --mod-spectrum-contextual-help-body-size, - var(--spectrum-contextual-help-body-size) - ); - color: var( - --highcontrast-contextual-help-body-color, - var( - --mod-contextual-help-body-color, - var(--spectrum-contextual-help-body-color) - ) - ); - position: relative; + min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); + padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); + padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-contextual-help-padding)); + font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); + color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color))); + position: relative; } -.popover .body, -.popover ::slotted([slot='heading']) { - margin: 0; +.popover .body, .popover ::slotted([slot="heading"]) { + margin: 0; } -.popover ::slotted([slot='heading']) { - font-size: var( - --mod-spectrum-contextual-help-heading-size, - var(--spectrum-contextual-help-heading-size) - ); - color: var( - --highcontrast-contextual-help-heading-color, - var( - --mod-contextual-help-heading-color, - var(--spectrum-contextual-help-heading-color) - ) - ); - margin-block-end: var( - --mod-spectrum-contextual-help-content-spacing, - var(--spectrum-contextual-help-content-spacing) - ); +.popover ::slotted([slot="heading"]) { + font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size)); + color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color))); + margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); } -::slotted([slot='link']) { - margin-block-start: var( - --mod-spectrum-contextual-help-link-spacing, - var(--spectrum-contextual-help-link-spacing) - ); +::slotted([slot="link"]) { + margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing)); } @media (forced-colors: active) { - :host { - --highcontrast-contextual-help-heading-color: CanvasText; - --highcontrast-contextual-help-body-color: CanvasText; - } + :host { + --highcontrast-contextual-help-heading-color: CanvasText; + --highcontrast-contextual-help-body-color: CanvasText; + } } + diff --git a/packages/dialog/src/dialog-overrides.css b/packages/dialog/src/dialog-overrides.css index b0f7137637..755146eb7a 100644 --- a/packages/dialog/src/dialog-overrides.css +++ b/packages/dialog/src/dialog-overrides.css @@ -1,71 +1,36 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-dialog-fullscreen-header-text-size: var( - --system-dialog-fullscreen-header-text-size - ); - --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); - --spectrum-dialog-confirm-small-width: var( - --system-dialog-confirm-small-width - ); - --spectrum-dialog-confirm-medium-width: var( - --system-dialog-confirm-medium-width - ); - --spectrum-dialog-confirm-large-width: var( - --system-dialog-confirm-large-width - ); - --spectrum-dialog-confirm-divider-block-spacing-start: var( - --system-dialog-confirm-divider-block-spacing-start - ); - --spectrum-dialog-confirm-divider-block-spacing-end: var( - --system-dialog-confirm-divider-block-spacing-end - ); - --spectrum-dialog-confirm-description-text-color: var( - --system-dialog-confirm-description-text-color - ); - --spectrum-dialog-confirm-title-text-color: var( - --system-dialog-confirm-title-text-color - ); - --spectrum-dialog-confirm-description-text-line-height: var( - --system-dialog-confirm-description-text-line-height - ); - --spectrum-dialog-confirm-title-text-line-height: var( - --system-dialog-confirm-title-text-line-height - ); - --spectrum-dialog-heading-font-weight: var( - --system-dialog-heading-font-weight - ); - --spectrum-dialog-confirm-description-padding: var( - --system-dialog-confirm-description-padding - ); - --spectrum-dialog-confirm-description-margin: var( - --system-dialog-confirm-description-margin - ); - --spectrum-dialog-confirm-footer-padding-top: var( - --system-dialog-confirm-footer-padding-top - ); - --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); - --spectrum-dialog-confirm-buttongroup-padding-top: var( - --system-dialog-confirm-buttongroup-padding-top - ); - --spectrum-dialog-confirm-close-button-size: var( - --system-dialog-confirm-close-button-size - ); - --spectrum-dialog-confirm-close-button-padding: var( - --system-dialog-confirm-close-button-padding - ); - --spectrum-dialog-confirm-divider-height: var( - --system-dialog-confirm-divider-height - ); + --spectrum-dialog-fullscreen-header-text-size: var(--system-dialog-fullscreen-header-text-size); + --spectrum-dialog-min-inline-size: var(--system-dialog-min-inline-size); + --spectrum-dialog-confirm-small-width: var(--system-dialog-confirm-small-width); + --spectrum-dialog-confirm-medium-width: var(--system-dialog-confirm-medium-width); + --spectrum-dialog-confirm-large-width: var(--system-dialog-confirm-large-width); + --spectrum-dialog-confirm-divider-block-spacing-start: var(--system-dialog-confirm-divider-block-spacing-start); + --spectrum-dialog-confirm-divider-block-spacing-end: var(--system-dialog-confirm-divider-block-spacing-end); + --spectrum-dialog-confirm-description-text-color: var(--system-dialog-confirm-description-text-color); + --spectrum-dialog-confirm-title-text-color: var(--system-dialog-confirm-title-text-color); + --spectrum-dialog-confirm-description-text-line-height: var(--system-dialog-confirm-description-text-line-height); + --spectrum-dialog-confirm-title-text-line-height: var(--system-dialog-confirm-title-text-line-height); + --spectrum-dialog-heading-font-weight: var(--system-dialog-heading-font-weight); + --spectrum-dialog-confirm-description-padding: var(--system-dialog-confirm-description-padding); + --spectrum-dialog-confirm-description-margin: var(--system-dialog-confirm-description-margin); + --spectrum-dialog-confirm-footer-padding-top: var(--system-dialog-confirm-footer-padding-top); + --spectrum-dialog-confirm-gap-size: var(--system-dialog-confirm-gap-size); + --spectrum-dialog-confirm-buttongroup-padding-top: var(--system-dialog-confirm-buttongroup-padding-top); + --spectrum-dialog-confirm-close-button-size: var(--system-dialog-confirm-close-button-size); + --spectrum-dialog-confirm-close-button-padding: var(--system-dialog-confirm-close-button-padding); + --spectrum-dialog-confirm-divider-height: var(--system-dialog-confirm-divider-height); } + diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index a12f1431b0..eb61935b24 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -1,487 +1,278 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - inline-size: fit-content; - min-inline-size: var( - --mod-dialog-min-inline-size, - var(--spectrum-dialog-min-inline-size) - ); - max-inline-size: 100%; - max-block-size: inherit; - outline: none; - display: flex; -} - -:host([size='s']) { - inline-size: var( - --mod-dialog-confirm-small-width, - var(--spectrum-dialog-confirm-small-width) - ); -} - -:host([size='m']) { - inline-size: var( - --mod-dialog-confirm-medium-width, - var(--spectrum-dialog-confirm-medium-width) - ); -} - -:host([size='l']) { - inline-size: var( - --mod-dialog-confirm-large-width, - var(--spectrum-dialog-confirm-large-width) - ); -} - -::slotted([slot='hero']) { - block-size: var( - --mod-dialog-confirm-hero-height, - var(--spectrum-dialog-confirm-hero-height) - ); - background-position: 50%; - background-size: cover; - border-start-start-radius: var( - --mod-dialog-confirm-border-radius, - var(--spectrum-dialog-confirm-border-radius) - ); - border-start-end-radius: var( - --mod-dialog-confirm-border-radius, - var(--spectrum-dialog-confirm-border-radius) - ); - grid-area: hero; - overflow: hidden; + box-sizing: border-box; + inline-size: fit-content; + min-inline-size: var(--mod-dialog-min-inline-size, var(--spectrum-dialog-min-inline-size)); + max-inline-size: 100%; + max-block-size: inherit; + outline: none; + display: flex; } -.grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto 1fr auto minmax(0, auto) var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading header header header .' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; - grid-template-rows: auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - inline-size: 100%; - display: grid; +:host([size="s"]) { + inline-size: var(--mod-dialog-confirm-small-width, var(--spectrum-dialog-confirm-small-width)); +} + +:host([size="m"]) { + inline-size: var(--mod-dialog-confirm-medium-width, var(--spectrum-dialog-confirm-medium-width)); } -::slotted([slot='heading']) { - font-size: var( - --mod-dialog-confirm-title-text-size, - var(--spectrum-dialog-confirm-title-text-size) - ); - font-weight: var( - --mod-dialog-heading-font-weight, - var(--spectrum-dialog-heading-font-weight) - ); - line-height: var( - --mod-dialog-confirm-title-text-line-height, - var(--spectrum-dialog-confirm-title-text-line-height) - ); - color: var( - --mod-dialog-confirm-title-text-color, - var(--spectrum-dialog-confirm-title-text-color) - ); - outline: none; - grid-area: heading; - margin: 0; - padding-inline-end: var( - --mod-dialog-confirm-gap-size, - var(--spectrum-dialog-confirm-gap-size) - ); -} - -.no-header::slotted([slot='heading']) { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; +:host([size="l"]) { + inline-size: var(--mod-dialog-confirm-large-width, var(--spectrum-dialog-confirm-large-width)); +} + +::slotted([slot="hero"]) { + block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); + background-position: 50%; + background-size: cover; + border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + grid-area: hero; + overflow: hidden; +} + +.grid { + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: "hero hero hero hero hero hero" + ". . . . . ." + ". heading header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + inline-size: 100%; + display: grid; +} + +::slotted([slot="heading"]) { + font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-dialog-heading-font-weight)); + line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-dialog-confirm-title-text-line-height)); + color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-dialog-confirm-title-text-color)); + outline: none; + grid-area: heading; + margin: 0; + padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); +} + +.no-header::slotted([slot="heading"]) { + grid-area: heading-start / heading-start / header-end / header-end; + padding-inline-end: 0; } .header { - box-sizing: border-box; - outline: none; - grid-area: header; - justify-content: flex-end; - align-items: center; - display: flex; + box-sizing: border-box; + outline: none; + grid-area: header; + justify-content: flex-end; + align-items: center; + display: flex; } .divider { - inline-size: 100%; - grid-area: divider; - margin-block-start: var( - --mod-dialog-confirm-divider-block-spacing-end, - var(--spectrum-dialog-confirm-divider-block-spacing-end) - ); - margin-block-end: var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ); -} - -:host([mode='fullscreen']) [name='heading'] + .divider { - margin-block-end: calc( - var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ) - - var( - --mod-dialog-confirm-description-padding, - var(--spectrum-dialog-confirm-description-padding) - ) * 2 - ); + inline-size: 100%; + grid-area: divider; + margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); + margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); +} + +:host([mode="fullscreen"]) [name="heading"] + .divider { + margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); } :host([no-divider]) .divider { - display: none; -} - -:host([no-divider]) ::slotted([slot='heading']) { - padding-block-end: calc( - var( - --mod-dialog-confirm-divider-block-spacing-end, - var(--spectrum-dialog-confirm-divider-block-spacing-end) - ) + - var( - --mod-dialog-confirm-divider-block-spacing-start, - var(--spectrum-dialog-confirm-divider-block-spacing-start) - ) + - var( - --mod-dialog-confirm-divider-height, - var(--spectrum-dialog-confirm-divider-height) - ) - ); + display: none; +} + +:host([no-divider]) ::slotted([slot="heading"]) { + padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-dialog-confirm-divider-height))); } .content { - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - font-size: var( - --mod-dialog-confirm-description-text-size, - var(--spectrum-dialog-confirm-description-text-size) - ); - font-weight: var( - --mod-dialog-confirm-description-font-weight, - var(--spectrum-regular-font-weight) - ); - line-height: var( - --mod-dialog-confirm-description-text-line-height, - var(--spectrum-dialog-confirm-description-text-line-height) - ); - color: var( - --mod-dialog-confirm-description-text-color, - var(--spectrum-dialog-confirm-description-text-color) - ); - padding: calc( - var( - --mod-dialog-confirm-description-padding, - var(--spectrum-dialog-confirm-description-padding) - ) * 2 - ); - margin: 0 - var( - --mod-dialog-confirm-description-margin, - var(--spectrum-dialog-confirm-description-margin) - ); - outline: none; - grid-area: content; - overflow-y: auto; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); + font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); + line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-dialog-confirm-description-text-line-height)); + color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); + margin: 0 var(--mod-dialog-confirm-description-margin, var(--spectrum-dialog-confirm-description-margin)); + outline: none; + grid-area: content; + overflow-y: auto; } .footer { - outline: none; - flex-wrap: wrap; - grid-area: footer; - padding-block-start: var( - --mod-dialog-confirm-footer-padding-top, - var(--spectrum-dialog-confirm-footer-padding-top) - ); - display: flex; + outline: none; + flex-wrap: wrap; + grid-area: footer; + padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-dialog-confirm-footer-padding-top)); + display: flex; } -.footer > *, -.footer > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; +.footer > *, .footer > .spectrum-Button + .spectrum-Button { + margin-block-end: 0; } .button-group { - grid-area: buttonGroup; - justify-content: flex-end; - padding-block-start: var( - --mod-dialog-confirm-buttongroup-padding-top, - var(--spectrum-dialog-confirm-buttongroup-padding-top) - ); - padding-inline-start: var( - --mod-dialog-confirm-gap-size, - var(--spectrum-dialog-confirm-gap-size) - ); - display: flex; + grid-area: buttonGroup; + justify-content: flex-end; + padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); + display: flex; } .button-group.button-group--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; + grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; } :host([dismissable]) .grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto 1fr auto minmax(0, auto) minmax( - 0, - var( - --mod-dialog-confirm-close-button-size, - var(--spectrum-dialog-confirm-close-button-size) - ) - ) var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero hero' - '. . . . . closeButton closeButton' - '. heading header header typeIcon closeButton closeButton' - '. divider divider divider divider divider .' - '. content content content content content .' - '. footer footer buttonGroup buttonGroup buttonGroup .' - '. . . . . . .'; - grid-template-rows: auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading header header typeIcon closeButton closeButton" + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); } :host([dismissable]) .grid .button-group { - display: none; + display: none; } :host([dismissable]) .grid .footer { - color: var( - --mod-dialog-confirm-description-text-color, - var(--spectrum-dialog-confirm-description-text-color) - ); - grid-area: footer / footer / buttonGroup / buttonGroup; + color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + grid-area: footer / footer / buttonGroup / buttonGroup; } .close-button { - grid-area: closeButton; - place-self: start end; - margin-block-start: var( - --mod-dialog-confirm-close-button-padding, - var(--spectrum-dialog-confirm-close-button-padding) - ); - margin-inline-end: var( - --mod-dialog-confirm-close-button-padding, - var(--spectrum-dialog-confirm-close-button-padding) - ); -} - -:host([mode='fullscreen']) { - inline-size: 100%; - block-size: 100%; -} - -:host([mode='fullscreenTakeover']) { - inline-size: 100%; - block-size: 100%; - border-radius: 0; -} - -:host([mode='fullscreen']), -:host([mode='fullscreenTakeover']) { - max-block-size: none; - max-inline-size: none; -} - -:host([mode='fullscreen']) .grid, -:host([mode='fullscreenTakeover']) .grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) 1fr auto auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-rows: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto auto 1fr var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - '. . . . .' - '. heading header buttonGroup .' - '. divider divider divider .' - '. content content content .' - '. . . . .'; - display: grid; + grid-area: closeButton; + place-self: start end; + margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); +} + +:host([mode="fullscreen"]) { + inline-size: 100%; + block-size: 100%; +} + +:host([mode="fullscreenTakeover"]) { + inline-size: 100%; + block-size: 100%; + border-radius: 0; +} + +:host([mode="fullscreen"]), :host([mode="fullscreenTakeover"]) { + max-block-size: none; + max-inline-size: none; } -:host([mode='fullscreen']) ::slotted([slot='heading']), -:host([mode='fullscreenTakeover']) ::slotted([slot='heading']) { - font-size: var( - --mod-dialog-fullscreen-header-text-size, - var(--spectrum-dialog-fullscreen-header-text-size) - ); +:host([mode="fullscreen"]) .grid, :host([mode="fullscreenTakeover"]) .grid { + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: ". . . . ." + ". heading header buttonGroup ." + ". divider divider divider ." + ". content content content ." + ". . . . ."; + display: grid; } -:host([mode='fullscreen']) .content, -:host([mode='fullscreenTakeover']) .content { - max-block-size: none; +:host([mode="fullscreen"]) ::slotted([slot="heading"]), :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { + font-size: var(--mod-dialog-fullscreen-header-text-size, var(--spectrum-dialog-fullscreen-header-text-size)); } -:host([mode='fullscreen']) .button-group, -:host([mode='fullscreen']) .footer, -:host([mode='fullscreenTakeover']) .button-group, -:host([mode='fullscreenTakeover']) .footer { - padding-block-start: 0; +:host([mode="fullscreen"]) .content, :host([mode="fullscreenTakeover"]) .content { + max-block-size: none; } -:host([mode='fullscreen']) .footer, -:host([mode='fullscreenTakeover']) .footer { - display: none; +:host([mode="fullscreen"]) .button-group, :host([mode="fullscreen"]) .footer, :host([mode="fullscreenTakeover"]) .button-group, :host([mode="fullscreenTakeover"]) .footer { + padding-block-start: 0; } -:host([mode='fullscreen']) .button-group, -:host([mode='fullscreenTakeover']) .button-group { - grid-area: buttonGroup; - align-self: start; +:host([mode="fullscreen"]) .footer, :host([mode="fullscreenTakeover"]) .footer { + display: none; +} + +:host([mode="fullscreen"]) .button-group, :host([mode="fullscreenTakeover"]) .button-group { + grid-area: buttonGroup; + align-self: start; } @media screen and (width <= 700px) { - .grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto 1fr auto minmax(0, auto) var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero' - '. . . . . .' - '. heading heading heading heading .' - '. header header header header .' - '. divider divider divider divider .' - '. content content content content .' - '. footer footer buttonGroup buttonGroup .' - '. . . . . .'; - } - - .grid, - :host([dismissable]) .grid { - grid-template-rows: auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - } - - :host([dismissable]) .grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto 1fr auto minmax(0, auto) minmax( - 0, - var( - --mod-dialog-confirm-close-button-size, - var(--spectrum-dialog-confirm-close-button-size) - ) - ) var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - 'hero hero hero hero hero hero hero' - '. . . . . closeButton closeButton' - '. heading heading heading heading closeButton closeButton' - '. header header header header header .' - '. divider divider divider divider divider .' - '. content content content content content .' - '. footer footer buttonGroup buttonGroup buttonGroup .' - '. . . . . . .'; - } - - .header { - justify-content: flex-start; - } - - :host([mode='fullscreen']) .grid, - :host([mode='fullscreenTakeover']) .grid { - grid-template-columns: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) 1fr var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-rows: var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ) auto auto auto 1fr auto var( - --mod-dialog-confirm-padding-grid, - var(--spectrum-dialog-confirm-padding-grid) - ); - grid-template-areas: - '. . .' - '. heading .' - '. header .' - '. divider .' - '. content .' - '. buttonGroup .' - '. . .'; - display: grid; - } - - :host([mode='fullscreen']) .button-group, - :host([mode='fullscreenTakeover']) .button-group { - padding-block-start: var( - --mod-dialog-confirm-buttongroup-padding-top, - var(--spectrum-dialog-confirm-buttongroup-padding-top) - ); - } - - :host([mode='fullscreen']) ::slotted([slot='heading']), - :host([mode='fullscreenTakeover']) ::slotted([slot='heading']) { - font-size: var( - --mod-dialog-confirm-title-text-size, - var(--spectrum-dialog-confirm-title-text-size) - ); - } + .grid { + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: "hero hero hero hero hero hero" + ". . . . . ." + ". heading heading heading heading ." + ". header header header header ." + ". divider divider divider divider ." + ". content content content content ." + ". footer footer buttonGroup buttonGroup ." + ". . . . . ."; + } + + .grid, :host([dismissable]) .grid { + grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + } + + :host([dismissable]) .grid { + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: "hero hero hero hero hero hero hero" + ". . . . . closeButton closeButton" + ". heading heading heading heading closeButton closeButton" + ". header header header header header ." + ". divider divider divider divider divider ." + ". content content content content content ." + ". footer footer buttonGroup buttonGroup buttonGroup ." + ". . . . . . ."; + } + + .header { + justify-content: flex-start; + } + + :host([mode="fullscreen"]) .grid, :host([mode="fullscreenTakeover"]) .grid { + grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-areas: ". . ." + ". heading ." + ". header ." + ". divider ." + ". content ." + ". buttonGroup ." + ". . ."; + display: grid; + } + + :host([mode="fullscreen"]) .button-group, :host([mode="fullscreenTakeover"]) .button-group { + padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + } + + :host([mode="fullscreen"]) ::slotted([slot="heading"]), :host([mode="fullscreenTakeover"]) ::slotted([slot="heading"]) { + font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + } } @media (forced-colors: active) { - :host { - border: solid; - } + :host { + border: solid; + } } + diff --git a/packages/divider/src/divider-overrides.css b/packages/divider/src/divider-overrides.css index c92639893c..d9d728b21c 100644 --- a/packages/divider/src/divider-overrides.css +++ b/packages/divider/src/divider-overrides.css @@ -1,42 +1,25 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-divider-background-color-small: var( - --system-divider-background-color-small - ); - --spectrum-divider-background-color-medium: var( - --system-divider-background-color-medium - ); - --spectrum-divider-background-color-large: var( - --system-divider-background-color-large - ); - --spectrum-divider-background-color-small-static-white: var( - --system-divider-background-color-small-static-white - ); - --spectrum-divider-background-color-medium-static-white: var( - --system-divider-background-color-medium-static-white - ); - --spectrum-divider-background-color-large-static-white: var( - --system-divider-background-color-large-static-white - ); - --spectrum-divider-background-color-small-static-black: var( - --system-divider-background-color-small-static-black - ); - --spectrum-divider-background-color-medium-static-black: var( - --system-divider-background-color-medium-static-black - ); - --spectrum-divider-background-color-large-static-black: var( - --system-divider-background-color-large-static-black - ); + --spectrum-divider-background-color-small: var(--system-divider-background-color-small); + --spectrum-divider-background-color-medium: var(--system-divider-background-color-medium); + --spectrum-divider-background-color-large: var(--system-divider-background-color-large); + --spectrum-divider-background-color-small-static-white: var(--system-divider-background-color-small-static-white); + --spectrum-divider-background-color-medium-static-white: var(--system-divider-background-color-medium-static-white); + --spectrum-divider-background-color-large-static-white: var(--system-divider-background-color-large-static-white); + --spectrum-divider-background-color-small-static-black: var(--system-divider-background-color-small-static-black); + --spectrum-divider-background-color-medium-static-black: var(--system-divider-background-color-medium-static-black); + --spectrum-divider-background-color-large-static-black: var(--system-divider-background-color-large-static-black); } + diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css index 5e76c19a80..78fb4ae12b 100644 --- a/packages/divider/src/spectrum-divider.css +++ b/packages/divider/src/spectrum-divider.css @@ -1,112 +1,76 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - background-color: CanvasText !important; - } + :host { + background-color: CanvasText !important; + } } :host { - block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); - inline-size: 100%; - border: none; - border-width: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - border-radius: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - background-color: var( - --mod-divider-background-color, - var(--spectrum-divider-background-color) - ); - overflow: visible; + block-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + inline-size: 100%; + border: none; + border-width: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + background-color: var(--mod-divider-background-color, var(--spectrum-divider-background-color)); + overflow: visible; } -:host([size='s']) { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-small - ); +:host([size="s"]) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-small); } -:host, -:host { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-medium - ); +:host, :host { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); } -:host([size='l']) { - --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); - --spectrum-divider-background-color: var( - --spectrum-divider-background-color-large - ); +:host([size="l"]) { + --spectrum-divider-thickness: var(--spectrum-divider-thickness-large); + --spectrum-divider-background-color: var(--spectrum-divider-background-color-large); } -:host([static-color='white'][size='s']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-small-static-white, - var(--spectrum-divider-background-color-small-static-white) - ); +:host([static-color="white"][size="s"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-small-static-white)); } -:host([static-color='white']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-medium-static-white, - var(--spectrum-divider-background-color-medium-static-white) - ); +:host([static-color="white"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-medium-static-white)); } -:host([static-color='white'][size='l']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-large-static-white, - var(--spectrum-divider-background-color-large-static-white) - ); +:host([static-color="white"][size="l"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-divider-background-color-large-static-white)); } -:host([static-color='black'][size='s']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-small-static-black, - var(--spectrum-divider-background-color-small-static-black) - ); +:host([static-color="black"][size="s"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-small-static-black)); } -:host([static-color='black']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-medium-static-black, - var(--spectrum-divider-background-color-medium-static-black) - ); +:host([static-color="black"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-medium-static-black)); } -:host([static-color='black'][size='l']) { - --spectrum-divider-background-color: var( - --mod-divider-background-color-large-static-black, - var(--spectrum-divider-background-color-large-static-black) - ); +:host([static-color="black"][size="l"]) { + --spectrum-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-divider-background-color-large-static-black)); } :host([vertical]) { - inline-size: var( - --mod-divider-thickness, - var(--spectrum-divider-thickness) - ); - margin-block: var(--mod-divider-vertical-margin); - block-size: 100%; - block-size: var(--mod-divider-vertical-height, 100%); - align-self: var(--mod-divider-vertical-align); + inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + margin-block: var(--mod-divider-vertical-margin); + block-size: 100%; + block-size: var(--mod-divider-vertical-height, 100.0%); + align-self: var(--mod-divider-vertical-align); } + diff --git a/packages/dropzone/src/dropzone-overrides.css b/packages/dropzone/src/dropzone-overrides.css index dcbb63ec23..1ab25a2852 100644 --- a/packages/dropzone/src/dropzone-overrides.css +++ b/packages/dropzone/src/dropzone-overrides.css @@ -1,102 +1,51 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-drop-zone-padding: var(--system-drop-zone-padding); - --spectrum-drop-zone-illustration-to-heading: var( - --system-drop-zone-illustration-to-heading - ); - --spectrum-drop-zone-heading-to-body: var( - --system-drop-zone-heading-to-body - ); - --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); - --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); - --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); - --spectrum-drop-zone-heading-font-family: var( - --system-drop-zone-heading-font-family - ); - --spectrum-drop-zone-heading-font-weight: var( - --system-drop-zone-heading-font-weight - ); - --spectrum-drop-zone-heading-font-style: var( - --system-drop-zone-heading-font-style - ); - --spectrum-drop-zone-heading-font-size: var( - --system-drop-zone-heading-font-size - ); - --spectrum-drop-zone-heading-line-height: var( - --system-drop-zone-heading-line-height - ); - --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); - --spectrum-drop-zone-body-font-family: var( - --system-drop-zone-body-font-family - ); - --spectrum-drop-zone-body-font-weight: var( - --system-drop-zone-body-font-weight - ); - --spectrum-drop-zone-body-font-style: var( - --system-drop-zone-body-font-style - ); - --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); - --spectrum-drop-zone-body-line-height: var( - --system-drop-zone-body-line-height - ); - --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); - --spectrum-drop-zone-background-color: var( - --system-drop-zone-background-color - ); - --spectrum-drop-zone-border-color-hover: var( - --system-drop-zone-border-color-hover - ); - --spectrum-drop-zone-illustration-color: var( - --system-drop-zone-illustration-color - ); - --spectrum-drop-zone-illustration-color-hover: var( - --system-drop-zone-illustration-color-hover - ); - --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); - --spectrum-drop-zone-content-max-width: var( - --system-drop-zone-content-max-width - ); - --spectrum-drop-zone-content-edge-to-text: var( - --system-drop-zone-content-edge-to-text - ); - --spectrum-drop-zone-content-top-to-text: var( - --system-drop-zone-content-top-to-text - ); - --spectrum-drop-zone-content-bottom-to-text: var( - --system-drop-zone-content-bottom-to-text - ); - --spectrum-drop-zone-content-font-family: var( - --system-drop-zone-content-font-family - ); - --spectrum-drop-zone-content-font-weight: var( - --system-drop-zone-content-font-weight - ); - --spectrum-drop-zone-content-font-style: var( - --system-drop-zone-content-font-style - ); - --spectrum-drop-zone-content-font-size: var( - --system-drop-zone-content-font-size - ); - --spectrum-drop-zone-content-line-height: var( - --system-drop-zone-content-line-height - ); - --spectrum-drop-zone-content-background-color: var( - --system-drop-zone-content-background-color - ); - --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); - --spectrum-drop-zone-heading-font-size-cjk: var( - --system-drop-zone-heading-font-size-cjk - ); + --spectrum-drop-zone-padding: var(--system-drop-zone-padding); + --spectrum-drop-zone-illustration-to-heading: var(--system-drop-zone-illustration-to-heading); + --spectrum-drop-zone-heading-to-body: var(--system-drop-zone-heading-to-body); + --spectrum-drop-zone-border-width: var(--system-drop-zone-border-width); + --spectrum-drop-zone-corner-radius: var(--system-drop-zone-corner-radius); + --spectrum-drop-zone-border-color: var(--system-drop-zone-border-color); + --spectrum-drop-zone-heading-font-family: var(--system-drop-zone-heading-font-family); + --spectrum-drop-zone-heading-font-weight: var(--system-drop-zone-heading-font-weight); + --spectrum-drop-zone-heading-font-style: var(--system-drop-zone-heading-font-style); + --spectrum-drop-zone-heading-font-size: var(--system-drop-zone-heading-font-size); + --spectrum-drop-zone-heading-line-height: var(--system-drop-zone-heading-line-height); + --spectrum-drop-zone-heading-color: var(--system-drop-zone-heading-color); + --spectrum-drop-zone-body-font-family: var(--system-drop-zone-body-font-family); + --spectrum-drop-zone-body-font-weight: var(--system-drop-zone-body-font-weight); + --spectrum-drop-zone-body-font-style: var(--system-drop-zone-body-font-style); + --spectrum-drop-zone-body-font-size: var(--system-drop-zone-body-font-size); + --spectrum-drop-zone-body-line-height: var(--system-drop-zone-body-line-height); + --spectrum-drop-zone-body-color: var(--system-drop-zone-body-color); + --spectrum-drop-zone-background-color: var(--system-drop-zone-background-color); + --spectrum-drop-zone-border-color-hover: var(--system-drop-zone-border-color-hover); + --spectrum-drop-zone-illustration-color: var(--system-drop-zone-illustration-color); + --spectrum-drop-zone-illustration-color-hover: var(--system-drop-zone-illustration-color-hover); + --spectrum-drop-zone-content-height: var(--system-drop-zone-content-height); + --spectrum-drop-zone-content-max-width: var(--system-drop-zone-content-max-width); + --spectrum-drop-zone-content-edge-to-text: var(--system-drop-zone-content-edge-to-text); + --spectrum-drop-zone-content-top-to-text: var(--system-drop-zone-content-top-to-text); + --spectrum-drop-zone-content-bottom-to-text: var(--system-drop-zone-content-bottom-to-text); + --spectrum-drop-zone-content-font-family: var(--system-drop-zone-content-font-family); + --spectrum-drop-zone-content-font-weight: var(--system-drop-zone-content-font-weight); + --spectrum-drop-zone-content-font-style: var(--system-drop-zone-content-font-style); + --spectrum-drop-zone-content-font-size: var(--system-drop-zone-content-font-size); + --spectrum-drop-zone-content-line-height: var(--system-drop-zone-content-line-height); + --spectrum-drop-zone-content-background-color: var(--system-drop-zone-content-background-color); + --spectrum-drop-zone-content-color: var(--system-drop-zone-content-color); + --spectrum-drop-zone-heading-font-size-cjk: var(--system-drop-zone-heading-font-size-cjk); } + diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css index 23fd025125..ea37bbdcaf 100644 --- a/packages/dropzone/src/spectrum-dropzone.css +++ b/packages/dropzone/src/spectrum-dropzone.css @@ -1,263 +1,116 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-illustrated-message-content-maximum-width: var( - --mod-drop-zone-content-maximum-width, - var(--spectrum-drop-zone-content-maximum-width) - ); - --mod-illustrated-message-illustration-color: var( - --mod-drop-zone-illustration-color, - var(--spectrum-drop-zone-illustration-color) - ); - --mod-illustrated-message-title-to-heading: var( - --mod-drop-zone-illustration-to-heading, - var(--spectrum-drop-zone-illustration-to-heading) - ); - --mod-illustrated-message-heading-to-body: var( - --mod-drop-zone-heading-to-body, - var(--spectrum-drop-zone-heading-to-body) - ); - --mod-illustrated-message-title-font-family: var( - --mod-drop-zone-heading-font-family, - var(--spectrum-drop-zone-heading-font-family) - ); - --mod-illustrated-message-title-font-weight: var( - --mod-drop-zone-heading-font-weight, - var(--spectrum-drop-zone-heading-font-weight) - ); - --mod-illustrated-message-title-font-style: var( - --mod-drop-zone-heading-font-style, - var(--spectrum-drop-zone-heading-font-style) - ); - --mod-illustrated-message-title-font-size: var( - --mod-drop-zone-heading-font-size, - var(--spectrum-drop-zone-heading-font-size) - ); - --mod-illustrated-message-title-line-height: var( - --mod-drop-zone-heading-line-height, - var(--spectrum-drop-zone-heading-line-height) - ); - --mod-illustrated-message-title-color: var( - --mod-drop-zone-heading-color, - var(--spectrum-drop-zone-heading-color) - ); - --mod-illustrated-message-description-position: relative; - --mod-illustrated-message-description-z-index: 1; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var( - --mod-drop-zone-body-font-family, - var(--spectrum-drop-zone-body-font-family) - ); - --mod-illustrated-message-description-font-weight: var( - --mod-drop-zone-body-font-weight, - var(--spectrum-drop-zone-body-font-weight) - ); - --mod-illustrated-message-description-font-style: var( - --mod-drop-zone-body-font-style, - var(--spectrum-drop-zone-body-font-style) - ); - --mod-illustrated-message-description-font-size: var( - --mod-drop-zone-body-font-size, - var(--spectrum-drop-zone-body-font-size) - ); - --mod-illustrated-message-description-line-height: var( - --mod-drop-zone-body-line-height, - var(--spectrum-drop-zone-body-line-height) - ); - --mod-illustrated-message-description-color: var( - --mod-drop-zone-body-color, - var(--spectrum-drop-zone-body-color) - ); - --mod-actionbutton-font-size: var( - --mod-drop-zone-content-font-size, - var(--spectrum-drop-zone-content-font-size) - ); - --mod-actionbutton-label-color: var( - --mod-drop-zone-content-color, - var(--spectrum-drop-zone-content-color) - ); - --mod-actionbutton-edge-to-text: var( - --mod-drop-zone-content-edge-to-text, - var(--spectrum-drop-zone-content-edge-to-text) - ); - box-sizing: border-box; - inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc( - var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - - var( - --mod-drop-zone-border-width, - var(--spectrum-drop-zone-border-width) - ) - ); - text-align: center; - border-color: var( - --mod-drop-zone-border-color, - var(--spectrum-drop-zone-border-color) - ); - border-width: var( - --mod-drop-zone-border-width, - var(--spectrum-drop-zone-border-width) - ); - border-radius: var( - --mod-drop-zone-corner-radius, - var(--spectrum-drop-zone-corner-radius) - ); - border-style: dashed; - border-style: var( - --mod-drop-zone-border-style, - var(--spectrum-drop-zone-border-style, dashed) - ); - background-color: var( - --mod-drop-zone-background-color, - var(--spectrum-drop-zone-background-color) - ); - background-size: cover; + --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); + --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); + --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); + --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); + --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); + --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); + --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); + --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); + --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); + --mod-illustrated-message-description-position: relative; + --mod-illustrated-message-description-z-index: 1; + --mod-illustrated-message-heading-to-description: 0; + --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); + --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); + --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); + --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); + --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); + --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); + --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); + box-sizing: border-box; + inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); + padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + text-align: center; + border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); + border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); + border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); + border-style: dashed; + border-style: var(--mod-drop-zone-border-style, var(--spectrum-drop-zone-border-style, dashed)); + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + background-size: cover; } -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-drop-zone-heading-font-size: var( - --spectrum-drop-zone-heading-font-size-cjk - ); +:host:lang(ja), :host:lang(ko), :host:lang(zh) { + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-heading-font-size-cjk); } :host([dragged]) { - --mod-drop-zone-border-style: var( - --mod-drop-zone-border-style-dragged, - solid - ); - --mod-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color), - var( - --mod-drop-zone-background-color-opacity, - var(--spectrum-drop-zone-background-color-opacity) - ) - ); - --spectrum-drop-zone-border-color: var( - --highcontrast-drop-zone-border-color-hover, - var( - --mod-drop-zone-border-color-hover, - var(--spectrum-drop-zone-border-color-hover) - ) - ); - --mod-illustrated-message-illustration-color: var( - --mod-drop-zone-illustration-color-hover, - var(--spectrum-drop-zone-illustration-color-hover) - ); + --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); } :host([filled]) { - --mod-drop-zone-background-color: rgba( - var(--spectrum-drop-zone-background-color), - var( - --mod-drop-zone-background-color-opacity-filled, - var(--spectrum-drop-zone-background-color-opacity-filled) - ) - ); - --mod-illustrated-message-display: none; + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + --mod-illustrated-message-display: none; } :host([filled][dragged]) { - --mod-drop-zone-content-display: flex; + --mod-drop-zone-content-display: flex; } :host(:focus-visible) { - --mod-drop-zone-border-style: solid; - --spectrum-drop-zone-border-color: var( - --highcontrast-drop-zone-border-color-hover, - var( - --mod-drop-zone-border-color-hover, - var(--spectrum-drop-zone-border-color-hover) - ) - ); - outline: 0; + --mod-drop-zone-border-style: solid; + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + outline: 0; } .spectrum-DropZone-content { - display: none; - display: var( - --mod-drop-zone-content-display, - var(--spectrum-drop-zone-content-display, none) - ); - block-size: 100%; - z-index: 1; - justify-content: center; - align-items: center; - position: relative; + display: none; + display: var(--mod-drop-zone-content-display, var(--spectrum-drop-zone-content-display, none)); + block-size: 100%; + z-index: 1; + justify-content: center; + align-items: center; + position: relative; } .spectrum-DropZone-button { - box-sizing: border-box; - block-size: var( - --mod-drop-zone-content-height, - var(--spectrum-drop-zone-content-height) - ); - max-inline-size: var( - --mod-drop-zone-content-max-width, - var(--spectrum-drop-zone-content-max-width) - ); - font-family: var( - --mod-drop-zone-content-font-family, - var(--spectrum-drop-zone-content-font-family) - ); - font-weight: var( - --mod-drop-zone-content-font-weight, - var(--spectrum-drop-zone-content-font-weight) - ); - font-style: var( - --mod-drop-zone-content-font-style, - var(--spectrum-drop-zone-content-font-style) - ); - line-height: var( - --mod-drop-zone-content-line-height, - var(--spectrum-drop-zone-content-line-height) - ); - border: none; - padding-block-start: var( - --mod-drop-zone-content-top-to-text, - var(--spectrum-drop-zone-content-top-to-text) - ); - padding-block-end: var( - --mod-drop-zone-content-bottom-to-text, - var(--spectrum-drop-zone-content-bottom-to-text) - ); + box-sizing: border-box; + block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); + max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); + font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); + font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); + font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); + line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); + border: none; + padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); + padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); } -.spectrum-DropZone-button, -.spectrum-DropZone-button:focus { - background-color: var( - --mod-drop-zone-content-background-color, - var(--spectrum-drop-zone-content-background-color) - ); +.spectrum-DropZone-button, .spectrum-DropZone-button:focus { + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); } @media (hover: hover) { - .spectrum-DropZone-button:hover { - background-color: var( - --mod-drop-zone-content-background-color, - var(--spectrum-drop-zone-content-background-color) - ); - } + .spectrum-DropZone-button:hover { + background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + } } @media (forced-colors: active) { - :host { - --highcontrast-drop-zone-illustration-color: CanvasText; - --highcontrast-drop-zone-border-color-hover: Highlight; - --highcontrast-illustrated-message-illustration-color: var( - --highcontrast-drop-zone-illustration-color - ); - } + :host { + --highcontrast-drop-zone-illustration-color: CanvasText; + --highcontrast-drop-zone-border-color-hover: Highlight; + --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); + } } + diff --git a/packages/field-group/src/field-group-overrides.css b/packages/field-group/src/field-group-overrides.css index 1a9d3ee2f8..1f8f82be97 100644 --- a/packages/field-group/src/field-group-overrides.css +++ b/packages/field-group/src/field-group-overrides.css @@ -1,19 +1,18 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-fieldgroup-margin: var(--system-field-group-margin); - --spectrum-fieldgroup-readonly-delimiter: var( - --system-field-group-readonly-delimiter - ); + --spectrum-fieldgroup-margin: var(--system-field-group-margin); + --spectrum-fieldgroup-readonly-delimiter: var(--system-field-group-readonly-delimiter); } + diff --git a/packages/field-group/src/spectrum-field-group.css b/packages/field-group/src/spectrum-field-group.css index 72c16e86b2..931cc0e448 100644 --- a/packages/field-group/src/spectrum-field-group.css +++ b/packages/field-group/src/spectrum-field-group.css @@ -1,46 +1,47 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .group { - flex-flow: column wrap; - display: flex; + flex-flow: column wrap; + display: flex; } .spectrum-FieldGroup--toplabel { - flex-direction: column; + flex-direction: column; } .spectrum-FieldGroup--sidelabel { - flex-direction: row; + flex-direction: row; } .group { - flex-flow: column wrap; - display: flex; + flex-flow: column wrap; + display: flex; } :host([vertical]) .group { - flex-direction: column; + flex-direction: column; } :host([horizontal]) .group { - flex-direction: row; + flex-direction: row; } :host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)) { - margin-inline-end: var(--spectrum-fieldgroup-margin); + margin-inline-end: var(--spectrum-fieldgroup-margin); } :host([horizontal]) .group .spectrum-HelpText { - flex-basis: 100%; + flex-basis: 100%; } + diff --git a/packages/field-label/src/field-label-overrides.css b/packages/field-label/src/field-label-overrides.css index 9ecf9e545a..f0945e70a8 100644 --- a/packages/field-label/src/field-label-overrides.css +++ b/packages/field-label/src/field-label-overrides.css @@ -1,135 +1,68 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-field-label-color: var(--system-field-label-color); - --spectrum-field-label-font-weight: var(--system-field-label-font-weight); - --spectrum-field-label-line-height: var(--system-field-label-line-height); - --spectrum-field-label-line-height-cjk: var( - --system-field-label-line-height-cjk - ); - --spectrum-field-label-disabled-content-color: var( - --system-field-label-disabled-content-color - ); - --spectrum-field-label-min-height: var(--system-field-label-min-height); - --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-bottom-to-text - ); - --spectrum-field-label-font-size: var(--system-field-label-font-size); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-text-to-asterisk - ); + --spectrum-field-label-color: var(--system-field-label-color); + --spectrum-field-label-font-weight: var(--system-field-label-font-weight); + --spectrum-field-label-line-height: var(--system-field-label-line-height); + --spectrum-field-label-line-height-cjk: var(--system-field-label-line-height-cjk); + --spectrum-field-label-disabled-content-color: var(--system-field-label-disabled-content-color); + --spectrum-field-label-min-height: var(--system-field-label-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-top-to-text); + --spectrum-field-label-bottom-to-text: var(--system-field-label-bottom-to-text); + --spectrum-field-label-font-size: var(--system-field-label-font-size); + --spectrum-field-label-side-margin-block-start: var(--system-field-label-side-margin-block-start); + --spectrum-field-label-side-padding-right: var(--system-field-label-side-padding-right); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-text-to-asterisk); } :host { - --spectrum-field-label-min-height: var( - --system-field-label-size-m-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-m-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-m-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-m-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-m-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-m-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-m-text-to-asterisk - ); + --spectrum-field-label-min-height: var(--system-field-label-size-m-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-size-m-top-to-text); + --spectrum-field-label-bottom-to-text: var(--system-field-label-size-m-bottom-to-text); + --spectrum-field-label-font-size: var(--system-field-label-size-m-font-size); + --spectrum-field-label-side-margin-block-start: var(--system-field-label-size-m-side-margin-block-start); + --spectrum-field-label-side-padding-right: var(--system-field-label-size-m-side-padding-right); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-size-m-text-to-asterisk); } -:host([size='s']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-s-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-s-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-s-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-s-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-s-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-s-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-s-text-to-asterisk - ); +:host([size="s"]) { + --spectrum-field-label-min-height: var(--system-field-label-size-s-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-size-s-top-to-text); + --spectrum-field-label-bottom-to-text: var(--system-field-label-size-s-bottom-to-text); + --spectrum-field-label-font-size: var(--system-field-label-size-s-font-size); + --spectrum-field-label-side-margin-block-start: var(--system-field-label-size-s-side-margin-block-start); + --spectrum-field-label-side-padding-right: var(--system-field-label-size-s-side-padding-right); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-size-s-text-to-asterisk); } -:host([size='l']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-l-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-l-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-l-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-l-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-l-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-l-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-l-text-to-asterisk - ); +:host([size="l"]) { + --spectrum-field-label-min-height: var(--system-field-label-size-l-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-size-l-top-to-text); + --spectrum-field-label-bottom-to-text: var(--system-field-label-size-l-bottom-to-text); + --spectrum-field-label-font-size: var(--system-field-label-size-l-font-size); + --spectrum-field-label-side-margin-block-start: var(--system-field-label-size-l-side-margin-block-start); + --spectrum-field-label-side-padding-right: var(--system-field-label-size-l-side-padding-right); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-size-l-text-to-asterisk); } -:host([size='xl']) { - --spectrum-field-label-min-height: var( - --system-field-label-size-xl-min-height - ); - --spectrum-field-label-top-to-text: var( - --system-field-label-size-xl-top-to-text - ); - --spectrum-field-label-bottom-to-text: var( - --system-field-label-size-xl-bottom-to-text - ); - --spectrum-field-label-font-size: var( - --system-field-label-size-xl-font-size - ); - --spectrum-field-label-side-margin-block-start: var( - --system-field-label-size-xl-side-margin-block-start - ); - --spectrum-field-label-side-padding-right: var( - --system-field-label-size-xl-side-padding-right - ); - --spectrum-field-label-text-to-asterisk: var( - --system-field-label-size-xl-text-to-asterisk - ); +:host([size="xl"]) { + --spectrum-field-label-min-height: var(--system-field-label-size-xl-min-height); + --spectrum-field-label-top-to-text: var(--system-field-label-size-xl-top-to-text); + --spectrum-field-label-bottom-to-text: var(--system-field-label-size-xl-bottom-to-text); + --spectrum-field-label-font-size: var(--system-field-label-size-xl-font-size); + --spectrum-field-label-side-margin-block-start: var(--system-field-label-size-xl-side-margin-block-start); + --spectrum-field-label-side-padding-right: var(--system-field-label-size-xl-side-padding-right); + --spectrum-field-label-text-to-asterisk: var(--system-field-label-size-xl-text-to-asterisk); } + diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index 404e400b8e..37ff161d18 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -1,117 +1,65 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - min-block-size: var( - --mod-fieldlabel-min-height, - var(--spectrum-field-label-min-height) - ); - padding-block: var( - --mod-fieldlabel-padding-block, - var( - --mod-field-label-top-to-text, - var(--spectrum-field-label-top-to-text) - ) - var( - --mod-field-label-bottom-to-text, - var(--spectrum-field-label-bottom-to-text) - ) - ); - padding-inline: 0; - padding-inline: var(--mod-fieldlabel-padding-inline, 0); - margin-block: 0; - margin-block: var( - --mod-fieldlabel-margin-block, - var(--mod-fieldlabel-margin-block-start, 0) - var(--mod-fieldlabel-margin-block-end, 0) - ); - margin-inline: 0; - margin-inline: var( - --mod-fieldlabel-margin-inline, - var(--mod-fieldlabel-margin-inline-start, 0) - var(--mod-fieldlabel-margin-inline-end, 0) - ); - font-size: var( - --mod-fieldlabel-font-size, - var(--spectrum-field-label-font-size) - ); - font-weight: var( - --mod-fieldlabel-font-weight, - var(--spectrum-field-label-font-weight) - ); - line-height: var( - --mod-fieldlabel-line-height, - var(--spectrum-field-label-line-height) - ); - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); - display: block; + box-sizing: border-box; + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height)); + padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))); + padding-inline: 0; + padding-inline: var(--mod-fieldlabel-padding-inline, 0); + margin-block: 0; + margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0)); + margin-inline: 0; + margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0)); + font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size)); + font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-field-label-font-weight)); + line-height: var(--mod-fieldlabel-line-height, var(--spectrum-field-label-line-height)); + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + color: var(--mod-fieldlabel-color, var(--spectrum-field-label-color)); + display: block; } -:host(:lang(ja)), -:host(:lang(ko)), -:host(:lang(zh)) { - --mod-fieldlabel-line-height: var( - --mod-fieldlabel-line-height-cjk, - var(--spectrum-field-label-line-height-cjk) - ); +:host(:lang(ja)), :host(:lang(ko)), :host(:lang(zh)) { + --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-field-label-line-height-cjk)); } -:host([disabled]), -:host([disabled]) .required-icon { - --mod-fieldlabel-color: var( - --highcontrast-field-label-disabled-content-color, - var( - --mod-disabled-content-color, - var(--spectrum-field-label-disabled-content-color) - ) - ); +:host([disabled]), :host([disabled]) .required-icon { + --mod-fieldlabel-color: var(--highcontrast-field-label-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-field-label-disabled-content-color))); } .required-icon { - margin-block: 0; - margin-inline: var( - --mod-field-label-text-to-asterisk, - var(--spectrum-field-label-text-to-asterisk) - ) - 0; - vertical-align: initial; - vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); + margin-block: 0; + margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; + vertical-align: initial; + vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); } -:host([side-aligned='start']), -:host([side-aligned='end']) { - vertical-align: top; - margin-block-start: var( - --mod-fieldlabel-side-margin-block-start, - var(--spectrum-field-label-side-margin-block-start) - ); - margin-block-end: 0; - margin-inline-end: var( - --mod-fieldlabel-side-padding-right, - var(--spectrum-field-label-side-padding-right) - ); - display: inline-block; +:host([side-aligned="start"]), :host([side-aligned="end"]) { + vertical-align: top; + margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start)); + margin-block-end: 0; + margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right)); + display: inline-block; } -:host([side-aligned='end']) { - text-align: end; +:host([side-aligned="end"]) { + text-align: end; } @media (forced-colors: active) { - :host { - --highcontrast-field-label-disabled-content-color: GrayText; - } + :host { + --highcontrast-field-label-disabled-content-color: GrayText; + } } + diff --git a/packages/help-text/src/help-text-overrides.css b/packages/help-text/src/help-text-overrides.css index bfbc227fca..9d6c91f139 100644 --- a/packages/help-text/src/help-text-overrides.css +++ b/packages/help-text/src/help-text-overrides.css @@ -1,136 +1,87 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-helptext-line-height: var(--system-help-text-line-height); - --spectrum-helptext-content-color-default: var( - --system-help-text-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-icon-color-default - ); - --spectrum-helptext-disabled-content-color: var( - --system-help-text-disabled-content-color - ); + --spectrum-helptext-line-height: var(--system-help-text-line-height); + --spectrum-helptext-content-color-default: var(--system-help-text-content-color-default); + --spectrum-helptext-icon-color-default: var(--system-help-text-icon-color-default); + --spectrum-helptext-disabled-content-color: var(--system-help-text-disabled-content-color); } -:host([variant='neutral']) { - --spectrum-helptext-content-color-default: var( - --system-help-text-neutral-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-neutral-icon-color-default - ); +:host([variant="neutral"]) { + --spectrum-helptext-content-color-default: var(--system-help-text-neutral-content-color-default); + --spectrum-helptext-icon-color-default: var(--system-help-text-neutral-icon-color-default); } -:host([variant='negative']) { - --spectrum-helptext-content-color-default: var( - --system-help-text-negative-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-negative-icon-color-default - ); +:host([variant="negative"]) { + --spectrum-helptext-content-color-default: var(--system-help-text-negative-content-color-default); + --spectrum-helptext-icon-color-default: var(--system-help-text-negative-icon-color-default); } :host([disabled]) { - --spectrum-helptext-content-color-default: var( - --system-help-text-disabled-content-color-default - ); - --spectrum-helptext-icon-color-default: var( - --system-help-text-disabled-icon-color-default - ); + --spectrum-helptext-content-color-default: var(--system-help-text-disabled-content-color-default); + --spectrum-helptext-icon-color-default: var(--system-help-text-disabled-icon-color-default); } :host(:lang(ja)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-ja-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var(--system-help-text-lang-ja-line-height-cjk); } :host(:lang(zh)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-zh-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var(--system-help-text-lang-zh-line-height-cjk); } :host(:lang(ko)) { - --spectrum-helptext-line-height-cjk: var( - --system-help-text-lang-ko-line-height-cjk - ); + --spectrum-helptext-line-height-cjk: var(--system-help-text-lang-ko-line-height-cjk); } -:host([size='s']) { - --spectrum-helptext-min-height: var(--system-help-text-size-s-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-s-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-s-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-s-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-s-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-s-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-s-bottom-to-text - ); +:host([size="s"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-s-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-s-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-s-font-size); + --spectrum-helptext-text-to-visual: var(--system-help-text-size-s-text-to-visual); + --spectrum-helptext-top-to-workflow-icon: var(--system-help-text-size-s-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--system-help-text-size-s-top-to-text); + --spectrum-helptext-bottom-to-text: var(--system-help-text-size-s-bottom-to-text); } :host { - --spectrum-helptext-min-height: var(--system-help-text-size-m-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-m-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-m-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-m-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-m-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-m-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-m-bottom-to-text - ); + --spectrum-helptext-min-height: var(--system-help-text-size-m-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-m-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-m-font-size); + --spectrum-helptext-text-to-visual: var(--system-help-text-size-m-text-to-visual); + --spectrum-helptext-top-to-workflow-icon: var(--system-help-text-size-m-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--system-help-text-size-m-top-to-text); + --spectrum-helptext-bottom-to-text: var(--system-help-text-size-m-bottom-to-text); } -:host([size='l']) { - --spectrum-helptext-min-height: var(--system-help-text-size-l-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-l-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-l-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-l-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-l-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var(--system-help-text-size-l-top-to-text); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-l-bottom-to-text - ); +:host([size="l"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-l-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-l-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-l-font-size); + --spectrum-helptext-text-to-visual: var(--system-help-text-size-l-text-to-visual); + --spectrum-helptext-top-to-workflow-icon: var(--system-help-text-size-l-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--system-help-text-size-l-top-to-text); + --spectrum-helptext-bottom-to-text: var(--system-help-text-size-l-bottom-to-text); } -:host([size='xl']) { - --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); - --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); - --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); - --spectrum-helptext-text-to-visual: var( - --system-help-text-size-xl-text-to-visual - ); - --spectrum-helptext-top-to-workflow-icon: var( - --system-help-text-size-xl-top-to-workflow-icon - ); - --spectrum-helptext-top-to-text: var( - --system-help-text-size-xl-top-to-text - ); - --spectrum-helptext-bottom-to-text: var( - --system-help-text-size-xl-bottom-to-text - ); +:host([size="xl"]) { + --spectrum-helptext-min-height: var(--system-help-text-size-xl-min-height); + --spectrum-helptext-icon-size: var(--system-help-text-size-xl-icon-size); + --spectrum-helptext-font-size: var(--system-help-text-size-xl-font-size); + --spectrum-helptext-text-to-visual: var(--system-help-text-size-xl-text-to-visual); + --spectrum-helptext-top-to-workflow-icon: var(--system-help-text-size-xl-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--system-help-text-size-xl-top-to-text); + --spectrum-helptext-bottom-to-text: var(--system-help-text-size-xl-bottom-to-text); } + diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css index 0d690297e2..c85091c51e 100644 --- a/packages/help-text/src/spectrum-help-text.css +++ b/packages/help-text/src/spectrum-help-text.css @@ -1,155 +1,75 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - } + :host { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + } - :host, - .text, - .icon { - forced-color-adjust: none; - } + :host, .text, .icon { + forced-color-adjust: none; + } } :host { - --spectrum-helptext-bottom-to-workflow-icon: var( - --spectrum-helptext-top-to-workflow-icon - ); - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); - font-size: var( - --mod-helptext-font-size, - var(--spectrum-helptext-font-size) - ); - min-block-size: var( - --mod-helptext-min-height, - var(--spectrum-helptext-min-height) - ); - display: flex; + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); + min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); + display: flex; } .icon { - block-size: var( - --mod-helptext-icon-size, - var(--spectrum-helptext-icon-size) - ); - inline-size: var( - --mod-helptext-icon-size, - var(--spectrum-helptext-icon-size) - ); - flex-shrink: 0; - margin-inline-end: var( - --mod-helptext-text-to-visual, - var(--spectrum-helptext-text-to-visual) - ); - padding-block-start: var( - --mod-helptext-top-to-workflow-icon, - var(--spectrum-helptext-top-to-workflow-icon) - ); - padding-block-end: var( - --mod-helptext-bottom-to-workflow-icon, - var(--spectrum-helptext-bottom-to-workflow-icon) - ); + block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + flex-shrink: 0; + margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); + padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); + padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); } .text { - line-height: var( - --mod-helptext-line-height, - var(--spectrum-helptext-line-height) - ); - padding-block-start: var( - --mod-helptext-top-to-text, - var(--spectrum-helptext-top-to-text) - ); - padding-block-end: var( - --mod-helptext-bottom-to-text, - var(--spectrum-helptext-bottom-to-text) - ); + line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); + padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); + padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); } -:host(:lang(ja)) .text, -:host(:lang(ko)) .text, -:host(:lang(zh)) .text { - line-height: var( - --mod-helptext-line-height-cjk, - var(--spectrum-helptext-line-height-cjk) - ); +:host(:lang(ja)) .text, :host(:lang(ko)) .text, :host(:lang(zh)) .text { + line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-helptext-line-height-cjk)); } -:host([variant='neutral']) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); +:host([variant="neutral"]) .text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } -:host([variant='neutral']) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); +:host([variant="neutral"]) .icon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); } -:host([variant='negative']) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); +:host([variant="negative"]) .text { + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } -:host([variant='negative']) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); +:host([variant="negative"]) .icon { + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); } :host([disabled]) .text { - color: var( - --highcontrast-helptext-content-color-default, - var( - --mod-helptext-content-color-default, - var(--spectrum-helptext-content-color-default) - ) - ); + color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } :host([disabled]) .icon { - color: var( - --highcontrast-helptext-icon-color-default, - var( - --mod-helptext-icon-color-default, - var(--spectrum-helptext-icon-color-default) - ) - ); + color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); } + diff --git a/packages/icon/src/icon-arrow-overrides.css b/packages/icon/src/icon-arrow-overrides.css index b1d2cc010a..1cb0209074 100644 --- a/packages/icon/src/icon-arrow-overrides.css +++ b/packages/icon/src/icon-arrow-overrides.css @@ -1,124 +1,125 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-ArrowRight75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-75-icon-size); } .spectrum-UIIcon-ArrowRight100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-100-icon-size); } .spectrum-UIIcon-ArrowRight200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-200-icon-size); } .spectrum-UIIcon-ArrowRight300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-300-icon-size); } .spectrum-UIIcon-ArrowRight400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-400-icon-size); } .spectrum-UIIcon-ArrowRight500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-500-icon-size); } .spectrum-UIIcon-ArrowRight600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-right-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-right-600-icon-size); } .spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-75-icon-size); } .spectrum-UIIcon-ArrowDown100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-100-icon-size); } .spectrum-UIIcon-ArrowDown200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-200-icon-size); } .spectrum-UIIcon-ArrowDown300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-300-icon-size); } .spectrum-UIIcon-ArrowDown400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-400-icon-size); } .spectrum-UIIcon-ArrowDown500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-500-icon-size); } .spectrum-UIIcon-ArrowDown600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-down-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-down-600-icon-size); } .spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-75-icon-size); } .spectrum-UIIcon-ArrowLeft100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-100-icon-size); } .spectrum-UIIcon-ArrowLeft200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-200-icon-size); } .spectrum-UIIcon-ArrowLeft300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-300-icon-size); } .spectrum-UIIcon-ArrowLeft400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-400-icon-size); } .spectrum-UIIcon-ArrowLeft500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-500-icon-size); } .spectrum-UIIcon-ArrowLeft600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-left-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-left-600-icon-size); } .spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-75-icon-size); } .spectrum-UIIcon-ArrowUp100 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-100-icon-size); } .spectrum-UIIcon-ArrowUp200 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-200-icon-size); } .spectrum-UIIcon-ArrowUp300 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-300-icon-size); } .spectrum-UIIcon-ArrowUp400 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-400-icon-size); } .spectrum-UIIcon-ArrowUp500 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-500-icon-size); } .spectrum-UIIcon-ArrowUp600 { - --spectrum-icon-size: var(--system-ui-icon-arrow-up-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-arrow-up-600-icon-size); } + diff --git a/packages/icon/src/icon-asterisk-overrides.css b/packages/icon/src/icon-asterisk-overrides.css index 42f2598a55..700889c273 100644 --- a/packages/icon/src/icon-asterisk-overrides.css +++ b/packages/icon/src/icon-asterisk-overrides.css @@ -1,28 +1,29 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Asterisk75 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-75-icon-size); } .spectrum-UIIcon-Asterisk100 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-100-icon-size); } .spectrum-UIIcon-Asterisk200 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-200-icon-size); } .spectrum-UIIcon-Asterisk300 { - --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-asterisk-300-icon-size); } + diff --git a/packages/icon/src/icon-checkmark-overrides.css b/packages/icon/src/icon-checkmark-overrides.css index 4699741aa1..79ab222831 100644 --- a/packages/icon/src/icon-checkmark-overrides.css +++ b/packages/icon/src/icon-checkmark-overrides.css @@ -1,44 +1,45 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Checkmark50 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-50-icon-size); } .spectrum-UIIcon-Checkmark75 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-75-icon-size); } .spectrum-UIIcon-Checkmark100 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-100-icon-size); } .spectrum-UIIcon-Checkmark200 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-200-icon-size); } .spectrum-UIIcon-Checkmark300 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-300-icon-size); } .spectrum-UIIcon-Checkmark400 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-400-icon-size); } .spectrum-UIIcon-Checkmark500 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-500-icon-size); } .spectrum-UIIcon-Checkmark600 { - --spectrum-icon-size: var(--system-ui-icon-checkmark-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-checkmark-600-icon-size); } + diff --git a/packages/icon/src/icon-chevron-overrides.css b/packages/icon/src/icon-chevron-overrides.css index d76e556c3c..47b6604b19 100644 --- a/packages/icon/src/icon-chevron-overrides.css +++ b/packages/icon/src/icon-chevron-overrides.css @@ -1,124 +1,125 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-ChevronRight50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-50-icon-size); } .spectrum-UIIcon-ChevronDown50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-50-icon-size); } .spectrum-UIIcon-ChevronRight75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-75-icon-size); } .spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-75-icon-size); } .spectrum-UIIcon-ChevronRight100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-100-icon-size); } .spectrum-UIIcon-ChevronDown100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-100-icon-size); } .spectrum-UIIcon-ChevronRight200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-200-icon-size); } .spectrum-UIIcon-ChevronDown200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-200-icon-size); } .spectrum-UIIcon-ChevronRight300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-300-icon-size); } .spectrum-UIIcon-ChevronDown300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-300-icon-size); } .spectrum-UIIcon-ChevronRight400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-400-icon-size); } .spectrum-UIIcon-ChevronDown400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-400-icon-size); } .spectrum-UIIcon-ChevronRight500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-right-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-right-500-icon-size); } .spectrum-UIIcon-ChevronDown500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-down-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-down-500-icon-size); } .spectrum-UIIcon-ChevronLeft50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-50-icon-size); } .spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-75-icon-size); } .spectrum-UIIcon-ChevronLeft100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-100-icon-size); } .spectrum-UIIcon-ChevronLeft200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-200-icon-size); } .spectrum-UIIcon-ChevronLeft300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-300-icon-size); } .spectrum-UIIcon-ChevronLeft400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-400-icon-size); } .spectrum-UIIcon-ChevronLeft500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-left-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-left-500-icon-size); } .spectrum-UIIcon-ChevronUp50 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-50-icon-size); } .spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-75-icon-size); } .spectrum-UIIcon-ChevronUp100 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-100-icon-size); } .spectrum-UIIcon-ChevronUp200 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-200-icon-size); } .spectrum-UIIcon-ChevronUp300 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-300-icon-size); } .spectrum-UIIcon-ChevronUp400 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-400-icon-size); } .spectrum-UIIcon-ChevronUp500 { - --spectrum-icon-size: var(--system-ui-icon-chevron-up-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-chevron-up-500-icon-size); } + diff --git a/packages/icon/src/icon-corner-triangle-overrides.css b/packages/icon/src/icon-corner-triangle-overrides.css index 7e47ee9842..3e25befcec 100644 --- a/packages/icon/src/icon-corner-triangle-overrides.css +++ b/packages/icon/src/icon-corner-triangle-overrides.css @@ -1,28 +1,29 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-CornerTriangle75 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-75-icon-size); } .spectrum-UIIcon-CornerTriangle100 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-100-icon-size); } .spectrum-UIIcon-CornerTriangle200 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-200-icon-size); } .spectrum-UIIcon-CornerTriangle300 { - --spectrum-icon-size: var(--system-ui-icon-corner-triangle-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-corner-triangle-300-icon-size); } + diff --git a/packages/icon/src/icon-cross-overrides.css b/packages/icon/src/icon-cross-overrides.css index 06559077a7..7c429bcc84 100644 --- a/packages/icon/src/icon-cross-overrides.css +++ b/packages/icon/src/icon-cross-overrides.css @@ -1,40 +1,41 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Cross75 { - --spectrum-icon-size: var(--system-ui-icon-cross-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-75-icon-size); } .spectrum-UIIcon-Cross100 { - --spectrum-icon-size: var(--system-ui-icon-cross-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-100-icon-size); } .spectrum-UIIcon-Cross200 { - --spectrum-icon-size: var(--system-ui-icon-cross-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-200-icon-size); } .spectrum-UIIcon-Cross300 { - --spectrum-icon-size: var(--system-ui-icon-cross-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-300-icon-size); } .spectrum-UIIcon-Cross400 { - --spectrum-icon-size: var(--system-ui-icon-cross-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-400-icon-size); } .spectrum-UIIcon-Cross500 { - --spectrum-icon-size: var(--system-ui-icon-cross-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-500-icon-size); } .spectrum-UIIcon-Cross600 { - --spectrum-icon-size: var(--system-ui-icon-cross-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-cross-600-icon-size); } + diff --git a/packages/icon/src/icon-dash-overrides.css b/packages/icon/src/icon-dash-overrides.css index 12639daa00..83c1a5b299 100644 --- a/packages/icon/src/icon-dash-overrides.css +++ b/packages/icon/src/icon-dash-overrides.css @@ -1,44 +1,45 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-UIIcon-Dash50 { - --spectrum-icon-size: var(--system-ui-icon-dash-50-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-50-icon-size); } .spectrum-UIIcon-Dash75 { - --spectrum-icon-size: var(--system-ui-icon-dash-75-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-75-icon-size); } .spectrum-UIIcon-Dash100 { - --spectrum-icon-size: var(--system-ui-icon-dash-100-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-100-icon-size); } .spectrum-UIIcon-Dash200 { - --spectrum-icon-size: var(--system-ui-icon-dash-200-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-200-icon-size); } .spectrum-UIIcon-Dash300 { - --spectrum-icon-size: var(--system-ui-icon-dash-300-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-300-icon-size); } .spectrum-UIIcon-Dash400 { - --spectrum-icon-size: var(--system-ui-icon-dash-400-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-400-icon-size); } .spectrum-UIIcon-Dash500 { - --spectrum-icon-size: var(--system-ui-icon-dash-500-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-500-icon-size); } .spectrum-UIIcon-Dash600 { - --spectrum-icon-size: var(--system-ui-icon-dash-600-icon-size); + --spectrum-icon-size: var(--system-ui-icon-dash-600-icon-size); } + diff --git a/packages/icon/src/icon-overrides.css b/packages/icon/src/icon-overrides.css index c32a701611..b67937e865 100644 --- a/packages/icon/src/icon-overrides.css +++ b/packages/icon/src/icon-overrides.css @@ -1,22 +1,23 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-icon-size-xxs: var(--system-icon-size-xxs); - --spectrum-icon-size-xs: var(--system-icon-size-xs); - --spectrum-icon-size-s: var(--system-icon-size-s); - --spectrum-icon-size-m: var(--system-icon-size-m); - --spectrum-icon-size-l: var(--system-icon-size-l); - --spectrum-icon-size-xl: var(--system-icon-size-xl); - --spectrum-icon-size-xxl: var(--system-icon-size-xxl); + --spectrum-icon-size-xxs: var(--system-icon-size-xxs); + --spectrum-icon-size-xs: var(--system-icon-size-xs); + --spectrum-icon-size-s: var(--system-icon-size-s); + --spectrum-icon-size-m: var(--system-icon-size-m); + --spectrum-icon-size-l: var(--system-icon-size-l); + --spectrum-icon-size-xl: var(--system-icon-size-xl); + --spectrum-icon-size-xxl: var(--system-icon-size-xxl); } + diff --git a/packages/icon/src/spectrum-icon-arrow.css b/packages/icon/src/spectrum-icon-arrow.css index d62ee2485d..f36dd05bd2 100644 --- a/packages/icon/src/spectrum-icon-arrow.css +++ b/packages/icon/src/spectrum-icon-arrow.css @@ -1,42 +1,25 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-ArrowDown100, -.spectrum-UIIcon-ArrowDown200, -.spectrum-UIIcon-ArrowDown300, -.spectrum-UIIcon-ArrowDown400, -.spectrum-UIIcon-ArrowDown500, -.spectrum-UIIcon-ArrowDown600, -.spectrum-UIIcon-ArrowDown75 { - --spectrum-icon-transform: rotate(90deg); +.spectrum-UIIcon-ArrowDown100, .spectrum-UIIcon-ArrowDown200, .spectrum-UIIcon-ArrowDown300, .spectrum-UIIcon-ArrowDown400, .spectrum-UIIcon-ArrowDown500, .spectrum-UIIcon-ArrowDown600, .spectrum-UIIcon-ArrowDown75 { + --spectrum-icon-transform: rotate(90deg); } -.spectrum-UIIcon-ArrowLeft100, -.spectrum-UIIcon-ArrowLeft200, -.spectrum-UIIcon-ArrowLeft300, -.spectrum-UIIcon-ArrowLeft400, -.spectrum-UIIcon-ArrowLeft500, -.spectrum-UIIcon-ArrowLeft600, -.spectrum-UIIcon-ArrowLeft75 { - --spectrum-icon-transform: rotate(180deg); +.spectrum-UIIcon-ArrowLeft100, .spectrum-UIIcon-ArrowLeft200, .spectrum-UIIcon-ArrowLeft300, .spectrum-UIIcon-ArrowLeft400, .spectrum-UIIcon-ArrowLeft500, .spectrum-UIIcon-ArrowLeft600, .spectrum-UIIcon-ArrowLeft75 { + --spectrum-icon-transform: rotate(180deg); } -.spectrum-UIIcon-ArrowUp100, -.spectrum-UIIcon-ArrowUp200, -.spectrum-UIIcon-ArrowUp300, -.spectrum-UIIcon-ArrowUp400, -.spectrum-UIIcon-ArrowUp500, -.spectrum-UIIcon-ArrowUp600, -.spectrum-UIIcon-ArrowUp75 { - --spectrum-icon-transform: rotate(270deg); +.spectrum-UIIcon-ArrowUp100, .spectrum-UIIcon-ArrowUp200, .spectrum-UIIcon-ArrowUp300, .spectrum-UIIcon-ArrowUp400, .spectrum-UIIcon-ArrowUp500, .spectrum-UIIcon-ArrowUp600, .spectrum-UIIcon-ArrowUp75 { + --spectrum-icon-transform: rotate(270deg); } + diff --git a/packages/icon/src/spectrum-icon-asterisk.css b/packages/icon/src/spectrum-icon-asterisk.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-asterisk.css +++ b/packages/icon/src/spectrum-icon-asterisk.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-checkmark.css b/packages/icon/src/spectrum-icon-checkmark.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-checkmark.css +++ b/packages/icon/src/spectrum-icon-checkmark.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-chevron.css b/packages/icon/src/spectrum-icon-chevron.css index acf07d2c95..f06abef79d 100644 --- a/packages/icon/src/spectrum-icon-chevron.css +++ b/packages/icon/src/spectrum-icon-chevron.css @@ -1,42 +1,25 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -.spectrum-UIIcon-ChevronDown100, -.spectrum-UIIcon-ChevronDown200, -.spectrum-UIIcon-ChevronDown300, -.spectrum-UIIcon-ChevronDown400, -.spectrum-UIIcon-ChevronDown50, -.spectrum-UIIcon-ChevronDown500, -.spectrum-UIIcon-ChevronDown75 { - --spectrum-icon-transform: rotate(90deg); +.spectrum-UIIcon-ChevronDown100, .spectrum-UIIcon-ChevronDown200, .spectrum-UIIcon-ChevronDown300, .spectrum-UIIcon-ChevronDown400, .spectrum-UIIcon-ChevronDown50, .spectrum-UIIcon-ChevronDown500, .spectrum-UIIcon-ChevronDown75 { + --spectrum-icon-transform: rotate(90deg); } -.spectrum-UIIcon-ChevronLeft100, -.spectrum-UIIcon-ChevronLeft200, -.spectrum-UIIcon-ChevronLeft300, -.spectrum-UIIcon-ChevronLeft400, -.spectrum-UIIcon-ChevronLeft50, -.spectrum-UIIcon-ChevronLeft500, -.spectrum-UIIcon-ChevronLeft75 { - --spectrum-icon-transform: rotate(180deg); +.spectrum-UIIcon-ChevronLeft100, .spectrum-UIIcon-ChevronLeft200, .spectrum-UIIcon-ChevronLeft300, .spectrum-UIIcon-ChevronLeft400, .spectrum-UIIcon-ChevronLeft50, .spectrum-UIIcon-ChevronLeft500, .spectrum-UIIcon-ChevronLeft75 { + --spectrum-icon-transform: rotate(180deg); } -.spectrum-UIIcon-ChevronUp100, -.spectrum-UIIcon-ChevronUp200, -.spectrum-UIIcon-ChevronUp300, -.spectrum-UIIcon-ChevronUp400, -.spectrum-UIIcon-ChevronUp50, -.spectrum-UIIcon-ChevronUp500, -.spectrum-UIIcon-ChevronUp75 { - --spectrum-icon-transform: rotate(270deg); +.spectrum-UIIcon-ChevronUp100, .spectrum-UIIcon-ChevronUp200, .spectrum-UIIcon-ChevronUp300, .spectrum-UIIcon-ChevronUp400, .spectrum-UIIcon-ChevronUp50, .spectrum-UIIcon-ChevronUp500, .spectrum-UIIcon-ChevronUp75 { + --spectrum-icon-transform: rotate(270deg); } + diff --git a/packages/icon/src/spectrum-icon-corner-triangle.css b/packages/icon/src/spectrum-icon-corner-triangle.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-corner-triangle.css +++ b/packages/icon/src/spectrum-icon-corner-triangle.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-cross.css b/packages/icon/src/spectrum-icon-cross.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-cross.css +++ b/packages/icon/src/spectrum-icon-cross.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-dash.css b/packages/icon/src/spectrum-icon-dash.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-dash.css +++ b/packages/icon/src/spectrum-icon-dash.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-double-gripper.css b/packages/icon/src/spectrum-icon-double-gripper.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-double-gripper.css +++ b/packages/icon/src/spectrum-icon-double-gripper.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-single-gripper.css b/packages/icon/src/spectrum-icon-single-gripper.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-single-gripper.css +++ b/packages/icon/src/spectrum-icon-single-gripper.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon-triple-gripper.css b/packages/icon/src/spectrum-icon-triple-gripper.css index b1cee0dbcd..c5babb250d 100644 --- a/packages/icon/src/spectrum-icon-triple-gripper.css +++ b/packages/icon/src/spectrum-icon-triple-gripper.css @@ -1,13 +1,15 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ + + diff --git a/packages/icon/src/spectrum-icon.css b/packages/icon/src/spectrum-icon.css index b52ba87ce3..59566b737d 100644 --- a/packages/icon/src/spectrum-icon.css +++ b/packages/icon/src/spectrum-icon.css @@ -1,76 +1,63 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - transform: none; - transform: var(--spectrum-icon-transform, none); - inline-size: var( - --mod-icon-inline-size, - var(--mod-icon-size, var(--spectrum-icon-size)) - ); - block-size: var( - --mod-icon-block-size, - var(--mod-icon-size, var(--spectrum-icon-size)) - ); - color: inherit; - color: var(--mod-icon-color, inherit); - fill: currentColor; - display: inline-block; + pointer-events: none; + transform: none; + transform: var(--spectrum-icon-transform, none); + inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); + block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); + color: inherit; + color: var(--mod-icon-color, inherit); + fill: currentColor; + display: inline-block; } -:host([size='xxs']), -:host([size='xxs']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xxs); +:host([size="xxs"]), :host([size="xxs"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxs); } -:host([size='xs']), -:host([size='xs']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xs); +:host([size="xs"]), :host([size="xs"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xs); } -:host([size='s']), -:host([size='s']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-s); +:host([size="s"]), :host([size="s"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-s); } -:host, -:host([size='m']), -:host([size='m']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-m); +:host, :host([size="m"]), :host([size="m"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-m); } -:host([size='l']), -:host([size='l']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-l); +:host([size="l"]), :host([size="l"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-l); } -:host([size='xl']), -:host([size='xl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xl); +:host([size="xl"]), :host([size="xl"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xl); } -:host([size='xxl']), -:host([size='xxl']) .spectrum-UIIcon { - --spectrum-icon-size: var(--spectrum-icon-size-xxl); +:host([size="xxl"]), :host([size="xxl"]) .spectrum-UIIcon { + --spectrum-icon-size: var(--spectrum-icon-size-xxl); } :host(:not(:root)) { - overflow: hidden; + overflow: hidden; } @media (forced-colors: active) { - :host { - forced-color-adjust: auto; - } + :host { + forced-color-adjust: auto; + } } + diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index 13e31597c6..abacfaffd9 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -1,13 +1 @@ -/* -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. -*/ -import { svg } from '@spectrum-web-components/base'; -export default svg``; +import { svg } from '@spectrum-web-components/base'; export default svg``; \ No newline at end of file diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index 3a33433d1e..f49351f19b 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -1,13 +1 @@ -/* -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. -*/ -import { svg } from '@spectrum-web-components/base'; -export default svg``; +import { svg } from '@spectrum-web-components/base'; export default svg``; \ No newline at end of file diff --git a/packages/illustrated-message/src/illustratedmessage-overrides.css b/packages/illustrated-message/src/illustratedmessage-overrides.css index 84d0ba1548..a56ec651ae 100644 --- a/packages/illustrated-message/src/illustratedmessage-overrides.css +++ b/packages/illustrated-message/src/illustratedmessage-overrides.css @@ -1,87 +1,46 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-illustrated-message-description-max-inline-size: var( - --system-illustrated-message-description-max-inline-size - ); - --spectrum-illustrated-message-heading-max-inline-size: var( - --system-illustrated-message-heading-max-inline-size - ); - --spectrum-illustrated-message-title-to-heading: var( - --system-illustrated-message-title-to-heading - ); - --spectrum-illustrated-message-heading-to-description: var( - --system-illustrated-message-heading-to-description - ); - --spectrum-illustrated-message-illustration-color: var( - --system-illustrated-message-illustration-color - ); - --spectrum-illustrated-message-illustration-accent-color: var( - --system-illustrated-message-illustration-accent-color - ); - --spectrum-illustrated-message-title-font-family: var( - --system-illustrated-message-title-font-family - ); - --spectrum-illustrated-message-title-font-weight: var( - --system-illustrated-message-title-font-weight - ); - --spectrum-illustrated-message-title-font-style: var( - --system-illustrated-message-title-font-style - ); - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-title-font-size - ); - --spectrum-illustrated-message-title-line-height: var( - --system-illustrated-message-title-line-height - ); - --spectrum-illustrated-message-title-color: var( - --system-illustrated-message-title-color - ); - --spectrum-illustrated-message-description-font-family: var( - --system-illustrated-message-description-font-family - ); - --spectrum-illustrated-message-description-font-weight: var( - --system-illustrated-message-description-font-weight - ); - --spectrum-illustrated-message-description-font-style: var( - --system-illustrated-message-description-font-style - ); - --spectrum-illustrated-message-description-font-size: var( - --system-illustrated-message-description-font-size - ); - --spectrum-illustrated-message-description-line-height: var( - --system-illustrated-message-description-line-height - ); - --spectrum-illustrated-message-description-color: var( - --system-illustrated-message-description-color - ); + --spectrum-illustrated-message-description-max-inline-size: var(--system-illustrated-message-description-max-inline-size); + --spectrum-illustrated-message-heading-max-inline-size: var(--system-illustrated-message-heading-max-inline-size); + --spectrum-illustrated-message-title-to-heading: var(--system-illustrated-message-title-to-heading); + --spectrum-illustrated-message-heading-to-description: var(--system-illustrated-message-heading-to-description); + --spectrum-illustrated-message-illustration-color: var(--system-illustrated-message-illustration-color); + --spectrum-illustrated-message-illustration-accent-color: var(--system-illustrated-message-illustration-accent-color); + --spectrum-illustrated-message-title-font-family: var(--system-illustrated-message-title-font-family); + --spectrum-illustrated-message-title-font-weight: var(--system-illustrated-message-title-font-weight); + --spectrum-illustrated-message-title-font-style: var(--system-illustrated-message-title-font-style); + --spectrum-illustrated-message-title-font-size: var(--system-illustrated-message-title-font-size); + --spectrum-illustrated-message-title-line-height: var(--system-illustrated-message-title-line-height); + --spectrum-illustrated-message-title-color: var(--system-illustrated-message-title-color); + --spectrum-illustrated-message-description-font-family: var(--system-illustrated-message-description-font-family); + --spectrum-illustrated-message-description-font-weight: var(--system-illustrated-message-description-font-weight); + --spectrum-illustrated-message-description-font-style: var(--system-illustrated-message-description-font-style); + --spectrum-illustrated-message-description-font-size: var(--system-illustrated-message-description-font-size); + --spectrum-illustrated-message-description-line-height: var(--system-illustrated-message-description-line-height); + --spectrum-illustrated-message-description-color: var(--system-illustrated-message-description-color); } :host:lang(ja) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-ja-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var(--system-illustrated-message-lang-ja-title-font-size); } :host:lang(zh) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-zh-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var(--system-illustrated-message-lang-zh-title-font-size); } :host:lang(ko) { - --spectrum-illustrated-message-title-font-size: var( - --system-illustrated-message-lang-ko-title-font-size - ); + --spectrum-illustrated-message-title-font-size: var(--system-illustrated-message-lang-ko-title-font-size); } + diff --git a/packages/illustrated-message/src/spectrum-illustratedmessage.css b/packages/illustrated-message/src/spectrum-illustratedmessage.css index 09dba3c683..5f76b48578 100644 --- a/packages/illustrated-message/src/spectrum-illustratedmessage.css +++ b/packages/illustrated-message/src/spectrum-illustratedmessage.css @@ -1,136 +1,74 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } + :host { + --highcontrast-illustrated-message-illustration-color: CanvasText; + --highcontrast-illustrated-message-illustration-accent-color: Highlight; + } } :host { - block-size: 100%; - display: flex; - display: var(--mod-illustrated-message-display, flex); - text-align: center; - pointer-events: auto; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); - flex-direction: column; - justify-content: center; - align-items: center; + block-size: 100%; + display: flex; + display: var(--mod-illustrated-message-display, flex); + text-align: center; + pointer-events: auto; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-content-maximum-width); + flex-direction: column; + justify-content: center; + align-items: center; } #illustration { - color: var( - --highcontrast-illustrated-message-illustration-color, - var( - --mod-illustrated-message-illustration-color, - var(--spectrum-illustrated-message-illustration-color) - ) - ); - fill: currentColor; - stroke: currentColor; - margin-block-end: var( - --mod-illustrated-message-title-to-heading, - var(--spectrum-illustrated-message-title-to-heading) - ); + color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); + fill: currentColor; + stroke: currentColor; + margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); } .spectrum-IllustratedMessage-accent { - color: var( - --highcontrast-illustrated-message-illustration-accent-color, - var( - --mod-illustrated-message-illustration-accent-color, - var(--spectrum-illustrated-message-illustration-accent-color) - ) - ); - fill: currentColor; - stroke: currentColor; + color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); + fill: currentColor; + stroke: currentColor; } #heading { - font-family: var( - --mod-illustrated-message-title-font-family, - var(--spectrum-illustrated-message-title-font-family) - ); - font-weight: var( - --mod-illustrated-message-title-font-weight, - var(--spectrum-illustrated-message-title-font-weight) - ); - font-style: var( - --mod-illustrated-message-title-font-style, - var(--spectrum-illustrated-message-title-font-style) - ); - font-size: var( - --mod-illustrated-message-title-font-size, - var(--spectrum-illustrated-message-title-font-size) - ); - line-height: var( - --mod-illustrated-message-title-line-height, - var(--spectrum-illustrated-message-title-line-height) - ); - color: var( - --mod-illustrated-message-title-color, - var(--spectrum-illustrated-message-title-color) - ); - max-inline-size: var( - --mod-illustrated-message-heading-max-inline-size, - var(--spectrum-illustrated-message-heading-max-inline-size) - ); - margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + font-family: var(--mod-illustrated-message-title-font-family, var(--spectrum-illustrated-message-title-font-family)); + font-weight: var(--mod-illustrated-message-title-font-weight, var(--spectrum-illustrated-message-title-font-weight)); + font-style: var(--mod-illustrated-message-title-font-style, var(--spectrum-illustrated-message-title-font-style)); + font-size: var(--mod-illustrated-message-title-font-size, var(--spectrum-illustrated-message-title-font-size)); + line-height: var(--mod-illustrated-message-title-line-height, var(--spectrum-illustrated-message-title-line-height)); + color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); + max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); + margin-block-start: 0; + margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); } #description { - position: var(--mod-illustrated-message-description-position); - z-index: var(--mod-illustrated-message-description-z-index); - pointer-events: auto; - pointer-events: var( - --mod-illustrated-message-description-pointer-events, - auto - ); - font-family: var( - --mod-illustrated-message-description-font-family, - var(--spectrum-illustrated-message-description-font-family) - ); - font-weight: var( - --mod-illustrated-message-description-font-weight, - var(--spectrum-illustrated-message-description-font-weight) - ); - font-style: var( - --mod-illustrated-message-description-font-style, - var(--spectrum-illustrated-message-description-font-style) - ); - font-size: var( - --mod-illustrated-message-description-font-size, - var(--spectrum-illustrated-message-description-font-size) - ); - line-height: var( - --mod-illustrated-message-description-line-height, - var(--spectrum-illustrated-message-description-line-height) - ); - color: var( - --mod-illustrated-message-description-color, - var(--spectrum-illustrated-message-description-color) - ); - max-inline-size: var( - --mod-illustrated-message-description-max-inline-size, - var(--spectrum-illustrated-message-description-max-inline-size) - ); - margin-block-start: var( - --mod-illustrated-message-heading-to-description, - var(--spectrum-illustrated-message-heading-to-description) - ); - margin-block-end: 0; + position: var(--mod-illustrated-message-description-position); + z-index: var(--mod-illustrated-message-description-z-index); + pointer-events: auto; + pointer-events: var(--mod-illustrated-message-description-pointer-events, auto); + font-family: var(--mod-illustrated-message-description-font-family, var(--spectrum-illustrated-message-description-font-family)); + font-weight: var(--mod-illustrated-message-description-font-weight, var(--spectrum-illustrated-message-description-font-weight)); + font-style: var(--mod-illustrated-message-description-font-style, var(--spectrum-illustrated-message-description-font-style)); + font-size: var(--mod-illustrated-message-description-font-size, var(--spectrum-illustrated-message-description-font-size)); + line-height: var(--mod-illustrated-message-description-line-height, var(--spectrum-illustrated-message-description-line-height)); + color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); + max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); + margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); + margin-block-end: 0; } + diff --git a/packages/infield-button/src/infield-button-overrides.css b/packages/infield-button/src/infield-button-overrides.css index dedc98e33f..70b5fcefd0 100644 --- a/packages/infield-button/src/infield-button-overrides.css +++ b/packages/infield-button/src/infield-button-overrides.css @@ -1,235 +1,122 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-infield-button-border-width: var( - --system-infield-button-border-width - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-border-color - ); - --spectrum-infield-button-border-radius: var( - --system-infield-button-border-radius - ); - --spectrum-infield-button-border-radius-reset: var( - --system-infield-button-border-radius-reset - ); - --spectrum-infield-button-stacked-top-border-radius-start-start: var( - --system-infield-button-stacked-top-border-radius-start-start - ); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var( - --system-infield-button-stacked-bottom-border-radius-end-start - ); - --spectrum-infield-button-background-color: var( - --system-infield-button-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-background-color-down - ); - --spectrum-infield-button-background-color-key-focus: var( - --system-infield-button-background-color-key-focus - ); - --spectrum-infield-button-height: var(--system-infield-button-height); - --spectrum-infield-button-width: var(--system-infield-button-width); - --spectrum-infield-button-stacked-border-radius-reset: var( - --system-infield-button-stacked-border-radius-reset - ); - --spectrum-infield-button-edge-to-fill: var( - --system-infield-button-edge-to-fill - ); - --spectrum-infield-button-inner-edge-to-fill: var( - --system-infield-button-inner-edge-to-fill - ); - --spectrum-infield-button-fill-padding: var( - --system-infield-button-fill-padding - ); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-stacked-fill-padding-inner - ); - --spectrum-infield-button-animation-duration: var( - --system-infield-button-animation-duration - ); - --spectrum-infield-button-icon-color: var( - --system-infield-button-icon-color - ); - --spectrum-infield-button-icon-color-hover: var( - --system-infield-button-icon-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --system-infield-button-icon-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --system-infield-button-icon-color-key-focus - ); - --spectrum-infield-button-fill-justify-content: var( - --system-infield-button-fill-justify-content - ); + --spectrum-infield-button-border-width: var(--system-infield-button-border-width); + --spectrum-infield-button-border-color: var(--system-infield-button-border-color); + --spectrum-infield-button-border-radius: var(--system-infield-button-border-radius); + --spectrum-infield-button-border-radius-reset: var(--system-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--system-infield-button-stacked-top-border-radius-start-start); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--system-infield-button-stacked-bottom-border-radius-end-start); + --spectrum-infield-button-background-color: var(--system-infield-button-background-color); + --spectrum-infield-button-background-color-hover: var(--system-infield-button-background-color-hover); + --spectrum-infield-button-background-color-down: var(--system-infield-button-background-color-down); + --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-background-color-key-focus); + --spectrum-infield-button-height: var(--system-infield-button-height); + --spectrum-infield-button-width: var(--system-infield-button-width); + --spectrum-infield-button-stacked-border-radius-reset: var(--system-infield-button-stacked-border-radius-reset); + --spectrum-infield-button-edge-to-fill: var(--system-infield-button-edge-to-fill); + --spectrum-infield-button-inner-edge-to-fill: var(--system-infield-button-inner-edge-to-fill); + --spectrum-infield-button-fill-padding: var(--system-infield-button-fill-padding); + --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-stacked-fill-padding-inline); + --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-stacked-fill-padding-outer); + --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-stacked-fill-padding-inner); + --spectrum-infield-button-animation-duration: var(--system-infield-button-animation-duration); + --spectrum-infield-button-icon-color: var(--system-infield-button-icon-color); + --spectrum-infield-button-icon-color-hover: var(--system-infield-button-icon-color-hover); + --spectrum-infield-button-icon-color-down: var(--system-infield-button-icon-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--system-infield-button-icon-color-key-focus); + --spectrum-infield-button-fill-justify-content: var(--system-infield-button-fill-justify-content); } :host([disabled]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-disabled-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-disabled-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-disabled-background-color-down - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-disabled-border-color - ); - --spectrum-infield-button-icon-color: var( - --system-infield-button-disabled-icon-color - ); - --spectrum-infield-button-icon-color-hover: var( - --system-infield-button-disabled-icon-color-hover - ); - --spectrum-infield-button-icon-color-down: var( - --system-infield-button-disabled-icon-color-down - ); - --spectrum-infield-button-icon-color-key-focus: var( - --system-infield-button-disabled-icon-color-key-focus - ); + --spectrum-infield-button-background-color: var(--system-infield-button-disabled-background-color); + --spectrum-infield-button-background-color-hover: var(--system-infield-button-disabled-background-color-hover); + --spectrum-infield-button-background-color-down: var(--system-infield-button-disabled-background-color-down); + --spectrum-infield-button-border-color: var(--system-infield-button-disabled-border-color); + --spectrum-infield-button-icon-color: var(--system-infield-button-disabled-icon-color); + --spectrum-infield-button-icon-color-hover: var(--system-infield-button-disabled-icon-color-hover); + --spectrum-infield-button-icon-color-down: var(--system-infield-button-disabled-icon-color-down); + --spectrum-infield-button-icon-color-key-focus: var(--system-infield-button-disabled-icon-color-key-focus); } -:host([size='s']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-s-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-s-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-s-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-s-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-s-stacked-fill-padding-inner - ); +:host([size="s"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-s-height); + --spectrum-infield-button-width: var(--system-infield-button-size-s-width); + --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-s-stacked-fill-padding-inline); + --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-s-stacked-fill-padding-outer); + --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-s-stacked-fill-padding-inner); } -:host([size='l']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-l-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-l-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-l-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-l-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-l-stacked-fill-padding-inner - ); +:host([size="l"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-l-height); + --spectrum-infield-button-width: var(--system-infield-button-size-l-width); + --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-l-stacked-fill-padding-inline); + --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-l-stacked-fill-padding-outer); + --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-l-stacked-fill-padding-inner); } -:host([size='xl']) { - --spectrum-infield-button-height: var( - --system-infield-button-size-xl-height - ); - --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); - --spectrum-infield-button-stacked-fill-padding-inline: var( - --system-infield-button-size-xl-stacked-fill-padding-inline - ); - --spectrum-infield-button-stacked-fill-padding-outer: var( - --system-infield-button-size-xl-stacked-fill-padding-outer - ); - --spectrum-infield-button-stacked-fill-padding-inner: var( - --system-infield-button-size-xl-stacked-fill-padding-inner - ); +:host([size="xl"]) { + --spectrum-infield-button-height: var(--system-infield-button-size-xl-height); + --spectrum-infield-button-width: var(--system-infield-button-size-xl-width); + --spectrum-infield-button-stacked-fill-padding-inline: var(--system-infield-button-size-xl-stacked-fill-padding-inline); + --spectrum-infield-button-stacked-fill-padding-outer: var(--system-infield-button-size-xl-stacked-fill-padding-outer); + --spectrum-infield-button-stacked-fill-padding-inner: var(--system-infield-button-size-xl-stacked-fill-padding-inner); } -:host([block='start']) { - --spectrum-infield-button-width: var(--system-infield-button-top-width); +:host([block="start"]) { + --spectrum-infield-button-width: var(--system-infield-button-top-width); } -:host([block='end']) { - --spectrum-infield-button-width: var(--system-infield-button-bottom-width); +:host([block="end"]) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-width); } -:host([block='start'][size='s']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-s-width - ); +:host([block="start"][size="s"]) { + --spectrum-infield-button-width: var(--system-infield-button-top-size-s-width); } -:host([block='end'][size='s']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-s-width - ); +:host([block="end"][size="s"]) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-size-s-width); } -:host([block='start'][size='l']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-l-width - ); +:host([block="start"][size="l"]) { + --spectrum-infield-button-width: var(--system-infield-button-top-size-l-width); } -:host([block='end'][size='l']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-l-width - ); +:host([block="end"][size="l"]) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-size-l-width); } -:host([block='start'][size='xl']) { - --spectrum-infield-button-width: var( - --system-infield-button-top-size-xl-width - ); +:host([block="start"][size="xl"]) { + --spectrum-infield-button-width: var(--system-infield-button-top-size-xl-width); } -:host([block='end'][size='xl']) { - --spectrum-infield-button-width: var( - --system-infield-button-bottom-size-xl-width - ); +:host([block="end"][size="xl"]) { + --spectrum-infield-button-width: var(--system-infield-button-bottom-size-xl-width); } :host([quiet]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-quiet-background-color - ); - --spectrum-infield-button-background-color-hover: var( - --system-infield-button-quiet-background-color-hover - ); - --spectrum-infield-button-background-color-down: var( - --system-infield-button-quiet-background-color-down - ); - --spectrum-infield-button-background-color-key-focus: var( - --system-infield-button-quiet-background-color-key-focus - ); - --spectrum-infield-border-color: var( - --system-infield-button-quiet-infield-border-color - ); - --spectrum-infield-button-border-width: var( - --system-infield-button-quiet-border-width - ); + --spectrum-infield-button-background-color: var(--system-infield-button-quiet-background-color); + --spectrum-infield-button-background-color-hover: var(--system-infield-button-quiet-background-color-hover); + --spectrum-infield-button-background-color-down: var(--system-infield-button-quiet-background-color-down); + --spectrum-infield-button-background-color-key-focus: var(--system-infield-button-quiet-background-color-key-focus); + --spectrum-infield-border-color: var(--system-infield-button-quiet-infield-border-color); + --spectrum-infield-button-border-width: var(--system-infield-button-quiet-border-width); } :host([quiet][disabled]) { - --spectrum-infield-button-background-color: var( - --system-infield-button-quiet-disabled-background-color - ); - --spectrum-infield-button-border-color: var( - --system-infield-button-quiet-disabled-border-color - ); + --spectrum-infield-button-background-color: var(--system-infield-button-quiet-disabled-background-color); + --spectrum-infield-button-border-color: var(--system-infield-button-quiet-disabled-border-color); } + diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index 3591774f80..1fd67cf950 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -1,437 +1,186 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host(:is(:active, [active])):not(:disabled), - :host(:focus-visible):not(:disabled) { - --highcontrast-infield-button-border-color: Highlight; - } + :host(:is(:active, [active])):not(:disabled), :host(:focus-visible):not(:disabled) { + --highcontrast-infield-button-border-color: Highlight; + } - @media (hover: hover) { - :host(:hover):not(:disabled) { - --highcontrast-infield-button-border-color: Highlight; - } + @media (hover: hover) { + :host(:hover):not(:disabled) { + --highcontrast-infield-button-border-color: Highlight; } + } } :host { - background-color: initial; - cursor: pointer; - block-size: var( - --mod-infield-button-height, - var(--spectrum-infield-button-height) - ); - inline-size: var( - --mod-infield-button-width, - var(--spectrum-infield-button-width) - ); - padding: var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; + background-color: initial; + cursor: pointer; + block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height)); + inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width)); + padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)); + border-style: none; + justify-content: center; + align-items: center; + display: flex; } .fill { - block-size: 100%; - inline-size: 100%; - background-color: var( - --mod-infield-button-background-color, - var(--spectrum-infield-button-background-color) - ); - border-width: var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ); - border-style: solid; - border-color: var( - --highcontrast-infield-button-border-color, - var( - --mod-infield-button-border-color, - var(--spectrum-infield-button-border-color) - ) - ); - padding: var( - --mod-infield-button-fill-padding, - var(--spectrum-infield-button-fill-padding) - ); - border-start-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-start-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-end-end-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); - border-end-start-radius: var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ); + block-size: 100%; + inline-size: 100%; + background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color)); + border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)); + border-style: solid; + border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))); + padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding)); + border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); } ::slotted(*) { - color: var( - --mod-infield-button-icon-color, - var(--spectrum-infield-button-icon-color) - ); + color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color)); } -:host([inline='end']) .fill { - border-start-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); - border-end-start-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); +:host([inline="end"]) .fill { + border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); + border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); } -:host([inline='start']) .fill { - border-start-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); - border-end-end-radius: var( - --mod-infield-button-border-radius-reset, - var(--spectrum-infield-button-border-radius-reset) - ); +:host([inline="start"]) .fill { + border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); + border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); } -:host([block='end']), -:host([block='start']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-medium) - ); +:host([block="end"]), :host([block="start"]) { + --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); } -:host([block='end'][size='s']), -:host([block='start'][size='s']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-small) - ); +:host([block="end"][size="s"]), :host([block="start"][size="s"]) { + --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); } -:host([block='end'][size='l']), -:host([block='start'][size='l']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-large) - ); +:host([block="end"][size="l"]), :host([block="start"][size="l"]) { + --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); } -:host([block='end'][size='xl']), -:host([block='start'][size='xl']) { - --spectrum-infield-button-width: var( - --mod-infield-button-width-stacked, - var(--spectrum-in-field-button-width-stacked-extra-large) - ); +:host([block="end"][size="xl"]), :host([block="start"][size="xl"]) { + --spectrum-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); } :host([quiet]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-quiet, - transparent - ); - --spectrum-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-quiet, - transparent - ); - --spectrum-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-quiet, - transparent - ); - --spectrum-infield-button-background-color-key-focus: var( - --mod-infield-button-background-color-key-focus-quiet, - transparent - ); - --spectrum-infield-border-color: var( - --mod-infield-border-color-quiet, - transparent - ); - --spectrum-infield-button-border-width: var( - --mod-infield-button-border-width-quiet, - 0 - ); + --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); + --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); + --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); + --spectrum-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); + --spectrum-infield-border-color: var(--mod-infield-border-color-quiet, transparent); + --spectrum-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); } :host([quiet][disabled]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-quiet-disabled, - transparent - ); - --spectrum-infield-button-border-color: var( - --mod-infield-button-border-color-quiet-disabled, - transparent - ); + --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); + --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); } :host([disabled]) { - --spectrum-infield-button-background-color: var( - --mod-infield-button-background-color-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-background-color-hover: var( - --mod-infield-button-background-color-hover-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-background-color-down: var( - --mod-infield-button-background-color-down-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-border-color: var( - --mod-infield-button-border-color-disabled, - var(--spectrum-disabled-background-color) - ); - --spectrum-infield-button-icon-color: var( - --mod-infield-button-icon-color-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-hover: var( - --mod-infield-button-icon-color-hover-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-down: var( - --mod-infield-button-icon-color-down-disabled, - var(--spectrum-disabled-content-color) - ); - --spectrum-infield-button-icon-color-key-focus: var( - --mod-infield-button-icon-color-key-focus-disabled, - var(--spectrum-disabled-content-color) - ); - cursor: auto; + --spectrum-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); + --spectrum-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); + --spectrum-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); + --spectrum-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); + --spectrum-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); + --spectrum-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); + cursor: auto; } @media (hover: hover) { - :host(:hover) .fill { - background-color: var( - --mod-infield-button-background-color-hover, - var(--spectrum-infield-button-background-color-hover) - ); - } + :host(:hover) .fill { + background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover)); + } - :host(:hover) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-hover, - var(--spectrum-infield-button-icon-color-hover) - ); - } + :host(:hover) ::slotted(*) { + color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover)); + } } :host(:is(:active, [active])) .fill { - background-color: var( - --mod-infield-button-background-color-down, - var(--spectrum-infield-button-background-color-down) - ); + background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); } :host(:is(:active, [active])) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-down, - var(--spectrum-infield-button-icon-color-down) - ); + color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); } :host(:focus-visible) { - outline: none; + outline: none; } :host(:focus-visible) .fill { - background-color: var( - --mod-infield-button-background-color-key-focus, - var(--spectrum-infield-button-background-color-key-focus) - ); + background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus)); } :host(:focus-visible) ::slotted(*) { - color: var( - --mod-infield-button-icon-color-key-focus, - var(--spectrum-infield-button-icon-color-key-focus) - ); + color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus)); } .fill { - align-items: center; - justify-content: var( - --mod-infield-button-fill-justify-content, - var(--spectrum-infield-button-fill-justify-content) - ); - display: flex; + align-items: center; + justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); + display: flex; } -:host([block='end']), -:host([block='start']) { - block-size: calc( - var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / - 2 - ); +:host([block="end"]), :host([block="start"]) { + block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2); } -:host([block='end']) .fill, -:host([block='start']) .fill { - box-sizing: border-box; - padding-inline-start: calc( - var( - --mod-infield-button-stacked-fill-padding-inline, - var(--spectrum-infield-button-stacked-fill-padding-inline) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-inline-end: calc( - var( - --mod-infield-button-stacked-fill-padding-inline, - var(--spectrum-infield-button-stacked-fill-padding-inline) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); +:host([block="end"]) .fill, :host([block="start"]) .fill { + box-sizing: border-box; + padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); } -:host([block='start']) { - padding-block-end: var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ); +:host([block="start"]) { + padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); } -:host([block='start']) .fill { - border-block-end: none; - border-start-start-radius: var( - --mod-infield-button-stacked-top-border-radius-start-start, - var(--spectrum-infield-button-stacked-top-border-radius-start-start) - ); - border-end-end-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-end-start-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - padding-block-start: calc( - var( - --mod-infield-button-stacked-fill-padding-outer, - var(--spectrum-infield-button-stacked-fill-padding-outer) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-infield-button-stacked-fill-padding-inner, - var(--spectrum-infield-button-stacked-fill-padding-inner) - ) - - var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ) - ); +:host([block="start"]) .fill { + border-block-end: none; + border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start)); + border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill))); } -:host([block='end']) { - padding-block-start: var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ); +:host([block="end"]) { + padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); } -:host([block='end']) .fill { - border-block-end-width: var( - --mod-infield-button-stacked-bottom-border-block-end-width, - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - border-start-start-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-start-end-radius: var( - --mod-infield-button-stacked-border-radius-reset, - var(--spectrum-infield-button-stacked-border-radius-reset) - ); - border-end-end-radius: var( - --mod-infield-button-stacked-bottom-border-radius-end-end, - var( - --mod-infield-button-border-radius, - var(--spectrum-infield-button-border-radius) - ) - ); - border-end-start-radius: var( - --mod-infield-button-stacked-bottom-border-radius-end-start, - var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) - ); - padding-block-start: calc( - var( - --mod-infield-button-stacked-fill-padding-inner, - var(--spectrum-infield-button-stacked-fill-padding-inner) - ) - - var( - --mod-infield-button-edge-to-fill, - var(--spectrum-infield-button-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-infield-button-stacked-fill-padding-outer, - var(--spectrum-infield-button-stacked-fill-padding-outer) - ) - - var( - --mod-infield-button-inner-edge-to-fill, - var(--spectrum-infield-button-inner-edge-to-fill) - ) - - var( - --mod-infield-button-border-width, - var(--spectrum-infield-button-border-width) - ) - ); +:host([block="end"]) .fill { + border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); + border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))); + border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)); + padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); + padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); } ::slotted(*) { - display: initial; - flex-shrink: 0; - margin: 0 !important; + display: initial; + flex-shrink: 0; + margin: 0 !important; } + diff --git a/packages/link/src/link-overrides.css b/packages/link/src/link-overrides.css index e93605aa35..30f92d117e 100644 --- a/packages/link/src/link-overrides.css +++ b/packages/link/src/link-overrides.css @@ -1,42 +1,27 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-link-animation-duration: var(--system-link-animation-duration); - --spectrum-link-text-color-primary-default: var( - --system-link-text-color-primary-default - ); - --spectrum-link-text-color-primary-hover: var( - --system-link-text-color-primary-hover - ); - --spectrum-link-text-color-primary-active: var( - --system-link-text-color-primary-active - ); - --spectrum-link-text-color-primary-focus: var( - --system-link-text-color-primary-focus - ); - --spectrum-link-text-color-secondary-default: var( - --system-link-text-color-secondary-default - ); - --spectrum-link-text-color-secondary-hover: var( - --system-link-text-color-secondary-hover - ); - --spectrum-link-text-color-secondary-active: var( - --system-link-text-color-secondary-active - ); - --spectrum-link-text-color-secondary-focus: var( - --system-link-text-color-secondary-focus - ); - --spectrum-link-text-color-white: var(--system-link-text-color-white); - --spectrum-link-text-color-black: var(--system-link-text-color-black); + --spectrum-link-animation-duration: var(--system-link-animation-duration); + --spectrum-link-text-color-primary-default: var(--system-link-text-color-primary-default); + --spectrum-link-text-color-primary-hover: var(--system-link-text-color-primary-hover); + --spectrum-link-text-color-primary-active: var(--system-link-text-color-primary-active); + --spectrum-link-text-color-primary-focus: var(--system-link-text-color-primary-focus); + --spectrum-link-text-color-secondary-default: var(--system-link-text-color-secondary-default); + --spectrum-link-text-color-secondary-hover: var(--system-link-text-color-secondary-hover); + --spectrum-link-text-color-secondary-active: var(--system-link-text-color-secondary-active); + --spectrum-link-text-color-secondary-focus: var(--system-link-text-color-secondary-focus); + --spectrum-link-text-color-white: var(--system-link-text-color-white); + --spectrum-link-text-color-black: var(--system-link-text-color-black); } + diff --git a/packages/link/src/spectrum-link.css b/packages/link/src/spectrum-link.css index 19a0bcde75..68e67ff6d8 100644 --- a/packages/link/src/spectrum-link.css +++ b/packages/link/src/spectrum-link.css @@ -1,174 +1,100 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-link-text-color-primary-default: LinkText; - --highcontrast-link-text-color-primary-hover: LinkText; - --highcontrast-link-text-color-primary-active: LinkText; - --highcontrast-link-text-color-primary-focus: LinkText; - --highcontrast-link-text-color-secondary-default: LinkText; - --highcontrast-link-text-color-secondary-hover: LinkText; - --highcontrast-link-text-color-secondary-active: LinkText; - --highcontrast-link-text-color-secondary-focus: LinkText; - --highcontrast-link-text-color-white: LinkText; - --highcontrast-link-text-color-black: LinkText; - } + :host { + --highcontrast-link-text-color-primary-default: LinkText; + --highcontrast-link-text-color-primary-hover: LinkText; + --highcontrast-link-text-color-primary-active: LinkText; + --highcontrast-link-text-color-primary-focus: LinkText; + --highcontrast-link-text-color-secondary-default: LinkText; + --highcontrast-link-text-color-secondary-hover: LinkText; + --highcontrast-link-text-color-secondary-active: LinkText; + --highcontrast-link-text-color-secondary-focus: LinkText; + --highcontrast-link-text-color-white: LinkText; + --highcontrast-link-text-color-black: LinkText; + } } a { - background-color: initial; - -webkit-text-decoration-skip: objects; - text-decoration-skip: objects; - transition: color - var( - --mod-link-animation-duration, - var(--spectrum-link-animation-duration) - ) - ease-in-out; - cursor: pointer; - color: var( - --highcontrast-link-text-color-primary-default, - var( - --mod-link-text-color-primary-default, - var(--spectrum-link-text-color-primary-default) - ) - ); - outline: none; - -webkit-text-decoration: underline; - text-decoration: underline; + background-color: initial; + -webkit-text-decoration-skip: objects; + text-decoration-skip: objects; + transition: color var(--mod-link-animation-duration, var(--spectrum-link-animation-duration)) ease-in-out; + cursor: pointer; + color: var(--highcontrast-link-text-color-primary-default, var(--mod-link-text-color-primary-default, var(--spectrum-link-text-color-primary-default))); + outline: none; + -webkit-text-decoration: underline; + text-decoration: underline; } a:active { - color: var( - --highcontrast-link-text-color-primary-active, - var( - --mod-link-text-color-primary-active, - var(--spectrum-link-text-color-primary-active) - ) - ); + color: var(--highcontrast-link-text-color-primary-active, var(--mod-link-text-color-primary-active, var(--spectrum-link-text-color-primary-active))); } a:focus-visible { - color: var( - --highcontrast-link-text-color-primary-focus, - var( - --mod-link-text-color-primary-focus, - var(--spectrum-link-text-color-primary-focus) - ) - ); - -webkit-text-decoration: underline double; - text-decoration: underline double; - text-decoration-color: inherit; - text-decoration-color: var(--highcontrast-link-focus-color, inherit); + color: var(--highcontrast-link-text-color-primary-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-link-text-color-primary-focus))); + -webkit-text-decoration: underline double; + text-decoration: underline double; + text-decoration-color: inherit; + text-decoration-color: var(--highcontrast-link-focus-color, inherit); } -:host([variant='secondary']) a { - color: var( - --highcontrast-link-text-color-secondary-default, - var( - --mod-link-text-color-secondary-default, - var(--spectrum-link-text-color-secondary-default) - ) - ); +:host([variant="secondary"]) a { + color: var(--highcontrast-link-text-color-secondary-default, var(--mod-link-text-color-secondary-default, var(--spectrum-link-text-color-secondary-default))); } -:host([variant='secondary']) a:active { - color: var( - --highcontrast-link-text-color-secondary-active, - var( - --mod-link-text-color-secondary-active, - var(--spectrum-link-text-color-secondary-active) - ) - ); +:host([variant="secondary"]) a:active { + color: var(--highcontrast-link-text-color-secondary-active, var(--mod-link-text-color-secondary-active, var(--spectrum-link-text-color-secondary-active))); } -:host([variant='secondary']) a:focus { - color: var( - --highcontrast-link-text-color-secondary-focus, - var( - --mod-link-text-color-secondary-focus, - var(--spectrum-link-text-color-secondary-focus) - ) - ); +:host([variant="secondary"]) a:focus { + color: var(--highcontrast-link-text-color-secondary-focus, var(--mod-link-text-color-secondary-focus, var(--spectrum-link-text-color-secondary-focus))); } :host([quiet]) a { - -webkit-text-decoration: none; - text-decoration: none; + -webkit-text-decoration: none; + text-decoration: none; } -:host([static-color='white']) a, -:host([static-color='white']) a:active, -:host([static-color='white']) a:focus { - color: var( - --highcontrast-link-text-color-white, - var(--mod-link-text-color-white, var(--spectrum-link-text-color-white)) - ); +:host([static-color="white"]) a, :host([static-color="white"]) a:active, :host([static-color="white"]) a:focus { + color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); } -:host([static-color='black']) a, -:host([static-color='black']) a:active, -:host([static-color='black']) a:focus { - color: var( - --highcontrast-link-text-color-black, - var(--mod-link-text-color-black, var(--spectrum-link-text-color-black)) - ); +:host([static-color="black"]) a, :host([static-color="black"]) a:active, :host([static-color="black"]) a:focus { + color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); } @media (hover: hover) { - a:hover { - color: var( - --highcontrast-link-text-color-primary-hover, - var( - --mod-link-text-color-primary-hover, - var(--spectrum-link-text-color-primary-hover) - ) - ); - } - - :host([variant='secondary']) a:hover { - color: var( - --highcontrast-link-text-color-secondary-hover, - var( - --mod-link-text-color-secondary-hover, - var(--spectrum-link-text-color-secondary-hover) - ) - ); - } - - :host([quiet]) a:hover { - -webkit-text-decoration: underline; - text-decoration: underline; - } - - :host([static-color='white']) a:hover { - color: var( - --highcontrast-link-text-color-white, - var( - --mod-link-text-color-white, - var(--spectrum-link-text-color-white) - ) - ); - } - - :host([static-color='black']) a:hover { - color: var( - --highcontrast-link-text-color-black, - var( - --mod-link-text-color-black, - var(--spectrum-link-text-color-black) - ) - ); - } + a:hover { + color: var(--highcontrast-link-text-color-primary-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-link-text-color-primary-hover))); + } + + :host([variant="secondary"]) a:hover { + color: var(--highcontrast-link-text-color-secondary-hover, var(--mod-link-text-color-secondary-hover, var(--spectrum-link-text-color-secondary-hover))); + } + + :host([quiet]) a:hover { + -webkit-text-decoration: underline; + text-decoration: underline; + } + + :host([static-color="white"]) a:hover { + color: var(--highcontrast-link-text-color-white, var(--mod-link-text-color-white, var(--spectrum-link-text-color-white))); + } + + :host([static-color="black"]) a:hover { + color: var(--highcontrast-link-text-color-black, var(--mod-link-text-color-black, var(--spectrum-link-text-color-black))); + } } + diff --git a/packages/menu/src/menu-overrides.css b/packages/menu/src/menu-overrides.css index cdac1480d6..bfa2777b28 100644 --- a/packages/menu/src/menu-overrides.css +++ b/packages/menu/src/menu-overrides.css @@ -1,404 +1,163 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); - --spectrum-menu-item-top-to-checkbox: var( - --system-menu-item-top-to-checkbox - ); - --spectrum-menu-item-label-line-height: var( - --system-menu-item-label-line-height - ); - --spectrum-menu-item-label-line-height-cjk: var( - --system-menu-item-label-line-height-cjk - ); - --spectrum-menu-item-label-to-description-spacing: var( - --system-menu-item-label-to-description-spacing - ); - --spectrum-menu-item-focus-indicator-width: var( - --system-menu-item-focus-indicator-width - ); - --spectrum-menu-item-focus-indicator-color: var( - --system-menu-item-focus-indicator-color - ); - --spectrum-menu-item-label-to-value-area-min-spacing: var( - --system-menu-item-label-to-value-area-min-spacing - ); - --spectrum-menu-item-label-content-color-default: var( - --system-menu-item-label-content-color-default - ); - --spectrum-menu-item-label-content-color-hover: var( - --system-menu-item-label-content-color-hover - ); - --spectrum-menu-item-label-content-color-down: var( - --system-menu-item-label-content-color-down - ); - --spectrum-menu-item-label-content-color-focus: var( - --system-menu-item-label-content-color-focus - ); - --spectrum-menu-item-label-icon-color-default: var( - --system-menu-item-label-icon-color-default - ); - --spectrum-menu-item-label-icon-color-hover: var( - --system-menu-item-label-icon-color-hover - ); - --spectrum-menu-item-label-icon-color-down: var( - --system-menu-item-label-icon-color-down - ); - --spectrum-menu-item-label-icon-color-focus: var( - --system-menu-item-label-icon-color-focus - ); - --spectrum-menu-item-label-content-color-disabled: var( - --system-menu-item-label-content-color-disabled - ); - --spectrum-menu-item-label-icon-color-disabled: var( - --system-menu-item-label-icon-color-disabled - ); - --spectrum-menu-item-description-line-height: var( - --system-menu-item-description-line-height - ); - --spectrum-menu-item-description-line-height-cjk: var( - --system-menu-item-description-line-height-cjk - ); - --spectrum-menu-item-description-color-default: var( - --system-menu-item-description-color-default - ); - --spectrum-menu-item-description-color-hover: var( - --system-menu-item-description-color-hover - ); - --spectrum-menu-item-description-color-down: var( - --system-menu-item-description-color-down - ); - --spectrum-menu-item-description-color-focus: var( - --system-menu-item-description-color-focus - ); - --spectrum-menu-item-description-color-disabled: var( - --system-menu-item-description-color-disabled - ); - --spectrum-menu-section-header-line-height: var( - --system-menu-section-header-line-height - ); - --spectrum-menu-section-header-line-height-cjk: var( - --system-menu-section-header-line-height-cjk - ); - --spectrum-menu-section-header-font-weight: var( - --system-menu-section-header-font-weight - ); - --spectrum-menu-section-header-color: var( - --system-menu-section-header-color - ); - --spectrum-menu-collapsible-icon-color: var( - --system-menu-collapsible-icon-color - ); - --spectrum-menu-checkmark-icon-color-default: var( - --system-menu-checkmark-icon-color-default - ); - --spectrum-menu-checkmark-icon-color-hover: var( - --system-menu-checkmark-icon-color-hover - ); - --spectrum-menu-checkmark-icon-color-down: var( - --system-menu-checkmark-icon-color-down - ); - --spectrum-menu-checkmark-icon-color-focus: var( - --system-menu-checkmark-icon-color-focus - ); - --spectrum-menu-drillin-icon-color-default: var( - --system-menu-drillin-icon-color-default - ); - --spectrum-menu-drillin-icon-color-hover: var( - --system-menu-drillin-icon-color-hover - ); - --spectrum-menu-drillin-icon-color-down: var( - --system-menu-drillin-icon-color-down - ); - --spectrum-menu-drillin-icon-color-focus: var( - --system-menu-drillin-icon-color-focus - ); - --spectrum-menu-item-value-color-default: var( - --system-menu-item-value-color-default - ); - --spectrum-menu-item-value-color-hover: var( - --system-menu-item-value-color-hover - ); - --spectrum-menu-item-value-color-down: var( - --system-menu-item-value-color-down - ); - --spectrum-menu-item-value-color-focus: var( - --system-menu-item-value-color-focus - ); - --spectrum-menu-checkmark-display-hidden: var( - --system-menu-checkmark-display-hidden - ); - --spectrum-menu-checkmark-display-shown: var( - --system-menu-checkmark-display-shown - ); - --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); - --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var( - --system-menu-item-collapsible-no-icon-sub-item-padding-x-start - ); - --spectrum-menu-item-background-color-default: var( - --system-menu-item-background-color-default - ); - --spectrum-menu-item-background-color-hover: var( - --system-menu-item-background-color-hover - ); - --spectrum-menu-item-background-color-down: var( - --system-menu-item-background-color-down - ); - --spectrum-menu-item-background-color-key-focus: var( - --system-menu-item-background-color-key-focus - ); - --spectrum-menu-item-min-height: var(--system-menu-item-min-height); - --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); - --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); + --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); + --spectrum-menu-item-top-to-checkbox: var(--system-menu-item-top-to-checkbox); + --spectrum-menu-item-label-line-height: var(--system-menu-item-label-line-height); + --spectrum-menu-item-label-line-height-cjk: var(--system-menu-item-label-line-height-cjk); + --spectrum-menu-item-label-to-description-spacing: var(--system-menu-item-label-to-description-spacing); + --spectrum-menu-item-focus-indicator-width: var(--system-menu-item-focus-indicator-width); + --spectrum-menu-item-focus-indicator-color: var(--system-menu-item-focus-indicator-color); + --spectrum-menu-item-label-to-value-area-min-spacing: var(--system-menu-item-label-to-value-area-min-spacing); + --spectrum-menu-item-label-content-color-default: var(--system-menu-item-label-content-color-default); + --spectrum-menu-item-label-content-color-hover: var(--system-menu-item-label-content-color-hover); + --spectrum-menu-item-label-content-color-down: var(--system-menu-item-label-content-color-down); + --spectrum-menu-item-label-content-color-focus: var(--system-menu-item-label-content-color-focus); + --spectrum-menu-item-label-icon-color-default: var(--system-menu-item-label-icon-color-default); + --spectrum-menu-item-label-icon-color-hover: var(--system-menu-item-label-icon-color-hover); + --spectrum-menu-item-label-icon-color-down: var(--system-menu-item-label-icon-color-down); + --spectrum-menu-item-label-icon-color-focus: var(--system-menu-item-label-icon-color-focus); + --spectrum-menu-item-label-content-color-disabled: var(--system-menu-item-label-content-color-disabled); + --spectrum-menu-item-label-icon-color-disabled: var(--system-menu-item-label-icon-color-disabled); + --spectrum-menu-item-description-line-height: var(--system-menu-item-description-line-height); + --spectrum-menu-item-description-line-height-cjk: var(--system-menu-item-description-line-height-cjk); + --spectrum-menu-item-description-color-default: var(--system-menu-item-description-color-default); + --spectrum-menu-item-description-color-hover: var(--system-menu-item-description-color-hover); + --spectrum-menu-item-description-color-down: var(--system-menu-item-description-color-down); + --spectrum-menu-item-description-color-focus: var(--system-menu-item-description-color-focus); + --spectrum-menu-item-description-color-disabled: var(--system-menu-item-description-color-disabled); + --spectrum-menu-section-header-line-height: var(--system-menu-section-header-line-height); + --spectrum-menu-section-header-line-height-cjk: var(--system-menu-section-header-line-height-cjk); + --spectrum-menu-section-header-font-weight: var(--system-menu-section-header-font-weight); + --spectrum-menu-section-header-color: var(--system-menu-section-header-color); + --spectrum-menu-collapsible-icon-color: var(--system-menu-collapsible-icon-color); + --spectrum-menu-checkmark-icon-color-default: var(--system-menu-checkmark-icon-color-default); + --spectrum-menu-checkmark-icon-color-hover: var(--system-menu-checkmark-icon-color-hover); + --spectrum-menu-checkmark-icon-color-down: var(--system-menu-checkmark-icon-color-down); + --spectrum-menu-checkmark-icon-color-focus: var(--system-menu-checkmark-icon-color-focus); + --spectrum-menu-drillin-icon-color-default: var(--system-menu-drillin-icon-color-default); + --spectrum-menu-drillin-icon-color-hover: var(--system-menu-drillin-icon-color-hover); + --spectrum-menu-drillin-icon-color-down: var(--system-menu-drillin-icon-color-down); + --spectrum-menu-drillin-icon-color-focus: var(--system-menu-drillin-icon-color-focus); + --spectrum-menu-item-value-color-default: var(--system-menu-item-value-color-default); + --spectrum-menu-item-value-color-hover: var(--system-menu-item-value-color-hover); + --spectrum-menu-item-value-color-down: var(--system-menu-item-value-color-down); + --spectrum-menu-item-value-color-focus: var(--system-menu-item-value-color-focus); + --spectrum-menu-checkmark-display-hidden: var(--system-menu-checkmark-display-hidden); + --spectrum-menu-checkmark-display-shown: var(--system-menu-checkmark-display-shown); + --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); + --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var(--system-menu-item-collapsible-no-icon-sub-item-padding-x-start); + --spectrum-menu-item-background-color-default: var(--system-menu-item-background-color-default); + --spectrum-menu-item-background-color-hover: var(--system-menu-item-background-color-hover); + --spectrum-menu-item-background-color-down: var(--system-menu-item-background-color-down); + --spectrum-menu-item-background-color-key-focus: var(--system-menu-item-background-color-key-focus); + --spectrum-menu-item-min-height: var(--system-menu-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-back-icon-margin); } :host { - --spectrum-menu-item-min-height: var(--system-menu-size-m-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-m-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-m-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-m-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-m-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-m-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-m-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-m-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-m-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-m-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-m-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-m-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-m-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-m-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-m-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-m-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-m-back-icon-margin - ); + --spectrum-menu-item-min-height: var(--system-menu-size-m-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-m-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-m-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-m-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-m-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-m-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-m-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-m-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-m-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-m-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-m-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-m-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-m-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-m-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-m-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-m-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-m-back-icon-margin); } -:host([size='s']) { - --spectrum-menu-item-min-height: var(--system-menu-size-s-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-s-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-s-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-s-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-s-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-s-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-s-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-s-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-s-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-s-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-s-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-s-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-s-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-s-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-s-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-s-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-s-back-icon-margin - ); +:host([size="s"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-s-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-s-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-s-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-s-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-s-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-s-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-s-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-s-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-s-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-s-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-s-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-s-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-s-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-s-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-s-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-s-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-s-back-icon-margin); } -:host([size='l']) { - --spectrum-menu-item-min-height: var(--system-menu-size-l-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-l-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-l-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-l-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-l-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-l-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-l-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-l-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-l-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-l-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-l-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-l-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-l-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-l-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-l-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-l-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-l-back-icon-margin - ); +:host([size="l"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-l-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-l-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-l-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-l-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-l-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-l-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-l-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-l-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-l-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-l-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-l-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-l-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-l-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-l-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-l-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-l-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-l-back-icon-margin); } -:host([size='xl']) { - --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); - --spectrum-menu-item-icon-height: var( - --system-menu-size-xl-item-icon-height - ); - --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); - --spectrum-menu-item-label-font-size: var( - --system-menu-size-xl-item-label-font-size - ); - --spectrum-menu-item-label-text-to-visual: var( - --system-menu-size-xl-item-label-text-to-visual - ); - --spectrum-menu-item-label-inline-edge-to-content: var( - --system-menu-size-xl-item-label-inline-edge-to-content - ); - --spectrum-menu-item-top-edge-to-text: var( - --system-menu-size-xl-item-top-edge-to-text - ); - --spectrum-menu-item-bottom-edge-to-text: var( - --system-menu-size-xl-item-bottom-edge-to-text - ); - --spectrum-menu-item-text-to-control: var( - --system-menu-size-xl-item-text-to-control - ); - --spectrum-menu-item-description-font-size: var( - --system-menu-size-xl-item-description-font-size - ); - --spectrum-menu-section-header-font-size: var( - --system-menu-size-xl-section-header-font-size - ); - --spectrum-menu-section-header-min-width: var( - --system-menu-size-xl-section-header-min-width - ); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var( - --system-menu-size-xl-item-selectable-edge-to-text-not-selected - ); - --spectrum-menu-item-checkmark-height: var( - --system-menu-size-xl-item-checkmark-height - ); - --spectrum-menu-item-checkmark-width: var( - --system-menu-size-xl-item-checkmark-width - ); - --spectrum-menu-item-top-to-checkmark: var( - --system-menu-size-xl-item-top-to-checkmark - ); - --spectrum-menu-back-icon-margin: var( - --system-menu-size-xl-back-icon-margin - ); +:host([size="xl"]) { + --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-xl-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-xl-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-xl-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-xl-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-xl-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-xl-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-xl-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-xl-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-xl-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-xl-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-xl-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-xl-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-xl-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-xl-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-xl-back-icon-margin); } + diff --git a/packages/menu/src/spectrum-checkmark.css b/packages/menu/src/spectrum-checkmark.css index ba4415e974..5f4f274bee 100644 --- a/packages/menu/src/spectrum-checkmark.css +++ b/packages/menu/src/spectrum-checkmark.css @@ -1,151 +1,63 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .checkmark { - display: var( - --mod-menu-checkmark-display, - var(--spectrum-menu-checkmark-display) - ); - block-size: var( - --mod-menu-item-checkmark-height, - var(--spectrum-menu-item-checkmark-height) - ); - inline-size: var( - --mod-menu-item-checkmark-width, - var(--spectrum-menu-item-checkmark-width) - ); - fill: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-default, - var(--spectrum-menu-checkmark-icon-color-default) - ) - ); - opacity: 1; - grid-area: checkmarkArea; - align-self: start; - margin-block-start: calc( - var( - --mod-menu-item-top-to-checkmark, - var(--spectrum-menu-item-top-to-checkmark) - ) - - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + display: var(--mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display)); + block-size: var(--mod-menu-item-checkmark-height, var(--spectrum-menu-item-checkmark-height)); + inline-size: var(--mod-menu-item-checkmark-width, var(--spectrum-menu-item-checkmark-width)); + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-default, var(--spectrum-menu-checkmark-icon-color-default))); + opacity: 1; + grid-area: checkmarkArea; + align-self: start; + margin-block-start: calc(var(--mod-menu-item-top-to-checkmark, var(--spectrum-menu-item-top-to-checkmark)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/menu/src/spectrum-chevron.css b/packages/menu/src/spectrum-chevron.css index 3c9d2f9745..e47206a314 100644 --- a/packages/menu/src/spectrum-chevron.css +++ b/packages/menu/src/spectrum-chevron.css @@ -1,116 +1,58 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .chevron { - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); - grid-area: chevronArea; - align-self: center; - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + block-size: var(--spectrum-menu-item-checkmark-height); + inline-size: var(--spectrum-menu-item-checkmark-width); + grid-area: chevronArea; + align-self: center; + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index b3b061edeb..242b102c1a 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -1,125 +1,58 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); - inline-size: auto; - margin-block: var( - --mod-menu-section-divider-margin-block, - max( - 0px, - ( - var(--spectrum-menu-item-section-divider-height) - - var(--spectrum-menu-divider-thickness) - ) / 2 - ) - ); - margin-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - overflow: visible; + --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium); + inline-size: auto; + margin-block: var(--mod-menu-section-divider-margin-block, max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness)) / 2)); + margin-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + overflow: visible; } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 721ef2aeac..f38f39d6eb 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -1,879 +1,372 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -::slotted([slot='icon']) { - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-icon-color-default, - var(--spectrum-menu-item-label-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-icon-color-default, - var(--spectrum-menu-item-label-icon-color-default) - ) - ); - grid-area: iconArea; - align-self: start; -} - -::slotted([slot='icon']) { - margin-inline-end: var( - --mod-menu-item-label-text-to-visual, - var(--spectrum-menu-item-label-text-to-visual) - ); +::slotted([slot="icon"]) { + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default))); + grid-area: iconArea; + align-self: start; +} + +::slotted([slot="icon"]) { + margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual)); } :host { - cursor: pointer; - box-sizing: border-box; - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); - line-height: var( - --mod-menu-item-label-line-height, - var(--spectrum-menu-item-label-line-height) - ); - min-block-size: var( - --mod-menu-item-min-height, - var(--spectrum-menu-item-min-height) - ); - padding-block-start: var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ); - padding-block-end: var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-template: - '. chevronAreaCollapsible . headingIconArea sectionHeadingArea . . .' 1fr - 'selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn' - '. . . . descriptionArea . . .' - '. . . . submenuArea . . .' - / auto auto auto auto 1fr auto auto auto; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: grid; - position: relative; + cursor: pointer; + box-sizing: border-box; + background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height)); + min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height)); + padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)); + padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)); + padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + grid-template: ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . ." 1fr + "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" + ". . . . descriptionArea . . ." + ". . . . submenuArea . . ." + / auto auto auto auto 1fr auto auto auto; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: grid; + position: relative; } .spectrum-Menu-itemCheckbox { - --mod-checkbox-top-to-text: 0; - --mod-checkbox-text-to-control: 0; - min-block-size: 0; + --mod-checkbox-top-to-text: 0; + --mod-checkbox-text-to-control: 0; + min-block-size: 0; } .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box { - margin-block-start: var( - --mod-menu-item-top-to-checkbox, - var(--spectrum-menu-item-top-to-checkbox) - ); - margin-block-end: 0; - margin-inline-end: var( - --mod-menu-item-text-to-control, - var(--spectrum-menu-item-text-to-control) - ); + margin-block-start: var(--mod-menu-item-top-to-checkbox, var(--spectrum-menu-item-top-to-checkbox)); + margin-block-end: 0; + margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); } .spectrum-Menu-itemSwitch { - min-block-size: 0; + min-block-size: 0; } .spectrum-Menu-itemSwitch .spectrum-Switch-switch { - margin-block-start: var( - --mod-menu-item-top-to-action, - var(--spectrum-menu-item-top-to-action) - ); - margin-block-end: 0; + margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action)); + margin-block-end: 0; } #label { - grid-area: submenuItemLabelArea; -} - -::slotted([slot='value']) { - grid-area: submenuItemValueArea; -} - -:host([focused]), -:host(:focus) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-key-focus, - var(--spectrum-menu-item-background-color-key-focus) - ) - ); - outline: none; -} - -:host([focused]) > #label, -:host(:focus) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-focus, - var(--spectrum-menu-item-label-content-color-focus) - ) - ); -} - -:host([focused]) > [name='description']::slotted(*), -:host(:focus) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-focus, - var(--spectrum-menu-item-description-color-focus) - ) - ); -} - -:host([focused]) > ::slotted([slot='value']), -:host(:focus) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-focus, - var(--spectrum-menu-item-value-color-focus) - ) - ); -} - -:host([focused]) > .icon:not(.chevron, .checkmark), -:host(:focus) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-focus, - var(--spectrum-menu-item-label-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-focus, - var(--spectrum-menu-item-label-icon-color-focus) - ) - ); -} - -:host([focused]) > .chevron, -:host(:focus) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); -} - -:host([focused]) > .checkmark, -:host(:focus) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-focus, - var(--spectrum-menu-checkmark-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-focus, - var(--spectrum-menu-checkmark-icon-color-focus) - ) - ); -} - -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-menu-item-focus-indicator-direction-scalar: -1; + grid-area: submenuItemLabelArea; +} + +::slotted([slot="value"]) { + grid-area: submenuItemValueArea; +} + +:host([focused]), :host(:focus) { + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus))); + outline: none; +} + +:host([focused]) > #label, :host(:focus) > #label { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); +} + +:host([focused]) > [name="description"]::slotted(*), :host(:focus) > [name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-focus, var(--spectrum-menu-item-description-color-focus))); +} + +:host([focused]) > ::slotted([slot="value"]), :host(:focus) > ::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); +} + +:host([focused]) > .icon:not(.chevron, .checkmark), :host(:focus) > .icon:not(.chevron, .checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); +} + +:host([focused]) > .chevron, :host(:focus) > .chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); +} + +:host([focused]) > .checkmark, :host(:focus) > .checkmark { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-focus, var(--spectrum-menu-checkmark-icon-color-focus))); +} + +:host:dir(rtl), :host([dir="rtl"]) { + --spectrum-menu-item-focus-indicator-direction-scalar: -1; } :host(:is(:active, [active])) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-down, - var(--spectrum-menu-item-background-color-down) - ) - ); + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); } :host(:is(:active, [active])) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-down, - var(--spectrum-menu-item-label-content-color-down) - ) - ); -} - -:host(:is(:active, [active])) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-down, - var(--spectrum-menu-item-description-color-down) - ) - ); -} - -:host(:is(:active, [active])) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-down, - var(--spectrum-menu-item-value-color-down) - ) - ); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); +} + +:host(:is(:active, [active])) > [name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-down, var(--spectrum-menu-item-description-color-down))); +} + +:host(:is(:active, [active])) > ::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); } :host(:is(:active, [active])) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-down, - var(--spectrum-menu-item-label-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-down, - var(--spectrum-menu-item-label-icon-color-down) - ) - ); + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); } :host(:is(:active, [active])) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); } :host(:is(:active, [active])) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-down, - var(--spectrum-menu-checkmark-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-down, - var(--spectrum-menu-checkmark-icon-color-down) - ) - ); -} - -:host([disabled]), -:host([aria-disabled='true']) { - background-color: initial; + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-down, var(--spectrum-menu-checkmark-icon-color-down))); +} + +:host([disabled]), :host([aria-disabled="true"]) { + background-color: initial; +} + +:host([disabled]) #label, :host([disabled]) ::slotted([slot="value"]), :host([aria-disabled="true"]) #label, :host([aria-disabled="true"]) ::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); +} + +:host([disabled]) [name="description"]::slotted(*), :host([aria-disabled="true"]) [name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); +} + +:host([disabled]) ::slotted([slot="icon"]), :host([aria-disabled="true"]) ::slotted([slot="icon"]) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); +} + +:host([focused]) .spectrum-Menu-back, :host([focused]) { + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } -:host([disabled]) #label, -:host([disabled]) ::slotted([slot='value']), -:host([aria-disabled='true']) #label, -:host([aria-disabled='true']) ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-content-color-disabled, - var(--spectrum-menu-item-label-content-color-disabled) - ) - ); -} - -:host([disabled]) [name='description']::slotted(*), -:host([aria-disabled='true']) [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-description-color-disabled, - var(--spectrum-menu-item-description-color-disabled) - ) - ); -} - -:host([disabled]) ::slotted([slot='icon']), -:host([aria-disabled='true']) ::slotted([slot='icon']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); -} - -:host([focused]) .spectrum-Menu-back, -:host([focused]) { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); -} - -:host .is-selectableMultiple { - align-items: start; +:host .is-selectableMultiple { + align-items: start; } .is-selectableMultiple .spectrum-Menu-itemCheckbox { - grid-area: checkmarkArea; + grid-area: checkmarkArea; } .spectrum-Menu-itemSelection { - grid-area: selectedArea; + grid-area: selectedArea; } #label { - --mod-switch-control-label-spacing: 0; - --mod-switch-spacing-top-to-label: 0; - font-size: var( - --mod-menu-item-label-font-size, - var(--spectrum-menu-item-label-font-size) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-label-content-color-default, - var(--spectrum-menu-item-label-content-color-default) - ) - ); - hyphens: auto; - overflow-wrap: break-word; - grid-area: labelArea; -} - -::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-value-color-default, - var(--spectrum-menu-item-value-color-default) - ) - ); - font-size: var( - --mod-menu-item-label-font-size, - var(--spectrum-menu-item-label-font-size) - ); - grid-area: valueArea; - justify-self: end; -} - -.spectrum-Menu-itemActions, -::slotted([slot='value']) { - align-self: start; - margin-inline-start: var( - --mod-menu-item-label-to-value-area-min-spacing, - var(--spectrum-menu-item-label-to-value-area-min-spacing) - ); + --mod-switch-control-label-spacing: 0; + --mod-switch-spacing-top-to-label: 0; + font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default))); + hyphens: auto; + overflow-wrap: break-word; + grid-area: labelArea; +} + +::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default))); + font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)); + grid-area: valueArea; + justify-self: end; +} + +.spectrum-Menu-itemActions, ::slotted([slot="value"]) { + align-self: start; + margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); } .spectrum-Menu-itemActions { - grid-area: actionsArea; -} - -[name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-item-description-color-default, - var(--spectrum-menu-item-description-color-default) - ) - ); - font-size: var( - --mod-menu-item-description-font-size, - var(--spectrum-menu-item-description-font-size) - ); - hyphens: auto; - overflow-wrap: break-word; - line-height: var( - --mod-menu-item-description-line-height, - var(--spectrum-menu-item-description-line-height) - ); - grid-area: descriptionArea; - margin-block-start: var( - --mod-menu-item-label-to-description-spacing, - var(--spectrum-menu-item-label-to-description-spacing) - ); + grid-area: actionsArea; +} + +[name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-description-color-default, var(--spectrum-menu-item-description-color-default))); + font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); + hyphens: auto; + overflow-wrap: break-word; + line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height)); + grid-area: descriptionArea; + margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing)); } :host([no-wrap]) #label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .spectrum-Menu-item--collapsible.is-open { - padding-block-end: 0; + padding-block-end: 0; } .spectrum-Menu-item--collapsible.is-open .chevron { - transform: rotate(90deg); -} - -:host([focused]) .spectrum-Menu-item--collapsible.is-open, -:host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open, -.spectrum-Menu-item--collapsible.is-open:focus { - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); -} - -.spectrum-Menu-item--collapsible ::slotted([slot='icon']) { - grid-area: headingIconArea; -} - -.spectrum-Menu-item--collapsible > ::slotted([slot='icon']) { - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); + transform: rotate(90deg); +} + +:host([focused]) .spectrum-Menu-item--collapsible.is-open, :host(:is(:active, [active])) .spectrum-Menu-item--collapsible.is-open, .spectrum-Menu-item--collapsible.is-open:focus { + background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); +} + +.spectrum-Menu-item--collapsible ::slotted([slot="icon"]) { + grid-area: headingIconArea; +} + +.spectrum-Menu-item--collapsible > ::slotted([slot="icon"]) { + padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); } .spectrum-Menu-item--collapsible .chevron { - grid-area: chevronAreaCollapsible; + grid-area: chevronAreaCollapsible; } :host([has-submenu]) .chevron { - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-drillin-icon-color-default, - var(--spectrum-menu-drillin-icon-color-default) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-drillin-icon-color-default, - var(--spectrum-menu-drillin-icon-color-default) - ) - ); - grid-area: chevronAreaDrillIn; - margin-inline-start: var( - --mod-menu-item-label-to-value-area-min-spacing, - var(--spectrum-menu-item-label-to-value-area-min-spacing) - ); - margin-inline-end: 0; + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-drillin-icon-color-default, var(--spectrum-menu-drillin-icon-color-default))); + grid-area: chevronAreaDrillIn; + margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing)); + margin-inline-end: 0; } :host([has-submenu]) .is-open { - --spectrum-menu-item-background-color-default: var( - --highcontrast-menu-item-selected-background-color, - var( - --mod-menu-item-background-color-hover, - var(--spectrum-menu-item-background-color-hover) - ) - ); + --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); } :host([has-submenu]) .is-open .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); } :host([has-submenu]) .is-open .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); } :host([has-submenu]) .is-open .checkmark { - fill: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-checkmark-icon-color-default, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); + fill: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + color: var(--highcontrast-menu-checkmark-icon-color-default, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); } @media (hover: hover) { - :host(:hover) { - background-color: var( - --highcontrast-menu-item-background-color-focus, - var( - --mod-menu-item-background-color-hover, - var(--spectrum-menu-item-background-color-hover) - ) - ); - } - - :host(:hover) > #label { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-content-color-hover, - var(--spectrum-menu-item-label-content-color-hover) - ) - ); - } - - :host(:hover) > [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-description-color-hover, - var(--spectrum-menu-item-description-color-hover) - ) - ); - } - - :host(:hover) > ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-value-color-hover, - var(--spectrum-menu-item-value-color-hover) - ) - ); - } - - :host(:hover) > .icon:not(.chevron, .checkmark) { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-item-label-icon-color-hover, - var(--spectrum-menu-item-label-icon-color-hover) - ) - ); - } - - :host(:hover) > .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-collapsible-icon-color, - var(--spectrum-menu-collapsible-icon-color) - ) - ); - } - - :host(:hover) > .checkmark { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-checkmark-icon-color-hover, - var(--spectrum-menu-checkmark-icon-color-hover) - ) - ); - } - - :host([disabled]:hover), - :host([aria-disabled='true']:hover) { - cursor: default; - background-color: initial; - } - - :host([disabled]:hover) #label, - :host([disabled]:hover) ::slotted([slot='value']), - :host([aria-disabled='true']:hover) #label, - :host([aria-disabled='true']:hover) ::slotted([slot='value']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-content-color-disabled, - var(--spectrum-menu-item-label-content-color-disabled) - ) - ); - } - - :host([disabled]:hover) [name='description']::slotted(*), - :host([aria-disabled='true']:hover) [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-description-color-disabled, - var(--spectrum-menu-item-description-color-disabled) - ) - ); - } - - :host([disabled]:hover) ::slotted([slot='icon']), - :host([aria-disabled='true']:hover) ::slotted([slot='icon']) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - } - - .spectrum-Menu-item--collapsible.is-open:hover { - background-color: var( - --highcontrast-menu-item-background-color-default, - var( - --mod-menu-item-background-color-default, - var(--spectrum-menu-item-background-color-default) - ) - ); - } - - :host([has-submenu]:hover) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-hover, - var(--spectrum-menu-drillin-icon-color-hover) - ) - ); - } -} - -:host([has-submenu][focused]) .chevron, -:host([has-submenu]:focus) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-focus, - var(--spectrum-menu-drillin-icon-color-focus) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-focus, - var(--spectrum-menu-drillin-icon-color-focus) - ) - ); + :host(:hover) { + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))); + } + + :host(:hover) > #label { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-hover, var(--spectrum-menu-item-label-content-color-hover))); + } + + :host(:hover) > [name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-description-color-hover, var(--spectrum-menu-item-description-color-hover))); + } + + :host(:hover) > ::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); + } + + :host(:hover) > .icon:not(.chevron, .checkmark) { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); + } + + :host(:hover) > .chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-collapsible-icon-color, var(--spectrum-menu-collapsible-icon-color))); + } + + :host(:hover) > .checkmark { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))); + } + + :host([disabled]:hover), :host([aria-disabled="true"]:hover) { + cursor: default; + background-color: initial; + } + + :host([disabled]:hover) #label, :host([disabled]:hover) ::slotted([slot="value"]), :host([aria-disabled="true"]:hover) #label, :host([aria-disabled="true"]:hover) ::slotted([slot="value"]) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled))); + } + + :host([disabled]:hover) [name="description"]::slotted(*), :host([aria-disabled="true"]:hover) [name="description"]::slotted(*) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled))); + } + + :host([disabled]:hover) ::slotted([slot="icon"]), :host([aria-disabled="true"]:hover) ::slotted([slot="icon"]) { + color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); + } + + .spectrum-Menu-item--collapsible.is-open:hover { + background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + } + + :host([has-submenu]:hover) .chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover))); + } +} + +:host([has-submenu][focused]) .chevron, :host([has-submenu]:focus) .chevron { + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus))); } :host([has-submenu]:is(:active, [active])) .chevron { - fill: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-down, - var(--spectrum-menu-drillin-icon-color-down) - ) - ); - color: var( - --highcontrast-menu-item-color-focus, - var( - --mod-menu-drillin-icon-color-down, - var(--spectrum-menu-drillin-icon-color-down) - ) - ); + fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); + color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))); } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } :host([focused]) .spectrum-Menu-backButton { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index 4353e1d6ea..ecd1f30bf5 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -1,155 +1,67 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .header { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-section-header-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - min-inline-size: var( - --mod-menu-section-header-min-width, - var(--spectrum-menu-section-header-min-width) - ); - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width)); + padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); + padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; + display: block; } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-back .header { - padding: 0; + padding: 0; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index bb8e42baf1..4514d30bc4 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -1,249 +1,122 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-menu-item-background-color-default: ButtonFace; - --highcontrast-menu-item-color-default: ButtonText; - --highcontrast-menu-item-background-color-focus: Highlight; - --highcontrast-menu-item-color-focus: HighlightText; - --highcontrast-menu-checkmark-icon-color-default: Highlight; - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: Highlight; - --highcontrast-menu-item-selected-background-color: Highlight; - --highcontrast-menu-item-selected-color: HighlightText; - } + :host { + --highcontrast-menu-item-background-color-default: ButtonFace; + --highcontrast-menu-item-color-default: ButtonText; + --highcontrast-menu-item-background-color-focus: Highlight; + --highcontrast-menu-item-color-focus: HighlightText; + --highcontrast-menu-checkmark-icon-color-default: Highlight; + --highcontrast-menu-item-color-disabled: GrayText; + --highcontrast-menu-item-focus-indicator-color: Highlight; + --highcontrast-menu-item-selected-background-color: Highlight; + --highcontrast-menu-item-selected-color: HighlightText; + } - @supports (color: SelectedItem) { - :host { - --highcontrast-menu-item-selected-background-color: SelectedItem; - --highcontrast-menu-item-selected-color: SelectedItemText; - } + @supports (color: SelectedItem) { + :host { + --highcontrast-menu-item-selected-background-color: SelectedItem; + --highcontrast-menu-item-selected-color: SelectedItemText; } + } } :host { - inline-size: auto; - inline-size: var(--mod-menu-inline-size, auto); - box-sizing: border-box; - margin: 0; - padding: 0; - list-style-type: none; - display: inline-block; - overflow: auto; + inline-size: auto; + inline-size: var(--mod-menu-inline-size, auto); + box-sizing: border-box; + margin: 0; + padding: 0; + list-style-type: none; + display: inline-block; + overflow: auto; } -:host:lang(ja), -:host:lang(ko), -:host:lang(zh) { - --spectrum-menu-item-label-line-height: var( - --mod-menu-item-label-line-height-cjk, - var(--spectrum-menu-item-label-line-height-cjk) - ); - --spectrum-menu-item-description-line-height: var( - --mod-menu-item-description-line-height-cjk, - var(--spectrum-menu-item-description-line-height-cjk) - ); - --spectrum-menu-section-header-line-height: var( - --mod-menu-section-header-line-height-cjk, - var(--spectrum-menu-section-header-line-height-cjk) - ); +:host:lang(ja), :host:lang(ko), :host:lang(zh) { + --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk)); + --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk)); + --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); } :host([selects]) ::slotted(sp-menu-item) { - --spectrum-menu-checkmark-display: var( - --spectrum-menu-checkmark-display-hidden - ); - padding-inline-start: var( - --mod-menu-item-selectable-edge-to-text-not-selected, - var(--spectrum-menu-item-selectable-edge-to-text-not-selected) - ); + --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden); + padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected)); } :host([selects]) ::slotted(sp-menu-item[selected]) { - --spectrum-menu-checkmark-display: var( - --spectrum-menu-checkmark-display-shown - ); - padding-inline-start: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); + --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); + padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); } .spectrum-Menu-backIcon { - margin-block: var( - --mod-menu-back-icon-margin-block, - var(--spectrum-menu-back-icon-margin) - ); - margin-inline: var( - --mod-menu-back-icon-margin-inline, - var(--spectrum-menu-back-icon-margin) - ); - fill: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-icon-color-default, - var(--spectrum-menu-section-header-color) - ) - ); - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-icon-color-default, - var(--spectrum-menu-section-header-color) - ) - ); + margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin)); + margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin)); + fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color))); } .spectrum-Menu-back:focus-visible { - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * 1 - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); - box-shadow: inset - calc( - var( - --mod-menu-item-focus-indicator-width, - var(--spectrum-menu-item-focus-indicator-width) - ) * - var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) - ) - 0 0 0 - var( - --highcontrast-menu-item-focus-indicator-color, - var( - --mod-menu-item-focus-indicator-color, - var(--spectrum-menu-item-focus-indicator-color) - ) - ); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * 1) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); + box-shadow: inset calc(var(--mod-menu-item-focus-indicator-width, var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)) 0 0 0 var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); } .spectrum-Menu-sectionHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-section-header-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - min-inline-size: var( - --mod-menu-section-header-min-width, - var(--spectrum-menu-section-header-min-width) - ); - padding-block-start: var( - --mod-menu-section-header-top-edge-to-text, - var( - --mod-menu-item-top-edge-to-text, - var(--spectrum-menu-item-top-edge-to-text) - ) - ); - padding-block-end: var( - --mod-menu-section-header-bottom-edge-to-text, - var( - --mod-menu-item-bottom-edge-to-text, - var(--spectrum-menu-item-bottom-edge-to-text) - ) - ); - padding-inline: var( - --mod-menu-item-label-inline-edge-to-content, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width)); + padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); + padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1; + display: block; } .spectrum-Menu-back { - padding-inline: 0 - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-inline: var(--mod-menu-back-padding-inline-start, 0) - var( - --mod-menu-back-padding-inline-end, - var(--spectrum-menu-item-label-inline-edge-to-content) - ); - padding-block: 0; - padding-block: var(--mod-menu-back-padding-block-start, 0) - var(--mod-menu-back-padding-block-end, 0); - flex-flow: wrap; - align-items: center; - display: flex; + padding-inline: 0 var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content)); + padding-block: 0; + padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0); + flex-flow: wrap; + align-items: center; + display: flex; } .spectrum-Menu-back .spectrum-Menu-sectionHeading { - padding: 0; + padding: 0; } .spectrum-Menu-backButton { - cursor: pointer; - background: none; - border: 0; - margin: 0; - padding: 0; - display: inline-flex; + cursor: pointer; + background: none; + border: 0; + margin: 0; + padding: 0; + display: inline-flex; } .spectrum-Menu-backButton:focus-visible { - outline: var(--spectrum-focus-indicator-thickness) solid - var(--spectrum-focus-indicator-color); - outline-offset: calc( - (var(--spectrum-focus-indicator-thickness) + 1px) * -1 - ); + outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color); + outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1); } .spectrum-Menu-backHeading { - color: var( - --highcontrast-menu-item-color-default, - var( - --mod-menu-back-heading-color, - var(--spectrum-menu-section-header-color) - ) - ); - font-size: var( - --mod-menu-section-header-font-size, - var(--spectrum-menu-section-header-font-size) - ); - font-weight: var( - --mod-menu-section-header-font-weight, - var(--spectrum-menu-section-header-font-weight) - ); - line-height: var( - --mod-menu-section-header-line-height, - var(--spectrum-menu-section-header-line-height) - ); - display: block; + color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))); + font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size)); + font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); + line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); + display: block; } + diff --git a/packages/meter/src/meter-overrides.css b/packages/meter/src/meter-overrides.css index 08a6354cb2..8b86dcbea1 100644 --- a/packages/meter/src/meter-overrides.css +++ b/packages/meter/src/meter-overrides.css @@ -1,42 +1,39 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-meter-min-width: var(--system-meter-min-width); - --spectrum-meter-max-width: var(--system-meter-max-width); - --spectrum-meter-inline-size: var(--system-meter-inline-size); - --spectrum-meter-top-to-text: var(--system-meter-top-to-text); - --spectrum-meter-fill-color-positive: var( - --system-meter-fill-color-positive - ); - --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice); - --spectrum-meter-fill-color-negative: var( - --system-meter-fill-color-negative - ); - --spectrum-meter-thickness: var(--system-meter-thickness); - --spectrum-meter-font-size: var(--system-meter-font-size); + --spectrum-meter-min-width: var(--system-meter-min-width); + --spectrum-meter-max-width: var(--system-meter-max-width); + --spectrum-meter-inline-size: var(--system-meter-inline-size); + --spectrum-meter-top-to-text: var(--system-meter-top-to-text); + --spectrum-meter-fill-color-positive: var(--system-meter-fill-color-positive); + --spectrum-meter-fill-color-notice: var(--system-meter-fill-color-notice); + --spectrum-meter-fill-color-negative: var(--system-meter-fill-color-negative); + --spectrum-meter-thickness: var(--system-meter-thickness); + --spectrum-meter-font-size: var(--system-meter-font-size); } -:host([size='s']) { - --spectrum-meter-thickness: var(--system-meter-size-s-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-s-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text); +:host([size="s"]) { + --spectrum-meter-thickness: var(--system-meter-size-s-thickness); + --spectrum-meter-inline-size: var(--system-meter-size-s-inline-size); + --spectrum-meter-font-size: var(--system-meter-size-s-font-size); + --spectrum-meter-top-to-text: var(--system-meter-size-s-top-to-text); } -:host([size='l']) { - --spectrum-meter-thickness: var(--system-meter-size-l-thickness); - --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size); - --spectrum-meter-font-size: var(--system-meter-size-l-font-size); - --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text); +:host([size="l"]) { + --spectrum-meter-thickness: var(--system-meter-size-l-thickness); + --spectrum-meter-inline-size: var(--system-meter-size-l-inline-size); + --spectrum-meter-font-size: var(--system-meter-size-l-font-size); + --spectrum-meter-top-to-text: var(--system-meter-size-l-top-to-text); } + diff --git a/packages/meter/src/progress-bar-overrides.css b/packages/meter/src/progress-bar-overrides.css index 60a1a39eac..dae87e5623 100644 --- a/packages/meter/src/progress-bar-overrides.css +++ b/packages/meter/src/progress-bar-overrides.css @@ -1,122 +1,67 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --system-progress-bar-animation-ease-in-out-indeterminate - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --system-progress-bar-animation-duration-indeterminate - ); - --spectrum-progressbar-corner-radius: var( - --system-progress-bar-corner-radius - ); - --spectrum-progressbar-fill-size-indeterminate: var( - --system-progress-bar-fill-size-indeterminate - ); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var( - --system-progress-bar-line-height-cjk - ); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --system-progress-bar-spacing-label-to - ); - --spectrum-progressbar-spacing-label-to-text: var( - --system-progress-bar-spacing-label-to-text - ); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); - --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var( - --system-progress-bar-label-and-value-white - ); - --spectrum-progressbar-track-color-white: var( - --system-progress-bar-track-color-white - ); - --spectrum-progressbar-fill-color-white: var( - --system-progress-bar-fill-color-white - ); - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-default - ); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-spacing-top-to-text - ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate); + --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate); + --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius); + --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to); + --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white); + --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white); + --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text); } .spectrum-ProgressBar--sizeM { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-m-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-m-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-m-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-m-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text); } .spectrum-ProgressBar--sizeS { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-s-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-s-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-s-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-s-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text); } .spectrum-ProgressBar--sizeL { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-l-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-l-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-l-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-l-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text); } .spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-xl-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-xl-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-xl-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-xl-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text); } + diff --git a/packages/meter/src/spectrum-meter.css b/packages/meter/src/spectrum-meter.css index e35d60f894..a9b64c4903 100644 --- a/packages/meter/src/spectrum-meter.css +++ b/packages/meter/src/spectrum-meter.css @@ -1,51 +1,34 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --mod-progressbar-size-default: var( - --mod-meter-inline-size, - var(--spectrum-meter-inline-size) - ); - --mod-progressbar-max-size: var( - --mod-meter-max-width, - var(--spectrum-meter-max-width) - ); - --mod-progressbar-min-size: var( - --mod-meter-min-width, - var(--spectrum-meter-min-width) - ); - --mod-progressbar-thickness: var(--spectrum-meter-thickness); - --mod-progressbar-font-size: var(--spectrum-meter-font-size); - --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text); + --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size)); + --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width)); + --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width)); + --mod-progressbar-thickness: var(--spectrum-meter-thickness); + --mod-progressbar-font-size: var(--spectrum-meter-font-size); + --mod-progressbar-spacing-top-to-text: var(--spectrum-meter-top-to-text); } -:host([variant='positive']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-positive, - var(--spectrum-meter-fill-color-positive) - ); +:host([variant="positive"]) { + --mod-progressbar-fill-color: var(--mod-meter-fill-color-positive, var(--spectrum-meter-fill-color-positive)); } -:host([variant='notice']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-notice, - var(--spectrum-meter-fill-color-notice) - ); +:host([variant="notice"]) { + --mod-progressbar-fill-color: var(--mod-meter-fill-color-notice, var(--spectrum-meter-fill-color-notice)); } -:host([variant='negative']) { - --mod-progressbar-fill-color: var( - --mod-meter-fill-color-negative, - var(--spectrum-meter-fill-color-negative) - ); +:host([variant="negative"]) { + --mod-progressbar-fill-color: var(--mod-meter-fill-color-negative, var(--spectrum-meter-fill-color-negative)); } + diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css index f8e10b8fbc..d3b2d9ef35 100644 --- a/packages/meter/src/spectrum-progress-bar.css +++ b/packages/meter/src/spectrum-progress-bar.css @@ -1,245 +1,140 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - font-size: var( - --mod-progressbar-font-size, - var(--spectrum-progressbar-font-size) - ); - vertical-align: top; - inline-size: var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) - ); - min-inline-size: var( - --mod-progressbar-min-size, - var(--spectrum-progressbar-min-size) - ); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; -} - -.label, -.percentage { - text-align: start; - line-height: var( - --mod-progressbar-line-height, - var(--spectrum-progressbar-line-height) - ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) - ); - margin-block-start: var( - --mod-progressbar-spacing-top-to-text, - var(--spectrum-progressbar-spacing-top-to-text) - ); - margin-block-end: var( - --mod-progressbar-spacing-label-to-progressbar, - var(--spectrum-progressbar-spacing-label-to-progressbar) - ); -} - -.label:lang(ja), -.label:lang(ko), -.label:lang(zh), -.percentage:lang(ja), -.percentage:lang(ko), -.percentage:lang(zh) { - line-height: var( - --mod-progressbar-line-height-cjk, - var(--spectrum-progressbar-line-height-cjk) - ); + font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); + vertical-align: top; + inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); + min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; +} + +.label, .percentage { + text-align: start; + line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); + color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); + margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); + margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); +} + +.label:lang(ja), .label:lang(ko), .label:lang(zh), .percentage:lang(ja), .percentage:lang(ko), .percentage:lang(zh) { + line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); } .label { - flex: 1; + flex: 1; } .percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + align-self: flex-start; + margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } .track { - inline-size: 100%; - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( - --highcontrast-progressbar-track-color, - var( - --mod-progressbar-track-color, - var(--spectrum-progressbar-track-color) - ) - ); - overflow: hidden; + inline-size: 100%; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + overflow: hidden; } .fill { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - background: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color, - var(--spectrum-progressbar-fill-color) - ) - ); - border: none; - transition: width 1s; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + border: none; + transition: width 1s; } :host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) - ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) - ); - animation-iteration-count: infinite; - position: relative; -} - -:host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; + inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); + animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); + will-change: transform; + animation-name: indeterminate-loop-ltr; + animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)); + animation-iteration-count: infinite; + position: relative; +} + +:host([indeterminate]) .fill:dir(rtl), :host([dir="rtl"][indeterminate]) .fill { + animation-name: indeterminate-loop-rtl; } :host([side-label]) { - flex-flow: row; - justify-content: space-between; - display: inline-flex; + flex-flow: row; + justify-content: space-between; + display: inline-flex; } :host([side-label]) .track { - flex: 1 1 - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); + flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); } :host([side-label]) .label { - flex-grow: 0; - margin-block-end: 0; - margin-inline-end: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + flex-grow: 0; + margin-block-end: 0; + margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } :host([side-label]) .percentage { - text-align: end; - order: 3; - margin-block-end: 0; - margin-inline-start: var( - --mod-spacing-progressbar-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + text-align: end; + order: 3; + margin-block-end: 0; + margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +:host([static-color="white"]) .fill { + background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); } -:host([static-color='white']) .fill, -:host([static-color='white']) .label, -:host([static-color='white']) .percentage { - color: var( - --mod-progressbar-label-and-value-white, - var(--spectrum-progressbar-label-and-value-white) - ); +:host([static-color="white"]) .fill, :host([static-color="white"]) .label, :host([static-color="white"]) .percentage { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +:host([static-color="white"]) .track { + background: var(--spectrum-progressbar-track-color-white); } @keyframes indeterminate-loop-ltr { - 0% { - transform: translate( - calc( - var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ) * -1 - ) - ); - } - - to { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) - ); - } + 0% { + transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1)); + } + + to { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); + } } @keyframes indeterminate-loop-rtl { - 0% { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) - ) - ); - } - - to { - transform: translate( - calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 - ) - ); - } + 0% { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + } + + to { + transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1)); + } } @media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; - } + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; + border: 1px solid ButtonText; + } } + diff --git a/packages/modal/src/modal-overrides.css b/packages/modal/src/modal-overrides.css index f05f590dbb..0d6e631979 100644 --- a/packages/modal/src/modal-overrides.css +++ b/packages/modal/src/modal-overrides.css @@ -1,37 +1,26 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-modal-confirm-exit-animation-delay: var( - --system-modal-confirm-exit-animation-delay - ); - --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); - --spectrum-modal-max-height: var(--system-modal-max-height); - --spectrum-modal-max-width: var(--system-modal-max-width); - --spectrum-modal-background-color: var(--system-modal-background-color); - --spectrum-modal-confirm-border-radius: var( - --system-modal-confirm-border-radius - ); - --spectrum-modal-confirm-exit-animation-duration: var( - --system-modal-confirm-exit-animation-duration - ); - --spectrum-modal-confirm-entry-animation-duration: var( - --system-modal-confirm-entry-animation-duration - ); - --spectrum-modal-confirm-entry-animation-delay: var( - --system-modal-confirm-entry-animation-delay - ); - --spectrum-modal-transition-animation-duration: var( - --system-modal-transition-animation-duration - ); + --spectrum-modal-confirm-exit-animation-delay: var(--system-modal-confirm-exit-animation-delay); + --spectrum-modal-fullscreen-margin: var(--system-modal-fullscreen-margin); + --spectrum-modal-max-height: var(--system-modal-max-height); + --spectrum-modal-max-width: var(--system-modal-max-width); + --spectrum-modal-background-color: var(--system-modal-background-color); + --spectrum-modal-confirm-border-radius: var(--system-modal-confirm-border-radius); + --spectrum-modal-confirm-exit-animation-duration: var(--system-modal-confirm-exit-animation-duration); + --spectrum-modal-confirm-entry-animation-duration: var(--system-modal-confirm-entry-animation-duration); + --spectrum-modal-confirm-entry-animation-delay: var(--system-modal-confirm-entry-animation-delay); + --spectrum-modal-transition-animation-duration: var(--system-modal-transition-animation-duration); } + diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css index 325ecd48cc..0ad4d2dd22 100644 --- a/packages/modal/src/spectrum-modal-wrapper.css +++ b/packages/modal/src/spectrum-modal-wrapper.css @@ -1,53 +1,49 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - inline-size: 100vw; - block-size: 100vh; - block-size: -webkit-fill-available; - block-size: stretch; - visibility: hidden; - pointer-events: none; - z-index: 1; - transition: visibility 0s linear - var( - --mod-modal-transition-animation-duration, - var(--spectrum-modal-transition-animation-duration) - ); - justify-content: center; - align-items: center; - display: flex; - position: fixed; - inset-block-start: 0; - inset-inline-start: 0; + box-sizing: border-box; + inline-size: 100vw; + block-size: 100vh; + block-size: -webkit-fill-available; + block-size: stretch; + visibility: hidden; + pointer-events: none; + z-index: 1; + transition: visibility 0s linear var(--mod-modal-transition-animation-duration, var(--spectrum-modal-transition-animation-duration)); + justify-content: center; + align-items: center; + display: flex; + position: fixed; + inset-block-start: 0; + inset-inline-start: 0; } :host([open]) { - visibility: visible; + visibility: visible; } -@media only screen and (device-height <= 350px), - only screen and (device-width <= 400px) { - :host([responsive]) { - inline-size: 100%; - block-size: 100%; - max-inline-size: 100%; - max-block-size: 100%; - border-radius: 0; - } +@media only screen and (device-height <= 350px), only screen and (device-width <= 400px) { + :host([responsive]) { + inline-size: 100%; + block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; + border-radius: 0; + } - :host([responsive]) { - margin-block-start: 0; - } + :host([responsive]) { + margin-block-start: 0; + } } + diff --git a/packages/modal/src/spectrum-modal.css b/packages/modal/src/spectrum-modal.css index fcd925ba52..59d1f4cce0 100644 --- a/packages/modal/src/spectrum-modal.css +++ b/packages/modal/src/spectrum-modal.css @@ -1,186 +1,81 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .modal { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: transform .13s ease-in-out, opacity .13s ease-in-out, visibility 0s linear .13s; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)); } :host([open]) .modal { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s)); } .modal { - transform: translateY( - var( - --mod-modal-confirm-entry-animation-distance, - var(--spectrum-modal-confirm-entry-animation-distance) - ) - ); - z-index: 1; - max-block-size: var( - --mod-modal-max-height, - var(--spectrum-modal-max-height) - ); - max-inline-size: var( - --mod-modal-max-width, - var(--spectrum-modal-max-width) - ); - background: var( - --mod-modal-background-color, - var(--spectrum-modal-background-color) - ); - border-radius: var( - --mod-modal-confirm-border-radius, - var(--spectrum-modal-confirm-border-radius) - ); - pointer-events: auto; - transition: - opacity - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - var(--spectrum-animation-ease-in) - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ), - visibility 0s linear - calc( - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ) + - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - ), - transform 0s linear - calc( - var( - --mod-modal-confirm-exit-animation-delay, - var(--spectrum-modal-confirm-exit-animation-delay) - ) + - var( - --mod-modal-confirm-exit-animation-duration, - var(--spectrum-modal-confirm-exit-animation-duration) - ) - ); - outline: none; - overflow: hidden; + transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-modal-confirm-entry-animation-distance))); + z-index: 1; + max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height)); + max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width)); + background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); + border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius)); + pointer-events: auto; + transition: opacity var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration)) var(--spectrum-animation-ease-in) var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)), visibility 0s linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))), transform 0s linear calc(var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) + var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))); + outline: none; + overflow: hidden; } :host([open]) .modal { - transition: - transform - var( - --mod-modal-confirm-entry-animation-duration, - var(--spectrum-modal-confirm-entry-animation-duration) - ) - var(--spectrum-animation-ease-out) - var( - --mod-modal-confirm-entry-animation-delay, - var(--spectrum-modal-confirm-entry-animation-delay) - ), - opacity - var( - --mod-modal-confirm-entry-animation-duration, - var(--spectrum-modal-confirm-entry-animation-duration) - ) - var(--spectrum-animation-ease-out) - var( - --mod-modal-confirm-entry-animation-delay, - var(--spectrum-modal-confirm-entry-animation-delay) - ); - transform: translateY(0); + transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)), opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)); + transform: translateY(0); } -@media only screen and (device-height <= 350px), - only screen and (device-width <= 400px) { - :host([responsive]) .modal { - inline-size: 100%; - block-size: 100%; - max-inline-size: 100%; - max-block-size: 100%; - border-radius: 0; - } +@media only screen and (device-height <= 350px), only screen and (device-width <= 400px) { + :host([responsive]) .modal { + inline-size: 100%; + block-size: 100%; + max-inline-size: 100%; + max-block-size: 100%; + border-radius: 0; + } } .fullscreen { - max-inline-size: none; - max-block-size: none; - position: fixed; - inset-block-start: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-block-end: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-inline-start: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); - inset-inline-end: var( - --mod-modal-fullscreen-margin, - var(--spectrum-modal-fullscreen-margin) - ); + max-inline-size: none; + max-block-size: none; + position: fixed; + inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-block-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-inline-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); } .fullscreenTakeover { - max-inline-size: none; - max-block-size: none; - box-sizing: border-box; - border: none; - border-radius: 0; - position: fixed; - inset: 0; + max-inline-size: none; + max-block-size: none; + box-sizing: border-box; + border: none; + border-radius: 0; + position: fixed; + inset: 0; } -.fullscreenTakeover, -:host([open]) .fullscreenTakeover { - transform: none; +.fullscreenTakeover, :host([open]) .fullscreenTakeover { + transform: none; } + diff --git a/packages/number-field/src/number-field-overrides.css b/packages/number-field/src/number-field-overrides.css index 822d373bc9..b23f80a83c 100644 --- a/packages/number-field/src/number-field-overrides.css +++ b/packages/number-field/src/number-field-overrides.css @@ -1,128 +1,71 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-stepper-border-width: var(--system-stepper-border-width); - --spectrum-stepper-border-color: var(--system-stepper-border-color); - --spectrum-stepper-border-color-hover: var( - --system-stepper-border-color-hover - ); - --spectrum-stepper-border-color-focus: var( - --system-stepper-border-color-focus - ); - --spectrum-stepper-border-color-focus-hover: var( - --system-stepper-border-color-focus-hover - ); - --spectrum-stepper-border-color-keyboard-focus: var( - --system-stepper-border-color-keyboard-focus - ); - --spectrum-stepper-border-radius: var(--system-stepper-border-radius); - --spectrum-stepper-min-width-multiplier: var( - --system-stepper-min-width-multiplier - ); - --spectrum-stepper-animation-duration: var( - --system-stepper-animation-duration - ); - --spectrum-stepper-buttons-border-style: var( - --system-stepper-buttons-border-style - ); - --spectrum-stepper-buttons-border-width: var( - --system-stepper-buttons-border-width - ); - --spectrum-stepper-buttons-border-color: var( - --system-stepper-buttons-border-color - ); - --spectrum-stepper-buttons-background-color: var( - --system-stepper-buttons-background-color - ); - --spectrum-stepper-buttons-border-color-hover: var( - --system-stepper-buttons-border-color-hover - ); - --spectrum-stepper-buttons-border-color-focus: var( - --system-stepper-buttons-border-color-focus - ); - --spectrum-stepper-buttons-border-color-keyboard-focus: var( - --system-stepper-buttons-border-color-keyboard-focus - ); - --spectrum-stepper-button-padding: var(--system-stepper-button-padding); - --spectrum-stepper-button-border-radius-reset: var( - --system-stepper-button-border-radius-reset - ); - --spectrum-stepper-button-border-width: var( - --system-stepper-button-border-width - ); - --spectrum-stepper-button-background-color-focus: var( - --system-stepper-button-background-color-focus - ); - --spectrum-stepper-button-background-color-keyboard-focus: var( - --system-stepper-button-background-color-keyboard-focus - ); - --spectrum-stepper-border-color-invalid: var( - --system-stepper-border-color-invalid - ); - --spectrum-stepper-border-color-hover-invalid: var( - --system-stepper-border-color-hover-invalid - ); - --spectrum-stepper-border-color-focus-invalid: var( - --system-stepper-border-color-focus-invalid - ); - --spectrum-stepper-border-color-focus-hover-invalid: var( - --system-stepper-border-color-focus-hover-invalid - ); - --spectrum-stepper-border-color-keyboard-focus-invalid: var( - --system-stepper-border-color-keyboard-focus-invalid - ); - --spectrum-stepper-focus-indicator-width: var( - --system-stepper-focus-indicator-width - ); - --spectrum-stepper-focus-indicator-gap: var( - --system-stepper-focus-indicator-gap - ); - --spectrum-stepper-focus-indicator-color: var( - --system-stepper-focus-indicator-color - ); - --spectrum-stepper-button-border-color-quiet: var( - --system-stepper-button-border-color-quiet - ); - --spectrum-stepper-button-border-color-disabled: var( - --system-stepper-button-border-color-disabled - ); - --spectrum-stepper-button-border-width-disabled: var( - --system-stepper-button-border-width-disabled - ); - --spectrum-stepper-buttons-background-color-disabled: var( - --system-stepper-buttons-background-color-disabled - ); - --spectrum-stepper-button-width: var(--system-stepper-button-width); - --spectrum-stepper-height: var(--system-stepper-height); + --spectrum-stepper-border-width: var(--system-stepper-border-width); + --spectrum-stepper-border-color: var(--system-stepper-border-color); + --spectrum-stepper-border-color-hover: var(--system-stepper-border-color-hover); + --spectrum-stepper-border-color-focus: var(--system-stepper-border-color-focus); + --spectrum-stepper-border-color-focus-hover: var(--system-stepper-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus: var(--system-stepper-border-color-keyboard-focus); + --spectrum-stepper-border-radius: var(--system-stepper-border-radius); + --spectrum-stepper-min-width-multiplier: var(--system-stepper-min-width-multiplier); + --spectrum-stepper-animation-duration: var(--system-stepper-animation-duration); + --spectrum-stepper-buttons-border-style: var(--system-stepper-buttons-border-style); + --spectrum-stepper-buttons-border-width: var(--system-stepper-buttons-border-width); + --spectrum-stepper-buttons-border-color: var(--system-stepper-buttons-border-color); + --spectrum-stepper-buttons-background-color: var(--system-stepper-buttons-background-color); + --spectrum-stepper-buttons-border-color-hover: var(--system-stepper-buttons-border-color-hover); + --spectrum-stepper-buttons-border-color-focus: var(--system-stepper-buttons-border-color-focus); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--system-stepper-buttons-border-color-keyboard-focus); + --spectrum-stepper-button-padding: var(--system-stepper-button-padding); + --spectrum-stepper-button-border-radius-reset: var(--system-stepper-button-border-radius-reset); + --spectrum-stepper-button-border-width: var(--system-stepper-button-border-width); + --spectrum-stepper-button-background-color-focus: var(--system-stepper-button-background-color-focus); + --spectrum-stepper-button-background-color-keyboard-focus: var(--system-stepper-button-background-color-keyboard-focus); + --spectrum-stepper-border-color-invalid: var(--system-stepper-border-color-invalid); + --spectrum-stepper-border-color-hover-invalid: var(--system-stepper-border-color-hover-invalid); + --spectrum-stepper-border-color-focus-invalid: var(--system-stepper-border-color-focus-invalid); + --spectrum-stepper-border-color-focus-hover-invalid: var(--system-stepper-border-color-focus-hover-invalid); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--system-stepper-border-color-keyboard-focus-invalid); + --spectrum-stepper-focus-indicator-width: var(--system-stepper-focus-indicator-width); + --spectrum-stepper-focus-indicator-gap: var(--system-stepper-focus-indicator-gap); + --spectrum-stepper-focus-indicator-color: var(--system-stepper-focus-indicator-color); + --spectrum-stepper-button-border-color-quiet: var(--system-stepper-button-border-color-quiet); + --spectrum-stepper-button-border-color-disabled: var(--system-stepper-button-border-color-disabled); + --spectrum-stepper-button-border-width-disabled: var(--system-stepper-button-border-width-disabled); + --spectrum-stepper-buttons-background-color-disabled: var(--system-stepper-buttons-background-color-disabled); + --spectrum-stepper-button-width: var(--system-stepper-button-width); + --spectrum-stepper-height: var(--system-stepper-height); } -:host([size='s']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); - --spectrum-stepper-height: var(--system-stepper-size-s-height); +:host([size="s"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-s-button-width); + --spectrum-stepper-height: var(--system-stepper-size-s-height); } -:host([size='m']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); - --spectrum-stepper-height: var(--system-stepper-size-m-height); +:host([size="m"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-m-button-width); + --spectrum-stepper-height: var(--system-stepper-size-m-height); } -:host([size='l']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); - --spectrum-stepper-height: var(--system-stepper-size-l-height); +:host([size="l"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-l-button-width); + --spectrum-stepper-height: var(--system-stepper-size-l-height); } -:host([size='xl']) #textfield { - --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); - --spectrum-stepper-height: var(--system-stepper-size-xl-height); +:host([size="xl"]) #textfield { + --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); + --spectrum-stepper-height: var(--system-stepper-size-xl-height); } + diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css index f85c15210c..b0acb1bbc5 100644 --- a/packages/number-field/src/spectrum-number-field.css +++ b/packages/number-field/src/spectrum-number-field.css @@ -1,548 +1,255 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #textfield { - --spectrum-stepper-width: calc( - var(--mod-stepper-height, var(--spectrum-stepper-height)) * - var( - --mod-stepper-min-width-multiplier, - var(--spectrum-stepper-min-width-multiplier) - ) + - var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ) + - var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ) * 2 - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color, - var( - --mod-stepper-buttons-border-color, - var(--spectrum-stepper-buttons-border-color) - ) - ); - --mod-infield-button-border-width: var( - --mod-stepper-button-border-width, - var(--spectrum-stepper-button-border-width) - ); - --mod-infield-button-border-radius-reset: var( - --spectrum-stepper-button-border-radius-reset - ); - --mod-textfield-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - border-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - flex-flow: row; - display: inline-flex; - position: relative; + --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-stepper-min-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2); + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-buttons-border-color, var(--spectrum-stepper-buttons-border-color))); + --mod-infield-button-border-width: var(--mod-stepper-button-border-width, var(--spectrum-stepper-button-border-width)); + --mod-infield-button-border-radius-reset: var(--spectrum-stepper-button-border-radius-reset); + --mod-textfield-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width)); + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + border-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + flex-flow: row; + display: inline-flex; + position: relative; } #textfield:before { - content: ''; + content: ""; } #textfield:after { - content: ''; - inline-size: 100%; - block-size: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ) + - var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - ) * -1 - ); - inset-inline-start: 0; + content: ""; + inline-size: 100%; + block-size: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)); + position: absolute; + inset-block-end: calc((var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)) + var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width))) * -1); + inset-inline-start: 0; } -:host([focused]) #textfield, -#textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-buttons-border-color-focus, - var(--spectrum-stepper-buttons-border-color-focus) - ) - ); +:host([focused]) #textfield, #textfield:focus { + --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))); } -:host([focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus .input { - outline: none; +:host([focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus .input { + outline: none; } -:host([focused]:not([disabled])) #textfield .buttons, -:host([focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus .buttons, -:host(:not([disabled])) #textfield:focus .input { - border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); +:host([focused]:not([disabled])) #textfield .buttons, :host([focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus .buttons, :host(:not([disabled])) #textfield:focus .input { + border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); } -:host([keyboard-focused]) #textfield, -#textfield:focus-visible { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-buttons-border-color-keyboard-focus, - var(--spectrum-stepper-buttons-border-color-keyboard-focus) - ) - ); +:host([keyboard-focused]) #textfield, #textfield:focus-visible { + --mod-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus))); } -:host([keyboard-focused]:not([disabled])) #textfield, -:host(:not([disabled])) #textfield:focus-visible { - outline: var( - --mod-stepper-focus-indicator-width, - var(--spectrum-stepper-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) - ); - outline-offset: var( - --mod-stepper-focus-indicator-gap, - var(--spectrum-stepper-focus-indicator-gap) - ); +:host([keyboard-focused]:not([disabled])) #textfield, :host(:not([disabled])) #textfield:focus-visible { + outline: var(--mod-stepper-focus-indicator-width, var(--spectrum-stepper-focus-indicator-width)) solid; + outline-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); + outline-offset: var(--mod-stepper-focus-indicator-gap, var(--spectrum-stepper-focus-indicator-gap)); } -:host([keyboard-focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus-visible .input { - outline: none; +:host([keyboard-focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus-visible .input { + outline: none; } -:host([keyboard-focused]:not([disabled])) #textfield .buttons, -:host([keyboard-focused]:not([disabled])) #textfield .input, -:host(:not([disabled])) #textfield:focus-visible .buttons, -:host(:not([disabled])) #textfield:focus-visible .input { - border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-border-color-keyboard-focus, - var(--spectrum-stepper-border-color-keyboard-focus) - ) - ); +:host([keyboard-focused]:not([disabled])) #textfield .buttons, :host([keyboard-focused]:not([disabled])) #textfield .input, :host(:not([disabled])) #textfield:focus-visible .buttons, :host(:not([disabled])) #textfield:focus-visible .input { + border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); } :host([invalid]:not([disabled])) #textfield { - --mod-stepper-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-stepper-border-color-hover: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) - ); - --mod-stepper-border-color-focus: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) - ); - --mod-stepper-border-color-focus-hover: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) - ); - --mod-stepper-border-color-keyboard-focus: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) - ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-invalid, - var(--spectrum-stepper-border-color-invalid) - ); - --mod-textfield-icon-spacing-inline-start-invalid: 0; + --mod-stepper-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); + --mod-stepper-border-color-hover: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid)); + --mod-stepper-border-color-focus: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); + --mod-stepper-border-color-focus-hover: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); + --mod-stepper-border-color-keyboard-focus: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); + --mod-infield-button-border-color: var(--mod-stepper-border-color-invalid, var(--spectrum-stepper-border-color-invalid)); + --mod-textfield-icon-spacing-inline-start-invalid: 0; } -:host([invalid][focused]:not([disabled])) #textfield, -:host([invalid]:not([disabled])) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-invalid, - var(--spectrum-stepper-border-color-focus-invalid) - ); +:host([invalid][focused]:not([disabled])) #textfield, :host([invalid]:not([disabled])) #textfield:focus { + --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-invalid, var(--spectrum-stepper-border-color-focus-invalid)); } -:host([invalid][keyboard-focused]:not([disabled])) #textfield, -:host([invalid]:not([disabled])) #textfield:focus-visible { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-keyboard-focus-invalid, - var(--spectrum-stepper-border-color-keyboard-focus-invalid) - ); +:host([invalid][keyboard-focused]:not([disabled])) #textfield, :host([invalid]:not([disabled])) #textfield:focus-visible { + --mod-infield-button-border-color: var(--mod-stepper-border-color-keyboard-focus-invalid, var(--spectrum-stepper-border-color-keyboard-focus-invalid)); } :host([disabled]) #textfield { - --mod-stepper-border-color: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-focus-hover: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-border-color-keyboard-focus: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-stepper-buttons-background-color: var( - --spectrum-stepper-buttons-background-color-disabled - ); - --mod-infield-button-border-width: var( - --spectrum-stepper-button-border-width-disabled - ); - --mod-infield-button-border-color: var( - --spectrum-stepper-button-border-color-disabled - ); - --mod-textfield-border-color-disabled: var( - --spectrum-stepper-button-border-color-disabled - ); + --mod-stepper-border-color: var(--spectrum-stepper-button-border-color-disabled); + --mod-stepper-border-color-hover: var(--spectrum-stepper-button-border-color-disabled); + --mod-stepper-border-color-focus: var(--spectrum-stepper-button-border-color-disabled); + --mod-stepper-border-color-focus-hover: var(--spectrum-stepper-button-border-color-disabled); + --mod-stepper-border-color-keyboard-focus: var(--spectrum-stepper-button-border-color-disabled); + --mod-stepper-buttons-background-color: var(--spectrum-stepper-buttons-background-color-disabled); + --mod-infield-button-border-width: var(--spectrum-stepper-button-border-width-disabled); + --mod-infield-button-border-color: var(--spectrum-stepper-button-border-color-disabled); + --mod-textfield-border-color-disabled: var(--spectrum-stepper-button-border-color-disabled); } #textfield .input { - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-inline-end-width: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-inline-end-width: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; } #textfield.hide-stepper .input { - border-inline-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); + border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); } #textfield .buttons { - box-sizing: border-box; - block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); - inline-size: var( - --mod-stepper-button-width, - var(--spectrum-stepper-button-width) - ); - border-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-style: var( - --mod-stepper-buttons-border-style, - var(--spectrum-stepper-buttons-border-style) - ); - border-width: var( - --highcontrast-stepper-buttons-border-width, - var( - --mod-stepper-buttons-border-width, - var(--spectrum-stepper-buttons-border-width) - ) - ); - background-color: var( - --highcontrast-stepper-buttons-background-color, - var( - --mod-stepper-buttons-background-color, - var(--spectrum-stepper-buttons-background-color) - ) - ); - transition: border-color - var( - --mod-stepper-animation-duration, - var(--spectrum-stepper-animation-duration) - ) - ease-in-out; - border-inline-start-width: 0; - border-start-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - border-end-end-radius: var( - --mod-stepper-border-radius, - var(--spectrum-stepper-border-radius) - ); - flex-direction: column; - justify-content: center; - display: flex; + box-sizing: border-box; + block-size: var(--mod-stepper-height, var(--spectrum-stepper-height)); + inline-size: var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)); + border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style)); + border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))); + background-color: var(--highcontrast-stepper-buttons-background-color, var(--mod-stepper-buttons-background-color, var(--spectrum-stepper-buttons-background-color))); + transition: border-color var(--mod-stepper-animation-duration, var(--spectrum-stepper-animation-duration)) ease-in-out; + border-inline-start-width: 0; + border-start-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius)); + flex-direction: column; + justify-content: center; + display: flex; } :host([quiet]) #textfield { - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; } :host([quiet]) #textfield .input { - --mod-textfield-focus-indicator-color: transparent; + --mod-textfield-focus-indicator-color: transparent; } :host([quiet]) #textfield.hide-stepper .input { - border-inline-end-width: 0; - border-end-end-radius: 0; + border-inline-end-width: 0; + border-end-end-radius: 0; } :host([quiet]) #textfield .buttons { - --mod-infield-button-border-color: transparent; - border-width: 0; - border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - border-block-end-color: var( - --highcontrast-stepper-border-color, - var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)) - ); - border-block-end-style: solid; - border-end-end-radius: 0; + --mod-infield-button-border-color: transparent; + border-width: 0; + border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + border-block-end-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color))); + border-block-end-style: solid; + border-end-end-radius: 0; } :host([quiet]) #textfield .button { - --mod-infield-button-width-stacked: var( - --mod-stepper-button-width-quiet, - var(--spectrum-stepper-button-width) - ); - --mod-infield-button-border-color: var( - --mod-stepper-border-color-quiet, - var(--spectrum-stepper-button-border-color-quiet) - ); - --mod-infield-button-stacked-bottom-border-block-end-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - --mod-infield-button-stacked-bottom-border-radius-end-end: 0; - --mod-infield-button-stacked-bottom-border-radius-end-start: 0; - --mod-infield-button-fill-justify-content: flex-end; - padding: 0; + --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); + --mod-infield-button-border-color: var(--mod-stepper-border-color-quiet, var(--spectrum-stepper-button-border-color-quiet)); + --mod-infield-button-stacked-bottom-border-block-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + --mod-infield-button-stacked-bottom-border-radius-end-end: 0; + --mod-infield-button-stacked-bottom-border-radius-end-start: 0; + --mod-infield-button-fill-justify-content: flex-end; + padding: 0; } -:host([quiet]) #textfield .buttons, -:host([quiet]) #textfield .input { - background-color: initial; +:host([quiet]) #textfield .buttons, :host([quiet]) #textfield .input { + background-color: initial; } -:host([quiet][focused]) #textfield, -:host([quiet]) #textfield:focus { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus, - var( - --mod-stepper-border-color-focus, - var(--spectrum-stepper-border-color-focus) - ) - ); +:host([quiet][focused]) #textfield, :host([quiet]) #textfield:focus { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus))); } :host([quiet][keyboard-focused]:not([disabled])) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-keyboard-focus, - var( - --mod-stepper-border-color-keyboard-focus, - var(--spectrum-stepper-border-color-keyboard-focus) - ) - ); - outline: none; + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))); + outline: none; } :host([quiet][keyboard-focused]:not([disabled])) #textfield:after { - background-color: var( - --highcontrast-stepper-focus-indicator-color, - var( - --mod-stepper-focus-indicator-color, - var(--spectrum-stepper-focus-indicator-color) - ) - ); + background-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-stepper-focus-indicator-color))); } @media (hover: hover) { - :host(:hover:not([disabled])) #textfield { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-buttons-border-color-hover, - var(--spectrum-stepper-buttons-border-color-hover) - ) - ); - } - - :host([focused]:hover) #textfield, - :host(:hover) #textfield:focus { - --mod-stepper-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) - ) - ); - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-buttons-border-color-focus-hover, - var(--spectrum-stepper-buttons-border-color-focus-hover) - ) - ); - } - - :host([focused]:hover) #textfield .buttons, - :host([focused]:hover) #textfield .input, - :host(:hover) #textfield:focus .buttons, - :host(:hover) #textfield:focus .input { - border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-border-color-focus-hover, - var(--spectrum-stepper-border-color-focus-hover) - ) - ); - } - - :host([invalid]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-hover-invalid, - var(--spectrum-stepper-border-color-hover-invalid) - ); - } - - :host([invalid][focused]:not([disabled]):hover) #textfield, - :host([invalid]:not([disabled]):hover) #textfield:focus { - --mod-infield-button-border-color: var( - --mod-stepper-border-color-focus-hover-invalid, - var(--spectrum-stepper-border-color-focus-hover-invalid) - ); - } - - :host([quiet]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - } - - :host([quiet]:not([disabled]):hover) #textfield .buttons { - background-color: initial; - } - - :host([quiet][focused]:hover) #textfield, - :host([quiet]:hover) #textfield:focus { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-focus-hover, - var( - --mod-stepper-border-color-focus-hover, - var(--spectrum-stepper-border-color-focus-hover) - ) - ); - } - - :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { - --mod-infield-button-border-color: var( - --highcontrast-stepper-border-color-hover, - var( - --mod-stepper-border-color-hover, - var(--spectrum-stepper-border-color-hover) - ) - ); - } + :host(:hover:not([disabled])) #textfield { + --mod-stepper-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover))); + } + + :host([focused]:hover) #textfield, :host(:hover) #textfield:focus { + --mod-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover))); + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover))); + } + + :host([focused]:hover) #textfield .buttons, :host([focused]:hover) #textfield .input, :host(:hover) #textfield:focus .buttons, :host(:hover) #textfield:focus .input { + border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + } + + :host([invalid]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var(--mod-stepper-border-color-hover-invalid, var(--spectrum-stepper-border-color-hover-invalid)); + } + + :host([invalid][focused]:not([disabled]):hover) #textfield, :host([invalid]:not([disabled]):hover) #textfield:focus { + --mod-infield-button-border-color: var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)); + } + + :host([quiet]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + } + + :host([quiet]:not([disabled]):hover) #textfield .buttons { + background-color: initial; + } + + :host([quiet][focused]:hover) #textfield, :host([quiet]:hover) #textfield:focus { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))); + } + + :host([quiet][keyboard-focused]:not([disabled]):hover) #textfield { + --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + } } @media (forced-colors: active) { - :host { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-button-background-color-default: Canvas; - --highcontrast-stepper-button-background-color-hover: Canvas; - --highcontrast-stepper-button-background-color-focus: Canvas; - --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; - --highcontrast-stepper-focus-indicator-color: Highlight; - } - - :host([invalid]) #textfield { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - --highcontrast-infield-button-border-color: Highlight; - } - - :host([disabled]) #textfield { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-infield-button-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var( - --mod-stepper-border-width, - var(--spectrum-stepper-border-width) - ); - } + :host { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-button-background-color-default: Canvas; + --highcontrast-stepper-button-background-color-hover: Canvas; + --highcontrast-stepper-button-background-color-focus: Canvas; + --highcontrast-stepper-button-background-color-keyboard-focus: Canvas; + --highcontrast-stepper-focus-indicator-color: Highlight; + } + + :host([invalid]) #textfield { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + --highcontrast-infield-button-border-color: Highlight; + } + + :host([disabled]) #textfield { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-infield-button-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + } } + diff --git a/packages/picker-button/src/picker-button-overrides.css b/packages/picker-button/src/picker-button-overrides.css index b3b2a5d330..d0f36ba7aa 100644 --- a/packages/picker-button/src/picker-button-overrides.css +++ b/packages/picker-button/src/picker-button-overrides.css @@ -1,158 +1,79 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .root { - --spectrum-picker-button-background-color: var( - --system-picker-button-background-color - ); - --spectrum-picker-button-background-color-hover: var( - --system-picker-button-background-color-hover - ); - --spectrum-picker-button-background-color-down: var( - --system-picker-button-background-color-down - ); - --spectrum-picker-button-background-color-key-focus: var( - --system-picker-button-background-color-key-focus - ); - --spectrum-picker-button-border-color: var( - --system-picker-button-border-color - ); - --spectrum-picker-button-border-radius: var( - --system-picker-button-border-radius - ); - --spectrum-picker-button-border-radius-rounded-sided: var( - --system-picker-button-border-radius-rounded-sided - ); - --spectrum-picker-button-border-radius-sided: var( - --system-picker-button-border-radius-sided - ); - --spectrum-picker-button-border-width: var( - --system-picker-button-border-width - ); - --spectrum-picker-button-height: var(--system-picker-button-height); - --spectrum-picker-button-width: var(--system-picker-button-width); - --spectrum-picker-button-gap: var(--system-picker-button-gap); - --spectrum-picker-button-padding: var(--system-picker-button-padding); - --spectrum-picker-button-label-padding: var( - --system-picker-button-label-padding - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-fill-padding - ); - --spectrum-picker-button-border-radius-rounded: var( - --system-picker-button-border-radius-rounded - ); - --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); - --spectrum-picker-button-icon-color-hover: var( - --system-picker-button-icon-color-hover - ); - --spectrum-picker-button-icon-color-down: var( - --system-picker-button-icon-color-down - ); - --spectrum-picker-button-icon-color-key-focus: var( - --system-picker-button-icon-color-key-focus - ); - --spectrum-picker-button-font-color: var(--system-picker-button-font-color); - --spectrum-picker-button-font-color-hover: var( - --system-picker-button-font-color-hover - ); - --spectrum-picker-button-font-color-down: var( - --system-picker-button-font-color-down - ); - --spectrum-picker-button-font-color-key-focus: var( - --system-picker-button-font-color-key-focus - ); - --spectrum-picker-button-font-family: var( - --system-picker-button-font-family - ); - --spectrum-picker-button-font-style: var(--system-picker-button-font-style); - --spectrum-picker-button-font-weight: var( - --system-picker-button-font-weight - ); - --spectrum-picker-button-font-size: var(--system-picker-button-font-size); - --spectrum-picker-button-background-animation-duration: var( - --system-picker-button-background-animation-duration - ); - --spectrum-picker-button-background-color-disabled: var( - --system-picker-button-background-color-disabled - ); - --spectrum-picker-button-background-color-hover-disabled: var( - --system-picker-button-background-color-hover-disabled - ); - --spectrum-picker-button-background-color-down-disabled: var( - --system-picker-button-background-color-down-disabled - ); - --spectrum-picker-button-border-color-disabled: var( - --system-picker-button-border-color-disabled - ); - --spectrum-picker-button-font-color-disabled: var( - --system-picker-button-font-color-disabled - ); - --spectrum-picker-button-font-color-hover-disabled: var( - --system-picker-button-font-color-hover-disabled - ); - --spectrum-picker-button-font-color-down-disabled: var( - --system-picker-button-font-color-down-disabled - ); - --spectrum-picker-button-icon-color-disabled: var( - --system-picker-button-icon-color-disabled - ); - --spectrum-picker-button-icon-color-hover-disabled: var( - --system-picker-button-icon-color-hover-disabled - ); - --spectrum-picker-button-icon-color-down-disabled: var( - --system-picker-button-icon-color-down-disabled - ); + --spectrum-picker-button-background-color: var(--system-picker-button-background-color); + --spectrum-picker-button-background-color-hover: var(--system-picker-button-background-color-hover); + --spectrum-picker-button-background-color-down: var(--system-picker-button-background-color-down); + --spectrum-picker-button-background-color-key-focus: var(--system-picker-button-background-color-key-focus); + --spectrum-picker-button-border-color: var(--system-picker-button-border-color); + --spectrum-picker-button-border-radius: var(--system-picker-button-border-radius); + --spectrum-picker-button-border-radius-rounded-sided: var(--system-picker-button-border-radius-rounded-sided); + --spectrum-picker-button-border-radius-sided: var(--system-picker-button-border-radius-sided); + --spectrum-picker-button-border-width: var(--system-picker-button-border-width); + --spectrum-picker-button-height: var(--system-picker-button-height); + --spectrum-picker-button-width: var(--system-picker-button-width); + --spectrum-picker-button-gap: var(--system-picker-button-gap); + --spectrum-picker-button-padding: var(--system-picker-button-padding); + --spectrum-picker-button-label-padding: var(--system-picker-button-label-padding); + --spectrum-picker-button-fill-padding: var(--system-picker-button-fill-padding); + --spectrum-picker-button-border-radius-rounded: var(--system-picker-button-border-radius-rounded); + --spectrum-picker-button-icon-color: var(--system-picker-button-icon-color); + --spectrum-picker-button-icon-color-hover: var(--system-picker-button-icon-color-hover); + --spectrum-picker-button-icon-color-down: var(--system-picker-button-icon-color-down); + --spectrum-picker-button-icon-color-key-focus: var(--system-picker-button-icon-color-key-focus); + --spectrum-picker-button-font-color: var(--system-picker-button-font-color); + --spectrum-picker-button-font-color-hover: var(--system-picker-button-font-color-hover); + --spectrum-picker-button-font-color-down: var(--system-picker-button-font-color-down); + --spectrum-picker-button-font-color-key-focus: var(--system-picker-button-font-color-key-focus); + --spectrum-picker-button-font-family: var(--system-picker-button-font-family); + --spectrum-picker-button-font-style: var(--system-picker-button-font-style); + --spectrum-picker-button-font-weight: var(--system-picker-button-font-weight); + --spectrum-picker-button-font-size: var(--system-picker-button-font-size); + --spectrum-picker-button-background-animation-duration: var(--system-picker-button-background-animation-duration); + --spectrum-picker-button-background-color-disabled: var(--system-picker-button-background-color-disabled); + --spectrum-picker-button-background-color-hover-disabled: var(--system-picker-button-background-color-hover-disabled); + --spectrum-picker-button-background-color-down-disabled: var(--system-picker-button-background-color-down-disabled); + --spectrum-picker-button-border-color-disabled: var(--system-picker-button-border-color-disabled); + --spectrum-picker-button-font-color-disabled: var(--system-picker-button-font-color-disabled); + --spectrum-picker-button-font-color-hover-disabled: var(--system-picker-button-font-color-hover-disabled); + --spectrum-picker-button-font-color-down-disabled: var(--system-picker-button-font-color-down-disabled); + --spectrum-picker-button-icon-color-disabled: var(--system-picker-button-icon-color-disabled); + --spectrum-picker-button-icon-color-hover-disabled: var(--system-picker-button-icon-color-hover-disabled); + --spectrum-picker-button-icon-color-down-disabled: var(--system-picker-button-icon-color-down-disabled); } -:host([size='s']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-s-height); - --spectrum-picker-button-width: var(--system-picker-button-size-s-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-s-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-s-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-s-fill-padding - ); +:host([size="s"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-s-height); + --spectrum-picker-button-width: var(--system-picker-button-size-s-width); + --spectrum-picker-button-label-padding: var(--system-picker-button-size-s-label-padding); + --spectrum-picker-button-font-size: var(--system-picker-button-size-s-font-size); + --spectrum-picker-button-fill-padding: var(--system-picker-button-size-s-fill-padding); } -:host([size='l']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-l-height); - --spectrum-picker-button-width: var(--system-picker-button-size-l-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-l-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-l-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-l-fill-padding - ); +:host([size="l"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-l-height); + --spectrum-picker-button-width: var(--system-picker-button-size-l-width); + --spectrum-picker-button-label-padding: var(--system-picker-button-size-l-label-padding); + --spectrum-picker-button-font-size: var(--system-picker-button-size-l-font-size); + --spectrum-picker-button-fill-padding: var(--system-picker-button-size-l-fill-padding); } -:host([size='xl']) .root { - --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); - --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); - --spectrum-picker-button-label-padding: var( - --system-picker-button-size-xl-label-padding - ); - --spectrum-picker-button-font-size: var( - --system-picker-button-size-xl-font-size - ); - --spectrum-picker-button-fill-padding: var( - --system-picker-button-size-xl-fill-padding - ); +:host([size="xl"]) .root { + --spectrum-picker-button-height: var(--system-picker-button-size-xl-height); + --spectrum-picker-button-width: var(--system-picker-button-size-xl-width); + --spectrum-picker-button-label-padding: var(--system-picker-button-size-xl-label-padding); + --spectrum-picker-button-font-size: var(--system-picker-button-size-xl-font-size); + --spectrum-picker-button-fill-padding: var(--system-picker-button-size-xl-fill-padding); } + diff --git a/packages/picker-button/src/spectrum-picker-button.css b/packages/picker-button/src/spectrum-picker-button.css index 4e5736eb06..5b91922c55 100644 --- a/packages/picker-button/src/spectrum-picker-button.css +++ b/packages/picker-button/src/spectrum-picker-button.css @@ -1,364 +1,168 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .root { - background-color: initial; - block-size: var( - --mod-picker-button-width, - var(--spectrum-picker-button-width) - ); - box-sizing: border-box; - padding: var( - --mod-picker-button-padding, - var(--spectrum-picker-button-padding) - ); - border-style: none; - justify-content: center; - align-items: center; - display: flex; + background-color: initial; + block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); + box-sizing: border-box; + padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)); + border-style: none; + justify-content: center; + align-items: center; + display: flex; } @media (hover: hover) { - .root:hover .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-hover, - var(--spectrum-picker-button-background-color-hover) - ); - } + .root:hover .spectrum-PickerButton-fill { + background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover)); + } - .root:hover .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-hover, - var(--spectrum-picker-button-font-color-hover) - ); - } + .root:hover .spectrum-PickerButton-label { + color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover)); + } - .root:hover .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-hover, - var(--spectrum-picker-button-icon-color-hover) - ); - } + .root:hover .spectrum-PickerButton-icon { + color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover)); + } } -:host([open]) .root .spectrum-PickerButton-fill, -:host(:is(:active, [active])) .root .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-down, - var(--spectrum-picker-button-background-color-down) - ); +:host([open]) .root .spectrum-PickerButton-fill, :host(:is(:active, [active])) .root .spectrum-PickerButton-fill { + background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down)); } -:host([open]) .root .spectrum-PickerButton-label, -:host(:is(:active, [active])) .root .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-down, - var(--spectrum-picker-button-font-color-down) - ); +:host([open]) .root .spectrum-PickerButton-label, :host(:is(:active, [active])) .root .spectrum-PickerButton-label { + color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down)); } -:host([open]) .root .spectrum-PickerButton-icon, -:host(:is(:active, [active])) .root .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-down, - var(--spectrum-picker-button-icon-color-down) - ); +:host([open]) .root .spectrum-PickerButton-icon, :host(:is(:active, [active])) .root .spectrum-PickerButton-icon { + color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down)); } -:host([focused]) .root .spectrum-PickerButton-fill, -.root.is-keyboardFocused .spectrum-PickerButton-fill, -.root:focus .spectrum-PickerButton-fill, -.root:focus-visible .spectrum-PickerButton-fill { - background-color: var( - --mod-picker-button-background-color-key-focus, - var(--spectrum-picker-button-background-color-key-focus) - ); +:host([focused]) .root .spectrum-PickerButton-fill, .root.is-keyboardFocused .spectrum-PickerButton-fill, .root:focus .spectrum-PickerButton-fill, .root:focus-visible .spectrum-PickerButton-fill { + background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus)); } -:host([focused]) .root .spectrum-PickerButton-label, -.root.is-keyboardFocused .spectrum-PickerButton-label, -.root:focus .spectrum-PickerButton-label, -.root:focus-visible .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color-key-focus, - var(--spectrum-picker-button-font-color-key-focus) - ); +:host([focused]) .root .spectrum-PickerButton-label, .root.is-keyboardFocused .spectrum-PickerButton-label, .root:focus .spectrum-PickerButton-label, .root:focus-visible .spectrum-PickerButton-label { + color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus)); } -:host([focused]) .root .spectrum-PickerButton-icon, -.root.is-keyboardFocused .spectrum-PickerButton-icon, -.root:focus .spectrum-PickerButton-icon, -.root:focus-visible .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color-key-focus, - var(--spectrum-picker-button-icon-color-key-focus) - ); +:host([focused]) .root .spectrum-PickerButton-icon, .root.is-keyboardFocused .spectrum-PickerButton-icon, .root:focus .spectrum-PickerButton-icon, .root:focus-visible .spectrum-PickerButton-icon { + color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus)); } -.root.is-disabled, -:host([disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-disabled, - var(--spectrum-picker-button-background-color-disabled) - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-disabled, - var(--spectrum-picker-button-background-color-hover-disabled) - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-disabled, - var(--spectrum-picker-button-background-color-down-disabled) - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-disabled, - var(--spectrum-picker-button-border-color-disabled) - ); - --mod-picker-button-font-color: var( - --mod-picker-button-font-color-disabled, - var(--spectrum-picker-button-font-color-disabled) - ); - --mod-picker-button-font-color-hover: var( - --mod-picker-button-font-color-hover-disabled, - var(--spectrum-picker-button-font-color-hover-disabled) - ); - --mod-picker-button-font-color-down: var( - --mod-picker-button-font-color-down-disabled, - var(--spectrum-picker-button-font-color-down-disabled) - ); - --mod-picker-button-icon-color: var( - --mod-picker-button-icon-color-disabled, - var(--spectrum-picker-button-icon-color-disabled) - ); - --mod-picker-button-icon-color-hover: var( - --mod-picker-button-icon-color-hover-disabled, - var(--spectrum-picker-button-icon-color-hover-disabled) - ); - --mod-picker-button-icon-color-down: var( - --mod-picker-button-icon-color-down-disabled, - var(--spectrum-picker-button-icon-color-down-disabled) - ); +.root.is-disabled, :host([disabled]) .root { + --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-picker-button-background-color-disabled)); + --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-picker-button-background-color-hover-disabled)); + --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-picker-button-background-color-down-disabled)); + --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-picker-button-border-color-disabled)); + --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-picker-button-font-color-disabled)); + --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-picker-button-font-color-hover-disabled)); + --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-picker-button-font-color-down-disabled)); + --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-picker-button-icon-color-disabled)); + --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-picker-button-icon-color-hover-disabled)); + --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-picker-button-icon-color-down-disabled)); } :host([quiet]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent - ); - --mod-picker-button-background-color-hover: var( - --mod-picker-button-background-color-hover-quiet, - transparent - ); - --mod-picker-button-background-color-down: var( - --mod-picker-button-background-color-down-quiet, - transparent - ); - --mod-picker-button-background-color-key-focus: var( - --mod-picker-button-background-color-key-focus-quiet, - transparent - ); - --mod-picker-button-border-color: var( - --mod-picker-button-border-color-quiet, - transparent - ); + --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); + --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); + --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); + --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); + --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent); } -:host([quiet]) .root.is-disabled, -:host([quiet][disabled]) .root { - --mod-picker-button-background-color: var( - --mod-picker-button-background-color-quiet, - transparent - ); +:host([quiet]) .root.is-disabled, :host([quiet][disabled]) .root { + --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); } -:host([position='right']) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); +:host([position="right"]) .spectrum-PickerButton-fill { + border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); + border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); } -:host([position='right'][rounded]) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); +:host([position="right"][rounded]) .spectrum-PickerButton-fill { + border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); + border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); } -:host([position='left']) .spectrum-PickerButton-fill { - border-start-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-sided, - var(--spectrum-picker-button-border-radius-sided) - ); +:host([position="left"]) .spectrum-PickerButton-fill { + border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); + border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); } -:host([position='left'][rounded]) .spectrum-PickerButton-fill { - border-start-end-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-rounded-sided, - var(--spectrum-picker-button-border-radius-rounded-sided) - ); +:host([position="left"][rounded]) .spectrum-PickerButton-fill { + border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); + border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); } .spectrum-PickerButton-label { - color: var( - --mod-picker-button-font-color, - var(--spectrum-picker-button-font-color) - ); - white-space: nowrap; - font-family: var( - --mod-picker-button-font-family, - var(--spectrum-picker-button-font-family) - ); - font-style: var( - --mod-picker-button-font-style, - var(--spectrum-picker-button-font-style) - ); - font-weight: var( - --mod-picker-button-font-weight, - var(--spectrum-picker-button-font-weight) - ); - font-size: var( - --mod-picker-button-font-size, - var(--spectrum-picker-button-font-size) - ); - flex: auto; - padding-block-start: var( - --mod-picker-button-label-padding, - var(--spectrum-picker-button-label-padding) - ); - padding-block-end: var( - --mod-picker-button-label-padding, - var(--spectrum-picker-button-label-padding) - ); - overflow: hidden; + color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color)); + white-space: nowrap; + font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family)); + font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style)); + font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight)); + font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size)); + flex: auto; + padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); + padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); + overflow: hidden; } .spectrum-PickerButton-fill { - box-sizing: border-box; - block-size: 100%; - inline-size: 100%; - justify-content: center; - align-items: center; - gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); - background-color: var( - --mod-picker-button-background-color, - var(--spectrum-picker-button-background-color) - ); - border-color: var( - --mod-picker-button-border-color, - var(--spectrum-picker-button-border-color) - ); - border-width: var( - --mod-picker-button-border-width, - var(--spectrum-picker-button-border-width) - ); - padding: calc( - var( - --mod-picker-button-fill-padding, - var(--spectrum-picker-button-fill-padding) - ) - - var( - --mod-picker-button-padding, - var(--spectrum-picker-button-padding) - ) - - var( - --mod-picker-button-border-width, - var(--spectrum-picker-button-border-width) - ) - ); - transition: border-color - var( - --mod-picker-button-background-animation-duration, - var(--spectrum-picker-button-background-animation-duration) - ) - ease-in-out; - border-style: solid; - border-start-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-start-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius, - var(--spectrum-picker-button-border-radius) - ); - display: flex; + box-sizing: border-box; + block-size: 100%; + inline-size: 100%; + justify-content: center; + align-items: center; + gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); + background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color)); + border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color)); + border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)); + padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width))); + transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; + border-style: solid; + border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); + display: flex; } .spectrum-PickerButton-icon { - color: var( - --mod-picker-button-icon-color, - var(--spectrum-picker-button-icon-color) - ); - flex-shrink: 0; + color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color)); + flex-shrink: 0; } :host([rounded]) .spectrum-PickerButton-fill { - border-start-start-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-start-end-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-end-end-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); - border-end-start-radius: var( - --mod-picker-button-border-radius-rounded, - var(--spectrum-picker-button-border-radius-rounded) - ); + border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); + border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); + border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); + border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); } .uiicononly { - inline-size: var( - --mod-picker-button-height, - var(--spectrum-picker-button-height) - ); + inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height)); } .uiicononly .spectrum-PickerButton-label { - display: none; + display: none; } .uiicononly .spectrum-PickerButton-fill { - padding: 0; + padding: 0; } .textuiicon .spectrum-PickerButton-fill { - inline-size: auto; + inline-size: auto; } + diff --git a/packages/picker/src/picker-overrides.css b/packages/picker/src/picker-overrides.css index 3da034b6e1..b2d385b627 100644 --- a/packages/picker/src/picker-overrides.css +++ b/packages/picker/src/picker-overrides.css @@ -1,285 +1,124 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-picker-background-color-default: var( - --system-picker-background-color-default - ); - --spectrum-picker-background-color-default-open: var( - --system-picker-background-color-default-open - ); - --spectrum-picker-background-color-active: var( - --system-picker-background-color-active - ); - --spectrum-picker-background-color-hover: var( - --system-picker-background-color-hover - ); - --spectrum-picker-background-color-hover-open: var( - --system-picker-background-color-hover-open - ); - --spectrum-picker-background-color-key-focus: var( - --system-picker-background-color-key-focus - ); - --spectrum-picker-border-color-default: var( - --system-picker-border-color-default - ); - --spectrum-picker-border-color-default-open: var( - --system-picker-border-color-default-open - ); - --spectrum-picker-border-color-hover: var( - --system-picker-border-color-hover - ); - --spectrum-picker-border-color-hover-open: var( - --system-picker-border-color-hover-open - ); - --spectrum-picker-border-color-active: var( - --system-picker-border-color-active - ); - --spectrum-picker-border-color-key-focus: var( - --system-picker-border-color-key-focus - ); - --spectrum-picker-border-width: var(--system-picker-border-width); - --spectrum-picker-font-size: var(--system-picker-font-size); - --spectrum-picker-font-weight: var(--system-picker-font-weight); - --spectrum-picker-placeholder-font-style: var( - --system-picker-placeholder-font-style - ); - --spectrum-picker-line-height: var(--system-picker-line-height); - --spectrum-picker-block-size: var(--system-picker-block-size); - --spectrum-picker-inline-size: var(--system-picker-inline-size); - --spectrum-picker-border-radius: var(--system-picker-border-radius); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-spacing-edge-to-text - ); - --spectrum-picker-spacing-edge-to-text-quiet: var( - --system-picker-spacing-edge-to-text-quiet - ); - --spectrum-picker-spacing-label-to-picker: var( - --system-picker-spacing-label-to - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-spacing-edge-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var( - --system-picker-spacing-edge-to-disclosure-icon-quiet - ); - --spectrum-picker-animation-duration: var( - --system-picker-animation-duration - ); - --spectrum-picker-font-color-default: var( - --system-picker-font-color-default - ); - --spectrum-picker-font-color-default-open: var( - --system-picker-font-color-default-open - ); - --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); - --spectrum-picker-font-color-hover-open: var( - --system-picker-font-color-hover-open - ); - --spectrum-picker-font-color-active: var(--system-picker-font-color-active); - --spectrum-picker-font-color-key-focus: var( - --system-picker-font-color-key-focus - ); - --spectrum-picker-icon-color-default: var( - --system-picker-icon-color-default - ); - --spectrum-picker-icon-color-default-open: var( - --system-picker-icon-color-default-open - ); - --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); - --spectrum-picker-icon-color-hover-open: var( - --system-picker-icon-color-hover-open - ); - --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); - --spectrum-picker-icon-color-key-focus: var( - --system-picker-icon-color-key-focus - ); - --spectrum-picker-border-color-error-default: var( - --system-picker-border-color-error-default - ); - --spectrum-picker-border-color-error-default-open: var( - --system-picker-border-color-error-default-open - ); - --spectrum-picker-border-color-error-hover: var( - --system-picker-border-color-error-hover - ); - --spectrum-picker-border-color-error-hover-open: var( - --system-picker-border-color-error-hover-open - ); - --spectrum-picker-border-color-error-active: var( - --system-picker-border-color-error-active - ); - --spectrum-picker-border-color-error-key-focus: var( - --system-picker-border-color-error-key-focus - ); - --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); - --spectrum-picker-background-color-disabled: var( - --system-picker-background-color-disabled - ); - --spectrum-picker-font-color-disabled: var( - --system-picker-font-color-disabled - ); - --spectrum-picker-icon-color-disabled: var( - --system-picker-icon-color-disabled - ); - --spectrum-picker-focus-indicator-gap: var( - --system-picker-focus-indicator-gap - ); - --spectrum-picker-focus-indicator-thickness: var( - --system-picker-focus-indicator-thickness - ); - --spectrum-picker-focus-indicator-color: var( - --system-picker-focus-indicator-color - ); + --spectrum-picker-background-color-default: var(--system-picker-background-color-default); + --spectrum-picker-background-color-default-open: var(--system-picker-background-color-default-open); + --spectrum-picker-background-color-active: var(--system-picker-background-color-active); + --spectrum-picker-background-color-hover: var(--system-picker-background-color-hover); + --spectrum-picker-background-color-hover-open: var(--system-picker-background-color-hover-open); + --spectrum-picker-background-color-key-focus: var(--system-picker-background-color-key-focus); + --spectrum-picker-border-color-default: var(--system-picker-border-color-default); + --spectrum-picker-border-color-default-open: var(--system-picker-border-color-default-open); + --spectrum-picker-border-color-hover: var(--system-picker-border-color-hover); + --spectrum-picker-border-color-hover-open: var(--system-picker-border-color-hover-open); + --spectrum-picker-border-color-active: var(--system-picker-border-color-active); + --spectrum-picker-border-color-key-focus: var(--system-picker-border-color-key-focus); + --spectrum-picker-border-width: var(--system-picker-border-width); + --spectrum-picker-font-size: var(--system-picker-font-size); + --spectrum-picker-font-weight: var(--system-picker-font-weight); + --spectrum-picker-placeholder-font-style: var(--system-picker-placeholder-font-style); + --spectrum-picker-line-height: var(--system-picker-line-height); + --spectrum-picker-block-size: var(--system-picker-block-size); + --spectrum-picker-inline-size: var(--system-picker-inline-size); + --spectrum-picker-border-radius: var(--system-picker-border-radius); + --spectrum-picker-spacing-top-to-text: var(--system-picker-spacing-top-to-text); + --spectrum-picker-spacing-bottom-to-text: var(--system-picker-spacing-bottom-to-text); + --spectrum-picker-spacing-edge-to-text: var(--system-picker-spacing-edge-to-text); + --spectrum-picker-spacing-edge-to-text-quiet: var(--system-picker-spacing-edge-to-text-quiet); + --spectrum-picker-spacing-label-to-picker: var(--system-picker-spacing-label-to); + --spectrum-picker-spacing-text-to-icon: var(--system-picker-spacing-text-to-icon); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-spacing-text-to-icon-inline-end); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-spacing-icon-to-disclosure-icon); + --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-spacing-label-to-quiet); + --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-spacing-top-to-alert-icon); + --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-spacing-top-to-progress-circle); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-spacing-top-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-spacing-edge-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--system-picker-spacing-edge-to-disclosure-icon-quiet); + --spectrum-picker-animation-duration: var(--system-picker-animation-duration); + --spectrum-picker-font-color-default: var(--system-picker-font-color-default); + --spectrum-picker-font-color-default-open: var(--system-picker-font-color-default-open); + --spectrum-picker-font-color-hover: var(--system-picker-font-color-hover); + --spectrum-picker-font-color-hover-open: var(--system-picker-font-color-hover-open); + --spectrum-picker-font-color-active: var(--system-picker-font-color-active); + --spectrum-picker-font-color-key-focus: var(--system-picker-font-color-key-focus); + --spectrum-picker-icon-color-default: var(--system-picker-icon-color-default); + --spectrum-picker-icon-color-default-open: var(--system-picker-icon-color-default-open); + --spectrum-picker-icon-color-hover: var(--system-picker-icon-color-hover); + --spectrum-picker-icon-color-hover-open: var(--system-picker-icon-color-hover-open); + --spectrum-picker-icon-color-active: var(--system-picker-icon-color-active); + --spectrum-picker-icon-color-key-focus: var(--system-picker-icon-color-key-focus); + --spectrum-picker-border-color-error-default: var(--system-picker-border-color-error-default); + --spectrum-picker-border-color-error-default-open: var(--system-picker-border-color-error-default-open); + --spectrum-picker-border-color-error-hover: var(--system-picker-border-color-error-hover); + --spectrum-picker-border-color-error-hover-open: var(--system-picker-border-color-error-hover-open); + --spectrum-picker-border-color-error-active: var(--system-picker-border-color-error-active); + --spectrum-picker-border-color-error-key-focus: var(--system-picker-border-color-error-key-focus); + --spectrum-picker-icon-color-error: var(--system-picker-icon-color-error); + --spectrum-picker-background-color-disabled: var(--system-picker-background-color-disabled); + --spectrum-picker-font-color-disabled: var(--system-picker-font-color-disabled); + --spectrum-picker-icon-color-disabled: var(--system-picker-icon-color-disabled); + --spectrum-picker-focus-indicator-gap: var(--system-picker-focus-indicator-gap); + --spectrum-picker-focus-indicator-thickness: var(--system-picker-focus-indicator-thickness); + --spectrum-picker-focus-indicator-color: var(--system-picker-focus-indicator-color); } -:host([size='s']) { - --spectrum-picker-font-size: var(--system-picker-size-s-font-size); - --spectrum-picker-block-size: var(--system-picker-size-s-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-s-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-s-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-s-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-s-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-s-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-s-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-s-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-s-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-s-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-s-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-s-spacing-edge-to-disclosure-icon - ); +:host([size="s"]) { + --spectrum-picker-font-size: var(--system-picker-size-s-font-size); + --spectrum-picker-block-size: var(--system-picker-size-s-block-size); + --spectrum-picker-spacing-top-to-text: var(--system-picker-size-s-spacing-top-to-text); + --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-s-spacing-bottom-to-text); + --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-s-spacing-edge-to-text); + --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-s-spacing-text-to-icon); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-s-spacing-text-to-icon-inline-end); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-s-spacing-icon-to-disclosure-icon); + --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-s-spacing-label-to-quiet); + --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-s-spacing-top-to-alert-icon); + --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-s-spacing-top-to-progress-circle); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-s-spacing-top-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-s-spacing-edge-to-disclosure-icon); } -:host([size='l']) { - --spectrum-picker-font-size: var(--system-picker-size-l-font-size); - --spectrum-picker-block-size: var(--system-picker-size-l-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-l-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-l-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-l-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-l-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-l-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-l-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-l-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-l-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-l-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-l-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-l-spacing-edge-to-disclosure-icon - ); +:host([size="l"]) { + --spectrum-picker-font-size: var(--system-picker-size-l-font-size); + --spectrum-picker-block-size: var(--system-picker-size-l-block-size); + --spectrum-picker-spacing-top-to-text: var(--system-picker-size-l-spacing-top-to-text); + --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-l-spacing-bottom-to-text); + --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-l-spacing-edge-to-text); + --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-l-spacing-text-to-icon); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-l-spacing-text-to-icon-inline-end); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-l-spacing-icon-to-disclosure-icon); + --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-l-spacing-label-to-quiet); + --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-l-spacing-top-to-alert-icon); + --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-l-spacing-top-to-progress-circle); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-l-spacing-top-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-l-spacing-edge-to-disclosure-icon); } -:host([size='xl']) { - --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); - --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); - --spectrum-picker-spacing-top-to-text: var( - --system-picker-size-xl-spacing-top-to-text - ); - --spectrum-picker-spacing-bottom-to-text: var( - --system-picker-size-xl-spacing-bottom-to-text - ); - --spectrum-picker-spacing-edge-to-text: var( - --system-picker-size-xl-spacing-edge-to-text - ); - --spectrum-picker-spacing-text-to-icon: var( - --system-picker-size-xl-spacing-text-to-icon - ); - --spectrum-picker-spacing-text-to-icon-inline-end: var( - --system-picker-size-xl-spacing-text-to-icon-inline-end - ); - --spectrum-picker-spacing-icon-to-disclosure-icon: var( - --system-picker-size-xl-spacing-icon-to-disclosure-icon - ); - --spectrum-picker-spacing-label-to-picker-quiet: var( - --system-picker-size-xl-spacing-label-to-quiet - ); - --spectrum-picker-spacing-top-to-alert-icon: var( - --system-picker-size-xl-spacing-top-to-alert-icon - ); - --spectrum-picker-spacing-top-to-progress-circle: var( - --system-picker-size-xl-spacing-top-to-progress-circle - ); - --spectrum-picker-spacing-top-to-disclosure-icon: var( - --system-picker-size-xl-spacing-top-to-disclosure-icon - ); - --spectrum-picker-spacing-edge-to-disclosure-icon: var( - --system-picker-size-xl-spacing-edge-to-disclosure-icon - ); +:host([size="xl"]) { + --spectrum-picker-font-size: var(--system-picker-size-xl-font-size); + --spectrum-picker-block-size: var(--system-picker-size-xl-block-size); + --spectrum-picker-spacing-top-to-text: var(--system-picker-size-xl-spacing-top-to-text); + --spectrum-picker-spacing-bottom-to-text: var(--system-picker-size-xl-spacing-bottom-to-text); + --spectrum-picker-spacing-edge-to-text: var(--system-picker-size-xl-spacing-edge-to-text); + --spectrum-picker-spacing-text-to-icon: var(--system-picker-size-xl-spacing-text-to-icon); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--system-picker-size-xl-spacing-text-to-icon-inline-end); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--system-picker-size-xl-spacing-icon-to-disclosure-icon); + --spectrum-picker-spacing-label-to-picker-quiet: var(--system-picker-size-xl-spacing-label-to-quiet); + --spectrum-picker-spacing-top-to-alert-icon: var(--system-picker-size-xl-spacing-top-to-alert-icon); + --spectrum-picker-spacing-top-to-progress-circle: var(--system-picker-size-xl-spacing-top-to-progress-circle); + --spectrum-picker-spacing-top-to-disclosure-icon: var(--system-picker-size-xl-spacing-top-to-disclosure-icon); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--system-picker-size-xl-spacing-edge-to-disclosure-icon); } + diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css index 278f7253f2..2f1b47a8a9 100644 --- a/packages/picker/src/spectrum-picker.css +++ b/packages/picker/src/spectrum-picker.css @@ -1,856 +1,331 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #button { - cursor: pointer; - -webkit-user-select: none; - user-select: none; - font-family: var( - --mod-button-font-family, - var( - --mod-sans-font-family-stack, - var(--spectrum-sans-font-family-stack) - ) - ); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - line-height: var( - --mod-button-line-height, - var(--mod-line-height-100, var(--spectrum-line-height-100)) - ); - text-transform: none; - vertical-align: top; - -webkit-appearance: button; - transition: - background - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - border-color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - color - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out, - box-shadow - var( - --mod-button-animation-duration, - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ) - ease-out; - justify-content: center; - align-items: center; - margin: 0; - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; - overflow: visible; + cursor: pointer; + -webkit-user-select: none; + user-select: none; + font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + text-transform: none; + vertical-align: top; + -webkit-appearance: button; + transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + justify-content: center; + align-items: center; + margin: 0; + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; + overflow: visible; } #button::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } #button:focus { - outline: none; + outline: none; } @media (forced-colors: active) { - :host { - --highcontrast-picker-focus-indicator-color: Highlight; - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - } - - #button.is-keyboardFocused, - #button:focus-visible { - --highcontrast-picker-border-color-hover: ButtonText; - } - - #button .label, - #button:after { - forced-color-adjust: none; - } + :host { + --highcontrast-picker-focus-indicator-color: Highlight; + --highcontrast-picker-border-color-default: ButtonBorder; + --highcontrast-picker-border-color-hover: Highlight; + --highcontrast-picker-border-color-disabled: GrayText; + --highcontrast-picker-content-color-default: ButtonText; + --highcontrast-picker-content-color-disabled: GrayText; + --highcontrast-picker-background-color: ButtonFace; + } + + #button.is-keyboardFocused, #button:focus-visible { + --highcontrast-picker-border-color-hover: ButtonText; + } + + #button .label, #button:after { + forced-color-adjust: none; + } } #button { - box-sizing: border-box; - max-inline-size: 100%; - min-inline-size: calc( - var(--spectrum-picker-minimum-width-multiplier) * - var(--mod-picker-block-size, var(--spectrum-picker-block-size)) - ); - inline-size: var( - --mod-picker-inline-size, - var(--spectrum-picker-inline-size) - ); - block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); - border-width: var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ); - border-radius: var( - --mod-picker-border-radius, - var(--spectrum-picker-border-radius) - ); - transition: - background-color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ), - box-shadow - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ), - border-color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-in-out; - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-default, - var(--spectrum-picker-background-color-default) - ) - ); - border-style: solid; - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-default, - var(--spectrum-picker-border-color-default) - ) - ); - margin-block-start: var( - --mod-picker-spacing-label-to-picker, - var(--spectrum-picker-spacing-label-to-picker) - ); - padding-block: 0; - padding-inline-start: var( - --mod-picker-spacing-edge-to-text, - var(--spectrum-picker-spacing-edge-to-text) - ); - padding-inline-end: var( - --mod-picker-spacing-edge-to-disclosure-icon, - var(--spectrum-picker-spacing-edge-to-disclosure-icon) - ); - display: flex; + box-sizing: border-box; + max-inline-size: 100%; + min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); + inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); + block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); + border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width)); + border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)); + transition: background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)), border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); + border-style: solid; + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); + margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + padding-block: 0; + padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); + padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); + display: flex; } #button:after { - pointer-events: none; - content: ''; - block-size: calc( - 100% + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) * 2 + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * - 2 - ); - inline-size: calc( - 100% + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) * 2 + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * - 2 - ); - border-style: solid; - border-width: var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ); - border-radius: calc( - var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - border-color: #0000; - margin-block-start: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ); - margin-inline-start: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ); - position: absolute; - inset-block: 0; - inset-inline: 0; + pointer-events: none; + content: ""; + block-size: calc(100.0% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2); + inline-size: calc(100.0% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2); + border-style: solid; + border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); + border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + border-color: #0000; + margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + position: absolute; + inset-block: 0; + inset-inline: 0; } #button:active { - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-active, - var(--spectrum-picker-background-color-active) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-active, - var(--spectrum-picker-border-color-active) - ) - ); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); } #button:active:after { - border-color: #0000; + border-color: #0000; } #button.placeholder:active .label { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-active, - var(--spectrum-picker-font-color-active) - ) - ); -} - -#button.is-keyboardFocused, -#button:focus-visible { - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-key-focus, - var(--spectrum-picker-background-color-key-focus) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-key-focus, - var(--spectrum-picker-border-color-key-focus) - ) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-key-focus, - var(--spectrum-picker-font-color-key-focus) - ) - ); - outline: none; -} - -#button.is-keyboardFocused:after, -#button:focus-visible:after { - border-color: var( - --highcontrast-picker-focus-indicator-color, - var( - --mod-picker-focus-indicator-color, - var(--spectrum-picker-focus-indicator-color) - ) - ); -} - -#button.is-keyboardFocused.placeholder, -#button.placeholder:focus-visible { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-key-focus, - var(--spectrum-picker-font-color-key-focus) - ) - ); -} - -#button.is-keyboardFocused .picker, -#button:focus-visible .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-key-focus, - var(--spectrum-picker-icon-color-key-focus) - ) - ); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); +} + +#button.is-keyboardFocused, #button:focus-visible { + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus))); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); + outline: none; +} + +#button.is-keyboardFocused:after, #button:focus-visible:after { + border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); +} + +#button.is-keyboardFocused.placeholder, #button.placeholder:focus-visible { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); +} + +#button.is-keyboardFocused .picker, #button:focus-visible .picker { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus))); } :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default-open, - var(--spectrum-picker-font-color-default-open) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-default-open, - var(--spectrum-picker-background-color-default-open) - ) - ); - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-default-open, - var(--spectrum-picker-border-color-default-open) - ) - ); -} - -:host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) - .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-default-open, - var(--spectrum-picker-icon-color-default-open) - ) - ); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); +} + +:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .picker { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open))); } :host([invalid]) #button:not(:disabled, .is-disabled) { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-default, - var(--spectrum-picker-border-color-error-default) - ) - ); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default))); } :host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-error, - var(--spectrum-picker-icon-color-error) - ) - ); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error))); } :host([invalid]) #button:not(:disabled, .is-disabled):active { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-active, - var(--spectrum-picker-border-color-error-active) - ) - ); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active))); } :host([invalid][open]) #button:not(:disabled, .is-disabled) { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-default-open, - var(--spectrum-picker-border-color-error-default-open) - ) - ); -} - -:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled), -:host([invalid]) #button:not(:disabled, .is-disabled):focus-visible { - border-color: var( - --highcontrast-picker-border-color-default, - var( - --mod-picker-border-color-error-key-focus, - var(--spectrum-picker-border-color-error-key-focus) - ) - ); + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open))); +} + +:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled), :host([invalid]) #button:not(:disabled, .is-disabled):focus-visible { + border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); } :host([pending]) #button .picker { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-icon-color-disabled, - var(--spectrum-picker-icon-color-disabled) - ) - ); -} - -:host([invalid]) #button .label, -:host([pending]) #button .label { - margin-inline-end: var( - --mod-picker-spacing-text-to-icon-inline-end, - var( - --mod-picker-spacing-text-to-alert-icon-inline-start, - var(--spectrum-picker-spacing-text-to-icon-inline-end) - ) - ); + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); +} + +:host([invalid]) #button .label, :host([pending]) #button .label { + margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))); } .icon { - flex-shrink: 0; - margin-inline-end: var( - --mod-picker-spacing-text-to-icon, - var(--spectrum-picker-spacing-text-to-icon) - ); + flex-shrink: 0; + margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); } .label { - white-space: nowrap; - font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); - line-height: var( - --mod-picker-line-height, - var(--spectrum-picker-line-height) - ); - font-weight: var( - --mod-picker-font-weight, - var(--spectrum-picker-font-weight) - ); - text-overflow: ellipsis; - text-align: start; - flex: auto; - padding-block-start: var( - --mod-picker-spacing-top-to-text, - var(--spectrum-picker-spacing-top-to-text) - ); - padding-block-end: calc( - var( - --mod-picker-spacing-bottom-to-text, - var(--spectrum-picker-spacing-bottom-to-text) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - overflow: hidden; + white-space: nowrap; + font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size)); + line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height)); + font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight)); + text-overflow: ellipsis; + text-align: start; + flex: auto; + padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); + padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + overflow: hidden; } .label.placeholder { - font-weight: var( - --mod-picker-placeholder-font-weight, - var(--spectrum-picker-font-weight) - ); - font-style: var( - --mod-picker-placeholder-font-style, - var(--spectrum-picker-placeholder-font-style) - ); - transition: color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-in-out; - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); + font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); + font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); } .label.placeholder:active { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-active, - var(--spectrum-picker-font-color-active) - ) - ); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); } .picker { - vertical-align: top; - transition: color - var( - --mod-picker-animation-duration, - var(--spectrum-picker-animation-duration) - ) - ease-out; - margin-inline-start: var( - --mod-picker-spacing-icon-to-disclosure-icon, - var(--spectrum-picker-spacing-icon-to-disclosure-icon) - ); - margin-block: var( - --mod-picker-spacing-top-to-disclosure-icon, - var(--spectrum-picker-spacing-top-to-disclosure-icon) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-default, - var(--spectrum-picker-icon-color-default) - ) - ); - flex-shrink: 0; - display: inline-block; - position: relative; + vertical-align: top; + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; + margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); + flex-shrink: 0; + display: inline-block; + position: relative; } .picker:active { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-active, - var(--spectrum-picker-icon-color-active) - ) - ); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active))); } .validation-icon { - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-alert-icon, - var(--spectrum-picker-spacing-top-to-alert-icon) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); + margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); } #button .progress-circle { - margin-block-start: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); - margin-block-end: calc( - var( - --mod-picker-spacing-top-to-progress-circle, - var(--spectrum-picker-spacing-top-to-progress-circle) - ) - - var(--mod-picker-border-width, var(--spectrum-picker-border-width)) - ); + margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); } .label ~ .picker { - margin-inline-start: var( - --mod-picker-spacing-text-to-icon, - var(--spectrum-picker-spacing-text-to-icon) - ); + margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); } :host([quiet]) #button { - inline-size: auto; - min-inline-size: 0; - padding-inline: var( - --mod-picker-spacing-edge-to-text-quiet, - var(--spectrum-picker-spacing-edge-to-text-quiet) - ); - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-default, - var(--spectrum-picker-font-color-default) - ) - ); - background-color: initial; - background-color: var(--highcontrast-picker-background-color, transparent); - border: none; - border-radius: 0; - margin-block-start: calc( - var( - --mod-picker-spacing-label-to-picker-quiet, - var(--spectrum-picker-spacing-label-to-picker-quiet) - ) + 1px - ); + inline-size: auto; + min-inline-size: 0; + padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet)); + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); + border: none; + border-radius: 0; + margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px); } :host([quiet]) #button.label-inline { - margin-block-start: 0; + margin-block-start: 0; } :host([quiet]) #button .picker { - margin-inline-end: var( - --mod-picker-spacing-edge-to-disclosure-icon-quiet, - var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet) - ); + margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)); } :host([quiet]) #button:after { - block-size: auto; - inline-size: auto; - border: none; + block-size: auto; + inline-size: auto; + border: none; } @media (hover: hover) { - #button:hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover, - var(--spectrum-picker-font-color-hover) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-hover, - var(--spectrum-picker-background-color-hover) - ) - ); - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-hover, - var(--spectrum-picker-border-color-hover) - ) - ); - } - - #button:hover .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-hover, - var(--spectrum-picker-icon-color-hover) - ) - ); - } - - :host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover-open, - var(--spectrum-picker-font-color-hover-open) - ) - ); - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-hover-open, - var(--spectrum-picker-background-color-hover-open) - ) - ); - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-hover-open, - var(--spectrum-picker-border-color-hover-open) - ) - ); - } - - :host([open]) - #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover - .picker { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-icon-color-hover-open, - var(--spectrum-picker-icon-color-hover-open) - ) - ); - } - - :host([invalid]) #button:not(:disabled, .is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover, - var(--spectrum-picker-border-color-error-hover) - ) - ); - } - - :host([invalid][open]) #button:not(:disabled, .is-disabled):hover { - border-color: var( - --highcontrast-picker-border-color-hover, - var( - --mod-picker-border-color-error-hover-open, - var(--spectrum-picker-border-color-error-hover-open) - ) - ); - } - - .label.placeholder:hover { - color: var( - --highcontrast-picker-content-color-default, - var( - --mod-picker-font-color-hover, - var(--spectrum-picker-font-color-hover) - ) - ); - } - - :host([quiet]) #button:hover { - background-color: initial; - background-color: var( - --highcontrast-picker-background-color, - transparent - ); - } -} - -:host([quiet]) #button.is-keyboardFocused, -:host([quiet]) #button:focus-visible { + #button:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover))); + } + + #button:hover .picker { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover))); + } + + :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open))); + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open))); + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open))); + } + + :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .picker { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open))); + } + + :host([invalid]) #button:not(:disabled, .is-disabled):hover { + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover))); + } + + :host([invalid][open]) #button:not(:disabled, .is-disabled):hover { + border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))); + } + + .label.placeholder:hover { + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); + } + + :host([quiet]) #button:hover { background-color: initial; background-color: var(--highcontrast-picker-background-color, transparent); + } } -:host([quiet]) #button.is-keyboardFocused:after, -:host([quiet]) #button:focus-visible:after { - box-shadow: 0 - var( - --mod-picker-focus-indicator-thickness, - var(--spectrum-picker-focus-indicator-thickness) - ) - 0 0 - var( - --highcontrast-picker-focus-indicator-color, - var( - --mod-picker-focus-indicator-color, - var(--spectrum-picker-focus-indicator-color) - ) - ); - margin: calc( - ( - var( - --mod-picker-focus-indicator-gap, - var(--spectrum-picker-focus-indicator-gap) - ) + - var( - --mod-picker-border-width, - var(--spectrum-picker-border-width) - ) - ) * -1 - ) - 0; - border: none; - border-radius: 0; -} - -:host([quiet][open]) #button, -:host([quiet][disabled]) #button#button, -:host([quiet]) #button#button:disabled, -:host([quiet]) #button:active { - background-color: initial; - background-color: var(--highcontrast-picker-background-color, transparent); +:host([quiet]) #button.is-keyboardFocused, :host([quiet]) #button:focus-visible { + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); +} + +:host([quiet]) #button.is-keyboardFocused:after, :host([quiet]) #button:focus-visible:after { + box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + border: none; + border-radius: 0; +} + +:host([quiet][open]) #button, :host([quiet][disabled]) #button#button, :host([quiet]) #button#button:disabled, :host([quiet]) #button:active { + background-color: initial; + background-color: var(--highcontrast-picker-background-color, transparent); } .label-inline { - vertical-align: top; - display: inline-flex; -} - -:host([disabled]) #button, -#button:disabled { - cursor: default; - background-color: var( - --highcontrast-picker-background-color, - var( - --mod-picker-background-color-disabled, - var(--spectrum-picker-background-color-disabled) - ) - ); - border-color: #0000; - border-color: var(--highcontrast-picker-border-color-disabled, transparent); - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); -} - -:host([disabled]) #button .icon, -:host([disabled]) #button .picker, -:host([disabled]) #button .validation-icon, -#button:disabled .icon, -#button:disabled .picker, -#button:disabled .validation-icon { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-icon-color-disabled, - var(--spectrum-picker-icon-color-disabled) - ) - ); -} - -:host([disabled]) #button .label.placeholder, -#button:disabled .label.placeholder { - color: var( - --highcontrast-picker-content-color-disabled, - var( - --mod-picker-font-color-disabled, - var(--spectrum-picker-font-color-disabled) - ) - ); + vertical-align: top; + display: inline-flex; } + +:host([disabled]) #button, #button:disabled { + cursor: default; + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + border-color: #0000; + border-color: var(--highcontrast-picker-border-color-disabled, transparent); + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); +} + +:host([disabled]) #button .icon, :host([disabled]) #button .picker, :host([disabled]) #button .validation-icon, #button:disabled .icon, #button:disabled .picker, #button:disabled .validation-icon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); +} + +:host([disabled]) #button .label.placeholder, #button:disabled .label.placeholder { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); +} + diff --git a/packages/popover/src/popover-overrides.css b/packages/popover/src/popover-overrides.css index 1790ee3b82..73e0b7e597 100644 --- a/packages/popover/src/popover-overrides.css +++ b/packages/popover/src/popover-overrides.css @@ -1,39 +1,30 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-popover-border-width: var(--system-popover-border-width); - --spectrum-popover-animation-distance: var( - --system-popover-animation-distance - ); - --spectrum-popover-background-color: var(--system-popover-background-color); - --spectrum-popover-border-color: var(--system-popover-border-color); - --spectrum-popover-content-area-spacing-vertical: var( - --system-popover-content-area-spacing-vertical - ); - --spectrum-popover-shadow-horizontal: var( - --system-popover-shadow-horizontal - ); - --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); - --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); - --spectrum-popover-shadow-color: var(--system-popover-shadow-color); - --spectrum-popover-corner-radius: var(--system-popover-corner-radius); - --spectrum-popover-pointer-width: var(--system-popover-pointer-width); - --spectrum-popover-pointer-height: var(--system-popover-pointer-height); - --spectrum-popover-pointer-edge-offset: var( - --system-popover-pointer-edge-offset - ); - --spectrum-popover-pointer-edge-spacing: var( - --system-popover-pointer-edge-spacing - ); + --spectrum-popover-border-width: var(--system-popover-border-width); + --spectrum-popover-animation-distance: var(--system-popover-animation-distance); + --spectrum-popover-background-color: var(--system-popover-background-color); + --spectrum-popover-border-color: var(--system-popover-border-color); + --spectrum-popover-content-area-spacing-vertical: var(--system-popover-content-area-spacing-vertical); + --spectrum-popover-shadow-horizontal: var(--system-popover-shadow-horizontal); + --spectrum-popover-shadow-vertical: var(--system-popover-shadow-vertical); + --spectrum-popover-shadow-blur: var(--system-popover-shadow-blur); + --spectrum-popover-shadow-color: var(--system-popover-shadow-color); + --spectrum-popover-corner-radius: var(--system-popover-corner-radius); + --spectrum-popover-pointer-width: var(--system-popover-pointer-width); + --spectrum-popover-pointer-height: var(--system-popover-pointer-height); + --spectrum-popover-pointer-edge-offset: var(--system-popover-pointer-edge-offset); + --spectrum-popover-pointer-edge-spacing: var(--system-popover-pointer-edge-spacing); } + diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css index 4ebdf34af8..8dca49f162 100644 --- a/packages/popover/src/spectrum-popover.css +++ b/packages/popover/src/spectrum-popover.css @@ -1,501 +1,208 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: transform .13s ease-in-out, opacity .13s ease-in-out, visibility 0s linear .13s; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)); } :host([open]) { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s)); } @media (forced-colors: active) { - :host { - --highcontrast-popover-border-color: CanvasText; - } + :host { + --highcontrast-popover-border-color: CanvasText; + } } :host { - --spectrum-popover-filter: drop-shadow( - var( - --mod-popover-shadow-horizontal, - var(--spectrum-popover-shadow-horizontal) - ) - var( - --mod-popover-shadow-vertical, - var(--spectrum-popover-shadow-vertical) - ) - var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) - var( - --mod-popover-shadow-color, - var(--spectrum-popover-shadow-color) - ) - ); - box-sizing: border-box; - padding: var( - --mod-popover-content-area-spacing-vertical, - var(--spectrum-popover-content-area-spacing-vertical) - ) - 0; - border-radius: var( - --mod-popover-corner-radius, - var(--spectrum-popover-corner-radius) - ); - border-style: solid; - border-color: var( - --highcontrast-popover-border-color, - var(--mod-popover-border-color, var(--spectrum-popover-border-color)) - ); - border-width: var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ); - background-color: var( - --mod-popover-background-color, - var(--spectrum-popover-background-color) - ); - filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); - outline: none; - flex-direction: column; - display: inline-flex; - position: absolute; + --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color))); + box-sizing: border-box; + padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0; + border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); + border-style: solid; + border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); + filter: var(--mod-popover-filter, var(--spectrum-popover-filter)); + outline: none; + flex-direction: column; + display: inline-flex; + position: absolute; } :host([tip]) #tip .triangle { - stroke-linecap: square; - stroke-linejoin: miter; - fill: var( - --highcontrast-popover-background-color, - var( - --mod-popover-background-color, - var(--spectrum-popover-background-color) - ) - ); - stroke: var( - --highcontrast-popover-border-color, - var(--mod-popover-border-color, var(--spectrum-popover-border-color)) - ); - stroke-width: var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ); + stroke-linecap: square; + stroke-linejoin: miter; + fill: var(--highcontrast-popover-background-color, var(--mod-popover-background-color, var(--spectrum-popover-background-color))); + stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); } * { - --mod-popover-filter: none; -} - -:host([tip]) .spectrum-Popover--top-end, -:host([tip]) .spectrum-Popover--top-left, -:host([tip]) .spectrum-Popover--top-right, -:host([tip]) .spectrum-Popover--top-start, -:host([placement*='top'][tip]) { - margin-block-end: calc( - var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--top-end, -:host([open]) .spectrum-Popover--top-left, -:host([open]) .spectrum-Popover--top-right, -:host([open]) .spectrum-Popover--top-start, -:host([placement*='top'][open]) { - transform: translateY( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); -} - -:host([tip]) .spectrum-Popover--bottom-end, -:host([tip]) .spectrum-Popover--bottom-left, -:host([tip]) .spectrum-Popover--bottom-right, -:host([tip]) .spectrum-Popover--bottom-start, -:host([placement*='bottom'][tip]) { - margin-block-start: calc( - var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--bottom-end, -:host([open]) .spectrum-Popover--bottom-left, -:host([open]) .spectrum-Popover--bottom-right, -:host([open]) .spectrum-Popover--bottom-start, -:host([placement*='bottom'][open]) { - transform: translateY( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); -} - -:host([tip]) .spectrum-Popover--right-bottom, -:host([tip]) .spectrum-Popover--right-top, -:host([placement*='right'][tip]) { - margin-left: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--right-bottom, -:host([open]) .spectrum-Popover--right-top, -:host([placement*='right'][open]) { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); -} - -:host([tip]) .spectrum-Popover--left-bottom, -:host([tip]) .spectrum-Popover--left-top, -:host([placement*='left'][tip]) { - margin-right: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--left-bottom, -:host([open]) .spectrum-Popover--left-top, -:host([placement*='left'][open]) { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); -} - -:host([tip]) .spectrum-Popover--start-bottom, -:host([tip]) .spectrum-Popover--start-top, -:host([tip]) .spectrum-Popover--start { - margin-inline-end: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--start-bottom, -:host([open]) .spectrum-Popover--start-top, -:host([open]) .spectrum-Popover--start { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); -} - -:host([open]) .spectrum-Popover--start-bottom:dir(rtl), -:host([open]) .spectrum-Popover--start-top:dir(rtl), -:host([open]) .spectrum-Popover--start:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Popover--start-bottom, -:host([dir='rtl'][open]) .spectrum-Popover--start-top, -:host([dir='rtl'][open]) .spectrum-Popover--start { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); -} - -:host([tip]) .spectrum-Popover--end-bottom, -:host([tip]) .spectrum-Popover--end-top, -:host([tip]) .spectrum-Popover--end { - margin-inline-start: calc( - var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - - var( - --mod-popover-border-width, - var(--spectrum-popover-border-width) - ) - ); -} - -:host([open]) .spectrum-Popover--end-bottom, -:host([open]) .spectrum-Popover--end-top, -:host([open]) .spectrum-Popover--end { - transform: translateX( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) - ); -} - -:host([open]) .spectrum-Popover--end-bottom:dir(rtl), -:host([open]) .spectrum-Popover--end-top:dir(rtl), -:host([open]) .spectrum-Popover--end:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Popover--end-bottom, -:host([dir='rtl'][open]) .spectrum-Popover--end-top, -:host([dir='rtl'][open]) .spectrum-Popover--end { - transform: translateX( - calc( - var( - --mod-popover-animation-distance, - var(--spectrum-popover-animation-distance) - ) * -1 - ) - ); -} - -:host([tip]) #tip, -:host([tip][placement*='bottom']) #tip, -:host([tip]) .spectrum-Popover--bottom-end #tip, -:host([tip]) .spectrum-Popover--bottom-left #tip, -:host([tip]) .spectrum-Popover--bottom-right #tip, -:host([tip]) .spectrum-Popover--bottom-start #tip, -:host([tip][placement*='top']) #tip, -:host([tip]) .spectrum-Popover--top-end #tip, -:host([tip]) .spectrum-Popover--top-left #tip, -:host([tip]) .spectrum-Popover--top-right #tip, -:host([tip]) .spectrum-Popover--top-start #tip { - inline-size: var( - --mod-popover-pointer-width, - var(--spectrum-popover-pointer-width) - ); - block-size: var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ); - margin: auto; - position: absolute; - inset-block-start: 100%; - inset-inline: 0; - transform: translate(0); + --mod-popover-filter: none; +} + +:host([tip]) .spectrum-Popover--top-end, :host([tip]) .spectrum-Popover--top-left, :host([tip]) .spectrum-Popover--top-right, :host([tip]) .spectrum-Popover--top-start, :host([placement*="top"][tip]) { + margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--top-end, :host([open]) .spectrum-Popover--top-left, :host([open]) .spectrum-Popover--top-right, :host([open]) .spectrum-Popover--top-start, :host([placement*="top"][open]) { + transform: translateY(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)); +} + +:host([tip]) .spectrum-Popover--bottom-end, :host([tip]) .spectrum-Popover--bottom-left, :host([tip]) .spectrum-Popover--bottom-right, :host([tip]) .spectrum-Popover--bottom-start, :host([placement*="bottom"][tip]) { + margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--bottom-end, :host([open]) .spectrum-Popover--bottom-left, :host([open]) .spectrum-Popover--bottom-right, :host([open]) .spectrum-Popover--bottom-start, :host([placement*="bottom"][open]) { + transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); +} + +:host([tip]) .spectrum-Popover--right-bottom, :host([tip]) .spectrum-Popover--right-top, :host([placement*="right"][tip]) { + margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--right-bottom, :host([open]) .spectrum-Popover--right-top, :host([placement*="right"][open]) { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); +} + +:host([tip]) .spectrum-Popover--left-bottom, :host([tip]) .spectrum-Popover--left-top, :host([placement*="left"][tip]) { + margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--left-bottom, :host([open]) .spectrum-Popover--left-top, :host([placement*="left"][open]) { + transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)); +} + +:host([tip]) .spectrum-Popover--start-bottom, :host([tip]) .spectrum-Popover--start-top, :host([tip]) .spectrum-Popover--start { + margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--start-bottom, :host([open]) .spectrum-Popover--start-top, :host([open]) .spectrum-Popover--start { + transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)); +} + +:host([open]) .spectrum-Popover--start-bottom:dir(rtl), :host([open]) .spectrum-Popover--start-top:dir(rtl), :host([open]) .spectrum-Popover--start:dir(rtl), :host([dir="rtl"][open]) .spectrum-Popover--start-bottom, :host([dir="rtl"][open]) .spectrum-Popover--start-top, :host([dir="rtl"][open]) .spectrum-Popover--start { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); +} + +:host([tip]) .spectrum-Popover--end-bottom, :host([tip]) .spectrum-Popover--end-top, :host([tip]) .spectrum-Popover--end { + margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); +} + +:host([open]) .spectrum-Popover--end-bottom, :host([open]) .spectrum-Popover--end-top, :host([open]) .spectrum-Popover--end { + transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))); +} + +:host([open]) .spectrum-Popover--end-bottom:dir(rtl), :host([open]) .spectrum-Popover--end-top:dir(rtl), :host([open]) .spectrum-Popover--end:dir(rtl), :host([dir="rtl"][open]) .spectrum-Popover--end-bottom, :host([dir="rtl"][open]) .spectrum-Popover--end-top, :host([dir="rtl"][open]) .spectrum-Popover--end { + transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)); +} + +:host([tip]) #tip, :host([tip][placement*="bottom"]) #tip, :host([tip]) .spectrum-Popover--bottom-end #tip, :host([tip]) .spectrum-Popover--bottom-left #tip, :host([tip]) .spectrum-Popover--bottom-right #tip, :host([tip]) .spectrum-Popover--bottom-start #tip, :host([tip][placement*="top"]) #tip, :host([tip]) .spectrum-Popover--top-end #tip, :host([tip]) .spectrum-Popover--top-left #tip, :host([tip]) .spectrum-Popover--top-right #tip, :host([tip]) .spectrum-Popover--top-start #tip { + inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + margin: auto; + position: absolute; + inset-block-start: 100%; + inset-inline: 0; + transform: translate(0); } :host([tip]) .spectrum-Popover--top-left #tip { - inset-inline: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; + inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; } :host([tip]) .spectrum-Popover--top-right #tip { - inset-inline: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } :host([tip]) .spectrum-Popover--top-start #tip { - margin-inline-start: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } :host([tip]) .spectrum-Popover--top-end #tip { - margin-inline-end: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } -:host([tip][placement*='bottom']) #tip, -:host([tip]) .spectrum-Popover--bottom-end #tip, -:host([tip]) .spectrum-Popover--bottom-left #tip, -:host([tip]) .spectrum-Popover--bottom-right #tip, -:host([tip]) .spectrum-Popover--bottom-start #tip { - inset-block: auto 100%; - transform: scaleY(-1); +:host([tip][placement*="bottom"]) #tip, :host([tip]) .spectrum-Popover--bottom-end #tip, :host([tip]) .spectrum-Popover--bottom-left #tip, :host([tip]) .spectrum-Popover--bottom-right #tip, :host([tip]) .spectrum-Popover--bottom-start #tip { + inset-block: auto 100%; + transform: scaleY(-1); } :host([tip]) .spectrum-Popover--bottom-left #tip { - inset-inline: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; + inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; } :host([tip]) .spectrum-Popover--bottom-right #tip { - inset-inline: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } :host([tip]) .spectrum-Popover--bottom-start #tip { - margin-inline-start: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); + margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } :host([tip]) .spectrum-Popover--bottom-end #tip { - margin-inline-end: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); -} - -:host([tip]) .spectrum-Popover--end #tip, -:host([tip]) .spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-top #tip, -:host([tip][placement*='left']) #tip, -:host([tip]) .spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-top #tip, -:host([tip][placement*='right']) #tip, -:host([tip]) .spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--start #tip, -:host([tip]) .spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--start-top #tip { - inline-size: var( - --mod-popover-pointer-height, - var(--spectrum-popover-pointer-height) - ); - block-size: var( - --mod-popover-pointer-width, - var(--spectrum-popover-pointer-width) - ); - inset-block: 0; -} - -:host([tip][placement*='left']) #tip, -:host([tip]) .spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--left-top #tip { - left: 100%; - right: auto; -} - -:host([tip][placement*='right']) #tip, -:host([tip]) .spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--right-top #tip { - left: auto; - right: 100%; - transform: scaleX(-1); -} - -:host([tip]) .spectrum-Popover--end-top #tip, -:host([tip]) .spectrum-Popover--left-top #tip, -:host([tip]) .spectrum-Popover--right-top #tip, -:host([tip]) .spectrum-Popover--start-top #tip { - inset-block: var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ) - auto; -} - -:host([tip]) .spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--left-bottom #tip, -:host([tip]) .spectrum-Popover--right-bottom #tip, -:host([tip]) .spectrum-Popover--start-bottom #tip { - inset-block: auto - var( - --mod-popover-pointer-edge-spacing, - var(--spectrum-popover-pointer-edge-spacing) - ); -} - -:host([tip]) .spectrum-Popover--start #tip, -:host([tip]) .spectrum-Popover--start-bottom #tip, -:host([tip]) .spectrum-Popover--start-top #tip { - margin-inline-start: 100%; -} - -:host([tip]) .spectrum-Popover--start #tip:dir(rtl), -:host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl), -:host([tip]) .spectrum-Popover--start-top #tip:dir(rtl), -:host([dir='rtl'][tip]) .spectrum-Popover--start #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--start-bottom #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--start-top #tip { - transform: none; -} - -:host([tip]) .spectrum-Popover--end #tip, -:host([tip]) .spectrum-Popover--end-bottom #tip, -:host([tip]) .spectrum-Popover--end-top #tip { - margin-inline-end: 100%; - transform: scaleX(-1); -} - -:host([tip]) .spectrum-Popover--end #tip:dir(rtl), -:host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl), -:host([tip]) .spectrum-Popover--end-top #tip:dir(rtl), -:host([dir='rtl'][tip]) .spectrum-Popover--end #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--end-bottom #tip, -:host([dir='rtl'][tip]) .spectrum-Popover--end-top #tip { - transform: scaleX(1); + margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); } + +:host([tip]) .spectrum-Popover--end #tip, :host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--end-top #tip, :host([tip][placement*="left"]) #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--left-top #tip, :host([tip][placement*="right"]) #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--right-top #tip, :host([tip]) .spectrum-Popover--start #tip, :host([tip]) .spectrum-Popover--start-bottom #tip, :host([tip]) .spectrum-Popover--start-top #tip { + inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + inset-block: 0; +} + +:host([tip][placement*="left"]) #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--left-top #tip { + left: 100%; + right: auto; +} + +:host([tip][placement*="right"]) #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--right-top #tip { + left: auto; + right: 100%; + transform: scaleX(-1); +} + +:host([tip]) .spectrum-Popover--end-top #tip, :host([tip]) .spectrum-Popover--left-top #tip, :host([tip]) .spectrum-Popover--right-top #tip, :host([tip]) .spectrum-Popover--start-top #tip { + inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; +} + +:host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--left-bottom #tip, :host([tip]) .spectrum-Popover--right-bottom #tip, :host([tip]) .spectrum-Popover--start-bottom #tip { + inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); +} + +:host([tip]) .spectrum-Popover--start #tip, :host([tip]) .spectrum-Popover--start-bottom #tip, :host([tip]) .spectrum-Popover--start-top #tip { + margin-inline-start: 100%; +} + +:host([tip]) .spectrum-Popover--start #tip:dir(rtl), :host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl), :host([tip]) .spectrum-Popover--start-top #tip:dir(rtl), :host([dir="rtl"][tip]) .spectrum-Popover--start #tip, :host([dir="rtl"][tip]) .spectrum-Popover--start-bottom #tip, :host([dir="rtl"][tip]) .spectrum-Popover--start-top #tip { + transform: none; +} + +:host([tip]) .spectrum-Popover--end #tip, :host([tip]) .spectrum-Popover--end-bottom #tip, :host([tip]) .spectrum-Popover--end-top #tip { + margin-inline-end: 100%; + transform: scaleX(-1); +} + +:host([tip]) .spectrum-Popover--end #tip:dir(rtl), :host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl), :host([tip]) .spectrum-Popover--end-top #tip:dir(rtl), :host([dir="rtl"][tip]) .spectrum-Popover--end #tip, :host([dir="rtl"][tip]) .spectrum-Popover--end-bottom #tip, :host([dir="rtl"][tip]) .spectrum-Popover--end-top #tip { + transform: scaleX(1); +} + diff --git a/packages/progress-bar/src/progress-bar-overrides.css b/packages/progress-bar/src/progress-bar-overrides.css index c9c2a7c5f5..bd5ebdab26 100644 --- a/packages/progress-bar/src/progress-bar-overrides.css +++ b/packages/progress-bar/src/progress-bar-overrides.css @@ -1,122 +1,67 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progressbar-animation-ease-in-out-indeterminate: var( - --system-progress-bar-animation-ease-in-out-indeterminate - ); - --spectrum-progressbar-animation-duration-indeterminate: var( - --system-progress-bar-animation-duration-indeterminate - ); - --spectrum-progressbar-corner-radius: var( - --system-progress-bar-corner-radius - ); - --spectrum-progressbar-fill-size-indeterminate: var( - --system-progress-bar-fill-size-indeterminate - ); - --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); - --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); - --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); - --spectrum-progressbar-line-height-cjk: var( - --system-progress-bar-line-height-cjk - ); - --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); - --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); - --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); - --spectrum-progressbar-spacing-label-to-progressbar: var( - --system-progress-bar-spacing-label-to - ); - --spectrum-progressbar-spacing-label-to-text: var( - --system-progress-bar-spacing-label-to-text - ); - --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); - --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); - --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); - --spectrum-progressbar-label-and-value-white: var( - --system-progress-bar-label-and-value-white - ); - --spectrum-progressbar-track-color-white: var( - --system-progress-bar-track-color-white - ); - --spectrum-progressbar-fill-color-white: var( - --system-progress-bar-fill-color-white - ); - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-default - ); - --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); - --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-spacing-top-to-text - ); + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--system-progress-bar-animation-ease-in-out-indeterminate); + --spectrum-progressbar-animation-duration-indeterminate: var(--system-progress-bar-animation-duration-indeterminate); + --spectrum-progressbar-corner-radius: var(--system-progress-bar-corner-radius); + --spectrum-progressbar-fill-size-indeterminate: var(--system-progress-bar-fill-size-indeterminate); + --spectrum-progressbar-size-2400: var(--system-progress-bar-size-2400); + --spectrum-progressbar-size-2500: var(--system-progress-bar-size-2500); + --spectrum-progressbar-size-2800: var(--system-progress-bar-size-2800); + --spectrum-progressbar-line-height-cjk: var(--system-progress-bar-line-height-cjk); + --spectrum-progressbar-min-size: var(--system-progress-bar-min-size); + --spectrum-progressbar-max-size: var(--system-progress-bar-max-size); + --spectrum-progressbar-line-height: var(--system-progress-bar-line-height); + --spectrum-progressbar-spacing-label-to-progressbar: var(--system-progress-bar-spacing-label-to); + --spectrum-progressbar-spacing-label-to-text: var(--system-progress-bar-spacing-label-to-text); + --spectrum-progressbar-text-color: var(--system-progress-bar-text-color); + --spectrum-progressbar-track-color: var(--system-progress-bar-track-color); + --spectrum-progressbar-fill-color: var(--system-progress-bar-fill-color); + --spectrum-progressbar-label-and-value-white: var(--system-progress-bar-label-and-value-white); + --spectrum-progressbar-track-color-white: var(--system-progress-bar-track-color-white); + --spectrum-progressbar-fill-color-white: var(--system-progress-bar-fill-color-white); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-spacing-top-to-text); } :host { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-m-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-m-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-m-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-m-spacing-top-to-text - ); + --spectrum-progressbar-size-default: var(--system-progress-bar-size-m-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-m-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-m-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-m-spacing-top-to-text); } -:host([size='s']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-s-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-s-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-s-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-s-spacing-top-to-text - ); +:host([size="s"]) { + --spectrum-progressbar-size-default: var(--system-progress-bar-size-s-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-s-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-s-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-s-spacing-top-to-text); } -:host([size='l']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-l-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-l-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-l-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-l-spacing-top-to-text - ); +:host([size="l"]) { + --spectrum-progressbar-size-default: var(--system-progress-bar-size-l-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-l-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-l-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-l-spacing-top-to-text); } -:host([size='xl']) { - --spectrum-progressbar-size-default: var( - --system-progress-bar-size-xl-size-default - ); - --spectrum-progressbar-font-size: var( - --system-progress-bar-size-xl-font-size - ); - --spectrum-progressbar-thickness: var( - --system-progress-bar-size-xl-thickness - ); - --spectrum-progressbar-spacing-top-to-text: var( - --system-progress-bar-size-xl-spacing-top-to-text - ); +:host([size="xl"]) { + --spectrum-progressbar-size-default: var(--system-progress-bar-size-xl-size-default); + --spectrum-progressbar-font-size: var(--system-progress-bar-size-xl-font-size); + --spectrum-progressbar-thickness: var(--system-progress-bar-size-xl-thickness); + --spectrum-progressbar-spacing-top-to-text: var(--system-progress-bar-size-xl-spacing-top-to-text); } + diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css index f8e10b8fbc..d3b2d9ef35 100644 --- a/packages/progress-bar/src/spectrum-progress-bar.css +++ b/packages/progress-bar/src/spectrum-progress-bar.css @@ -1,245 +1,140 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - font-size: var( - --mod-progressbar-font-size, - var(--spectrum-progressbar-font-size) - ); - vertical-align: top; - inline-size: var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); - max-inline-size: var( - --mod-progressbar-max-size, - var(--spectrum-progressbar-max-size) - ); - min-inline-size: var( - --mod-progressbar-min-size, - var(--spectrum-progressbar-min-size) - ); - flex-flow: wrap; - justify-content: space-between; - align-items: center; - display: inline-flex; - position: relative; -} - -.label, -.percentage { - text-align: start; - line-height: var( - --mod-progressbar-line-height, - var(--spectrum-progressbar-line-height) - ); - color: var( - --mod-progressbar-text-color, - var(--spectrum-progressbar-text-color) - ); - margin-block-start: var( - --mod-progressbar-spacing-top-to-text, - var(--spectrum-progressbar-spacing-top-to-text) - ); - margin-block-end: var( - --mod-progressbar-spacing-label-to-progressbar, - var(--spectrum-progressbar-spacing-label-to-progressbar) - ); -} - -.label:lang(ja), -.label:lang(ko), -.label:lang(zh), -.percentage:lang(ja), -.percentage:lang(ko), -.percentage:lang(zh) { - line-height: var( - --mod-progressbar-line-height-cjk, - var(--spectrum-progressbar-line-height-cjk) - ); + font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); + vertical-align: top; + inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); + min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); + flex-flow: wrap; + justify-content: space-between; + align-items: center; + display: inline-flex; + position: relative; +} + +.label, .percentage { + text-align: start; + line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); + color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); + margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); + margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); +} + +.label:lang(ja), .label:lang(ko), .label:lang(zh), .percentage:lang(ja), .percentage:lang(ko), .percentage:lang(zh) { + line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); } .label { - flex: 1; + flex: 1; } .percentage { - align-self: flex-start; - margin-inline-start: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + align-self: flex-start; + margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } .track { - inline-size: 100%; - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - border-radius: var(--spectrum-progressbar-corner-radius); - background: var( - --highcontrast-progressbar-track-color, - var( - --mod-progressbar-track-color, - var(--spectrum-progressbar-track-color) - ) - ); - overflow: hidden; + inline-size: 100%; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + border-radius: var(--spectrum-progressbar-corner-radius); + background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + overflow: hidden; } .fill { - block-size: var( - --mod-progressbar-thickness, - var(--spectrum-progressbar-thickness) - ); - background: var( - --highcontrast-progressbar-fill-color, - var( - --mod-progressbar-fill-color, - var(--spectrum-progressbar-fill-color) - ) - ); - border: none; - transition: width 1s; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + border: none; + transition: width 1s; } :host([indeterminate]) .fill { - inline-size: var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ); - animation-timing-function: var( - --mod-progressbar-animation-ease-in-out-indeterminate, - var(--spectrum-progressbar-animation-ease-in-out-indeterminate) - ); - will-change: transform; - animation-name: indeterminate-loop-ltr; - animation-duration: var( - --mod-progressbar-animation-duration-indeterminate, - var(--spectrum-progressbar-animation-duration-indeterminate) - ); - animation-iteration-count: infinite; - position: relative; -} - -:host([indeterminate]) .fill:dir(rtl), -:host([dir='rtl'][indeterminate]) .fill { - animation-name: indeterminate-loop-rtl; + inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); + animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); + will-change: transform; + animation-name: indeterminate-loop-ltr; + animation-duration: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)); + animation-iteration-count: infinite; + position: relative; +} + +:host([indeterminate]) .fill:dir(rtl), :host([dir="rtl"][indeterminate]) .fill { + animation-name: indeterminate-loop-rtl; } :host([side-label]) { - flex-flow: row; - justify-content: space-between; - display: inline-flex; + flex-flow: row; + justify-content: space-between; + display: inline-flex; } :host([side-label]) .track { - flex: 1 1 - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ); + flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); } :host([side-label]) .label { - flex-grow: 0; - margin-block-end: 0; - margin-inline-end: var( - --mod-progressbar-spacing-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + flex-grow: 0; + margin-block-end: 0; + margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } :host([side-label]) .percentage { - text-align: end; - order: 3; - margin-block-end: 0; - margin-inline-start: var( - --mod-spacing-progressbar-label-to-text, - var(--spectrum-progressbar-spacing-label-to-text) - ); + text-align: end; + order: 3; + margin-block-end: 0; + margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); } -:host([static-color='white']) .fill { - background: var( - --mod-progressbar-fill-color-white, - var(--spectrum-progressbar-fill-color-white) - ); +:host([static-color="white"]) .fill { + background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)); } -:host([static-color='white']) .fill, -:host([static-color='white']) .label, -:host([static-color='white']) .percentage { - color: var( - --mod-progressbar-label-and-value-white, - var(--spectrum-progressbar-label-and-value-white) - ); +:host([static-color="white"]) .fill, :host([static-color="white"]) .label, :host([static-color="white"]) .percentage { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); } -:host([static-color='white']) .track { - background: var(--spectrum-progressbar-track-color-white); +:host([static-color="white"]) .track { + background: var(--spectrum-progressbar-track-color-white); } @keyframes indeterminate-loop-ltr { - 0% { - transform: translate( - calc( - var( - --mod-progressbar-fill-size-indeterminate, - var(--spectrum-progressbar-fill-size-indeterminate) - ) * -1 - ) - ); - } - - to { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) - ); - } + 0% { + transform: translate(calc(var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)) * -1)); + } + + to { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); + } } @keyframes indeterminate-loop-rtl { - 0% { - transform: translate( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-fill-size-indeterminate) - ) - ); - } - - to { - transform: translate( - calc( - var( - --mod-progressbar-size-default, - var(--spectrum-progressbar-size-default) - ) * -1 - ) - ); - } + 0% { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); + } + + to { + transform: translate(calc(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)) * -1)); + } } @media (forced-colors: active) { - .track { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - forced-color-adjust: none; - border: 1px solid ButtonText; - } + .track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + forced-color-adjust: none; + border: 1px solid ButtonText; + } } + diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css index 04b68cee39..b1c4d2ca8a 100644 --- a/packages/progress-circle/src/progress-circle-overrides.css +++ b/packages/progress-circle/src/progress-circle-overrides.css @@ -1,48 +1,33 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-progress-circle-track-border-color: var( - --system-progress-circle-track-border-color - ); - --spectrum-progress-circle-fill-border-color: var( - --system-progress-circle-fill-border-color - ); - --spectrum-progress-circle-track-border-color-over-background: var( - --system-progress-circle-track-border-color-over-background - ); - --spectrum-progress-circle-fill-border-color-over-background: var( - --system-progress-circle-fill-border-color-over-background - ); - --spectrum-progress-circle-size: var(--system-progress-circle-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-thickness - ); - --spectrum-progress-circle-track-border-style: var( - --system-progress-circle-track-border-style - ); + --spectrum-progress-circle-track-border-color: var(--system-progress-circle-track-border-color); + --spectrum-progress-circle-fill-border-color: var(--system-progress-circle-fill-border-color); + --spectrum-progress-circle-track-border-color-over-background: var(--system-progress-circle-track-border-color-over-background); + --spectrum-progress-circle-fill-border-color-over-background: var(--system-progress-circle-fill-border-color-over-background); + --spectrum-progress-circle-size: var(--system-progress-circle-size); + --spectrum-progress-circle-thickness: var(--system-progress-circle-thickness); + --spectrum-progress-circle-track-border-style: var(--system-progress-circle-track-border-style); } -:host([size='s']) { - --spectrum-progress-circle-size: var(--system-progress-circle-small-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-small-thickness - ); +:host([size="s"]) { + --spectrum-progress-circle-size: var(--system-progress-circle-small-size); + --spectrum-progress-circle-thickness: var(--system-progress-circle-small-thickness); } -:host([size='l']) { - --spectrum-progress-circle-size: var(--system-progress-circle-large-size); - --spectrum-progress-circle-thickness: var( - --system-progress-circle-large-thickness - ); +:host([size="l"]) { + --spectrum-progress-circle-size: var(--system-progress-circle-large-size); + --spectrum-progress-circle-thickness: var(--system-progress-circle-large-thickness); } + diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css index 1a56055ddd..197b466c29 100644 --- a/packages/progress-circle/src/spectrum-progress-circle.css +++ b/packages/progress-circle/src/spectrum-progress-circle.css @@ -1,660 +1,609 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-progress-circle-fill-border-color: Highlight; - --highcontrast-progress-circle-fill-border-color-over-background: Highlight; - } - - .track { - --spectrum-progress-circle-track-border-style: double; - } + :host { + --highcontrast-progress-circle-fill-border-color: Highlight; + --highcontrast-progress-circle-fill-border-color-over-background: Highlight; + } + + .track { + --spectrum-progress-circle-track-border-style: double; + } } :host { - position: var(--mod-progress-circle-position, relative); - direction: ltr; - display: inline-block; - position: relative; - transform: translateZ(0); + position: var(--mod-progress-circle-position, relative); + direction: ltr; + display: inline-block; + position: relative; + transform: translateZ(0); } -:host, -.track { - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); +:host, .track { + inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); } .track { - box-sizing: border-box; - border-style: var( - --highcontrast-progress-circle-track-border-style, - var( - --mod-progress-circle-track-border-style, - var(--spectrum-progress-circle-track-border-style) - ) - ); - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --mod-progress-circle-track-border-color, - var(--spectrum-progress-circle-track-border-color) - ); + box-sizing: border-box; + border-style: var(--highcontrast-progress-circle-track-border-style, var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style))); + border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)); } .fills { - inline-size: 100%; - block-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } .fill { - box-sizing: border-box; - inline-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - block-size: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-style: solid; - border-width: var( - --mod-progress-circle-thickness, - var(--spectrum-progress-circle-thickness) - ); - border-radius: var( - --mod-progress-circle-size, - var(--spectrum-progress-circle-size) - ); - border-color: var( - --highcontrast-progress-circle-fill-border-color, - var( - --mod-progress-circle-fill-border-color, - var(--spectrum-progress-circle-fill-border-color) - ) - ); + box-sizing: border-box; + inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + border-style: solid; + border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); + border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); } -:host([static-color='white']) .track { - border-color: var( - --mod-progress-circle-track-border-color-over-background, - var(--spectrum-progress-circle-track-border-color-over-background) - ); +:host([static-color="white"]) .track { + border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background)); } -:host([static-color='white']) .fill { - border-color: var( - --highcontrast-progress-circle-fill-border-color-over-background, - var( - --mod-progress-circle-fill-border-color-over-background, - var(--spectrum-progress-circle-fill-border-color-over-background) - ) - ); +:host([static-color="white"]) .fill { + border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))); } -.fillMask1, -.fillMask2 { - inline-size: 50%; - block-size: 100%; - transform-origin: 100%; - position: absolute; - overflow: hidden; - transform: rotate(180deg); +.fillMask1, .fillMask2 { + inline-size: 50%; + block-size: 100%; + transform-origin: 100%; + position: absolute; + overflow: hidden; + transform: rotate(180deg); } -.fillSubMask1, -.fillSubMask2 { - inline-size: 100%; - block-size: 100%; - transform-origin: 100%; - overflow: hidden; - transform: rotate(-180deg); +.fillSubMask1, .fillSubMask2 { + inline-size: 100%; + block-size: 100%; + transform-origin: 100%; + overflow: hidden; + transform: rotate(-180deg); } .fillMask2 { - transform: rotate(0); + transform: rotate(0); } :host([indeterminate]) .fills { - will-change: transform; - transform-origin: center; - animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite - spectrum-fills-rotate; - transform: translateZ(0); + will-change: transform; + transform-origin: center; + animation: 1s cubic-bezier(.25, .78, .48, .89) infinite spectrum-fills-rotate; + transform: translateZ(0); } :host([indeterminate]) .fillSubMask1 { - will-change: transform; - animation: 1s linear infinite spectrum-fill-mask-1; - transform: translateZ(0); + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-1; + transform: translateZ(0); } :host([indeterminate]) .fillSubMask2 { - will-change: transform; - animation: 1s linear infinite spectrum-fill-mask-2; - transform: translateZ(0); + will-change: transform; + animation: 1s linear infinite spectrum-fill-mask-2; + transform: translateZ(0); } .fill-submask-2 { - animation: 1s linear infinite spectrum-fill-mask-2; + animation: 1s linear infinite spectrum-fill-mask-2; } @keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } + 0% { + transform: rotate(90deg); + } - 1.69% { - transform: rotate(72.3deg); - } + 1.69% { + transform: rotate(72.3deg); + } - 3.39% { - transform: rotate(55.5deg); - } + 3.39% { + transform: rotate(55.5deg); + } - 5.08% { - transform: rotate(40.3deg); - } + 5.08% { + transform: rotate(40.3deg); + } - 6.78% { - transform: rotate(25deg); - } + 6.78% { + transform: rotate(25deg); + } - 8.47% { - transform: rotate(10.6deg); - } + 8.47% { + transform: rotate(10.6deg); + } - 10.17% { - transform: rotate(0); - } + 10.17% { + transform: rotate(0); + } - 11.86% { - transform: rotate(0); - } + 11.86% { + transform: rotate(0); + } - 13.56% { - transform: rotate(0); - } + 13.56% { + transform: rotate(0); + } - 15.25% { - transform: rotate(0); - } + 15.25% { + transform: rotate(0); + } - 16.95% { - transform: rotate(0); - } + 16.95% { + transform: rotate(0); + } - 18.64% { - transform: rotate(0); - } + 18.64% { + transform: rotate(0); + } - 20.34% { - transform: rotate(0); - } + 20.34% { + transform: rotate(0); + } - 22.03% { - transform: rotate(0); - } + 22.03% { + transform: rotate(0); + } - 23.73% { - transform: rotate(0); - } + 23.73% { + transform: rotate(0); + } - 25.42% { - transform: rotate(0); - } + 25.42% { + transform: rotate(0); + } - 27.12% { - transform: rotate(0); - } + 27.12% { + transform: rotate(0); + } - 28.81% { - transform: rotate(0); - } + 28.81% { + transform: rotate(0); + } - 30.51% { - transform: rotate(0); - } + 30.51% { + transform: rotate(0); + } - 32.2% { - transform: rotate(0); - } + 32.2% { + transform: rotate(0); + } - 33.9% { - transform: rotate(0); - } + 33.9% { + transform: rotate(0); + } - 35.59% { - transform: rotate(0); - } + 35.59% { + transform: rotate(0); + } - 37.29% { - transform: rotate(0); - } + 37.29% { + transform: rotate(0); + } - 38.98% { - transform: rotate(0); - } + 38.98% { + transform: rotate(0); + } - 40.68% { - transform: rotate(0); - } + 40.68% { + transform: rotate(0); + } - 42.37% { - transform: rotate(5.3deg); - } + 42.37% { + transform: rotate(5.3deg); + } - 44.07% { - transform: rotate(13.4deg); - } + 44.07% { + transform: rotate(13.4deg); + } - 45.76% { - transform: rotate(20.6deg); - } + 45.76% { + transform: rotate(20.6deg); + } - 47.46% { - transform: rotate(29deg); - } + 47.46% { + transform: rotate(29deg); + } - 49.15% { - transform: rotate(36.5deg); - } + 49.15% { + transform: rotate(36.5deg); + } - 50.85% { - transform: rotate(42.6deg); - } + 50.85% { + transform: rotate(42.6deg); + } - 52.54% { - transform: rotate(48.8deg); - } + 52.54% { + transform: rotate(48.8deg); + } - 54.24% { - transform: rotate(54.2deg); - } + 54.24% { + transform: rotate(54.2deg); + } - 55.93% { - transform: rotate(59.4deg); - } + 55.93% { + transform: rotate(59.4deg); + } - 57.63% { - transform: rotate(63.2deg); - } + 57.63% { + transform: rotate(63.2deg); + } - 59.32% { - transform: rotate(67.2deg); - } + 59.32% { + transform: rotate(67.2deg); + } - 61.02% { - transform: rotate(70.8deg); - } + 61.02% { + transform: rotate(70.8deg); + } - 62.71% { - transform: rotate(73.8deg); - } + 62.71% { + transform: rotate(73.8deg); + } - 64.41% { - transform: rotate(76.2deg); - } + 64.41% { + transform: rotate(76.2deg); + } - 66.1% { - transform: rotate(78.7deg); - } + 66.1% { + transform: rotate(78.7deg); + } - 67.8% { - transform: rotate(80.6deg); - } + 67.8% { + transform: rotate(80.6deg); + } - 69.49% { - transform: rotate(82.6deg); - } + 69.49% { + transform: rotate(82.6deg); + } - 71.19% { - transform: rotate(83.7deg); - } + 71.19% { + transform: rotate(83.7deg); + } - 72.88% { - transform: rotate(85deg); - } + 72.88% { + transform: rotate(85deg); + } - 74.58% { - transform: rotate(86.3deg); - } + 74.58% { + transform: rotate(86.3deg); + } - 76.27% { - transform: rotate(87deg); - } + 76.27% { + transform: rotate(87deg); + } - 77.97% { - transform: rotate(87.7deg); - } + 77.97% { + transform: rotate(87.7deg); + } - 79.66% { - transform: rotate(88.3deg); - } + 79.66% { + transform: rotate(88.3deg); + } - 81.36% { - transform: rotate(88.6deg); - } + 81.36% { + transform: rotate(88.6deg); + } - 83.05% { - transform: rotate(89.2deg); - } + 83.05% { + transform: rotate(89.2deg); + } - 84.75% { - transform: rotate(89.2deg); - } + 84.75% { + transform: rotate(89.2deg); + } - 86.44% { - transform: rotate(89.5deg); - } + 86.44% { + transform: rotate(89.5deg); + } - 88.14% { - transform: rotate(89.9deg); - } + 88.14% { + transform: rotate(89.9deg); + } - 89.83% { - transform: rotate(89.7deg); - } + 89.83% { + transform: rotate(89.7deg); + } - 91.53% { - transform: rotate(90.1deg); - } + 91.53% { + transform: rotate(90.1deg); + } - 93.22% { - transform: rotate(90.2deg); - } + 93.22% { + transform: rotate(90.2deg); + } - 94.92% { - transform: rotate(90.1deg); - } + 94.92% { + transform: rotate(90.1deg); + } - 96.61% { - transform: rotate(90deg); - } + 96.61% { + transform: rotate(90deg); + } - 98.31% { - transform: rotate(89.8deg); - } + 98.31% { + transform: rotate(89.8deg); + } - to { - transform: rotate(90deg); - } + to { + transform: rotate(90deg); + } } @keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } + 0% { + transform: rotate(180deg); + } - 1.69% { - transform: rotate(180deg); - } + 1.69% { + transform: rotate(180deg); + } - 3.39% { - transform: rotate(180deg); - } + 3.39% { + transform: rotate(180deg); + } - 5.08% { - transform: rotate(180deg); - } + 5.08% { + transform: rotate(180deg); + } - 6.78% { - transform: rotate(180deg); - } + 6.78% { + transform: rotate(180deg); + } - 8.47% { - transform: rotate(180deg); - } + 8.47% { + transform: rotate(180deg); + } - 10.17% { - transform: rotate(179.2deg); - } + 10.17% { + transform: rotate(179.2deg); + } - 11.86% { - transform: rotate(164deg); - } + 11.86% { + transform: rotate(164deg); + } - 13.56% { - transform: rotate(151.8deg); - } + 13.56% { + transform: rotate(151.8deg); + } - 15.25% { - transform: rotate(140.8deg); - } + 15.25% { + transform: rotate(140.8deg); + } - 16.95% { - transform: rotate(130.3deg); - } + 16.95% { + transform: rotate(130.3deg); + } - 18.64% { - transform: rotate(120.4deg); - } + 18.64% { + transform: rotate(120.4deg); + } - 20.34% { - transform: rotate(110.8deg); - } + 20.34% { + transform: rotate(110.8deg); + } - 22.03% { - transform: rotate(101.6deg); - } + 22.03% { + transform: rotate(101.6deg); + } - 23.73% { - transform: rotate(93.5deg); - } + 23.73% { + transform: rotate(93.5deg); + } - 25.42% { - transform: rotate(85.4deg); - } + 25.42% { + transform: rotate(85.4deg); + } - 27.12% { - transform: rotate(78.1deg); - } + 27.12% { + transform: rotate(78.1deg); + } - 28.81% { - transform: rotate(71.2deg); - } + 28.81% { + transform: rotate(71.2deg); + } - 30.51% { - transform: rotate(89.1deg); - } + 30.51% { + transform: rotate(89.1deg); + } - 32.2% { - transform: rotate(105.5deg); - } + 32.2% { + transform: rotate(105.5deg); + } - 33.9% { - transform: rotate(121.3deg); - } + 33.9% { + transform: rotate(121.3deg); + } - 35.59% { - transform: rotate(135.5deg); - } + 35.59% { + transform: rotate(135.5deg); + } - 37.29% { - transform: rotate(148.4deg); - } + 37.29% { + transform: rotate(148.4deg); + } - 38.98% { - transform: rotate(161deg); - } + 38.98% { + transform: rotate(161deg); + } - 40.68% { - transform: rotate(173.5deg); - } + 40.68% { + transform: rotate(173.5deg); + } - 42.37% { - transform: rotate(180deg); - } + 42.37% { + transform: rotate(180deg); + } - 44.07% { - transform: rotate(180deg); - } + 44.07% { + transform: rotate(180deg); + } - 45.76% { - transform: rotate(180deg); - } + 45.76% { + transform: rotate(180deg); + } - 47.46% { - transform: rotate(180deg); - } + 47.46% { + transform: rotate(180deg); + } - 49.15% { - transform: rotate(180deg); - } + 49.15% { + transform: rotate(180deg); + } - 50.85% { - transform: rotate(180deg); - } + 50.85% { + transform: rotate(180deg); + } - 52.54% { - transform: rotate(180deg); - } + 52.54% { + transform: rotate(180deg); + } - 54.24% { - transform: rotate(180deg); - } + 54.24% { + transform: rotate(180deg); + } - 55.93% { - transform: rotate(180deg); - } + 55.93% { + transform: rotate(180deg); + } - 57.63% { - transform: rotate(180deg); - } + 57.63% { + transform: rotate(180deg); + } - 59.32% { - transform: rotate(180deg); - } + 59.32% { + transform: rotate(180deg); + } - 61.02% { - transform: rotate(180deg); - } + 61.02% { + transform: rotate(180deg); + } - 62.71% { - transform: rotate(180deg); - } + 62.71% { + transform: rotate(180deg); + } - 64.41% { - transform: rotate(180deg); - } + 64.41% { + transform: rotate(180deg); + } - 66.1% { - transform: rotate(180deg); - } + 66.1% { + transform: rotate(180deg); + } - 67.8% { - transform: rotate(180deg); - } + 67.8% { + transform: rotate(180deg); + } - 69.49% { - transform: rotate(180deg); - } + 69.49% { + transform: rotate(180deg); + } - 71.19% { - transform: rotate(180deg); - } + 71.19% { + transform: rotate(180deg); + } - 72.88% { - transform: rotate(180deg); - } + 72.88% { + transform: rotate(180deg); + } - 74.58% { - transform: rotate(180deg); - } + 74.58% { + transform: rotate(180deg); + } - 76.27% { - transform: rotate(180deg); - } + 76.27% { + transform: rotate(180deg); + } - 77.97% { - transform: rotate(180deg); - } + 77.97% { + transform: rotate(180deg); + } - 79.66% { - transform: rotate(180deg); - } + 79.66% { + transform: rotate(180deg); + } - 81.36% { - transform: rotate(180deg); - } + 81.36% { + transform: rotate(180deg); + } - 83.05% { - transform: rotate(180deg); - } + 83.05% { + transform: rotate(180deg); + } - 84.75% { - transform: rotate(180deg); - } + 84.75% { + transform: rotate(180deg); + } - 86.44% { - transform: rotate(180deg); - } + 86.44% { + transform: rotate(180deg); + } - 88.14% { - transform: rotate(180deg); - } + 88.14% { + transform: rotate(180deg); + } - 89.83% { - transform: rotate(180deg); - } + 89.83% { + transform: rotate(180deg); + } - 91.53% { - transform: rotate(180deg); - } + 91.53% { + transform: rotate(180deg); + } - 93.22% { - transform: rotate(180deg); - } + 93.22% { + transform: rotate(180deg); + } - 94.92% { - transform: rotate(180deg); - } + 94.92% { + transform: rotate(180deg); + } - 96.61% { - transform: rotate(180deg); - } + 96.61% { + transform: rotate(180deg); + } - 98.31% { - transform: rotate(180deg); - } + 98.31% { + transform: rotate(180deg); + } - to { - transform: rotate(180deg); - } + to { + transform: rotate(180deg); + } } @keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } + 0% { + transform: rotate(-90deg); + } - to { - transform: rotate(270deg); - } + to { + transform: rotate(270deg); + } } + diff --git a/packages/radio/src/radio-overrides.css b/packages/radio/src/radio-overrides.css index 965a5d80c9..38057477e1 100644 --- a/packages/radio/src/radio-overrides.css +++ b/packages/radio/src/radio-overrides.css @@ -1,210 +1,107 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-radio-button-border-color-default: var( - --system-radio-button-border-color-default - ); - --spectrum-radio-button-border-color-hover: var( - --system-radio-button-border-color-hover - ); - --spectrum-radio-button-border-color-down: var( - --system-radio-button-border-color-down - ); - --spectrum-radio-button-border-color-focus: var( - --system-radio-button-border-color-focus - ); - --spectrum-radio-neutral-content-color: var( - --system-radio-neutral-content-color - ); - --spectrum-radio-neutral-content-color-hover: var( - --system-radio-neutral-content-color-hover - ); - --spectrum-radio-neutral-content-color-down: var( - --system-radio-neutral-content-color-down - ); - --spectrum-radio-neutral-content-color-focus: var( - --system-radio-neutral-content-color-focus - ); - --spectrum-radio-focus-indicator-thickness: var( - --system-radio-focus-indicator-thickness - ); - --spectrum-radio-focus-indicator-gap: var( - --system-radio-focus-indicator-gap - ); - --spectrum-radio-focus-indicator-color: var( - --system-radio-focus-indicator-color - ); - --spectrum-radio-disabled-content-color: var( - --system-radio-disabled-content-color - ); - --spectrum-radio-disabled-border-color: var( - --system-radio-disabled-border-color - ); - --spectrum-radio-emphasized-accent-color: var( - --system-radio-emphasized-accent-color - ); - --spectrum-radio-emphasized-accent-color-hover: var( - --system-radio-emphasized-accent-color-hover - ); - --spectrum-radio-emphasized-accent-color-down: var( - --system-radio-emphasized-accent-color-down - ); - --spectrum-radio-emphasized-accent-color-focus: var( - --system-radio-emphasized-accent-color-focus - ); - --spectrum-radio-border-width: var(--system-radio-border-width); - --spectrum-radio-button-background-color: var( - --system-radio-button-background-color - ); - --spectrum-radio-button-checked-border-color-default: var( - --system-radio-button-checked-border-color-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --system-radio-button-checked-border-color-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --system-radio-button-checked-border-color-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --system-radio-button-checked-border-color-focus - ); - --spectrum-radio-line-height: var(--system-radio-line-height); - --spectrum-radio-animation-duration: var(--system-radio-animation-duration); - --spectrum-radio-height: var(--system-radio-height); - --spectrum-radio-button-control-size: var( - --system-radio-button-control-size - ); - --spectrum-radio-text-to-control: var(--system-radio-text-to-control); - --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-font-size); + --spectrum-radio-button-border-color-default: var(--system-radio-button-border-color-default); + --spectrum-radio-button-border-color-hover: var(--system-radio-button-border-color-hover); + --spectrum-radio-button-border-color-down: var(--system-radio-button-border-color-down); + --spectrum-radio-button-border-color-focus: var(--system-radio-button-border-color-focus); + --spectrum-radio-neutral-content-color: var(--system-radio-neutral-content-color); + --spectrum-radio-neutral-content-color-hover: var(--system-radio-neutral-content-color-hover); + --spectrum-radio-neutral-content-color-down: var(--system-radio-neutral-content-color-down); + --spectrum-radio-neutral-content-color-focus: var(--system-radio-neutral-content-color-focus); + --spectrum-radio-focus-indicator-thickness: var(--system-radio-focus-indicator-thickness); + --spectrum-radio-focus-indicator-gap: var(--system-radio-focus-indicator-gap); + --spectrum-radio-focus-indicator-color: var(--system-radio-focus-indicator-color); + --spectrum-radio-disabled-content-color: var(--system-radio-disabled-content-color); + --spectrum-radio-disabled-border-color: var(--system-radio-disabled-border-color); + --spectrum-radio-emphasized-accent-color: var(--system-radio-emphasized-accent-color); + --spectrum-radio-emphasized-accent-color-hover: var(--system-radio-emphasized-accent-color-hover); + --spectrum-radio-emphasized-accent-color-down: var(--system-radio-emphasized-accent-color-down); + --spectrum-radio-emphasized-accent-color-focus: var(--system-radio-emphasized-accent-color-focus); + --spectrum-radio-border-width: var(--system-radio-border-width); + --spectrum-radio-button-background-color: var(--system-radio-button-background-color); + --spectrum-radio-button-checked-border-color-default: var(--system-radio-button-checked-border-color-default); + --spectrum-radio-button-checked-border-color-hover: var(--system-radio-button-checked-border-color-hover); + --spectrum-radio-button-checked-border-color-down: var(--system-radio-button-checked-border-color-down); + --spectrum-radio-button-checked-border-color-focus: var(--system-radio-button-checked-border-color-focus); + --spectrum-radio-line-height: var(--system-radio-line-height); + --spectrum-radio-animation-duration: var(--system-radio-animation-duration); + --spectrum-radio-height: var(--system-radio-height); + --spectrum-radio-button-control-size: var(--system-radio-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-label-bottom-to-text); + --spectrum-radio-button-top-to-control: var(--system-radio-button-top-to-control); + --spectrum-radio-font-size: var(--system-radio-font-size); } :host(:lang(ja)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-ja-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-ja-line-height-cjk); } :host(:lang(zh)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-zh-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-zh-line-height-cjk); } :host(:lang(ko)) { - --spectrum-radio-line-height-cjk: var( - --system-radio-lang-ko-line-height-cjk - ); + --spectrum-radio-line-height-cjk: var(--system-radio-lang-ko-line-height-cjk); } :host { - --spectrum-radio-height: var(--system-radio-size-m-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-m-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-m-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-m-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-m-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-m-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-m-font-size); + --spectrum-radio-height: var(--system-radio-size-m-height); + --spectrum-radio-button-control-size: var(--system-radio-size-m-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-size-m-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-size-m-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-size-m-label-bottom-to-text); + --spectrum-radio-button-top-to-control: var(--system-radio-size-m-button-top-to-control); + --spectrum-radio-font-size: var(--system-radio-size-m-font-size); } -:host([size='s']) { - --spectrum-radio-height: var(--system-radio-size-s-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-s-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-s-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-s-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-s-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-s-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-s-font-size); +:host([size="s"]) { + --spectrum-radio-height: var(--system-radio-size-s-height); + --spectrum-radio-button-control-size: var(--system-radio-size-s-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-size-s-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-size-s-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-size-s-label-bottom-to-text); + --spectrum-radio-button-top-to-control: var(--system-radio-size-s-button-top-to-control); + --spectrum-radio-font-size: var(--system-radio-size-s-font-size); } -:host([size='l']) { - --spectrum-radio-height: var(--system-radio-size-l-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-l-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-l-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-l-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-l-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-l-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-l-font-size); +:host([size="l"]) { + --spectrum-radio-height: var(--system-radio-size-l-height); + --spectrum-radio-button-control-size: var(--system-radio-size-l-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-size-l-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-size-l-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-size-l-label-bottom-to-text); + --spectrum-radio-button-top-to-control: var(--system-radio-size-l-button-top-to-control); + --spectrum-radio-font-size: var(--system-radio-size-l-font-size); } -:host([size='xl']) { - --spectrum-radio-height: var(--system-radio-size-xl-height); - --spectrum-radio-button-control-size: var( - --system-radio-size-xl-button-control-size - ); - --spectrum-radio-text-to-control: var( - --system-radio-size-xl-text-to-control - ); - --spectrum-radio-label-top-to-text: var( - --system-radio-size-xl-label-top-to-text - ); - --spectrum-radio-label-bottom-to-text: var( - --system-radio-size-xl-label-bottom-to-text - ); - --spectrum-radio-button-top-to-control: var( - --system-radio-size-xl-button-top-to-control - ); - --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); +:host([size="xl"]) { + --spectrum-radio-height: var(--system-radio-size-xl-height); + --spectrum-radio-button-control-size: var(--system-radio-size-xl-button-control-size); + --spectrum-radio-text-to-control: var(--system-radio-size-xl-text-to-control); + --spectrum-radio-label-top-to-text: var(--system-radio-size-xl-label-top-to-text); + --spectrum-radio-label-bottom-to-text: var(--system-radio-size-xl-label-bottom-to-text); + --spectrum-radio-button-top-to-control: var(--system-radio-size-xl-button-top-to-control); + --spectrum-radio-font-size: var(--system-radio-size-xl-font-size); } :host([emphasized]) { - --spectrum-radio-button-checked-border-color-default: var( - --system-radio-emphasized-button-checked-border-color-default - ); - --spectrum-radio-button-checked-border-color-hover: var( - --system-radio-emphasized-button-checked-border-color-hover - ); - --spectrum-radio-button-checked-border-color-down: var( - --system-radio-emphasized-button-checked-border-color-down - ); - --spectrum-radio-button-checked-border-color-focus: var( - --system-radio-emphasized-button-checked-border-color-focus - ); + --spectrum-radio-button-checked-border-color-default: var(--system-radio-emphasized-button-checked-border-color-default); + --spectrum-radio-button-checked-border-color-hover: var(--system-radio-emphasized-button-checked-border-color-hover); + --spectrum-radio-button-checked-border-color-down: var(--system-radio-emphasized-button-checked-border-color-down); + --spectrum-radio-button-checked-border-color-focus: var(--system-radio-emphasized-button-checked-border-color-focus); } + diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css index 00c7ce3b70..8cec2ea0f3 100644 --- a/packages/radio/src/spectrum-radio.css +++ b/packages/radio/src/spectrum-radio.css @@ -1,444 +1,226 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-radio-neutral-content-color: CanvasText; - --highcontrast-radio-neutral-content-color-hover: CanvasText; - --highcontrast-radio-neutral-content-color-down: CanvasText; - --highcontrast-radio-neutral-content-color-focus: CanvasText; - --highcontrast-radio-button-border-color-default: ButtonText; - --highcontrast-radio-button-border-color-hover: Highlight; - --highcontrast-radio-button-border-color-down: ButtonText; - --highcontrast-radio-button-border-color-focus: Highlight; - --highcontrast-radio-emphasized-accent-color: ButtonText; - --highcontrast-radio-emphasized-accent-color-hover: Highlight; - --highcontrast-radio-emphasized-accent-color-down: ButtonText; - --highcontrast-radio-emphasized-accent-color-focus: Highlight; - --highcontrast-radio-button-checked-border-color-default: Highlight; - --highcontrast-radio-button-checked-border-color-hover: Highlight; - --highcontrast-radio-button-checked-border-color-down: Highlight; - --highcontrast-radio-button-checked-border-color-focus: Highlight; - --highcontrast-radio-disabled-content-color: GrayText; - --highcontrast-radio-disabled-border-color: GrayText; - --highcontrast-radio-focus-indicator-color: CanvasText; - } - - #button:after { - forced-color-adjust: none; - } + :host { + --highcontrast-radio-neutral-content-color: CanvasText; + --highcontrast-radio-neutral-content-color-hover: CanvasText; + --highcontrast-radio-neutral-content-color-down: CanvasText; + --highcontrast-radio-neutral-content-color-focus: CanvasText; + --highcontrast-radio-button-border-color-default: ButtonText; + --highcontrast-radio-button-border-color-hover: Highlight; + --highcontrast-radio-button-border-color-down: ButtonText; + --highcontrast-radio-button-border-color-focus: Highlight; + --highcontrast-radio-emphasized-accent-color: ButtonText; + --highcontrast-radio-emphasized-accent-color-hover: Highlight; + --highcontrast-radio-emphasized-accent-color-down: ButtonText; + --highcontrast-radio-emphasized-accent-color-focus: Highlight; + --highcontrast-radio-button-checked-border-color-default: Highlight; + --highcontrast-radio-button-checked-border-color-hover: Highlight; + --highcontrast-radio-button-checked-border-color-down: Highlight; + --highcontrast-radio-button-checked-border-color-focus: Highlight; + --highcontrast-radio-disabled-content-color: GrayText; + --highcontrast-radio-disabled-border-color: GrayText; + --highcontrast-radio-focus-indicator-color: CanvasText; + } + + #button:after { + forced-color-adjust: none; + } } :host { - vertical-align: top; - min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); - max-inline-size: 100%; - align-items: flex-start; - display: inline-flex; - position: relative; + vertical-align: top; + min-block-size: var(--mod-radio-height, var(--spectrum-radio-height)); + max-inline-size: 100%; + align-items: flex-start; + display: inline-flex; + position: relative; } :host(:active) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-down, - var( - --mod-radio-button-border-color-down, - var(--spectrum-radio-button-border-color-down) - ) - ); + border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))); } :host(:active[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-down, - var( - --mod-radio-button-checked-border-color-down, - var(--spectrum-radio-button-checked-border-color-down) - ) - ); + border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))); } :host(:active) #label { - color: var( - --highcontrast-radio-neutral-content-color-down, - var( - --mod-radio-neutral-content-color-down, - var(--spectrum-radio-neutral-content-color-down) - ) - ); + color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))); } :host(:focus-visible) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-focus, - var( - --mod-radio-button-border-color-focus, - var(--spectrum-radio-button-border-color-focus) - ) - ); + border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))); } :host(:focus-visible) #button:after { - border-style: solid; - border-color: var( - --highcontrast-radio-focus-indicator-color, - var( - --mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color) - ) - ); - border-width: var( - --mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness) - ); - inline-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - block-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); + border-style: solid; + border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2); + block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2); } :host(:focus-visible[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-focus, - var( - --mod-radio-button-checked-border-color-focus, - var(--spectrum-radio-button-checked-border-color-focus) - ) - ); + border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))); } :host(:focus-visible) #label { - color: var( - --highcontrast-radio-neutral-content-color-focus, - var( - --mod-radio-neutral-content-color-focus, - var(--spectrum-radio-neutral-content-color-focus) - ) - ); + color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))); } :host([readonly]) #input:read-only { - cursor: auto; + cursor: auto; } :host([readonly]) #button { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - position: fixed; - inset-block-end: 100%; - inset-inline-end: 100%; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + position: fixed; + inset-block-end: 100%; + inset-inline-end: 100%; } -:host([readonly][checked][disabled]) #input ~ #label, -:host([readonly][disabled]) #input ~ #label, -:host([readonly]) #label { - color: var( - --highcontrast-radio-neutral-content-color, - var( - --mod-radio-neutral-content-color, - var(--spectrum-radio-neutral-content-color) - ) - ); - margin-inline-start: 0; +:host([readonly][checked][disabled]) #input ~ #label, :host([readonly][disabled]) #input ~ #label, :host([readonly]) #label { + color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + margin-inline-start: 0; } :host([emphasized][checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color, - var( - --mod-radio-emphasized-accent-color, - var(--spectrum-radio-emphasized-accent-color) - ) - ); + border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))); } @media (hover: hover) { - :host(:hover) #button:before { - border-color: var( - --highcontrast-radio-button-border-color-hover, - var( - --mod-radio-button-border-color-hover, - var(--spectrum-radio-button-border-color-hover) - ) - ); - } - - :host([checked]:hover) #input + #button:before { - border-color: var( - --highcontrast-radio-button-checked-border-color-hover, - var( - --mod-radio-button-checked-border-color-hover, - var(--spectrum-radio-button-checked-border-color-hover) - ) - ); - } - - :host(:hover) #label { - color: var( - --highcontrast-radio-neutral-content-color-hover, - var( - --mod-radio-neutral-content-color-hover, - var(--spectrum-radio-neutral-content-color-hover) - ) - ); - } - - :host([emphasized][checked]:hover) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-hover, - var( - --mod-radio-emphasized-accent-color-hover, - var(--spectrum-radio-emphasized-accent-color-hover) - ) - ); - } + :host(:hover) #button:before { + border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))); + } + + :host([checked]:hover) #input + #button:before { + border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))); + } + + :host(:hover) #label { + color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))); + } + + :host([emphasized][checked]:hover) #input + #button:before { + border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))); + } } :host([emphasized]:active[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-down, - var( - --mod-radio-emphasized-accent-color-down, - var(--spectrum-radio-emphasized-accent-color-down) - ) - ); + border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))); } :host([emphasized]:focus-visible[checked]) #input + #button:before { - border-color: var( - --highcontrast-radio-emphasized-accent-color-focus, - var( - --mod-radio-emphasized-accent-color-focus, - var(--spectrum-radio-emphasized-accent-color-focus) - ) - ); + border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))); } -:host([checked][disabled]) #input + #button:before, -:host([disabled]) #input + #button:before { - border-color: var( - --highcontrast-radio-disabled-border-color, - var( - --mod-radio-disabled-border-color, - var(--spectrum-radio-disabled-border-color) - ) - ); +:host([checked][disabled]) #input + #button:before, :host([disabled]) #input + #button:before { + border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))); } -:host([checked][disabled]) #input ~ #label, -:host([disabled]) #input ~ #label { - color: var( - --highcontrast-radio-disabled-content-color, - var( - --mod-radio-disabled-content-color, - var(--spectrum-radio-disabled-content-color) - ) - ); +:host([checked][disabled]) #input ~ #label, :host([disabled]) #input ~ #label { + color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))); } #input { - font-family: inherit; - font-size: 100%; - line-height: var( - --mod-radio-line-height, - var(--spectrum-radio-line-height) - ); - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - position: absolute; - overflow: visible; + font-family: inherit; + font-size: 100%; + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: 0; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + overflow: visible; } :host([disabled]) #input { - cursor: default; + cursor: default; } :host([checked]) #input + #button:before { - border-width: calc( - var(--spectrum-radio-button-control-size) / 2 - - var(--spectrum-radio-button-selection-indicator) / 2 - ); - border-color: var( - --highcontrast-radio-button-checked-border-color-default, - var( - --mod-radio-button-checked-border-color-default, - var(--spectrum-radio-button-checked-border-color-default) - ) - ); + border-width: calc(var(--spectrum-radio-button-control-size) / 2 - var(--spectrum-radio-button-selection-indicator) / 2); + border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))); } #input:focus-visible + #button:after { - border-width: var( - --mod-radio-focus-indicator-thickness, - var(--spectrum-radio-focus-indicator-thickness) - ); - border-color: var( - --highcontrast-radio-focus-indicator-color, - var( - --mod-radio-focus-indicator-color, - var(--spectrum-radio-focus-indicator-color) - ) - ); - inline-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - block-size: calc( - var(--spectrum-radio-button-control-size) + - var(--spectrum-radio-focus-indicator-gap) * 2 - ); - border-style: solid; + border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness)); + border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))); + inline-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2); + block-size: calc(var(--spectrum-radio-button-control-size) + var(--spectrum-radio-focus-indicator-gap) * 2); + border-style: solid; } #label { - text-align: start; - font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); - color: var( - --highcontrast-radio-neutral-content-color, - var( - --mod-radio-neutral-content-color, - var(--spectrum-radio-neutral-content-color) - ) - ); - line-height: var( - --mod-radio-line-height, - var(--spectrum-radio-line-height) - ); - transition: color - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out; - margin-block-start: var(--spectrum-radio-label-top-to-text); - margin-block-end: var(--spectrum-radio-label-bottom-to-text); - margin-inline-start: var( - --mod-radio-text-to-control, - var(--spectrum-radio-text-to-control) - ); + text-align: start; + font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); + color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); + line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); + transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + margin-block-start: var(--spectrum-radio-label-top-to-text); + margin-block-end: var(--spectrum-radio-label-bottom-to-text); + margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control)); } -#label:lang(ja), -#label:lang(ko), -#label:lang(zh) { - line-height: var( - --mod-radio-line-height-cjk, - var(--spectrum-radio-line-height-cjk) - ); +#label:lang(ja), #label:lang(ko), #label:lang(zh) { + line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk)); } #button { - box-sizing: border-box; - inline-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - block-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var( - --mod-radio-button-top-to-control, - var(--spectrum-radio-button-top-to-control) - ); - position: relative; + box-sizing: border-box; + inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control)); + position: relative; } #button:before { - z-index: 0; - content: ''; - box-sizing: border-box; - inline-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - block-size: var( - --mod-radio-button-control-size, - var(--spectrum-radio-button-control-size) - ); - background-color: var( - --highcontrast-radio-button-background-color, - var( - --mod-radio-button-background-color, - var(--spectrum-radio-button-background-color) - ) - ); - border-width: var( - --mod-radio-border-width, - var(--spectrum-radio-border-width) - ); - border-color: var( - --highcontrast-radio-button-border-color-default, - var( - --mod-radio-button-border-color-default, - var(--spectrum-radio-button-border-color-default) - ) - ); - transition: - border - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-in-out; - border-style: solid; - border-radius: 50%; - display: block; - position: absolute; + z-index: 0; + content: ""; + box-sizing: border-box; + inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size)); + background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color))); + border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width)); + border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))); + transition: border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out, box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out; + border-style: solid; + border-radius: 50%; + display: block; + position: absolute; } #button:after { - content: ''; - transition: - opacity - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-out, - margin - var( - --mod-radio-animation-duration, - var(--spectrum-radio-animation-duration) - ) - ease-out; - border-radius: 50%; - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translateX(-50%) translateY(-50%); + content: ""; + transition: opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out, margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out; + border-radius: 50%; + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translateX(-50%)translateY(-50%); } -:host:dir(rtl) #button:after, -:host([dir='rtl']) #button:after { - transform: translateX(50%) translateY(-50%); +:host:dir(rtl) #button:after, :host([dir="rtl"]) #button:after { + transform: translateX(50%)translateY(-50%); } + diff --git a/packages/search/src/search-overrides.css b/packages/search/src/search-overrides.css index 546d9102d2..6a5cd4e40a 100644 --- a/packages/search/src/search-overrides.css +++ b/packages/search/src/search-overrides.css @@ -1,123 +1,88 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-search-border-color-default: var( - --system-search-border-color-default - ); - --spectrum-search-border-color-hover: var( - --system-search-border-color-hover - ); - --spectrum-search-border-color-focus: var( - --system-search-border-color-focus - ); - --spectrum-search-border-color-focus-hover: var( - --system-search-border-color-focus-hover - ); - --spectrum-search-border-color-key-focus: var( - --system-search-border-color-key-focus - ); - --spectrum-search-inline-size: var(--system-search-inline-size); - --spectrum-search-min-inline-multiplier: var( - --system-search-min-inline-multiplier - ); - --spectrum-search-to-help-text: var(--system-search-to-help-text); - --spectrum-search-top-to-text: var(--system-search-top-to-text); - --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); - --spectrum-search-focus-indicator-thickness: var( - --system-search-focus-indicator-thickness - ); - --spectrum-search-focus-indicator-gap: var( - --system-search-focus-indicator-gap - ); - --spectrum-search-focus-indicator-color: var( - --system-search-focus-indicator-color - ); - --spectrum-search-font-family: var(--system-search-font-family); - --spectrum-search-font-weight: var(--system-search-font-weight); - --spectrum-search-font-style: var(--system-search-font-style); - --spectrum-search-line-height: var(--system-search-line-height); - --spectrum-search-color-default: var(--system-search-color-default); - --spectrum-search-color-hover: var(--system-search-color-hover); - --spectrum-search-color-focus: var(--system-search-color-focus); - --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); - --spectrum-search-color-key-focus: var(--system-search-color-key-focus); - --spectrum-search-border-width: var(--system-search-border-width); - --spectrum-search-background-color: var(--system-search-background-color); - --spectrum-search-color-disabled: var(--system-search-color-disabled); - --spectrum-search-background-color-disabled: var( - --system-search-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-border-color-disabled - ); - --spectrum-search-border-radius: var(--system-search-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); - --spectrum-search-block-size: var(--system-search-block-size); - --spectrum-search-icon-size: var(--system-search-icon-size); - --spectrum-search-text-to-icon: var(--system-search-text-to-icon); + --spectrum-search-border-color-default: var(--system-search-border-color-default); + --spectrum-search-border-color-hover: var(--system-search-border-color-hover); + --spectrum-search-border-color-focus: var(--system-search-border-color-focus); + --spectrum-search-border-color-focus-hover: var(--system-search-border-color-focus-hover); + --spectrum-search-border-color-key-focus: var(--system-search-border-color-key-focus); + --spectrum-search-inline-size: var(--system-search-inline-size); + --spectrum-search-min-inline-multiplier: var(--system-search-min-inline-multiplier); + --spectrum-search-to-help-text: var(--system-search-to-help-text); + --spectrum-search-top-to-text: var(--system-search-top-to-text); + --spectrum-search-bottom-to-text: var(--system-search-bottom-to-text); + --spectrum-search-focus-indicator-thickness: var(--system-search-focus-indicator-thickness); + --spectrum-search-focus-indicator-gap: var(--system-search-focus-indicator-gap); + --spectrum-search-focus-indicator-color: var(--system-search-focus-indicator-color); + --spectrum-search-font-family: var(--system-search-font-family); + --spectrum-search-font-weight: var(--system-search-font-weight); + --spectrum-search-font-style: var(--system-search-font-style); + --spectrum-search-line-height: var(--system-search-line-height); + --spectrum-search-color-default: var(--system-search-color-default); + --spectrum-search-color-hover: var(--system-search-color-hover); + --spectrum-search-color-focus: var(--system-search-color-focus); + --spectrum-search-color-focus-hover: var(--system-search-color-focus-hover); + --spectrum-search-color-key-focus: var(--system-search-color-key-focus); + --spectrum-search-border-width: var(--system-search-border-width); + --spectrum-search-background-color: var(--system-search-background-color); + --spectrum-search-color-disabled: var(--system-search-color-disabled); + --spectrum-search-background-color-disabled: var(--system-search-background-color-disabled); + --spectrum-search-border-color-disabled: var(--system-search-border-color-disabled); + --spectrum-search-border-radius: var(--system-search-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-edge-to-visual); + --spectrum-search-block-size: var(--system-search-block-size); + --spectrum-search-icon-size: var(--system-search-icon-size); + --spectrum-search-text-to-icon: var(--system-search-text-to-icon); } -:host([size='m']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-m-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-m-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-m-block-size); - --spectrum-search-icon-size: var(--system-search-size-m-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); +:host([size="m"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-m-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-m-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-m-block-size); + --spectrum-search-icon-size: var(--system-search-size-m-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-m-text-to-icon); } -:host([size='s']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-s-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-s-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-s-block-size); - --spectrum-search-icon-size: var(--system-search-size-s-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); +:host([size="s"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-s-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-s-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-s-block-size); + --spectrum-search-icon-size: var(--system-search-size-s-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-s-text-to-icon); } -:host([size='l']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-l-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-l-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-l-block-size); - --spectrum-search-icon-size: var(--system-search-size-l-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); +:host([size="l"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-l-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-l-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-l-block-size); + --spectrum-search-icon-size: var(--system-search-size-l-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-l-text-to-icon); } -:host([size='xl']) #textfield { - --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); - --spectrum-search-edge-to-visual: var( - --system-search-size-xl-edge-to-visual - ); - --spectrum-search-block-size: var(--system-search-size-xl-block-size); - --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); - --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); +:host([size="xl"]) #textfield { + --spectrum-search-border-radius: var(--system-search-size-xl-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-size-xl-edge-to-visual); + --spectrum-search-block-size: var(--system-search-size-xl-block-size); + --spectrum-search-icon-size: var(--system-search-size-xl-icon-size); + --spectrum-search-text-to-icon: var(--system-search-size-xl-text-to-icon); } :host([quiet]) { - --spectrum-search-background-color: var( - --system-search-quiet-background-color - ); - --spectrum-search-background-color-disabled: var( - --system-search-quiet-background-color-disabled - ); - --spectrum-search-border-color-disabled: var( - --system-search-quiet-border-color-disabled - ); - --spectrum-search-border-radius: var(--system-search-quiet-border-radius); - --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); + --spectrum-search-background-color: var(--system-search-quiet-background-color); + --spectrum-search-background-color-disabled: var(--system-search-quiet-background-color-disabled); + --spectrum-search-border-color-disabled: var(--system-search-quiet-border-color-disabled); + --spectrum-search-border-radius: var(--system-search-quiet-border-radius); + --spectrum-search-edge-to-visual: var(--system-search-quiet-edge-to-visual); } + diff --git a/packages/search/src/spectrum-search.css b/packages/search/src/spectrum-search.css index 964aed202b..34c42a2fc9 100644 --- a/packages/search/src/spectrum-search.css +++ b/packages/search/src/spectrum-search.css @@ -1,306 +1,151 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #textfield #textfield, - #textfield #textfield .input { - --highcontrast-search-color-default: CanvasText; - --highcontrast-search-color-hover: CanvasText; - --highcontrast-search-color-focus: CanvasText; - --highcontrast-search-color-disabled: GrayText; - } + #textfield #textfield, #textfield #textfield .input { + --highcontrast-search-color-default: CanvasText; + --highcontrast-search-color-hover: CanvasText; + --highcontrast-search-color-focus: CanvasText; + --highcontrast-search-color-disabled: GrayText; + } - #textfield #button .spectrum-ClearButton-fill { - forced-color-adjust: none; - background-color: initial; - } + #textfield #button .spectrum-ClearButton-fill { + forced-color-adjust: none; + background-color: initial; + } } #textfield { - --spectrum-search-button-inline-size: var(--spectrum-search-block-size); - --spectrum-search-min-inline-size: calc( - var(--spectrum-search-min-inline-multiplier) * - var(--spectrum-search-block-size) - ); - --mod-textfield-font-family: var( - --mod-search-font-family, - var(--spectrum-search-font-family) - ); - --mod-textfield-font-weight: var( - --mod-search-font-weight, - var(--spectrum-search-font-weight) - ); - --mod-textfield-corner-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); - --mod-textfield-border-width: var( - --mod-search-border-width, - var(--spectrum-search-border-width) - ); - --mod-textfield-focus-indicator-gap: var( - --mod-search-focus-indicator-gap, - var(--spectrum-search-focus-indicator-gap) - ); - --mod-textfield-focus-indicator-width: var( - --mod-search-focus-indicator-thickness, - var(--spectrum-search-focus-indicator-thickness) - ); - --mod-textfield-focus-indicator-color: var( - --mod-search-focus-indicator-color, - var(--spectrum-search-focus-indicator-color) - ); - --mod-textfield-text-color-default: var( - --mod-search-color-default, - var(--spectrum-search-color-default) - ); - --mod-textfield-text-color-hover: var( - --mod-search-color-hover, - var(--spectrum-search-color-hover) - ); - --mod-textfield-text-color-focus: var( - --mod-search-color-focus, - var(--spectrum-search-color-focus) - ); - --mod-textfield-text-color-focus-hover: var( - --mod-search-color-focus-hover, - var(--spectrum-search-color-focus-hover) - ); - --mod-textfield-text-color-keyboard-focus: var( - --mod-search-color-key-focus, - var(--spectrum-search-color-key-focus) - ); - --mod-textfield-text-color-disabled: var( - --mod-search-color-disabled, - var(--spectrum-search-color-disabled) - ); - --mod-textfield-border-color: var( - --mod-search-border-color-default, - var(--spectrum-search-border-color-default) - ); - --mod-textfield-border-color-hover: var( - --mod-search-border-color-hover, - var(--spectrum-search-border-color-hover) - ); - --mod-textfield-border-color-focus: var( - --mod-search-border-color-focus, - var(--spectrum-search-border-color-focus) - ); - --mod-textfield-border-color-focus-hover: var( - --mod-search-border-color-focus-hover, - var(--spectrum-search-border-color-focus-hover) - ); - --mod-textfield-border-color-keyboard-focus: var( - --mod-search-border-color-key-focus, - var(--spectrum-search-border-color-key-focus) - ); - --mod-textfield-border-color-disabled: var( - --mod-search-border-color-disabled, - var(--spectrum-search-border-color-disabled) - ); - --mod-textfield-background-color: var( - --mod-search-background-color, - var(--spectrum-search-background-color) - ); - --mod-textfield-background-color-disabled: var( - --mod-search-background-color-disabled, - var(--spectrum-search-background-color-disabled) - ); - inline-size: var( - --mod-search-inline-size, - var(--spectrum-search-inline-size) - ); - min-inline-size: var( - --mod-search-min-inline-size, - var(--spectrum-search-min-inline-size) - ); - display: inline-block; - position: relative; + --spectrum-search-button-inline-size: var(--spectrum-search-block-size); + --spectrum-search-min-inline-size: calc(var(--spectrum-search-min-inline-multiplier) * var(--spectrum-search-block-size)); + --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); + --mod-textfield-font-weight: var(--mod-search-font-weight, var(--spectrum-search-font-weight)); + --mod-textfield-corner-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + --mod-textfield-border-width: var(--mod-search-border-width, var(--spectrum-search-border-width)); + --mod-textfield-focus-indicator-gap: var(--mod-search-focus-indicator-gap, var(--spectrum-search-focus-indicator-gap)); + --mod-textfield-focus-indicator-width: var(--mod-search-focus-indicator-thickness, var(--spectrum-search-focus-indicator-thickness)); + --mod-textfield-focus-indicator-color: var(--mod-search-focus-indicator-color, var(--spectrum-search-focus-indicator-color)); + --mod-textfield-text-color-default: var(--mod-search-color-default, var(--spectrum-search-color-default)); + --mod-textfield-text-color-hover: var(--mod-search-color-hover, var(--spectrum-search-color-hover)); + --mod-textfield-text-color-focus: var(--mod-search-color-focus, var(--spectrum-search-color-focus)); + --mod-textfield-text-color-focus-hover: var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover)); + --mod-textfield-text-color-keyboard-focus: var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus)); + --mod-textfield-text-color-disabled: var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)); + --mod-textfield-border-color: var(--mod-search-border-color-default, var(--spectrum-search-border-color-default)); + --mod-textfield-border-color-hover: var(--mod-search-border-color-hover, var(--spectrum-search-border-color-hover)); + --mod-textfield-border-color-focus: var(--mod-search-border-color-focus, var(--spectrum-search-border-color-focus)); + --mod-textfield-border-color-focus-hover: var(--mod-search-border-color-focus-hover, var(--spectrum-search-border-color-focus-hover)); + --mod-textfield-border-color-keyboard-focus: var(--mod-search-border-color-key-focus, var(--spectrum-search-border-color-key-focus)); + --mod-textfield-border-color-disabled: var(--mod-search-border-color-disabled, var(--spectrum-search-border-color-disabled)); + --mod-textfield-background-color: var(--mod-search-background-color, var(--spectrum-search-background-color)); + --mod-textfield-background-color-disabled: var(--mod-search-background-color-disabled, var(--spectrum-search-background-color-disabled)); + inline-size: var(--mod-search-inline-size, var(--spectrum-search-inline-size)); + min-inline-size: var(--mod-search-min-inline-size, var(--spectrum-search-min-inline-size)); + display: inline-block; + position: relative; } #textfield .spectrum-HelpText { - margin-block-start: var( - --mod-search-to-help-text, - var(--spectrum-search-to-help-text) - ); + margin-block-start: var(--mod-search-to-help-text, var(--spectrum-search-to-help-text)); } #button { - position: absolute; - inset-block-start: 0; - inset-inline-end: 0; + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; } -#button, -#button .spectrum-ClearButton-fill { - border-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); +#button, #button .spectrum-ClearButton-fill { + border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); } #textfield.is-disabled #button { - display: none; + display: none; } #textfield { - inline-size: 100%; + inline-size: 100%; } .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-default, - var(--mod-search-color-default, var(--spectrum-search-color-default)) - ); - color: var(--spectrum-search-color); - margin-block: auto; - display: block; - position: absolute; - inset-block: 0; + --spectrum-search-color: var(--highcontrast-search-color-default, var(--mod-search-color-default, var(--spectrum-search-color-default))); + color: var(--spectrum-search-color); + margin-block: auto; + display: block; + position: absolute; + inset-block: 0; } #textfield.is-focused .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var(--mod-search-color-focus, var(--spectrum-search-color-focus)) - ); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus, var(--spectrum-search-color-focus))); } #textfield.is-keyboardFocused .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var( - --mod-search-color-key-focus, - var(--spectrum-search-color-key-focus) - ) - ); + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus))); } #textfield.is-disabled .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-disabled, - var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)) - ); + --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))); } @media (hover: hover) { - #textfield:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-hover, - var(--mod-search-color-hover, var(--spectrum-search-color-hover)) - ); - } + #textfield:hover .icon-search { + --spectrum-search-color: var(--highcontrast-search-color-hover, var(--mod-search-color-hover, var(--spectrum-search-color-hover))); + } - #textfield.is-focused:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-focus, - var( - --mod-search-color-focus-hover, - var(--spectrum-search-color-focus-hover) - ) - ); - } + #textfield.is-focused:hover .icon-search { + --spectrum-search-color: var(--highcontrast-search-color-focus, var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))); + } - #textfield.is-disabled:hover .icon-search { - --spectrum-search-color: var( - --highcontrast-search-color-disabled, - var( - --mod-search-color-disabled, - var(--spectrum-search-color-disabled) - ) - ); - } + #textfield.is-disabled:hover .icon-search { + --spectrum-search-color: var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))); + } } .input { - appearance: none; - block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); - font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); - line-height: var( - --mod-search-line-height, - var(--spectrum-search-line-height) - ); - padding-block-start: calc( - var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); - padding-block-end: calc( - var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); + appearance: none; + block-size: var(--mod-search-block-size, var(--spectrum-search-block-size)); + font-style: var(--mod-search-font-style, var(--spectrum-search-font-style)); + line-height: var(--mod-search-line-height, var(--spectrum-search-line-height)); + padding-block-start: calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); + padding-block-end: calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); } -.input::-webkit-search-cancel-button, -.input::-webkit-search-decoration { - appearance: none; +.input::-webkit-search-cancel-button, .input::-webkit-search-decoration { + appearance: none; } :host(:not([quiet])) #textfield .icon-search { - inset-inline-start: var( - --mod-search-edge-to-visual, - var(--spectrum-search-edge-to-visual) - ); + inset-inline-start: var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)); } :host(:not([quiet])) #textfield .input { - padding-inline-start: calc( - var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) + - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + - var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) - ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - - var(--mod-search-border-width, var(--spectrum-search-border-width)) - ); + padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); + padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--mod-search-border-width, var(--spectrum-search-border-width))); } :host([quiet]) { - --spectrum-search-quiet-button-offset: var( - --mod-search-quiet-button-offset, - calc( - var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / - 2 - ) - ); + --spectrum-search-quiet-button-offset: var(--mod-search-quiet-button-offset, calc(var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2 - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) / 2)); } :host([quiet]) #button .spectrum-ClearButton-icon { - transform: translateX(var(--spectrum-search-quiet-button-offset)); + transform: translateX(var(--spectrum-search-quiet-button-offset)); } :host([quiet]) #textfield .input { - border-radius: var( - --mod-search-border-radius, - var(--spectrum-search-border-radius) - ); - padding-block-start: var( - --mod-search-top-to-text, - var(--spectrum-search-top-to-text) - ); - padding-inline-start: calc( - var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + - var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + - var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)) - ); - padding-inline-end: calc( - var( - --mod-search-button-inline-size, - var(--spectrum-search-button-inline-size) - ) - var(--spectrum-search-quiet-button-offset) - ); + border-radius: var(--mod-search-border-radius, var(--spectrum-search-border-radius)); + padding-block-start: var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)); + padding-inline-start: calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))); + padding-inline-end: calc(var(--mod-search-button-inline-size, var(--spectrum-search-button-inline-size)) - var(--spectrum-search-quiet-button-offset)); } + diff --git a/packages/sidenav/src/sidenav-heading-overrides.css b/packages/sidenav/src/sidenav-heading-overrides.css index 2fa5cb6821..48924abd62 100644 --- a/packages/sidenav/src/sidenav-heading-overrides.css +++ b/packages/sidenav/src/sidenav-heading-overrides.css @@ -1,182 +1,89 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var(--system-side-nav-start-to-content-second-level); + --spectrum-sidenav-start-to-content-third-level: var(--system-side-nav-start-to-content-third-level); + --spectrum-sidenav-start-to-content-with-icon-second-level: var(--system-side-nav-start-to-content-with-icon-second-level); + --spectrum-sidenav-start-to-content-with-icon-third-level: var(--system-side-nav-start-to-content-with-icon-third-level); + --spectrum-sidenav-heading-top-margin: var(--system-side-nav-heading-top-margin); + --spectrum-sidenav-heading-bottom-margin: var(--system-side-nav-heading-bottom-margin); + --spectrum-sidenav-background-disabled: var(--system-side-nav-background-disabled); + --spectrum-sidenav-background-default: var(--system-side-nav-background-default); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down); + --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus); + --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected); + --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected); + --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected); + --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var(--system-side-nav-content-disabled-color); + --spectrum-sidenav-content-color-default: var(--system-side-nav-content-color-default); + --spectrum-sidenav-content-color-hover: var(--system-side-nav-content-color-hover); + --spectrum-sidenav-content-color-down: var(--system-side-nav-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--system-side-nav-content-color-key-focus); + --spectrum-sidenav-content-color-default-selected: var(--system-side-nav-content-color-default-selected); + --spectrum-sidenav-content-color-hover-selected: var(--system-side-nav-content-color-hover-selected); + --spectrum-sidenav-content-color-down-selected: var(--system-side-nav-content-color-down-selected); + --spectrum-sidenav-content-color-key-focus-selected: var(--system-side-nav-content-color-key-focus-selected); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var(--system-side-nav-top-level-font-family); + --spectrum-sidenav-top-level-font-weight: var(--system-side-nav-top-level-font-weight); + --spectrum-sidenav-top-level-font-style: var(--system-side-nav-top-level-font-style); + --spectrum-sidenav-top-level-font-size: var(--system-side-nav-top-level-font-size); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-top-level-line-height); + --spectrum-sidenav-header-font-family: var(--system-side-nav-header-font-family); + --spectrum-sidenav-header-font-weight: var(--system-side-nav-header-font-weight); + --spectrum-sidenav-header-font-style: var(--system-side-nav-header-font-style); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var(--system-side-nav-header-line-height); } #list:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ja-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ja-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ja-header-line-height); } #list:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-zh-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-zh-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-zh-header-line-height); } #list:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ko-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ko-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ko-header-line-height); } + diff --git a/packages/sidenav/src/sidenav-item-overrides.css b/packages/sidenav/src/sidenav-item-overrides.css index 2fa5cb6821..48924abd62 100644 --- a/packages/sidenav/src/sidenav-item-overrides.css +++ b/packages/sidenav/src/sidenav-item-overrides.css @@ -1,182 +1,89 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var(--system-side-nav-start-to-content-second-level); + --spectrum-sidenav-start-to-content-third-level: var(--system-side-nav-start-to-content-third-level); + --spectrum-sidenav-start-to-content-with-icon-second-level: var(--system-side-nav-start-to-content-with-icon-second-level); + --spectrum-sidenav-start-to-content-with-icon-third-level: var(--system-side-nav-start-to-content-with-icon-third-level); + --spectrum-sidenav-heading-top-margin: var(--system-side-nav-heading-top-margin); + --spectrum-sidenav-heading-bottom-margin: var(--system-side-nav-heading-bottom-margin); + --spectrum-sidenav-background-disabled: var(--system-side-nav-background-disabled); + --spectrum-sidenav-background-default: var(--system-side-nav-background-default); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down); + --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus); + --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected); + --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected); + --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected); + --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var(--system-side-nav-content-disabled-color); + --spectrum-sidenav-content-color-default: var(--system-side-nav-content-color-default); + --spectrum-sidenav-content-color-hover: var(--system-side-nav-content-color-hover); + --spectrum-sidenav-content-color-down: var(--system-side-nav-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--system-side-nav-content-color-key-focus); + --spectrum-sidenav-content-color-default-selected: var(--system-side-nav-content-color-default-selected); + --spectrum-sidenav-content-color-hover-selected: var(--system-side-nav-content-color-hover-selected); + --spectrum-sidenav-content-color-down-selected: var(--system-side-nav-content-color-down-selected); + --spectrum-sidenav-content-color-key-focus-selected: var(--system-side-nav-content-color-key-focus-selected); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var(--system-side-nav-top-level-font-family); + --spectrum-sidenav-top-level-font-weight: var(--system-side-nav-top-level-font-weight); + --spectrum-sidenav-top-level-font-style: var(--system-side-nav-top-level-font-style); + --spectrum-sidenav-top-level-font-size: var(--system-side-nav-top-level-font-size); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-top-level-line-height); + --spectrum-sidenav-header-font-family: var(--system-side-nav-header-font-family); + --spectrum-sidenav-header-font-weight: var(--system-side-nav-header-font-weight); + --spectrum-sidenav-header-font-style: var(--system-side-nav-header-font-style); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var(--system-side-nav-header-line-height); } #list:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ja-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ja-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ja-header-line-height); } #list:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-zh-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-zh-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-zh-header-line-height); } #list:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ko-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ko-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ko-header-line-height); } + diff --git a/packages/sidenav/src/sidenav-overrides.css b/packages/sidenav/src/sidenav-overrides.css index aa58dbbc26..2967718871 100644 --- a/packages/sidenav/src/sidenav-overrides.css +++ b/packages/sidenav/src/sidenav-overrides.css @@ -1,182 +1,89 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); - --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); - --spectrum-sidenav-focus-ring-color: var( - --system-side-nav-focus-ring-color - ); - --spectrum-sidenav-min-height: var(--system-side-nav-min-height); - --spectrum-sidenav-width: var(--system-side-nav-width); - --spectrum-sidenav-min-width: var(--system-side-nav-min-width); - --spectrum-sidenav-max-width: var(--system-side-nav-max-width); - --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); - --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); - --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); - --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); - --spectrum-sidenav-gap: var(--system-side-nav-gap); - --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); - --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); - --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); - --spectrum-sidenav-start-to-content-second-level: var( - --system-side-nav-start-to-content-second-level - ); - --spectrum-sidenav-start-to-content-third-level: var( - --system-side-nav-start-to-content-third-level - ); - --spectrum-sidenav-start-to-content-with-icon-second-level: var( - --system-side-nav-start-to-content-with-icon-second-level - ); - --spectrum-sidenav-start-to-content-with-icon-third-level: var( - --system-side-nav-start-to-content-with-icon-third-level - ); - --spectrum-sidenav-heading-top-margin: var( - --system-side-nav-heading-top-margin - ); - --spectrum-sidenav-heading-bottom-margin: var( - --system-side-nav-heading-bottom-margin - ); - --spectrum-sidenav-background-disabled: var( - --system-side-nav-background-disabled - ); - --spectrum-sidenav-background-default: var( - --system-side-nav-background-default - ); - --spectrum-sidenav-background-hover: var( - --system-side-nav-background-hover - ); - --spectrum-sidenav-item-background-down: var( - --system-side-nav-item-background-down - ); - --spectrum-sidenav-background-key-focus: var( - --system-side-nav-background-key-focus - ); - --spectrum-sidenav-item-background-default-selected: var( - --system-side-nav-item-background-default-selected - ); - --spectrum-sidenav-background-hover-selected: var( - --system-side-nav-background-hover-selected - ); - --spectrum-sidenav-item-background-down-selected: var( - --system-side-nav-item-background-down-selected - ); - --spectrum-sidenav-background-key-focus-selected: var( - --system-side-nav-background-key-focus-selected - ); - --spectrum-sidenav-header-color: var(--system-side-nav-header-color); - --spectrum-sidenav-content-disabled-color: var( - --system-side-nav-content-disabled-color - ); - --spectrum-sidenav-content-color-default: var( - --system-side-nav-content-color-default - ); - --spectrum-sidenav-content-color-hover: var( - --system-side-nav-content-color-hover - ); - --spectrum-sidenav-content-color-down: var( - --system-side-nav-content-color-down - ); - --spectrum-sidenav-content-color-key-focus: var( - --system-side-nav-content-color-key-focus - ); - --spectrum-sidenav-content-color-default-selected: var( - --system-side-nav-content-color-default-selected - ); - --spectrum-sidenav-content-color-hover-selected: var( - --system-side-nav-content-color-hover-selected - ); - --spectrum-sidenav-content-color-down-selected: var( - --system-side-nav-content-color-down-selected - ); - --spectrum-sidenav-content-color-key-focus-selected: var( - --system-side-nav-content-color-key-focus-selected - ); - --spectrum-sidenav-text-font-family: var( - --system-side-nav-text-font-family - ); - --spectrum-sidenav-text-font-weight: var( - --system-side-nav-text-font-weight - ); - --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); - --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); - --spectrum-sidenav-text-line-height: var( - --system-side-nav-text-line-height - ); - --spectrum-sidenav-top-level-font-family: var( - --system-side-nav-top-level-font-family - ); - --spectrum-sidenav-top-level-font-weight: var( - --system-side-nav-top-level-font-weight - ); - --spectrum-sidenav-top-level-font-style: var( - --system-side-nav-top-level-font-style - ); - --spectrum-sidenav-top-level-font-size: var( - --system-side-nav-top-level-font-size - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-top-level-line-height - ); - --spectrum-sidenav-header-font-family: var( - --system-side-nav-header-font-family - ); - --spectrum-sidenav-header-font-weight: var( - --system-side-nav-header-font-weight - ); - --spectrum-sidenav-header-font-style: var( - --system-side-nav-header-font-style - ); - --spectrum-sidenav-header-font-size: var( - --system-side-nav-header-font-size - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-header-line-height - ); + --spectrum-sidenav-focus-ring-size: var(--system-side-nav-focus-ring-size); + --spectrum-sidenav-focus-ring-gap: var(--system-side-nav-focus-ring-gap); + --spectrum-sidenav-focus-ring-color: var(--system-side-nav-focus-ring-color); + --spectrum-sidenav-min-height: var(--system-side-nav-min-height); + --spectrum-sidenav-width: var(--system-side-nav-width); + --spectrum-sidenav-min-width: var(--system-side-nav-min-width); + --spectrum-sidenav-max-width: var(--system-side-nav-max-width); + --spectrum-sidenav-border-radius: var(--system-side-nav-border-radius); + --spectrum-sidenav-icon-size: var(--system-side-nav-icon-size); + --spectrum-sidenav-icon-spacing: var(--system-side-nav-icon-spacing); + --spectrum-sidenav-inline-padding: var(--system-side-nav-inline-padding); + --spectrum-sidenav-gap: var(--system-side-nav-gap); + --spectrum-sidenav-top-to-icon: var(--system-side-nav-top-to-icon); + --spectrum-sidenav-top-to-label: var(--system-side-nav-top-to-label); + --spectrum-sidenav-bottom-to-label: var(--system-side-nav-bottom-to-label); + --spectrum-sidenav-start-to-content-second-level: var(--system-side-nav-start-to-content-second-level); + --spectrum-sidenav-start-to-content-third-level: var(--system-side-nav-start-to-content-third-level); + --spectrum-sidenav-start-to-content-with-icon-second-level: var(--system-side-nav-start-to-content-with-icon-second-level); + --spectrum-sidenav-start-to-content-with-icon-third-level: var(--system-side-nav-start-to-content-with-icon-third-level); + --spectrum-sidenav-heading-top-margin: var(--system-side-nav-heading-top-margin); + --spectrum-sidenav-heading-bottom-margin: var(--system-side-nav-heading-bottom-margin); + --spectrum-sidenav-background-disabled: var(--system-side-nav-background-disabled); + --spectrum-sidenav-background-default: var(--system-side-nav-background-default); + --spectrum-sidenav-background-hover: var(--system-side-nav-background-hover); + --spectrum-sidenav-item-background-down: var(--system-side-nav-item-background-down); + --spectrum-sidenav-background-key-focus: var(--system-side-nav-background-key-focus); + --spectrum-sidenav-item-background-default-selected: var(--system-side-nav-item-background-default-selected); + --spectrum-sidenav-background-hover-selected: var(--system-side-nav-background-hover-selected); + --spectrum-sidenav-item-background-down-selected: var(--system-side-nav-item-background-down-selected); + --spectrum-sidenav-background-key-focus-selected: var(--system-side-nav-background-key-focus-selected); + --spectrum-sidenav-header-color: var(--system-side-nav-header-color); + --spectrum-sidenav-content-disabled-color: var(--system-side-nav-content-disabled-color); + --spectrum-sidenav-content-color-default: var(--system-side-nav-content-color-default); + --spectrum-sidenav-content-color-hover: var(--system-side-nav-content-color-hover); + --spectrum-sidenav-content-color-down: var(--system-side-nav-content-color-down); + --spectrum-sidenav-content-color-key-focus: var(--system-side-nav-content-color-key-focus); + --spectrum-sidenav-content-color-default-selected: var(--system-side-nav-content-color-default-selected); + --spectrum-sidenav-content-color-hover-selected: var(--system-side-nav-content-color-hover-selected); + --spectrum-sidenav-content-color-down-selected: var(--system-side-nav-content-color-down-selected); + --spectrum-sidenav-content-color-key-focus-selected: var(--system-side-nav-content-color-key-focus-selected); + --spectrum-sidenav-text-font-family: var(--system-side-nav-text-font-family); + --spectrum-sidenav-text-font-weight: var(--system-side-nav-text-font-weight); + --spectrum-sidenav-text-font-style: var(--system-side-nav-text-font-style); + --spectrum-sidenav-text-font-size: var(--system-side-nav-text-font-size); + --spectrum-sidenav-text-line-height: var(--system-side-nav-text-line-height); + --spectrum-sidenav-top-level-font-family: var(--system-side-nav-top-level-font-family); + --spectrum-sidenav-top-level-font-weight: var(--system-side-nav-top-level-font-weight); + --spectrum-sidenav-top-level-font-style: var(--system-side-nav-top-level-font-style); + --spectrum-sidenav-top-level-font-size: var(--system-side-nav-top-level-font-size); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-top-level-line-height); + --spectrum-sidenav-header-font-family: var(--system-side-nav-header-font-family); + --spectrum-sidenav-header-font-weight: var(--system-side-nav-header-font-weight); + --spectrum-sidenav-header-font-style: var(--system-side-nav-header-font-style); + --spectrum-sidenav-header-font-size: var(--system-side-nav-header-font-size); + --spectrum-sidenav-header-line-height: var(--system-side-nav-header-line-height); } :host:lang(ja) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ja-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ja-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ja-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ja-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ja-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ja-header-line-height); } :host:lang(zh) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-zh-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-zh-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-zh-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-zh-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-zh-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-zh-header-line-height); } :host:lang(ko) { - --spectrum-sidenav-text-line-height: var( - --system-side-nav-lang-ko-text-line-height - ); - --spectrum-sidenav-top-level-line-height: var( - --system-side-nav-lang-ko-top-level-line-height - ); - --spectrum-sidenav-header-line-height: var( - --system-side-nav-lang-ko-header-line-height - ); + --spectrum-sidenav-text-line-height: var(--system-side-nav-lang-ko-text-line-height); + --spectrum-sidenav-top-level-line-height: var(--system-side-nav-lang-ko-top-level-line-height); + --spectrum-sidenav-header-line-height: var(--system-side-nav-lang-ko-header-line-height); } + diff --git a/packages/sidenav/src/spectrum-sidenav-heading.css b/packages/sidenav/src/spectrum-sidenav-heading.css index cf11a8385a..2918150fb7 100644 --- a/packages/sidenav/src/spectrum-sidenav-heading.css +++ b/packages/sidenav/src/spectrum-sidenav-heading.css @@ -1,63 +1,38 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #list .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } + #list .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } #list { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } #heading { - padding-inline: var( - --mod-sidenav-inline-padding, - var(--spectrum-sidenav-inline-padding) - ); - color: var( - --mod-sidenav-header-color, - var(--spectrum-sidenav-header-color) - ); - font-size: var( - --mod-sidenav-header-font-size, - var(--spectrum-sidenav-header-font-size) - ); - font-weight: var( - --mod-sidenav-header-font-weight, - var(--spectrum-sidenav-header-font-weight) - ); - font-style: var( - --mod-sidenav-header-font-style, - var(--spectrum-sidenav-header-font-style) - ); - line-height: var( - --mod-sidenav-header-line-height, - var(--spectrum-sidenav-header-line-height) - ); - margin-block-start: calc( - var( - --mod-sidenav-heading-top-margin, - var(--spectrum-sidenav-heading-top-margin) - ) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)) - ); - margin-block-end: var( - --mod-sidenav-heading-bottom-margin, - var(--spectrum-sidenav-heading-bottom-margin) - ); + padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); + color: var(--mod-sidenav-header-color, var(--spectrum-sidenav-header-color)); + font-size: var(--mod-sidenav-header-font-size, var(--spectrum-sidenav-header-font-size)); + font-weight: var(--mod-sidenav-header-font-weight, var(--spectrum-sidenav-header-font-weight)); + font-style: var(--mod-sidenav-header-font-style, var(--spectrum-sidenav-header-font-style)); + line-height: var(--mod-sidenav-header-line-height, var(--spectrum-sidenav-header-line-height)); + margin-block-start: calc(var(--mod-sidenav-heading-top-margin, var(--spectrum-sidenav-heading-top-margin)) - var(--mod-sidenav-gap, var(--spectrum-sidenav-gap))); + margin-block-end: var(--mod-sidenav-heading-bottom-margin, var(--spectrum-sidenav-heading-bottom-margin)); } + diff --git a/packages/sidenav/src/spectrum-sidenav-item.css b/packages/sidenav/src/spectrum-sidenav-item.css index cf619e7cd1..548aca7f3c 100644 --- a/packages/sidenav/src/spectrum-sidenav-item.css +++ b/packages/sidenav/src/spectrum-sidenav-item.css @@ -1,352 +1,161 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - #list ::slotted([slot='icon']) { - forced-color-adjust: preserve-parent-color; - } - - :host { - --highcontrast-sidenav-content-disabled-color: GrayText; - --highcontrast-sidenav-focus-ring-color: Highlight; - --highcontrast-sidenav-content-color-default-selected: SelectedItemText; - --highcontrast-sidenav-item-background-default-selected: SelectedItem; - --highcontrast-sidenav-background-key-focus-selected: Highlight; - --highcontrast-sidenav-background-hover-selected: Highlight; - --highcontrast-sidenav-item-background-down-selected: Highlight; - --highcontrast-sidenav-item-background-down: Highlight; - --highcontrast-sidenav-background-hover: Highlight; - --highcontrast-sidenav-content-color-hover: HighlightText; - --highcontrast-sidenav-background-key-focus: Highlight; - --highcontrast-sidenav-top-level-font-color: ButtonText; - --highcontrast-sidenav-content-color-default: ButtonText; - --highcontrast-sidenav-content-color-down: HighlightText; - forced-color-adjust: none; - } + #list ::slotted([slot="icon"]) { + forced-color-adjust: preserve-parent-color; + } + + :host { + --highcontrast-sidenav-content-disabled-color: GrayText; + --highcontrast-sidenav-focus-ring-color: Highlight; + --highcontrast-sidenav-content-color-default-selected: SelectedItemText; + --highcontrast-sidenav-item-background-default-selected: SelectedItem; + --highcontrast-sidenav-background-key-focus-selected: Highlight; + --highcontrast-sidenav-background-hover-selected: Highlight; + --highcontrast-sidenav-item-background-down-selected: Highlight; + --highcontrast-sidenav-item-background-down: Highlight; + --highcontrast-sidenav-background-hover: Highlight; + --highcontrast-sidenav-content-color-hover: HighlightText; + --highcontrast-sidenav-background-key-focus: Highlight; + --highcontrast-sidenav-top-level-font-color: ButtonText; + --highcontrast-sidenav-content-color-default: ButtonText; + --highcontrast-sidenav-content-color-down: HighlightText; + forced-color-adjust: none; + } } #list { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } :host { - margin-inline: 0; - list-style-type: none; + margin-inline: 0; + list-style-type: none; } :host([disabled]) #item-link { - background-color: var( - --highcontrast-sidenav-background-disabled, - var( - --mod-sidenav-background-disabled, - var(--spectrum-sidenav-background-disabled) - ) - ); - color: var( - --highcontrast-sidenav-content-disabled-color, - var( - --mod-sidenav-content-disabled-color, - var(--spectrum-sidenav-content-disabled-color) - ) - ); - cursor: default; - pointer-events: none; + background-color: var(--highcontrast-sidenav-background-disabled, var(--mod-sidenav-background-disabled, var(--spectrum-sidenav-background-disabled))); + color: var(--highcontrast-sidenav-content-disabled-color, var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))); + cursor: default; + pointer-events: none; } :host([selected]) #item-link { - background-color: var( - --highcontrast-sidenav-item-background-default-selected, - var( - --mod-sidenav-item-background-default-selected, - var(--spectrum-sidenav-item-background-default-selected) - ) - ); - color: var( - --highcontrast-sidenav-content-color-default-selected, - var( - --mod-sidenav-content-color-default-selected, - var(--spectrum-sidenav-content-color-default-selected) - ) - ); + background-color: var(--highcontrast-sidenav-item-background-default-selected, var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))); + color: var(--highcontrast-sidenav-content-color-default-selected, var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))); } :host([selected]) #item-link:active { - background-color: var( - --highcontrast-sidenav-item-background-down-selected, - var( - --mod-sidenav-item-background-down-selected, - var(--spectrum-sidenav-item-background-down-selected) - ) - ); - color: var( - --mod-sidenav-content-color-down-selected, - var(--spectrum-sidenav-content-color-down-selected) - ); + background-color: var(--highcontrast-sidenav-item-background-down-selected, var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))); + color: var(--mod-sidenav-content-color-down-selected, var(--spectrum-sidenav-content-color-down-selected)); } -:host([selected]) #item-link.is-keyboardFocused, -:host([selected]) #item-link:focus-visible { - background-color: var( - --highcontrast-sidenav-background-key-focus-selected, - var( - --mod-sidenav-background-key-focus-selected, - var(--spectrum-sidenav-background-key-focus-selected) - ) - ); - color: var( - --mod-sidenav-content-color-key-focus-selected, - var(--spectrum-sidenav-content-color-key-focus-selected) - ); +:host([selected]) #item-link.is-keyboardFocused, :host([selected]) #item-link:focus-visible { + background-color: var(--highcontrast-sidenav-background-key-focus-selected, var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))); + color: var(--mod-sidenav-content-color-key-focus-selected, var(--spectrum-sidenav-content-color-key-focus-selected)); } #item-link { - padding-inline: var( - --mod-sidenav-inline-padding, - var(--spectrum-sidenav-inline-padding) - ); - box-sizing: border-box; - word-break: break-word; - hyphens: auto; - cursor: pointer; - transition: - background-color var(--spectrum-animation-duration-100) ease-out, - color var(--spectrum-animation-duration-100) ease-out; - border-radius: var( - --mod-sidenav-border-radius, - var(--spectrum-sidenav-border-radius) - ); - background-color: var( - --highcontrast-sidenav-background-default, - var( - --mod-sidenav-background-default, - var(--spectrum-sidenav-background-default) - ) - ); - color: var( - --highcontrast-sidenav-content-color-default, - var( - --mod-sidenav-content-color-default, - var(--spectrum-sidenav-content-color-default) - ) - ); - inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); - min-inline-size: var( - --mod-sidenav-min-width, - var(--spectrum-sidenav-min-width) - ); - max-inline-size: var( - --mod-sidenav-max-width, - var(--spectrum-sidenav-max-width) - ); - min-block-size: var( - --mod-sidenav-min-height, - var(--spectrum-sidenav-min-height) - ); - font-family: var( - --mod-sidenav-text-font-family, - var(--spectrum-sidenav-text-font-family) - ); - font-size: var( - --mod-sidenav-text-font-size, - var(--spectrum-sidenav-text-font-size) - ); - font-weight: var( - --mod-sidenav-text-font-weight, - var(--spectrum-sidenav-text-font-weight) - ); - font-style: var( - --mod-sidenav-text-font-style, - var(--spectrum-sidenav-text-font-style) - ); - line-height: var( - --mod-sidenav-text-line-height, - var(--spectrum-sidenav-text-line-height) - ); - justify-content: start; - margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); - -webkit-text-decoration: none; - text-decoration: none; - display: inline-flex; - position: relative; + padding-inline: var(--mod-sidenav-inline-padding, var(--spectrum-sidenav-inline-padding)); + box-sizing: border-box; + word-break: break-word; + hyphens: auto; + cursor: pointer; + transition: background-color var(--spectrum-animation-duration-100) ease-out, color var(--spectrum-animation-duration-100) ease-out; + border-radius: var(--mod-sidenav-border-radius, var(--spectrum-sidenav-border-radius)); + background-color: var(--highcontrast-sidenav-background-default, var(--mod-sidenav-background-default, var(--spectrum-sidenav-background-default))); + color: var(--highcontrast-sidenav-content-color-default, var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))); + inline-size: var(--mod-sidenav-width, var(--spectrum-sidenav-width)); + min-inline-size: var(--mod-sidenav-min-width, var(--spectrum-sidenav-min-width)); + max-inline-size: var(--mod-sidenav-max-width, var(--spectrum-sidenav-max-width)); + min-block-size: var(--mod-sidenav-min-height, var(--spectrum-sidenav-min-height)); + font-family: var(--mod-sidenav-text-font-family, var(--spectrum-sidenav-text-font-family)); + font-size: var(--mod-sidenav-text-font-size, var(--spectrum-sidenav-text-font-size)); + font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); + font-style: var(--mod-sidenav-text-font-style, var(--spectrum-sidenav-text-font-style)); + line-height: var(--mod-sidenav-text-line-height, var(--spectrum-sidenav-text-line-height)); + justify-content: start; + margin-block-end: var(--mod-sidenav-gap, var(--spectrum-sidenav-gap)); + -webkit-text-decoration: none; + text-decoration: none; + display: inline-flex; + position: relative; } #item-link #link-text { - margin-block-start: var( - --mod-sidenav-top-to-label, - var(--spectrum-sidenav-top-to-label) - ); - margin-block-end: var( - --mod-sidenav-bottom-to-label, - var(--spectrum-sidenav-bottom-to-label) - ); + margin-block-start: var(--mod-sidenav-top-to-label, var(--spectrum-sidenav-top-to-label)); + margin-block-end: var(--mod-sidenav-bottom-to-label, var(--spectrum-sidenav-bottom-to-label)); } -#item-link ::slotted([slot='icon']) { - inline-size: var( - --mod-sidenav-icon-size, - var(--spectrum-sidenav-icon-size) - ); - block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); - flex-shrink: 0; - margin-block-start: var( - --mod-sidenav-top-to-icon, - var(--spectrum-sidenav-top-to-icon) - ); - margin-inline-end: var( - --mod-sidenav-icon-spacing, - var(--spectrum-sidenav-icon-spacing) - ); +#item-link ::slotted([slot="icon"]) { + inline-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + block-size: var(--mod-sidenav-icon-size, var(--spectrum-sidenav-icon-size)); + flex-shrink: 0; + margin-block-start: var(--mod-sidenav-top-to-icon, var(--spectrum-sidenav-top-to-icon)); + margin-inline-end: var(--mod-sidenav-icon-spacing, var(--spectrum-sidenav-icon-spacing)); } @media (hover: hover) { - :host([selected]) #item-link:hover { - background-color: var( - --highcontrast-sidenav-background-hover-selected, - var( - --mod-sidenav-background-hover-selected, - var(--spectrum-sidenav-background-hover-selected) - ) - ); - color: var( - --mod-sidenav-content-color-hover-selected, - var(--spectrum-sidenav-content-color-hover-selected) - ); - } + :host([selected]) #item-link:hover { + background-color: var(--highcontrast-sidenav-background-hover-selected, var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))); + color: var(--mod-sidenav-content-color-hover-selected, var(--spectrum-sidenav-content-color-hover-selected)); + } - #item-link:hover { - background-color: var( - --highcontrast-sidenav-background-hover, - var( - --mod-sidenav-background-hover, - var(--spectrum-sidenav-background-hover) - ) - ); - color: var( - --highcontrast-sidenav-content-color-hover, - var( - --mod-sidenav-content-color-hover, - var(--spectrum-sidenav-content-color-hover) - ) - ); - } + #item-link:hover { + background-color: var(--highcontrast-sidenav-background-hover, var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))); + color: var(--highcontrast-sidenav-content-color-hover, var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))); + } } #item-link:active { - background-color: var( - --highcontrast-sidenav-item-background-down, - var( - --mod-sidenav-item-background-down, - var(--spectrum-sidenav-item-background-down) - ) - ); - color: var( - --highcontrast-sidenav-content-color-down, - var( - --mod-sidenav-content-color-down, - var(--spectrum-sidenav-content-color-down) - ) - ); + background-color: var(--highcontrast-sidenav-item-background-down, var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))); + color: var(--highcontrast-sidenav-content-color-down, var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))); } -#item-link.is-keyboardFocused, -#item-link:focus-visible { - outline: var( - --highcontrast-sidenav-focus-ring-color, - var( - --mod-sidenav-focus-ring-color, - var(--spectrum-sidenav-focus-ring-color) - ) - ) - solid - var( - --mod-sidenav-focus-ring-size, - var(--spectrum-sidenav-focus-ring-size) - ); - outline-offset: var( - --mod-sidenav-focus-ring-gap, - var(--spectrum-sidenav-focus-ring-gap) - ); - background-color: var( - --highcontrast-sidenav-background-key-focus, - var( - --mod-sidenav-background-key-focus, - var(--spectrum-sidenav-background-key-focus) - ) - ); - color: var( - --highcontrast-sidenav-content-color-key-focus, - var( - --mod-sidenav-content-color-key-focus, - var(--spectrum-sidenav-content-color-key-focus) - ) - ); +#item-link.is-keyboardFocused, #item-link:focus-visible { + outline: var(--highcontrast-sidenav-focus-ring-color, var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))) solid var(--mod-sidenav-focus-ring-size, var(--spectrum-sidenav-focus-ring-size)); + outline-offset: var(--mod-sidenav-focus-ring-gap, var(--spectrum-sidenav-focus-ring-gap)); + background-color: var(--highcontrast-sidenav-background-key-focus, var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))); + color: var(--highcontrast-sidenav-content-color-key-focus, var(--mod-sidenav-content-color-key-focus, var(--spectrum-sidenav-content-color-key-focus))); } #item-link[data-level] { - font-family: var( - --mod-sidenav-top-level-font-family, - var(--spectrum-sidenav-top-level-font-family) - ); - font-weight: var( - --mod-sidenav-top-level-font-weight, - var(--spectrum-sidenav-top-level-font-weight) - ); - font-style: var( - --mod-sidenav-top-level-font-style, - var(--spectrum-sidenav-top-level-font-style) - ); - font-size: var( - --mod-sidenav-top-level-font-size, - var(--spectrum-sidenav-top-level-font-size) - ); - line-height: var( - --mod-sidenav-top-level-line-height, - var(--spectrum-sidenav-top-level-line-height) - ); + font-family: var(--mod-sidenav-top-level-font-family, var(--spectrum-sidenav-top-level-font-family)); + font-weight: var(--mod-sidenav-top-level-font-weight, var(--spectrum-sidenav-top-level-font-weight)); + font-style: var(--mod-sidenav-top-level-font-style, var(--spectrum-sidenav-top-level-font-style)); + font-size: var(--mod-sidenav-top-level-font-size, var(--spectrum-sidenav-top-level-font-size)); + line-height: var(--mod-sidenav-top-level-line-height, var(--spectrum-sidenav-top-level-line-height)); } -#item-link:not([data-level='0']) { - font-weight: var( - --mod-sidenav-text-font-weight, - var(--spectrum-sidenav-text-font-weight) - ); - padding-inline-start: var( - --mod-sidenav-start-to-content-second-level, - var(--spectrum-sidenav-start-to-content-second-level) - ); +#item-link:not([data-level="0"]) { + font-weight: var(--mod-sidenav-text-font-weight, var(--spectrum-sidenav-text-font-weight)); + padding-inline-start: var(--mod-sidenav-start-to-content-second-level, var(--spectrum-sidenav-start-to-content-second-level)); } -#item-link[data-level='2'] { - padding-inline-start: var( - --mod-sidenav-start-to-content-third-level, - var(--spectrum-sidenav-start-to-content-third-level) - ); +#item-link[data-level="2"] { + padding-inline-start: var(--mod-sidenav-start-to-content-third-level, var(--spectrum-sidenav-start-to-content-third-level)); } -.spectrum-SideNav--hasIcon#item-link:not([data-level='0']) { - padding-inline-start: var( - --mod-sidenav-start-to-content-with-icon-second-level, - var(--spectrum-sidenav-start-to-content-with-icon-second-level) - ); +.spectrum-SideNav--hasIcon#item-link:not([data-level="0"]) { + padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-second-level, var(--spectrum-sidenav-start-to-content-with-icon-second-level)); } -.spectrum-SideNav--hasIcon#item-link[data-level='2'] { - padding-inline-start: var( - --mod-sidenav-start-to-content-with-icon-third-level, - var(--spectrum-sidenav-start-to-content-with-icon-third-level) - ); +.spectrum-SideNav--hasIcon#item-link[data-level="2"] { + padding-inline-start: var(--mod-sidenav-start-to-content-with-icon-third-level, var(--spectrum-sidenav-start-to-content-with-icon-third-level)); } + diff --git a/packages/sidenav/src/spectrum-sidenav.css b/packages/sidenav/src/spectrum-sidenav.css index 77cb05b687..e5e3f82ce0 100644 --- a/packages/sidenav/src/spectrum-sidenav.css +++ b/packages/sidenav/src/spectrum-sidenav.css @@ -1,26 +1,27 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - .spectrum-Icon { - forced-color-adjust: preserve-parent-color; - } + .spectrum-Icon { + forced-color-adjust: preserve-parent-color; + } } :host { - flex-direction: column; - margin: 0; - padding: 0; - list-style-type: none; - display: flex; + flex-direction: column; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; } + diff --git a/packages/slider/src/slider-overrides.css b/packages/slider/src/slider-overrides.css index e32dc04442..1ce2f0a6b1 100644 --- a/packages/slider/src/slider-overrides.css +++ b/packages/slider/src/slider-overrides.css @@ -1,215 +1,106 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-slider-track-color: var(--system-slider-track-color); - --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); - --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); - --spectrum-slider-ramp-track-color-disabled: var( - --system-slider-ramp-track-color-disabled - ); - --spectrum-slider-handle-background-color: var( - --system-slider-handle-background-color - ); - --spectrum-slider-handle-background-color-disabled: var( - --system-slider-handle-background-color-disabled - ); - --spectrum-slider-ramp-handle-background-color: var( - --system-slider-ramp-handle-background-color - ); - --spectrum-slider-ticks-handle-background-color: var( - --system-slider-ticks-handle-background-color - ); - --spectrum-slider-handle-border-color: var( - --system-slider-handle-border-color - ); - --spectrum-slider-handle-disabled-background-color: var( - --system-slider-handle-disabled-background-color - ); - --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); - --spectrum-slider-handle-border-color-hover: var( - --system-slider-handle-border-color-hover - ); - --spectrum-slider-handle-border-color-down: var( - --system-slider-handle-border-color-down - ); - --spectrum-slider-handle-border-color-key-focus: var( - --system-slider-handle-border-color-key-focus - ); - --spectrum-slider-handle-focus-ring-color-key-focus: var( - --system-slider-handle-focus-ring-color-key-focus - ); - --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); - --spectrum-slider-ramp-track-block-size: var( - --system-slider-ramp-track-block-size - ); - --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); - --spectrum-slider-min-size: var(--system-slider-min-size); - --spectrum-slider-track-corner-radius: var( - --system-slider-track-corner-radius - ); - --spectrum-slider-label-margin-start: var( - --system-slider-label-margin-start - ); - --spectrum-slider-handle-border-width: var( - --system-slider-handle-border-width - ); - --spectrum-slider-track-fill-thickness: var( - --system-slider-track-fill-thickness - ); - --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); - --spectrum-slider-tick-mark-border-radius: var( - --system-slider-tick-mark-border-radius - ); - --spectrum-slider-tick-handle-background-color: var( - --system-slider-tick-handle-background-color - ); - --spectrum-slider-track-color-disabled: var( - --system-slider-track-color-disabled - ); - --spectrum-slider-track-fill-color-disabled: var( - --system-slider-track-fill-color-disabled - ); - --spectrum-slider-handle-border-color-disabled: var( - --system-slider-handle-border-color-disabled - ); - --spectrum-slider-label-text-color: var(--system-slider-label-text-color); - --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); - --spectrum-slider-label-text-color-disabled: var( - --system-slider-label-text-color-disabled - ); - --spectrum-slider-tick-mark-color-disabled: var( - --system-slider-tick-mark-color-disabled - ); - --spectrum-slider-ramp-handle-border-color-active: var( - --system-slider-ramp-handle-border-color-active - ); - --spectrum-slider-track-handleoffset: var( - --system-slider-track-handleoffset - ); - --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); - --spectrum-slider-font-size: var(--system-slider-font-size); - --spectrum-slider-handle-size: var(--system-slider-handle-size); - --spectrum-slider-control-height: var(--system-slider-control-height); - --spectrum-slider-handle-border-radius: var( - --system-slider-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); - --spectrum-slider-control-to-field-label: var( - --system-slider-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-value-side-padding-inline - ); + --spectrum-slider-track-color: var(--system-slider-track-color); + --spectrum-slider-track-fill-color: var(--system-slider-track-fill-color); + --spectrum-slider-ramp-track-color: var(--system-slider-ramp-track-color); + --spectrum-slider-ramp-track-color-disabled: var(--system-slider-ramp-track-color-disabled); + --spectrum-slider-handle-background-color: var(--system-slider-handle-background-color); + --spectrum-slider-handle-background-color-disabled: var(--system-slider-handle-background-color-disabled); + --spectrum-slider-ramp-handle-background-color: var(--system-slider-ramp-handle-background-color); + --spectrum-slider-ticks-handle-background-color: var(--system-slider-ticks-handle-background-color); + --spectrum-slider-handle-border-color: var(--system-slider-handle-border-color); + --spectrum-slider-handle-disabled-background-color: var(--system-slider-handle-disabled-background-color); + --spectrum-slider-tick-mark-color: var(--system-slider-tick-mark-color); + --spectrum-slider-handle-border-color-hover: var(--system-slider-handle-border-color-hover); + --spectrum-slider-handle-border-color-down: var(--system-slider-handle-border-color-down); + --spectrum-slider-handle-border-color-key-focus: var(--system-slider-handle-border-color-key-focus); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--system-slider-handle-focus-ring-color-key-focus); + --spectrum-slider-value-inline-size: var(--system-slider-value-inline-size); + --spectrum-slider-ramp-track-block-size: var(--system-slider-ramp-track-block-size); + --spectrum-slider-cjk-line-height: var(--system-slider-cjk-line-height); + --spectrum-slider-min-size: var(--system-slider-min-size); + --spectrum-slider-track-corner-radius: var(--system-slider-track-corner-radius); + --spectrum-slider-label-margin-start: var(--system-slider-label-margin-start); + --spectrum-slider-handle-border-width: var(--system-slider-handle-border-width); + --spectrum-slider-track-fill-thickness: var(--system-slider-track-fill-thickness); + --spectrum-slider-tick-mark-width: var(--system-slider-tick-mark-width); + --spectrum-slider-tick-mark-border-radius: var(--system-slider-tick-mark-border-radius); + --spectrum-slider-tick-handle-background-color: var(--system-slider-tick-handle-background-color); + --spectrum-slider-track-color-disabled: var(--system-slider-track-color-disabled); + --spectrum-slider-track-fill-color-disabled: var(--system-slider-track-fill-color-disabled); + --spectrum-slider-handle-border-color-disabled: var(--system-slider-handle-border-color-disabled); + --spectrum-slider-label-text-color: var(--system-slider-label-text-color); + --spectrum-slider-tick-label-color: var(--system-slider-tick-label-color); + --spectrum-slider-label-text-color-disabled: var(--system-slider-label-text-color-disabled); + --spectrum-slider-tick-mark-color-disabled: var(--system-slider-tick-mark-color-disabled); + --spectrum-slider-ramp-handle-border-color-active: var(--system-slider-ramp-handle-border-color-active); + --spectrum-slider-track-handleoffset: var(--system-slider-track-handleoffset); + --spectrum-slider-range-track-reset: var(--system-slider-range-track-reset); + --spectrum-slider-font-size: var(--system-slider-font-size); + --spectrum-slider-handle-size: var(--system-slider-handle-size); + --spectrum-slider-control-height: var(--system-slider-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-value-side-padding-inline); } :host { - --spectrum-slider-font-size: var(--system-slider-size-m-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-m-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-m-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-m-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-m-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-m-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-m-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-m-value-side-padding-inline - ); + --spectrum-slider-font-size: var(--system-slider-size-m-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-m-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-m-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-size-m-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-size-m-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-size-m-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-size-m-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-size-m-value-side-padding-inline); } -:host([size='s']) { - --spectrum-slider-font-size: var(--system-slider-size-s-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-s-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-s-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-s-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-s-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-s-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-s-value-side-padding-inline - ); +:host([size="s"]) { + --spectrum-slider-font-size: var(--system-slider-size-s-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-s-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-s-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-size-s-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-size-s-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-size-s-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-size-s-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-size-s-value-side-padding-inline); } -:host([size='l']) { - --spectrum-slider-font-size: var(--system-slider-size-l-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-l-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-l-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-l-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-l-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-l-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-l-value-side-padding-inline - ); - --spectrum-slider-value-inline-size: var( - --system-slider-size-l-value-inline-size - ); +:host([size="l"]) { + --spectrum-slider-font-size: var(--system-slider-size-l-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-l-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-l-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-size-l-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-size-l-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-size-l-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-size-l-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-size-l-value-side-padding-inline); + --spectrum-slider-value-inline-size: var(--system-slider-size-l-value-inline-size); } -:host([size='xl']) { - --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); - --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); - --spectrum-slider-control-height: var( - --system-slider-size-xl-control-height - ); - --spectrum-slider-handle-border-radius: var( - --system-slider-size-xl-handle-border-radius - ); - --spectrum-slider-handle-border-width-down: var( - --system-slider-size-xl-handle-border-width-down - ); - --spectrum-slider-label-top-to-text: var( - --system-slider-size-xl-label-top-to-text - ); - --spectrum-slider-control-to-field-label: var( - --system-slider-size-xl-control-to-field-label - ); - --spectrum-slider-value-side-padding-inline: var( - --system-slider-size-xl-value-side-padding-inline - ); - --spectrum-slider-value-inline-size: var( - --system-slider-size-xl-value-inline-size - ); +:host([size="xl"]) { + --spectrum-slider-font-size: var(--system-slider-size-xl-font-size); + --spectrum-slider-handle-size: var(--system-slider-size-xl-handle-size); + --spectrum-slider-control-height: var(--system-slider-size-xl-control-height); + --spectrum-slider-handle-border-radius: var(--system-slider-size-xl-handle-border-radius); + --spectrum-slider-handle-border-width-down: var(--system-slider-size-xl-handle-border-width-down); + --spectrum-slider-label-top-to-text: var(--system-slider-size-xl-label-top-to-text); + --spectrum-slider-control-to-field-label: var(--system-slider-size-xl-control-to-field-label); + --spectrum-slider-value-side-padding-inline: var(--system-slider-size-xl-value-side-padding-inline); + --spectrum-slider-value-inline-size: var(--system-slider-size-xl-value-inline-size); } + diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css index 587985a295..bec75252dc 100644 --- a/packages/slider/src/spectrum-slider.css +++ b/packages/slider/src/spectrum-slider.css @@ -1,1041 +1,528 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-slider-handle-margin-left: calc( - var(--spectrum-slider-handle-size) / -2 - ); - --spectrum-slider-input-left: calc( - var(--spectrum-slider-handle-margin-left) / 4 - ); - --spectrum-slider-controls-margin: calc( - var(--spectrum-slider-handle-size) / 2 - ); - --spectrum-slider-track-margin-offset: calc( - var(--spectrum-slider-controls-margin) * -1 - ); - --spectrum-slider-track-middle-handleoffset: calc( - var(--spectrum-slider-track-handleoffset) + - var(--spectrum-slider-handle-size) / 2 - ); - --spectrum-slider-input-top-size: calc( - var(--spectrum-slider-handle-size) / -2 / 4 - ); - z-index: 0; - min-inline-size: var( - --mod-slider-min-size, - var(--spectrum-slider-min-size) - ); - -webkit-user-select: none; - user-select: none; - display: block; - position: relative; -} - -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); -} - -:host:not(.spectrum-Slider--sideLabel) - #label-container - + #track:has(.spectrum-Slider-ramp) { - margin-block-start: calc( - var( - --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) - ) / 2 - ); + --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2); + --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); + --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2); + --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1); + --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-track-handleoffset) + var(--spectrum-slider-handle-size) / 2); + --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4); + z-index: 0; + min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); + -webkit-user-select: none; + user-select: none; + display: block; + position: relative; +} + +:host:dir(rtl), :host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +} + +:host:not(.spectrum-Slider--sideLabel) #label-container + #track:has(.spectrum-Slider-ramp) { + margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-block-size)) / 2); } .spectrum-Slider--sideLabel { - align-items: center; - display: flex; + align-items: center; + display: flex; } .spectrum-Slider--sideLabel #label-container { - margin-block-start: 0; + margin-block-start: 0; } .spectrum-Slider--sideLabel #label-container #label { - margin-inline-end: var( - --mod-slider-value-side-padding-inline, - var(--spectrum-slider-value-side-padding-inline) - ); + margin-inline-end: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); } .spectrum-Slider--sideLabel #label-container + #track { - margin-block-start: 0; + margin-block-start: 0; } .spectrum-Slider--sideLabel #controls { - margin-inline-end: var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ); + margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); } .spectrum-Slider--sideLabel #value { - inline-size: var( - --mod-slider-value-inline-size, - var(--spectrum-slider-value-inline-size) - ); - text-align: start; - margin-inline-start: var( - --mod-slider-value-side-padding-inline, - var(--spectrum-slider-value-side-padding-inline) - ); + inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size)); + text-align: start; + margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline)); } #controls { - box-sizing: border-box; - cursor: pointer; - z-index: auto; - inline-size: calc( - 100% - - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) * 2 - ); - block-size: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); - vertical-align: top; - margin-inline-start: var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ); - display: inline-block; - position: relative; + box-sizing: border-box; + cursor: pointer; + z-index: auto; + inline-size: calc(100.0% - var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) * 2); + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + vertical-align: top; + margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)); + display: inline-block; + position: relative; } #controls:not(:has(.ticks)) { - align-items: center; - display: flex; + align-items: center; + display: flex; } #label-container + #track { - margin-block-start: calc( - var(--spectrum-slider-control-to-field-label) * -1 - ); + margin-block-start: calc(var(--spectrum-slider-control-to-field-label) * -1); } :host([tick-labels]) { - margin-block-end: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); -} - -:host([variant='tick']) .handle { - background-color: var( - --highcontrast-slider-tick-handle-background-color, - var( - --mod-slider-tick-handle-background-color, - var(--spectrum-slider-tick-handle-background-color) - ) - ); -} - -:host([variant='tick']) #controls { - margin-block-start: calc( - var(--spectrum-text-to-visual-75) - - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) / 2 - - var( - --mod-slider-track-thickness, - var(--spectrum-slider-track-thickness) - ) / 2 - ); -} - -:host([variant='tick']) .tickLabel { - margin-block-start: calc( - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) + var(--spectrum-text-to-visual-75) - ); -} - -.fill, -.track { - block-size: var( - --mod-slider-track-fill-thickness, - var(--spectrum-slider-track-fill-thickness) - ); - box-sizing: border-box; - z-index: 1; - pointer-events: none; - margin-inline-start: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: var( - --mod-slider-handle-gap, - var(--spectrum-slider-handle-gap) - ); - position: absolute; - inset-block-start: calc( - var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / - 2 - - var( - --mod-slider-track-fill-thickness, - var(--spectrum-slider-track-fill-thickness) - ) / 2 - ); - inset-inline: 0 auto; -} - -.fill:before, -.track:before { - content: ''; - block-size: 100%; - border-start-start-radius: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - border-end-start-radius: 0; - display: block; + margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); +} + +:host([variant="tick"]) .handle { + background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color))); +} + +:host([variant="tick"]) #controls { + margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2); +} + +:host([variant="tick"]) .tickLabel { + margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75)); +} + +.fill, .track { + block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)); + box-sizing: border-box; + z-index: 1; + pointer-events: none; + margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap)); + position: absolute; + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2); + inset-inline: 0 auto; +} + +.fill:before, .track:before { + content: ""; + block-size: 100%; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; + display: block; } .track:first-of-type:before { - border-start-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); + border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } .track:last-of-type:before { - border-start-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); } .track:before { - background: var( - --highcontrast-slider-track-color-static, - var(--mod-slider-track-color, var(--spectrum-slider-track-color)) - ); + background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); } .track ~ .track { - margin-inline-start: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - margin-inline-end: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-block: 0; - padding-inline-start: var( - --mod-slider-track-handleoffset, - var(--spectrum-slider-track-handleoffset) - ); - padding-inline-end: 0; - inset-inline-start: auto; - inset-inline-end: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); -} - -:host([variant='range']) .track ~ .track { - padding-inline: var( - --mod-slider-track-middle-handleoffset, - var(--spectrum-slider-track-middle-handleoffset) - ) - var( - --mod-slider-track-middle-handleoffset, - var(--spectrum-slider-track-middle-handleoffset) - ); - margin-inline: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - inset-inline: auto; -} - -:host([variant='range']) #value { - -webkit-user-select: text; - user-select: text; -} - -:host([variant='range']) .track:first-of-type { - margin-inline-start: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-inline-start: 0; - padding-inline-end: var( - --mod-slider-track-handleoffset, - var(--spectrum-slider-track-handleoffset) - ); - inset-inline-start: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); - inset-inline-end: auto; -} - -:host([variant='range']) .track:first-of-type:before { - border-start-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-start-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); -} - -:host([variant='range']) .track:last-of-type { - margin-inline-end: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - padding-inline-start: var(--spectrum-slider-track-handleoffset); - padding-inline-end: 0; - inset-inline-start: auto; - inset-inline-end: var( - --mod-slider-range-track-reset, - var(--spectrum-slider-range-track-reset) - ); -} - -:host([variant='range']) .track:last-of-type:before { - border-start-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); - border-end-end-radius: var( - --mod-slider-track-corner-radius, - var(--spectrum-slider-track-corner-radius) - ); -} - -:host([variant='range']) .track:not(:first-of-type, :last-of-type):before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); + margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + padding-block: 0; + padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); + padding-inline-end: 0; + inset-inline-start: auto; + inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); +} + +:host([variant="range"]) .track ~ .track { + padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)); + margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline: auto; +} + +:host([variant="range"]) #value { + -webkit-user-select: text; + user-select: text; +} + +:host([variant="range"]) .track:first-of-type { + margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + padding-inline-start: 0; + padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset)); + inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); + inset-inline-end: auto; +} + +:host([variant="range"]) .track:first-of-type:before { + border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); +} + +:host([variant="range"]) .track:last-of-type { + margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + padding-inline-start: var(--spectrum-slider-track-handleoffset); + padding-inline-end: 0; + inset-inline-start: auto; + inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset)); +} + +:host([variant="range"]) .track:last-of-type:before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); +} + +:host([variant="range"]) .track:not(:first-of-type, :last-of-type):before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); } .fill { - margin-inline-start: 0; - padding-block: 0; - padding-inline-start: calc( - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) + - var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) - ); - padding-inline-end: 0; + margin-inline-start: 0; + padding-block: 0; + padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); + padding-inline-end: 0; } .fill:before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); } .offset { - padding-block: 0; - padding-inline-start: 0; - padding-inline-end: calc( - var( - --mod-slider-controls-margin, - var(--spectrum-slider-controls-margin) - ) + - var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)) - ); + padding-block: 0; + padding-inline-start: 0; + padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap))); } #ramp { - block-size: var( - --mod-slider-ramp-track-height, - var(--spectrum-slider-ramp-track-block-size) - ); - position: absolute; - inset-inline-start: var( - --spectrum-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - inset-inline-end: var( - --spectrum-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); + block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-block-size)); + position: absolute; + inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); } #ramp svg { - inline-size: 100%; - block-size: 100%; - transform: var(--spectrum-logical-rotation,); + inline-size: 100%; + block-size: 100%; + transform: var(--spectrum-logical-rotation, ); } #ramp path { - fill: var( - --highcontrast-slider-ramp-track-color, - var( - --mod-slider-ramp-track-color, - var(--spectrum-slider-ramp-track-color) - ) - ); + fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))); } .handle { - z-index: 2; - box-sizing: border-box; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - margin-block: 0; - margin-inline: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / - -2 - ) - 0; - border-width: var( - --mod-slider-handle-border-width, - var(--spectrum-slider-handle-border-width) - ); - border-radius: var( - --mod-slider-handle-border-radius, - var(--spectrum-slider-handle-border-radius) - ); - transition: border-width - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - background: var( - --highcontrast-slider-handle-background-color, - var( - --mod-slider-handle-background-color, - var(--spectrum-slider-handle-background-color) - ) - ); - border-style: solid; - border-color: var( - --highcontrast-slider-handle-border-color, - var( - --mod-slider-handle-border-color, - var(--spectrum-slider-handle-border-color) - ) - ); - outline: none; - display: inline-block; - position: absolute; - inset-block-start: calc( - var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / - 2 - - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / - 2 - ); - inset-inline-start: 0; -} - -.handle.dragging, -.handle:active { - border-width: var( - --mod-slider-handle-border-width-down, - var(--spectrum-slider-handle-border-width-down) - ); - border-color: var( - --highcontrast-slider-handle-border-color-down, - var( - --mod-slider-handle-border-color-down, - var(--spectrum-slider-handle-border-color-down) - ) - ); -} - -.handle.dragging, -.handle.handle-highlight, -.handle.is-tophandle, -.handle:active { - z-index: 3; + z-index: 2; + box-sizing: border-box; + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + margin-block: 0; + margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0; + border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width)); + border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius)); + transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + border-style: solid; + border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))); + outline: none; + display: inline-block; + position: absolute; + inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2); + inset-inline-start: 0; +} + +.handle.dragging, .handle:active { + border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down)); + border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); +} + +.handle.dragging, .handle.handle-highlight, .handle.is-tophandle, .handle:active { + z-index: 3; } .handle:before { - content: ''; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - transition: - box-shadow - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - inline-size - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - block-size - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out; - border-radius: 100%; - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - transform: translate(-50%, -50%); -} - -:host:dir(rtl) .handle:before, -:host([dir='rtl']) .handle:before { - transform: translate(50%, -50%); + content: ""; + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + border-radius: 100%; + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: 50%; + transform: translate(-50%, -50%); +} + +:host:dir(rtl) .handle:before, :host([dir="rtl"]) .handle:before { + transform: translate(50%, -50%); } .handle.handle-highlight { - border-color: var( - --highcontrast-slider-handle-border-color-key-focus, - var( - --mod-slider-handle-border-color-key-focus, - var(--spectrum-slider-handle-border-color-key-focus) - ) - ); + border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))); } .handle.handle-highlight:before { - inline-size: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - block-size: calc( - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) - var( - --highcontrast-slider-handle-focus-ring-color-key-focus, - var( - --mod-slider-handle-focus-ring-color-key-focus, - var(--spectrum-slider-handle-focus-ring-color-key-focus) - ) - ); + inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))); } .handle.dragging { - background: var( - --highcontrast-slider-handle-background-color, - var( - --mod-slider-handle-background-color, - var(--spectrum-slider-handle-background-color) - ) - ); - border-color: var( - --highcontrast-slider-handle-border-color-down, - var( - --mod-slider-handle-border-color-down, - var(--spectrum-slider-handle-border-color-down) - ) - ); + background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))); + border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))); } .input { - pointer-events: none; - cursor: default; - inline-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - block-size: var( - --mod-slider-handle-size, - var(--spectrum-slider-handle-size) - ); - appearance: none; - opacity: 0.000001; - background: none; - border: 0; - margin: 0; - padding: 0; - position: absolute; - inset-block-start: var( - --mod-slider-input-top-size, - var(--spectrum-slider-input-top-size) - ); - inset-inline-start: var( - --mod-slider-input-left, - var(--spectrum-slider-input-left) - ); - overflow: hidden; + pointer-events: none; + cursor: default; + inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)); + appearance: none; + opacity: .000001; + background: none; + border: 0; + margin: 0; + padding: 0; + position: absolute; + inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size)); + inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left)); + overflow: hidden; } .input:focus { - outline: none; + outline: none; } #label-container { - inline-size: auto; - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var( - --highcontrast-slider-label-text-color, - var( - --mod-slider-label-text-color, - var(--spectrum-slider-label-text-color) - ) - ); - align-items: center; - margin-block-start: var( - --mod-slider-label-top-to-text, - var(--spectrum-slider-label-top-to-text) - ); - display: flex; - position: relative; -} - -#label-container:lang(ja), -#label-container:lang(ko), -#label-container:lang(zh) { - line-height: var( - --mod-slider-cjk-line-height, - var(--spectrum-slider-cjk-line-height) - ); + inline-size: auto; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))); + align-items: center; + margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text)); + display: flex; + position: relative; +} + +#label-container:lang(ja), #label-container:lang(ko), #label-container:lang(zh) { + line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height)); } #label { - font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); - flex-grow: 1; - padding-inline-start: 0; + font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size)); + flex-grow: 1; + padding-inline-start: 0; } #value { - cursor: default; - font-feature-settings: 'tnum'; - text-align: end; - flex-grow: 0; - margin-inline-start: var( - --mod-slider-label-margin-start, - var(--spectrum-slider-label-margin-start) - ); - padding-inline-end: 0; + cursor: default; + font-feature-settings: "tnum"; + text-align: end; + flex-grow: 0; + margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start)); + padding-inline-end: 0; } .ticks { - z-index: 0; - margin-inline: var( - --mod-slider-track-margin-offset, - var(--spectrum-slider-track-margin-offset) - ); - justify-content: space-between; - display: flex; + z-index: 0; + margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset)); + justify-content: space-between; + display: flex; } .ticks ~ .handleContainer .handle { - background: var( - --mod-slider-ticks-handle-background-color, - var(--spectrum-slider-ticks-handle-background-color) - ); + background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color)); } .tick { - position: relative; - inset-block-start: calc( - var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / - 2 - - var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ) / 2 - ); -} - -.tick, -.tick:after { - inline-size: var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ); + position: relative; + inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2); +} + +.tick, .tick:after { + inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)); } .tick:after { - content: ''; - block-size: var( - --mod-slider-tick-mark-height, - var(--spectrum-slider-tick-mark-height) - ); - border-radius: var( - --mod-slider-tick-mark-border-radius, - var(--spectrum-slider-tick-mark-border-radius) - ); - background-color: var( - --highcontrast-slider-tick-mark-color, - var( - --mod-slider-tick-mark-color, - var(--spectrum-slider-tick-mark-color) - ) - ); - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc( - 50% - - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / 2 - ); + content: ""; + block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)); + border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius)); + background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))); + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: calc(50.0% - var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2); } .tick .tickLabel { - font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - color: var( - --highcontrast-slider-label-text-color, - var( - --mod-slider-tick-label-color, - var(--spectrum-slider-tick-label-color) - ) - ); - justify-content: center; - align-items: center; - display: flex; -} - -.tick:first-of-type .tickLabel, -.tick:last-of-type .tickLabel { - margin-inline: 0; - display: block; - position: absolute; + font-size: var(--mod-font-size-75, var(--spectrum-font-size-75)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color))); + justify-content: center; + align-items: center; + display: flex; +} + +.tick:first-of-type .tickLabel, .tick:last-of-type .tickLabel { + margin-inline: 0; + display: block; + position: absolute; } .tick:first-of-type { - inset-inline-start: calc( - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / -2 - ); + inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); } .tick:first-of-type .tickLabel { - inset-inline-start: 0; + inset-inline-start: 0; } .tick:last-of-type { - inset-inline-end: calc( - var( - --mod-slider-tick-mark-width, - var(--spectrum-slider-tick-mark-width) - ) / -2 - ); + inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2); } .tick:last-of-type .tickLabel { - inset-inline-end: 0; + inset-inline-end: 0; } -.handleContainer, -.trackContainer { - inline-size: calc(100% + var(--spectrum-slider-handle-size)); - margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); - position: absolute; - inset-block-start: 0; +.handleContainer, .trackContainer { + inline-size: calc(100.0% + var(--spectrum-slider-handle-size)); + margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1); + position: absolute; + inset-block-start: 0; } .trackContainer { - block-size: var( - --mod-slider-control-height, - var(--spectrum-slider-control-height) - ); - overflow: hidden; -} - -.track:not(:has(~ .spectrum-Slider-fill)):before { - background: var( - --highcontrast-slider-track-color, - var(--mod-slider-track-color, var(--spectrum-slider-track-color)) - ); -} - -:host([variant='filled']) .track:first-child:before { - background: var( - --highcontrast-slider-filled-track-fill-color, - var( - --mod-slider-track-fill-color, - var(--spectrum-slider-track-fill-color) - ) - ); -} - -:host([variant='ramp']) .handle { - background: var( - --mod-slider-ramp-handle-background-color, - var( - --highcontrast-slider-ramp-handle-background-color, - var(--spectrum-slider-ramp-handle-background-color) - ) - ); - box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) - var( - --highcontrast-slider-ramp-handle-border-color-active, - var( - --mod-sectrum-slider-ramp-handle-border-color-active, - var(--spectrum-slider-ramp-handle-border-color-active) - ) - ); -} - -:host([disabled]), -:host([disabled]) #controls { - cursor: default; -} - -:host([disabled]) #label-container, -:host([disabled]) .tickLabel { - color: var( - --highcontrast-slider-label-text-color-disabled, - var( - --mod-slider-label-text-color-disabled, - var(--spectrum-slider-label-text-color-disabled) - ) - ); + block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height)); + overflow: hidden; +} + +.track:not(:has( ~ .spectrum-Slider-fill)):before { + background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); +} + +:host([variant="filled"]) .track:first-child:before { + background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); +} + +:host([variant="ramp"]) .handle { + background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))); + box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))); +} + +:host([disabled]), :host([disabled]) #controls { + cursor: default; +} + +:host([disabled]) #label-container, :host([disabled]) .tickLabel { + color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))); } :host([disabled]) .handle { - pointer-events: none; - cursor: default; - background: var( - --highcontrast-slider-handle-disabled-background-color, - var( - --mod-slider-handle-disabled-background-color, - var(--spectrum-slider-handle-disabled-background-color) - ) - ); - border-color: var( - --highcontrast-slider-handle-border-color-disabled, - var( - --mod-slider-handle-border-color-disabled, - var(--spectrum-slider-handle-border-color-disabled) - ) - ); + pointer-events: none; + cursor: default; + background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))); + border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))); } :host([disabled]) .handle:active { - background: var( - --highcontrast-slider-handle-background-color-disabled, - var( - --mod-slider-handle-background-color-disabled, - var(--spectrum-slider-handle-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-disabled-border-color, - var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)) - ); + background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))); } @media (hover: hover) { - .handle:hover { - border-color: var( - --highcontrast-slider-handle-border-color-hover, - var( - --mod-slider-handle-border-color-hover, - var(--spectrum-slider-handle-border-color-hover) - ) - ); - } + .handle:hover { + border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))); + } - :host([disabled]) .handle:hover { - background: var( - --highcontrast-slider-handle-background-color-disabled, - var( - --mod-slider-handle-background-color-disabled, - var(--spectrum-slider-handle-background-color-disabled) - ) - ); - border-color: var( - --highcontrast-disabled-border-color, - var( - --mod-disabled-border-color, - var(--spectrum-disabled-border-color) - ) - ); - } + :host([disabled]) .handle:hover { + background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))); + border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color))); + } } :host([disabled]) .track:before { - background: var( - --highcontrast-slider-track-color-disabled, - var( - --mod-slider-track-color-disabled, - var(--spectrum-slider-track-color-disabled) - ) - ); -} - -:host([disabled]) .fill:before, -:host([disabled][variant='filled']) .track:first-child:before { - background: var( - --highcontrast-slider-track-fill-color-disabled, - var( - --mod-slider-track-fill-color-disabled, - var(--spectrum-slider-track-fill-color-disabled) - ) - ); + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); +} + +:host([disabled]) .fill:before, :host([disabled][variant="filled"]) .track:first-child:before { + background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))); } :host([disabled]) #ramp path { - fill: var( - --highcontrast-slider-ramp-track-color-disabled, - var( - --mod-slider-ramp-track-color-disabled, - var(--spectrum-slider-ramp-track-color-disabled) - ) - ); + fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))); } :host([disabled]) .tick:after { - background-color: var( - --highcontrast-slider-tick-mark-color-disabled, - var( - --mod-slider-tick-mark-color-disabled, - var(--spectrum-slider-tick-mark-color-disabled) - ) - ); -} - -:host([disabled][variant='range']) - .track:not(:first-of-type, :last-of-type):before { - background: var( - --highcontrast-slider-track-color-disabled, - var( - --mod-slider-track-color-disabled, - var(--spectrum-slider-track-color-disabled) - ) - ); + background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))); } -@media (forced-colors: active) { - :host { - --highcontrast-slider-track-color: ButtonText; - --highcontrast-slider-track-color-disabled: GrayText; - --highcontrast-slider-track-color-static: ButtonText; - --highcontrast-slider-track-fill-color: ButtonText; - --highcontrast-slider-track-fill-color-disabled: GrayText; - --highcontrast-slider-filled-track-fill-color: Highlight; - --highcontrast-slider-ramp-track-color: ButtonText; - --highcontrast-slider-ramp-track-color-disabled: GrayText; - --highcontrast-slider-tick-mark-color: ButtonText; - --highcontrast-slider-tick-mark-color-disabled: GrayText; - --highcontrast-slider-handle-border-color: ButtonText; - --highcontrast-slider-handle-border-color-hover: Highlight; - --highcontrast-slider-handle-border-color-down: Highlight; - --highcontrast-slider-handle-border-color-key-focus: Highlight; - --highcontrast-slider-handle-border-color-disabled: GrayText; - --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; - --highcontrast-slider-handle-background-color: ButtonFace; - --highcontrast-slider-handle-background-color-disabled: GrayText; - --highcontrast-slider-handle-disabled-background-color: GrayText; - --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; - --highcontrast-slider-ramp-handle-background-color: ButtonFace; - --highcontrast-slider-label-text-color: CanvasText; - --highcontrast-slider-label-text-color-disabled: GrayText; - } - - .handle.handle-highlight:before, - :host([variant='ramp']) .handle { - forced-color-adjust: none; - } - - :host([focus-within]) - .js-focus-within:not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ) - #controls, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls.handle-highlight, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls:active, - :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) - #controls:focus-within, - :host([focus-within]):not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ).js-focus-within - #controls { - --highcontrast-slider-track-fill-color: Highlight; - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; - } +:host([disabled][variant="range"]) .track:not(:first-of-type, :last-of-type):before { + background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))); +} - @media (hover: hover) { - :host:not( - .is-disabled, - .spectrum-Slider--filled, - .spectrum-Slider--range - ) - #controls:hover { - --highcontrast-slider-track-fill-color: Highlight; - --highcontrast-slider-track-color: Highlight; - --highcontrast-slider-handle-border-color: Highlight; - --highcontrast-slider-ramp-track-color: Highlight; - --highcontrast-slider-tick-mark-color: Highlight; - } +@media (forced-colors: active) { + :host { + --highcontrast-slider-track-color: ButtonText; + --highcontrast-slider-track-color-disabled: GrayText; + --highcontrast-slider-track-color-static: ButtonText; + --highcontrast-slider-track-fill-color: ButtonText; + --highcontrast-slider-track-fill-color-disabled: GrayText; + --highcontrast-slider-filled-track-fill-color: Highlight; + --highcontrast-slider-ramp-track-color: ButtonText; + --highcontrast-slider-ramp-track-color-disabled: GrayText; + --highcontrast-slider-tick-mark-color: ButtonText; + --highcontrast-slider-tick-mark-color-disabled: GrayText; + --highcontrast-slider-handle-border-color: ButtonText; + --highcontrast-slider-handle-border-color-hover: Highlight; + --highcontrast-slider-handle-border-color-down: Highlight; + --highcontrast-slider-handle-border-color-key-focus: Highlight; + --highcontrast-slider-handle-border-color-disabled: GrayText; + --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText; + --highcontrast-slider-handle-background-color: ButtonFace; + --highcontrast-slider-handle-background-color-disabled: GrayText; + --highcontrast-slider-handle-disabled-background-color: GrayText; + --highcontrast-slider-ramp-handle-border-color-active: ButtonFace; + --highcontrast-slider-ramp-handle-background-color: ButtonFace; + --highcontrast-slider-label-text-color: CanvasText; + --highcontrast-slider-label-text-color-disabled: GrayText; + } + + .handle.handle-highlight:before, :host([variant="ramp"]) .handle { + forced-color-adjust: none; + } + + :host([focus-within]) .js-focus-within:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls, :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls.handle-highlight, :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:active, :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:focus-within, :host([focus-within]):not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range).js-focus-within #controls { + --highcontrast-slider-track-fill-color: Highlight; + --highcontrast-slider-track-color: Highlight; + --highcontrast-slider-handle-border-color: Highlight; + --highcontrast-slider-ramp-track-color: Highlight; + --highcontrast-slider-tick-mark-color: Highlight; + } + + @media (hover: hover) { + :host:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) #controls:hover { + --highcontrast-slider-track-fill-color: Highlight; + --highcontrast-slider-track-color: Highlight; + --highcontrast-slider-handle-border-color: Highlight; + --highcontrast-slider-ramp-track-color: Highlight; + --highcontrast-slider-tick-mark-color: Highlight; } + } - :host([disabled]) #ramp + .handle { - background-color: ButtonFace; - fill: ButtonFace; - } + :host([disabled]) #ramp + .handle { + background-color: ButtonFace; + fill: ButtonFace; + } } + diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css index bd59407e2e..2fa945fc0a 100644 --- a/packages/split-view/src/spectrum-split-view.css +++ b/packages/split-view/src/spectrum-split-view.css @@ -1,414 +1,181 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - display: flex; - overflow: hidden; + display: flex; + overflow: hidden; } ::slotted(*) { - block-size: 100%; - background-color: var( - --mod-splitview-background-color, - var(--spectrum-splitview-background-color) - ); - color: var( - --mod-splitview-content-color, - var(--spectrum-splitview-content-color) - ); + block-size: 100%; + background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color)); + color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color)); } #gripper { - content: ''; - border-radius: var( - --mod-splitview-gripper-border-radius, - var(--spectrum-splitview-gripper-border-radius) - ); - border-style: solid; - border-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); - touch-action: none; - inline-size: var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ); - block-size: var( - --mod-splitview-gripper-height, - var(--spectrum-splitview-gripper-height) - ); - border-block-width: var( - --mod-splitview-gripper-border-width-vertical, - var(--spectrum-splitview-gripper-border-width-vertical) - ); - border-inline-width: var( - --mod-splitview-gripper-border-width-horizontal, - var(--spectrum-splitview-gripper-border-width-horizontal) - ); - display: block; - position: absolute; - inset-block-start: 50%; - inset-inline-start: calc( - ( - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) + - ( - 2 * - var( - --mod-splitview-gripper-border-width-vertical, - var( - --spectrum-splitview-gripper-border-width-vertical - ) - ) - ) - - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) - ) / 2 * -1 - ); - transform: translateY(-50%); + content: ""; + border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius)); + border-style: solid; + border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + touch-action: none; + inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); + block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); + border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); + border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); + display: block; + position: absolute; + inset-block-start: 50%; + inset-inline-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1); + transform: translateY(-50%); } #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); + background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); } #splitter { - background-color: var( - --highcontrast-splitview-handle-background-color, - var( - --mod-splitview-handle-background-color, - var(--spectrum-splitview-handle-background-color) - ) - ); - -webkit-user-select: none; - user-select: none; - inline-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - block-size: 100%; - z-index: 1; - position: relative; + background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))); + -webkit-user-select: none; + user-select: none; + inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + block-size: 100%; + z-index: 1; + position: relative; } -#splitter.is-collapsed-end #gripper:before, -#splitter.is-collapsed-start #gripper:before { - content: ''; - inline-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - block-size: 100%; - position: absolute; - inset-block-start: 0; - inset-inline-start: calc( - 50% - - var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ) / 2 - ); +#splitter.is-collapsed-end #gripper:before, #splitter.is-collapsed-start #gripper:before { + content: ""; + inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + block-size: 100%; + position: absolute; + inset-block-start: 0; + inset-inline-start: calc(50.0% - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2); } #splitter.is-collapsed-start #gripper { - inset-inline-start: 0; + inset-inline-start: 0; } #splitter.is-collapsed-end #gripper { - inset-inline: auto 0; + inset-inline: auto 0; } :host([resizable]) #splitter.is-hovered { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); } :host([resizable]) #splitter.is-hovered #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); } :host([resizable]) #splitter.is-hovered #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); } @media (hover: hover) { - :host([resizable]) #splitter:hover { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover { + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + } - :host([resizable]) #splitter:hover #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover #gripper { + border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + } - :host([resizable]) #splitter:hover #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-hover, - var( - --mod-splitview-handle-background-color-hover, - var(--spectrum-splitview-handle-background-color-hover) - ) - ); - } + :host([resizable]) #splitter:hover #gripper:before { + background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))); + } } -:host([resizable]) #splitter.is-active, -:host([resizable]) #splitter:active { - background-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); +:host([resizable]) #splitter.is-active, :host([resizable]) #splitter:active { + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); } -:host([resizable]) #splitter.is-active #gripper, -:host([resizable]) #splitter:active #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); +:host([resizable]) #splitter.is-active #gripper, :host([resizable]) #splitter:active #gripper { + border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); } -:host([resizable]) #splitter.is-active #gripper:before, -:host([resizable]) #splitter:active #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-down, - var( - --mod-splitview-handle-background-color-down, - var(--spectrum-splitview-handle-background-color-down) - ) - ); +:host([resizable]) #splitter.is-active #gripper:before, :host([resizable]) #splitter:active #gripper:before { + background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))); } :host([resizable]) #splitter:focus { - outline: none; + outline: none; } :host([resizable]) #splitter:focus-visible { - background-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); - outline: none; + background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + outline: none; } :host([resizable]) #splitter:focus-visible #gripper { - border-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); - box-shadow: 0 0 0 1px - var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); + border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); + box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); } :host([resizable]) #splitter:focus-visible #gripper:before { - background-color: var( - --highcontrast-splitview-handle-background-color-focus, - var( - --mod-splitview-handle-background-color-focus, - var(--spectrum-splitview-handle-background-color-focus) - ) - ); + background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); } :host([vertical]) { - flex-direction: column; + flex-direction: column; } :host([vertical]) ::slotted(*) { - block-size: auto; - inline-size: var( - --mod-splitview-vertical-width, - var(--spectrum-splitview-vertical-width) - ); + block-size: auto; + inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); } :host([vertical]) #gripper { - transform: translate( - calc( - var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ) * -1 - ) - ); - inline-size: var( - --mod-splitview-gripper-height, - var(--spectrum-splitview-gripper-height) - ); - block-size: var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ); - border-block-width: var( - --mod-splitview-gripper-border-width-horizontal, - var(--spectrum-splitview-gripper-border-width-horizontal) - ); - border-inline-width: var( - --mod-splitview-gripper-border-width-vertical, - var(--spectrum-splitview-gripper-border-width-vertical) - ); - inset-block-start: calc( - ( - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) + - ( - 2 * - var( - --mod-splitview-gripper-border-width-vertical, - var( - --spectrum-splitview-gripper-border-width-vertical - ) - ) - ) - - var( - --mod-splitview-gripper-width, - var(--spectrum-splitview-gripper-width) - ) - ) / 2 * -1 - ); - inset-inline-start: var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ); + transform: translate(calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) * -1)); + inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height)); + block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)); + border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal)); + border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical)); + inset-block-start: calc((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2 * -1); + inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); } :host([vertical]) #splitter { - inline-size: var( - --mod-splitview-vertical-width, - var(--spectrum-splitview-vertical-width) - ); - block-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); + inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width)); + block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); } -:host([vertical]) #splitter.is-collapsed-end #gripper, -:host([vertical]) #splitter.is-collapsed-start #gripper { - inset-inline-start: var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ); +:host([vertical]) #splitter.is-collapsed-end #gripper, :host([vertical]) #splitter.is-collapsed-start #gripper { + inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)); } -:host([vertical]) #splitter.is-collapsed-end #gripper:before, -:host([vertical]) #splitter.is-collapsed-start #gripper:before { - inline-size: var( - --mod-splitview-vertical-gripper-outer-width, - var(--spectrum-splitview-vertical-gripper-outer-width) - ); - block-size: var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ); - inset-block-start: calc( - var( - --mod-splitview-vertical-gripper-width, - var(--spectrum-splitview-vertical-gripper-width) - ) - - var( - --mod-splitview-handle-width, - var(--spectrum-splitview-handle-width) - ) / 2 - ); - inset-inline-start: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); +:host([vertical]) #splitter.is-collapsed-end #gripper:before, :host([vertical]) #splitter.is-collapsed-start #gripper:before { + inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width)); + block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)); + inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2); + inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); } :host([vertical]) #splitter.is-collapsed-start #gripper { - inset-block-start: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); + inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); } :host([vertical]) #splitter.is-collapsed-end #gripper { - inset-block-start: auto; - inset-block-end: var( - --mod-splitview-vertical-gripper-reset, - var(--spectrum-splitview-vertical-gripper-reset) - ); + inset-block-start: auto; + inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset)); } @media (forced-colors: active) { - :host { - --highcontrast-splitview-handle-background-color: CanvasText; - --highcontrast-splitview-handle-background-color-hover: CanvasText; - --highcontrast-splitview-handle-background-color-down: CanvasText; - --highcontrast-splitview-handle-background-color-focus: Highlight; - } + :host { + --highcontrast-splitview-handle-background-color: CanvasText; + --highcontrast-splitview-handle-background-color-hover: CanvasText; + --highcontrast-splitview-handle-background-color-down: CanvasText; + --highcontrast-splitview-handle-background-color-focus: Highlight; + } } + diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css index fbe86f0b75..9a4447215f 100644 --- a/packages/split-view/src/split-view-overrides.css +++ b/packages/split-view/src/split-view-overrides.css @@ -1,57 +1,32 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-splitview-vertical-width: var( - --system-split-view-vertical-width - ); - --spectrum-splitview-vertical-gripper-width: var( - --system-split-view-vertical-gripper-width - ); - --spectrum-splitview-vertical-gripper-outer-width: var( - --system-split-view-vertical-gripper-outer-width - ); - --spectrum-splitview-vertical-gripper-reset: var( - --system-split-view-vertical-gripper-reset - ); - --spectrum-splitview-background-color: var( - --system-split-view-background-color - ); - --spectrum-splitview-content-color: var(--system-split-view-content-color); - --spectrum-splitview-handle-background-color: var( - --system-split-view-handle-background-color - ); - --spectrum-splitview-handle-background-color-hover: var( - --system-split-view-handle-background-color-hover - ); - --spectrum-splitview-handle-background-color-down: var( - --system-split-view-handle-background-color-down - ); - --spectrum-splitview-handle-background-color-focus: var( - --system-split-view-handle-background-color-focus - ); - --spectrum-splitview-handle-width: var(--system-split-view-handle-width); - --spectrum-splitview-gripper-border-radius: var( - --system-split-view-gripper-border-radius - ); - --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); - --spectrum-splitview-gripper-height: var( - --system-split-view-gripper-height - ); - --spectrum-splitview-gripper-border-width-horizontal: var( - --system-split-view-gripper-border-width-horizontal - ); - --spectrum-splitview-gripper-border-width-vertical: var( - --system-split-view-gripper-border-width-vertical - ); + --spectrum-splitview-vertical-width: var(--system-split-view-vertical-width); + --spectrum-splitview-vertical-gripper-width: var(--system-split-view-vertical-gripper-width); + --spectrum-splitview-vertical-gripper-outer-width: var(--system-split-view-vertical-gripper-outer-width); + --spectrum-splitview-vertical-gripper-reset: var(--system-split-view-vertical-gripper-reset); + --spectrum-splitview-background-color: var(--system-split-view-background-color); + --spectrum-splitview-content-color: var(--system-split-view-content-color); + --spectrum-splitview-handle-background-color: var(--system-split-view-handle-background-color); + --spectrum-splitview-handle-background-color-hover: var(--system-split-view-handle-background-color-hover); + --spectrum-splitview-handle-background-color-down: var(--system-split-view-handle-background-color-down); + --spectrum-splitview-handle-background-color-focus: var(--system-split-view-handle-background-color-focus); + --spectrum-splitview-handle-width: var(--system-split-view-handle-width); + --spectrum-splitview-gripper-border-radius: var(--system-split-view-gripper-border-radius); + --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width); + --spectrum-splitview-gripper-height: var(--system-split-view-gripper-height); + --spectrum-splitview-gripper-border-width-horizontal: var(--system-split-view-gripper-border-width-horizontal); + --spectrum-splitview-gripper-border-width-vertical: var(--system-split-view-gripper-border-width-vertical); } + diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css index 801a523072..b2b542aa19 100644 --- a/packages/status-light/src/spectrum-status-light.css +++ b/packages/status-light/src/spectrum-status-light.css @@ -1,262 +1,143 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir]) { - min-block-size: var( - --mod-statuslight-height, - var(--spectrum-statuslight-height) - ); - box-sizing: border-box; - font-size: var( - --mod-statuslight-font-size, - var(--spectrum-statuslight-font-size) - ); - font-weight: var( - --mod-statuslight-font-weight, - var(--spectrum-statuslight-font-weight) - ); - line-height: var( - --mod-statuslight-line-height, - var(--spectrum-statuslight-line-height) - ); - color: var( - --highcontrast-statuslight-content-color-default, - var( - --mod-statuslight-content-color-default, - var(--spectrum-statuslight-content-color-default) - ) - ); - flex-direction: row; - align-items: flex-start; - padding-block-start: var( - --mod-statuslight-spacing-top-to-label, - var(--spectrum-statuslight-spacing-top-to-label) - ); - padding-block-end: var( - --mod-statuslight-spacing-bottom-to-label, - var(--spectrum-statuslight-spacing-bottom-to-label) - ); - padding-inline: 0; - display: flex; + min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height)); + box-sizing: border-box; + font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); + font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight)); + line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); + color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))); + flex-direction: row; + align-items: flex-start; + padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)); + padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label)); + padding-inline: 0; + display: flex; } -:host(:lang(ja)), -:host(:lang(ko)), -:host(:lang(zh)) { - line-height: var( - --mod-statuslight-line-height-cjk, - var(--spectrum-statuslight-line-height-cjk) - ); +:host(:lang(ja)), :host(:lang(ko)), :host(:lang(zh)) { + line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk)); } :host:before { - --spectrum-statuslight-spacing-computed-top-to-dot: calc( - var( - --mod-statuslight-spacing-top-to-dot, - var(--spectrum-statuslight-spacing-top-to-dot) - ) - - var( - --mod-statuslight-spacing-top-to-label, - var(--spectrum-statuslight-spacing-top-to-label) - ) - ); - content: ''; - inline-size: var( - --mod-statuslight-dot-size, - var(--spectrum-statuslight-dot-size) - ); - block-size: var( - --mod-statuslight-dot-size, - var(--spectrum-statuslight-dot-size) - ); - border-radius: var( - --mod-statuslight-corner-radius, - var(--spectrum-statuslight-corner-radius) - ); - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); - margin-inline-end: var( - --mod-statuslight-spacing-dot-to-label, - var(--spectrum-statuslight-spacing-dot-to-label) - ); - display: inline-block; + --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); + content: ""; + inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); + block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); + border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); + margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); + display: inline-block; } -:host([variant='neutral']) { - color: var( - --highcontrast-statuslight-subdued-content-color-default, - var( - --mod-statuslight-subdued-content-color-default, - var(--spectrum-statuslight-subdued-content-color-default) - ) - ); - font-style: italic; +:host([variant="neutral"]) { + color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); + font-style: italic; } -:host([variant='neutral']):before { - background-color: var( - --mod-statuslight-semantic-neutral-color, - var(--spectrum-statuslight-semantic-neutral-color) - ); +:host([variant="neutral"]):before { + background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color)); } .spectrum-StatusLight--accent:before { - background-color: var( - --mod-statuslight-semantic-accent-color, - var(--spectrum-statuslight-semantic-accent-color) - ); + background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color)); } -:host([variant='info']):before { - background-color: var( - --mod-statuslight-semantic-info-color, - var(--spectrum-statuslight-semantic-info-color) - ); +:host([variant="info"]):before { + background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color)); } -:host([variant='negative']):before { - background-color: var( - --mod-statuslight-semantic-negative-color, - var(--spectrum-statuslight-semantic-negative-color) - ); +:host([variant="negative"]):before { + background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color)); } -:host([variant='notice']):before { - background-color: var( - --mod-statuslight-semantic-notice-color, - var(--spectrum-statuslight-semantic-notice-color) - ); +:host([variant="notice"]):before { + background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color)); } -:host([variant='positive']):before { - background-color: var( - --mod-statuslight-semantic-positive-color, - var(--spectrum-statuslight-semantic-positive-color) - ); +:host([variant="positive"]):before { + background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color)); } .spectrum-StatusLight--gray:before { - background-color: var( - --mod-statuslight-nonsemantic-gray-color, - var(--spectrum-statuslight-nonsemantic-gray-color) - ); + background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color)); } .spectrum-StatusLight--red:before { - background-color: var( - --mod-statuslight-nonsemantic-red-color, - var(--spectrum-statuslight-nonsemantic-red-color) - ); + background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color)); } .spectrum-StatusLight--orange:before { - background-color: var( - --mod-statuslight-nonsemantic-orange-color, - var(--spectrum-statuslight-nonsemantic-orange-color) - ); + background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color)); } -:host([variant='yellow']):before { - background-color: var( - --mod-statuslight-nonsemantic-yellow-color, - var(--spectrum-statuslight-nonsemantic-yellow-color) - ); +:host([variant="yellow"]):before { + background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color)); } -:host([variant='chartreuse']):before { - background-color: var( - --mod-statuslight-nonsemantic-chartreuse-color, - var(--spectrum-statuslight-nonsemantic-chartreuse-color) - ); +:host([variant="chartreuse"]):before { + background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color)); } -:host([variant='celery']):before { - background-color: var( - --mod-statuslight-nonsemantic-celery-color, - var(--spectrum-statuslight-nonsemantic-celery-color) - ); +:host([variant="celery"]):before { + background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color)); } .spectrum-StatusLight--green:before { - background-color: var( - --mod-statuslight-nonsemantic-green-color, - var(--spectrum-statuslight-nonsemantic-green-color) - ); + background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color)); } -:host([variant='seafoam']):before { - background-color: var( - --mod-statuslight-nonsemantic-seafoam-color, - var(--spectrum-statuslight-nonsemantic-seafoam-color) - ); +:host([variant="seafoam"]):before { + background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color)); } .spectrum-StatusLight--cyan:before { - background-color: var( - --mod-statuslight-nonsemantic-cyan-color, - var(--spectrum-statuslight-nonsemantic-cyan-color) - ); + background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color)); } .spectrum-StatusLight--blue:before { - background-color: var( - --mod-statuslight-nonsemantic-blue-color, - var(--spectrum-statuslight-nonsemantic-blue-color) - ); + background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color)); } -:host([variant='indigo']):before { - background-color: var( - --mod-statuslight-nonsemantic-indigo-color, - var(--spectrum-statuslight-nonsemantic-indigo-color) - ); +:host([variant="indigo"]):before { + background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color)); } -:host([variant='purple']):before { - background-color: var( - --mod-statuslight-nonsemantic-purple-color, - var(--spectrum-statuslight-nonsemantic-purple-color) - ); +:host([variant="purple"]):before { + background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color)); } -:host([variant='fuchsia']):before { - background-color: var( - --mod-statuslight-nonsemantic-fuchsia-color, - var(--spectrum-statuslight-nonsemantic-fuchsia-color) - ); +:host([variant="fuchsia"]):before { + background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color)); } -:host([variant='magenta']):before { - background-color: var( - --mod-statuslight-nonsemantic-magenta-color, - var(--spectrum-statuslight-nonsemantic-magenta-color) - ); +:host([variant="magenta"]):before { + background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color)); } @media (forced-colors: active) { - :host([dir]) { - --highcontrast-statuslight-content-color-default: CanvasText; - --highcontrast-statuslight-subdued-content-color-default: CanvasText; - forced-color-adjust: none; - } + :host([dir]) { + --highcontrast-statuslight-content-color-default: CanvasText; + --highcontrast-statuslight-subdued-content-color-default: CanvasText; + forced-color-adjust: none; + } - :host:before { - forced-color-adjust: none; - border: var( - --mod-statuslight-border-width, - var(--spectrum-statuslight-border-width) - ) - solid ButtonText; - } + :host:before { + forced-color-adjust: none; + border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText; + } } + diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css index 07e94b0781..81919bfb9d 100644 --- a/packages/status-light/src/status-light-overrides.css +++ b/packages/status-light/src/status-light-overrides.css @@ -1,189 +1,90 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host([dir]) { - --spectrum-statuslight-corner-radius: var( - --system-status-light-corner-radius - ); - --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); - --spectrum-statuslight-border-width: var( - --system-status-light-border-width - ); - --spectrum-statuslight-height: var(--system-status-light-height); - --spectrum-statuslight-dot-size: var(--system-status-light-dot-size); - --spectrum-statuslight-line-height: var(--system-status-light-line-height); - --spectrum-statuslight-line-height-cjk: var( - --system-status-light-line-height-cjk - ); - --spectrum-statuslight-font-size: var(--system-status-light-font-size); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-spacing-bottom-to-label - ); - --spectrum-statuslight-content-color-default: var( - --system-status-light-content-color-default - ); - --spectrum-statuslight-subdued-content-color-default: var( - --system-status-light-subdued-content-color-default - ); - --spectrum-statuslight-semantic-neutral-color: var( - --system-status-light-semantic-neutral-color - ); - --spectrum-statuslight-semantic-accent-color: var( - --system-status-light-semantic-accent-color - ); - --spectrum-statuslight-semantic-negative-color: var( - --system-status-light-semantic-negative-color - ); - --spectrum-statuslight-semantic-info-color: var( - --system-status-light-semantic-info-color - ); - --spectrum-statuslight-semantic-notice-color: var( - --system-status-light-semantic-notice-color - ); - --spectrum-statuslight-semantic-positive-color: var( - --system-status-light-semantic-positive-color - ); - --spectrum-statuslight-nonsemantic-gray-color: var( - --system-status-light-nonsemantic-gray-color - ); - --spectrum-statuslight-nonsemantic-red-color: var( - --system-status-light-nonsemantic-red-color - ); - --spectrum-statuslight-nonsemantic-orange-color: var( - --system-status-light-nonsemantic-orange-color - ); - --spectrum-statuslight-nonsemantic-yellow-color: var( - --system-status-light-nonsemantic-yellow-color - ); - --spectrum-statuslight-nonsemantic-chartreuse-color: var( - --system-status-light-nonsemantic-chartreuse-color - ); - --spectrum-statuslight-nonsemantic-celery-color: var( - --system-status-light-nonsemantic-celery-color - ); - --spectrum-statuslight-nonsemantic-green-color: var( - --system-status-light-nonsemantic-green-color - ); - --spectrum-statuslight-nonsemantic-seafoam-color: var( - --system-status-light-nonsemantic-seafoam-color - ); - --spectrum-statuslight-nonsemantic-cyan-color: var( - --system-status-light-nonsemantic-cyan-color - ); - --spectrum-statuslight-nonsemantic-blue-color: var( - --system-status-light-nonsemantic-blue-color - ); - --spectrum-statuslight-nonsemantic-indigo-color: var( - --system-status-light-nonsemantic-indigo-color - ); - --spectrum-statuslight-nonsemantic-purple-color: var( - --system-status-light-nonsemantic-purple-color - ); - --spectrum-statuslight-nonsemantic-fuchsia-color: var( - --system-status-light-nonsemantic-fuchsia-color - ); - --spectrum-statuslight-nonsemantic-magenta-color: var( - --system-status-light-nonsemantic-magenta-color - ); + --spectrum-statuslight-corner-radius: var(--system-status-light-corner-radius); + --spectrum-statuslight-font-weight: var(--system-status-light-font-weight); + --spectrum-statuslight-border-width: var(--system-status-light-border-width); + --spectrum-statuslight-height: var(--system-status-light-height); + --spectrum-statuslight-dot-size: var(--system-status-light-dot-size); + --spectrum-statuslight-line-height: var(--system-status-light-line-height); + --spectrum-statuslight-line-height-cjk: var(--system-status-light-line-height-cjk); + --spectrum-statuslight-font-size: var(--system-status-light-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-spacing-bottom-to-label); + --spectrum-statuslight-content-color-default: var(--system-status-light-content-color-default); + --spectrum-statuslight-subdued-content-color-default: var(--system-status-light-subdued-content-color-default); + --spectrum-statuslight-semantic-neutral-color: var(--system-status-light-semantic-neutral-color); + --spectrum-statuslight-semantic-accent-color: var(--system-status-light-semantic-accent-color); + --spectrum-statuslight-semantic-negative-color: var(--system-status-light-semantic-negative-color); + --spectrum-statuslight-semantic-info-color: var(--system-status-light-semantic-info-color); + --spectrum-statuslight-semantic-notice-color: var(--system-status-light-semantic-notice-color); + --spectrum-statuslight-semantic-positive-color: var(--system-status-light-semantic-positive-color); + --spectrum-statuslight-nonsemantic-gray-color: var(--system-status-light-nonsemantic-gray-color); + --spectrum-statuslight-nonsemantic-red-color: var(--system-status-light-nonsemantic-red-color); + --spectrum-statuslight-nonsemantic-orange-color: var(--system-status-light-nonsemantic-orange-color); + --spectrum-statuslight-nonsemantic-yellow-color: var(--system-status-light-nonsemantic-yellow-color); + --spectrum-statuslight-nonsemantic-chartreuse-color: var(--system-status-light-nonsemantic-chartreuse-color); + --spectrum-statuslight-nonsemantic-celery-color: var(--system-status-light-nonsemantic-celery-color); + --spectrum-statuslight-nonsemantic-green-color: var(--system-status-light-nonsemantic-green-color); + --spectrum-statuslight-nonsemantic-seafoam-color: var(--system-status-light-nonsemantic-seafoam-color); + --spectrum-statuslight-nonsemantic-cyan-color: var(--system-status-light-nonsemantic-cyan-color); + --spectrum-statuslight-nonsemantic-blue-color: var(--system-status-light-nonsemantic-blue-color); + --spectrum-statuslight-nonsemantic-indigo-color: var(--system-status-light-nonsemantic-indigo-color); + --spectrum-statuslight-nonsemantic-purple-color: var(--system-status-light-nonsemantic-purple-color); + --spectrum-statuslight-nonsemantic-fuchsia-color: var(--system-status-light-nonsemantic-fuchsia-color); + --spectrum-statuslight-nonsemantic-magenta-color: var(--system-status-light-nonsemantic-magenta-color); } -:host([size='s']) { - --spectrum-statuslight-height: var(--system-status-light-size-s-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-s-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-s-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-s-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-s-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-s-spacing-bottom-to-label - ); +:host([size="s"]) { + --spectrum-statuslight-height: var(--system-status-light-size-s-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-s-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-size-s-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-size-s-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-size-s-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-size-s-spacing-bottom-to-label); } :host { - --spectrum-statuslight-height: var(--system-status-light-size-m-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-m-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-m-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-m-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-m-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-m-spacing-bottom-to-label - ); + --spectrum-statuslight-height: var(--system-status-light-size-m-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-m-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-size-m-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-size-m-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-size-m-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-size-m-spacing-bottom-to-label); } -:host([size='l']) { - --spectrum-statuslight-height: var(--system-status-light-size-l-height); - --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size); - --spectrum-statuslight-font-size: var( - --system-status-light-size-l-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-l-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-l-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-l-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-l-spacing-bottom-to-label - ); +:host([size="l"]) { + --spectrum-statuslight-height: var(--system-status-light-size-l-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-l-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-size-l-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-size-l-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-size-l-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-size-l-spacing-bottom-to-label); } -:host([size='xl']) { - --spectrum-statuslight-height: var(--system-status-light-size-xl-height); - --spectrum-statuslight-dot-size: var( - --system-status-light-size-xl-dot-size - ); - --spectrum-statuslight-font-size: var( - --system-status-light-size-xl-font-size - ); - --spectrum-statuslight-spacing-dot-to-label: var( - --system-status-light-size-xl-spacing-dot-to-label - ); - --spectrum-statuslight-spacing-top-to-dot: var( - --system-status-light-size-xl-spacing-top-to-dot - ); - --spectrum-statuslight-spacing-top-to-label: var( - --system-status-light-size-xl-spacing-top-to-label - ); - --spectrum-statuslight-spacing-bottom-to-label: var( - --system-status-light-size-xl-spacing-bottom-to-label - ); +:host([size="xl"]) { + --spectrum-statuslight-height: var(--system-status-light-size-xl-height); + --spectrum-statuslight-dot-size: var(--system-status-light-size-xl-dot-size); + --spectrum-statuslight-font-size: var(--system-status-light-size-xl-font-size); + --spectrum-statuslight-spacing-dot-to-label: var(--system-status-light-size-xl-spacing-dot-to-label); + --spectrum-statuslight-spacing-top-to-dot: var(--system-status-light-size-xl-spacing-top-to-dot); + --spectrum-statuslight-spacing-top-to-label: var(--system-status-light-size-xl-spacing-top-to-label); + --spectrum-statuslight-spacing-bottom-to-label: var(--system-status-light-size-xl-spacing-bottom-to-label); } + diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css index e0a56e8fc6..0994927465 100644 --- a/packages/swatch/src/spectrum-swatch-group.css +++ b/packages/swatch/src/spectrum-swatch-group.css @@ -1,37 +1,29 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - justify-content: flex-start; - align-items: flex-start; - gap: var( - --mod-swatchgroup-spacing-regular, - var(--spectrum-swatchgroup-spacing-regular) - ); - flex-flow: wrap; - display: inline-flex; + justify-content: flex-start; + align-items: flex-start; + gap: var(--mod-swatchgroup-spacing-regular, var(--spectrum-swatchgroup-spacing-regular)); + flex-flow: wrap; + display: inline-flex; } -:host([density='compact']) { - gap: var( - --mod-swatchgroup-spacing-compact, - var(--spectrum-swatchgroup-spacing-compact) - ); +:host([density="compact"]) { + gap: var(--mod-swatchgroup-spacing-compact, var(--spectrum-swatchgroup-spacing-compact)); } -:host([density='spacious']) { - gap: var( - --mod-swatchgroup-spacing-spacious, - var(--spectrum-swatchgroup-spacing-spacious) - ); +:host([density="spacious"]) { + gap: var(--mod-swatchgroup-spacing-spacious, var(--spectrum-swatchgroup-spacing-spacious)); } + diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css index 2af7c1ac63..f752ac0117 100644 --- a/packages/swatch/src/spectrum-swatch.css +++ b/packages/swatch/src/spectrum-swatch.css @@ -1,406 +1,216 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-swatch-disabled-icon-color: GrayText; - --highcontrast-swatch-focus-indicator-color: ButtonText; - --highcontrast-swatch-background-color-selected: Background; - --highcontrast-swatch-border-color-selected: Highlight; - --highcontrast-swatch-border-color: ButtonText; - --highcontrast-swatch-fill-foreground-color: ButtonText; - } + :host { + --highcontrast-swatch-disabled-icon-color: GrayText; + --highcontrast-swatch-focus-indicator-color: ButtonText; + --highcontrast-swatch-background-color-selected: Background; + --highcontrast-swatch-border-color-selected: Highlight; + --highcontrast-swatch-border-color: ButtonText; + --highcontrast-swatch-fill-foreground-color: ButtonText; + } - .fill { - forced-color-adjust: none; - } + .fill { + forced-color-adjust: none; + } - :host([disabled]), - :host([disabled]) { - --highcontrast-swatch-border-color: GrayText; - } + :host([disabled]), :host([disabled]) { + --highcontrast-swatch-border-color: GrayText; + } } :host { - inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - -webkit-user-select: none; - user-select: none; - outline: none; - justify-content: center; - align-items: center; - display: flex; - position: relative; + inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); + block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); + -webkit-user-select: none; + user-select: none; + outline: none; + justify-content: center; + align-items: center; + display: flex; + position: relative; } .disabledIcon { - inline-size: var( - --mod-swatch-disabled-icon-size, - var(--spectrum-swatch-disabled-icon-size) - ); - block-size: var( - --mod-swatch-disabled-icon-size, - var(--spectrum-swatch-disabled-icon-size) - ); + inline-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size)); + block-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size)); } -:host, -:host:before { - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); +:host, :host:before { + border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); } :host([selected]) { - background-color: var( - --highcontrast-swatch-background-color-selected, - var( - --mod-swatch-inner-border-color-selected, - var(--spectrum-swatch-inner-border-color-selected) - ) - ); + background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); } :host([selected]) .fill { - clip-path: polygon( - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ), - calc( - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - calc( - 100% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - ); - border-radius: 0; + clip-path: polygon(calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), calc(100.0% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), calc(100.0% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100.0% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100.0% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)); + border-radius: 0; } :host([selected]) .fill:before { - box-shadow: none; - border-radius: 0; + box-shadow: none; + border-radius: 0; } :host([selected]):before { - opacity: 1; + opacity: 1; } :host .is-image .fill:before { - background-color: initial; + background-color: initial; } :host([mixed-value]) .fill { - background: none; - background: var(--spectrum-picked-color, transparent); + background: none; + background: var(--spectrum-picked-color, transparent); } :host([mixed-value]) .mixedValueIcon { - color: var(--spectrum-swatch-dash-icon-color); - display: block; + color: var(--spectrum-swatch-dash-icon-color); + display: block; } :host([nothing]) .fill { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); - background-image: none; + background-color: initial; + background-color: var(--spectrum-picked-color, transparent); + background-image: none; } :host([nothing]) .fill:after { - inline-size: var( - --mod-swatch-slash-thickness, - var(--spectrum-swatch-slash-thickness) - ); - content: ''; - block-size: 200%; - background: var( - --highcontrast-swatch-fill-foreground-color, - var( - --mod-swatch-slash-icon-color, - var(--spectrum-swatch-slash-icon-color) - ) - ); - position: absolute; - transform: rotate(-45deg); + inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness)); + content: ""; + block-size: 200%; + background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))); + position: absolute; + transform: rotate(-45deg); } -:host([nothing][shape='rectangle']) .fill:after { - transform: rotate(-25deg); +:host([nothing][shape="rectangle"]) .fill:after { + transform: rotate(-25deg); } -:host([disabled]) .disabledIcon, -:host([disabled]) .disabledIcon { - display: block; +:host([disabled]) .disabledIcon, :host([disabled]) .disabledIcon { + display: block; } :host:before { - content: ''; - border-width: var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ); - border-style: solid; - border-color: var( - --highcontrast-swatch-border-color-selected, - var( - --mod-swatch-border-color-selected, - var(--spectrum-swatch-border-color-selected) - ) - ); - opacity: 0; - pointer-events: none; - position: absolute; - inset: 0; + content: ""; + border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)); + border-style: solid; + border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))); + opacity: 0; + pointer-events: none; + position: absolute; + inset: 0; } :host:after { - content: ''; - inset: calc( - var( - --mod-swatch-focus-indicator-gap, - var(--spectrum-swatch-focus-indicator-gap) - ) * -2 - ); - opacity: 0; - border-width: var( - --mod-swatch-focus-indicator-thickness, - var(--spectrum-swatch-focus-indicator-thickness) - ); - border-style: solid; - border-color: var( - --highcontrast-swatch-focus-indicator-color, - var( - --mod-swatch-focus-indicator-color, - var(--spectrum-swatch-focus-indicator-color) - ) - ); - border-radius: var( - --mod-swatch-focus-indicator-border-radius, - var(--spectrum-swatch-focus-indicator-border-radius) - ); - transition: opacity - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - position: absolute; + content: ""; + inset: calc(var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap)) * -2); + opacity: 0; + border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)); + border-style: solid; + border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))); + border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius)); + transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + position: absolute; } :host(:focus-visible):after { - opacity: 1; + opacity: 1; } .fill { - inline-size: 100%; - block-size: 100%; - box-sizing: border-box; - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); - justify-content: center; - align-items: center; - display: flex; - position: relative; - overflow: hidden; + inline-size: 100%; + block-size: 100%; + box-sizing: border-box; + border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + justify-content: center; + align-items: center; + display: flex; + position: relative; + overflow: hidden; } .fill:before { - content: ''; - z-index: 0; - box-shadow: inset 0 0 0 - var( - --mod-swatch-border-thickness, - var(--spectrum-swatch-border-thickness) - ) - var( - --highcontrast-swatch-border-color, - var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)) - ); - border-radius: var( - --mod-swatch-border-radius, - var(--spectrum-swatch-border-radius) - ); - position: absolute; - inset: 0; -} - -:host([border='none']) .fill:before, -.fill:before { - background-color: initial; - background-color: var(--spectrum-picked-color, transparent); + content: ""; + z-index: 0; + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))); + border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + position: absolute; + inset: 0; +} + +:host([border="none"]) .fill:before, .fill:before { + background-color: initial; + background-color: var(--spectrum-picked-color, transparent); } -:host([border='none']) .fill:before { - box-shadow: none; +:host([border="none"]) .fill:before { + box-shadow: none; } -:host([border='light']) .fill:before { - box-shadow: inset 0 0 0 - var( - --mod-swatch-border-thickness, - var(--spectrum-swatch-border-thickness) - ) - var( - --highcontrast-swatch-border-color-light, - var( - --mod-swatch-border-color-light, - var(--spectrum-swatch-border-color-light) - ) - ); +:host([border="light"]) .fill:before { + box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light))); } .mixedValueIcon { - pointer-events: none; - color: #0000; - color: var(--spectrum-picked-color, transparent); - display: none; + pointer-events: none; + color: #0000; + color: var(--spectrum-picked-color, transparent); + display: none; } .disabledIcon { - z-index: 1; - pointer-events: none; - color: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); - stroke: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); - display: none; - position: relative; + z-index: 1; + pointer-events: none; + color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + display: none; + position: relative; } .disabledIcon path:first-child { - fill: var( - --highcontrast-swatch-disabled-icon-color, - var( - --mod-swatch-disabled-icon-color, - var(--spectrum-swatch-disabled-icon-color) - ) - ); + fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); } .disabledIcon path:last-child { - fill: var( - --mod-swatch-icon-border-color, - var(--spectrum-swatch-icon-border-color) - ); -} - -:host([shape='rectangle']) { - inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); -} - -:host([rounding='none']), -:host([rounding='none']) .fill, -:host([rounding='none']) .fill:before, -:host([rounding='none'][selected]) .fill, -:host([rounding='none'][selected]) .fill:before, -:host([rounding='none']):after, -:host([rounding='none']):before { - border-radius: 0; -} - -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill, -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill:before, -:host([rounding='full']:not([shape='rectangle'])), -:host([rounding='full']:not([shape='rectangle'])) .fill, -:host([rounding='full']:not([shape='rectangle'])) .fill:before, -:host([rounding='full']:not([shape='rectangle'])):after, -:host([rounding='full']:not([shape='rectangle'])):before { - border-radius: 100%; -} - -:host([rounding='full'][selected]:not([shape='rectangle'])) .fill { - clip-path: circle( - calc( - 50% - - var( - --mod-swatch-border-thickness-selected, - var(--spectrum-swatch-border-thickness-selected) - ) * 2 - ) - at 50% 50% - ); -} - -::slotted([slot='image']) { - object-fit: contain; - inline-size: 100%; - block-size: 100%; - transition: - width - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - height - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; + fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color)); +} + +:host([shape="rectangle"]) { + inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); +} + +:host([rounding="none"]), :host([rounding="none"]) .fill, :host([rounding="none"]) .fill:before, :host([rounding="none"][selected]) .fill, :host([rounding="none"][selected]) .fill:before, :host([rounding="none"]):after, :host([rounding="none"]):before { + border-radius: 0; } + +:host([rounding="full"][selected]:not([shape="rectangle"])) .fill, :host([rounding="full"][selected]:not([shape="rectangle"])) .fill:before, :host([rounding="full"]:not([shape="rectangle"])), :host([rounding="full"]:not([shape="rectangle"])) .fill, :host([rounding="full"]:not([shape="rectangle"])) .fill:before, :host([rounding="full"]:not([shape="rectangle"])):after, :host([rounding="full"]:not([shape="rectangle"])):before { + border-radius: 100%; +} + +:host([rounding="full"][selected]:not([shape="rectangle"])) .fill { + clip-path: circle(calc(50.0% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) at 50.0% 50.0%); +} + +::slotted([slot="image"]) { + object-fit: contain; + inline-size: 100%; + block-size: 100%; + transition: width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, height var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; +} + diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css index 2f73d06b16..bbf25ff424 100644 --- a/packages/swatch/src/swatch-group-overrides.css +++ b/packages/swatch/src/swatch-group-overrides.css @@ -1,24 +1,19 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-swatchgroup-spacing-compact: var( - --system-swatch-group-spacing-compact - ); - --spectrum-swatchgroup-spacing-regular: var( - --system-swatch-group-spacing-regular - ); - --spectrum-swatchgroup-spacing-spacious: var( - --system-swatch-group-spacing-spacious - ); + --spectrum-swatchgroup-spacing-compact: var(--system-swatch-group-spacing-compact); + --spectrum-swatchgroup-spacing-regular: var(--system-swatch-group-spacing-regular); + --spectrum-swatchgroup-spacing-spacious: var(--system-swatch-group-spacing-spacious); } + diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css index edd3e96b84..2dcf61aa6c 100644 --- a/packages/swatch/src/swatch-overrides.css +++ b/packages/swatch/src/swatch-overrides.css @@ -1,99 +1,60 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='l']) { - --spectrum-swatch-size: var(--system-swatch-size-l-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-l-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-l-slash-thickness - ); +:host([size="l"]) { + --spectrum-swatch-size: var(--system-swatch-size-l-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness); } -:host([size='s']) { - --spectrum-swatch-size: var(--system-swatch-size-s-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-s-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-s-slash-thickness - ); +:host([size="s"]) { + --spectrum-swatch-size: var(--system-swatch-size-s-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-s-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-size-s-slash-thickness); } -:host([size='xs']) { - --spectrum-swatch-size: var(--system-swatch-size-xs-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-xs-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-xs-slash-thickness - ); +:host([size="xs"]) { + --spectrum-swatch-size: var(--system-swatch-size-xs-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-xs-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-size-xs-slash-thickness); } :host { - --spectrum-swatch-size: var(--system-swatch-size-m-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-size-m-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var( - --system-swatch-size-m-slash-thickness - ); + --spectrum-swatch-size: var(--system-swatch-size-m-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-size-m-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-size-m-slash-thickness); } :host { - --spectrum-swatch-border-radius: var(--system-swatch-border-radius); - --spectrum-swatch-focus-indicator-border-radius: var( - --system-swatch-focus-indicator-border-radius - ); - --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); - --spectrum-swatch-border-thickness-selected: var( - --system-swatch-border-thickness-selected - ); - --spectrum-swatch-focus-indicator-thickness: var( - --system-swatch-focus-indicator-thickness - ); - --spectrum-swatch-focus-indicator-gap: var( - --system-swatch-focus-indicator-gap - ); - --spectrum-swatch-border-color-opacity: var( - --system-swatch-border-color-opacity - ); - --spectrum-swatch-border-color-light-opacity: var( - --system-swatch-border-color-light-opacity - ); - --spectrum-swatch-border-color: var(--system-swatch-border-color); - --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); - --spectrum-swatch-border-color-light: var( - --system-swatch-border-color-light - ); - --spectrum-swatch-border-color-selected: var( - --system-swatch-border-color-selected - ); - --spectrum-swatch-inner-border-color-selected: var( - --system-swatch-inner-border-color-selected - ); - --spectrum-swatch-disabled-icon-color: var( - --system-swatch-disabled-icon-color - ); - --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); - --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); - --spectrum-swatch-focus-indicator-color: var( - --system-swatch-focus-indicator-color - ); - --spectrum-swatch-size: var(--system-swatch-size); - --spectrum-swatch-disabled-icon-size: var( - --system-swatch-disabled-icon-size - ); - --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); + --spectrum-swatch-border-radius: var(--system-swatch-border-radius); + --spectrum-swatch-focus-indicator-border-radius: var(--system-swatch-focus-indicator-border-radius); + --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness); + --spectrum-swatch-border-thickness-selected: var(--system-swatch-border-thickness-selected); + --spectrum-swatch-focus-indicator-thickness: var(--system-swatch-focus-indicator-thickness); + --spectrum-swatch-focus-indicator-gap: var(--system-swatch-focus-indicator-gap); + --spectrum-swatch-border-color-opacity: var(--system-swatch-border-color-opacity); + --spectrum-swatch-border-color-light-opacity: var(--system-swatch-border-color-light-opacity); + --spectrum-swatch-border-color: var(--system-swatch-border-color); + --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color); + --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light); + --spectrum-swatch-border-color-selected: var(--system-swatch-border-color-selected); + --spectrum-swatch-inner-border-color-selected: var(--system-swatch-inner-border-color-selected); + --spectrum-swatch-disabled-icon-color: var(--system-swatch-disabled-icon-color); + --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color); + --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color); + --spectrum-swatch-focus-indicator-color: var(--system-swatch-focus-indicator-color); + --spectrum-swatch-size: var(--system-swatch-size); + --spectrum-swatch-disabled-icon-size: var(--system-swatch-disabled-icon-size); + --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness); } + diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css index 2dcc0d89f1..f7fd1e6dfb 100644 --- a/packages/switch/src/spectrum-switch.css +++ b/packages/switch/src/spectrum-switch.css @@ -1,672 +1,313 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-switch-focus-indicator-thickness: var( - --mod-focus-indicator-thickness, - var(--spectrum-focus-indicator-thickness) - ); - min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); - max-inline-size: 100%; - vertical-align: top; - align-items: flex-start; - display: inline-flex; - position: relative; + --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height)); + max-inline-size: 100%; + vertical-align: top; + align-items: flex-start; + display: inline-flex; + position: relative; } #input { - box-sizing: border-box; - inline-size: 100%; - block-size: 100%; - opacity: 0; - z-index: 1; - cursor: pointer; - margin: 0; - padding: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; + box-sizing: border-box; + inline-size: 100%; + block-size: 100%; + opacity: 0; + z-index: 1; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } :host([checked]) #input + #switch:before { - transform: translateX( - calc( - var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ) - 100% - ) - ); + transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100.0%)); } -:host([checked]) #input + #switch:dir(rtl):before, -:host([dir='rtl'][checked]) #input + #switch:before { - transform: translateX( - calc( - ( - var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ) - 100% - ) * -1 - ) - ); +:host([checked]) #input + #switch:dir(rtl):before, :host([dir="rtl"][checked]) #input + #switch:before { + transform: translateX(calc((var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100.0%) * -1)); } -:host([disabled]) #input, -:host([disabled]) #input { - cursor: default; +:host([disabled]) #input, :host([disabled]) #input { + cursor: default; } #input:focus-visible + #switch:after { - margin: calc( - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 - ); + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); } #label { - color: var( - --highcontrast-switch-label-color-default, - var( - --mod-switch-label-color-default, - var(--spectrum-switch-label-color-default) - ) - ); - margin-inline: var( - --mod-switch-control-label-spacing, - var(--spectrum-switch-control-label-spacing) - ); - font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - transition: color - var( - --mod-animation-duration-200, - var(--spectrum-animation-duration-200) - ) - ease-in-out; - margin-block-start: var( - --mod-switch-spacing-top-to-label, - var(--spectrum-switch-spacing-top-to-label) - ); - margin-block-end: 0; + color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); + margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); + font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); + line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); + transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out; + margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); + margin-block-end: 0; } #switch { - box-sizing: border-box; - inline-size: var( - --mod-switch-control-width, - var(--spectrum-switch-control-width) - ); - margin-block: calc( - var(--mod-switch-height, var(--spectrum-switch-min-height)) - - var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ) - - var( - --mod-switch-spacing-top-to-control, - var(--spectrum-switch-spacing-top-to-control) - ) - ); - vertical-align: middle; - transition: - background - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - border - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - block-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 - ); - flex-grow: 0; - flex-shrink: 0; - margin-inline: 0; - display: inline-block; - position: relative; - inset-inline: 0; + box-sizing: border-box; + inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); + margin-block: calc(var(--mod-switch-height, var(--spectrum-switch-min-height)) - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-spacing-top-to-control, var(--spectrum-switch-spacing-top-to-control))); + vertical-align: middle; + transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + flex-grow: 0; + flex-shrink: 0; + margin-inline: 0; + display: inline-block; + position: relative; + inset-inline: 0; } #switch:before { - box-sizing: border-box; - transition: - background - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - border - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - transform - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out, - box-shadow - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-in-out; - inline-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - block-size: var( - --mod-switch-control-height, - var(--spectrum-switch-control-height) - ); - border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 - ); - border-style: solid; + box-sizing: border-box; + transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + border-style: solid; } -#switch:after, -#switch:before { - content: ''; - display: block; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; +#switch:after, #switch:before { + content: ""; + display: block; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } #switch:after { - border-radius: calc( - var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / - 2 + - var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * - 2 - ); - transition: - opacity - var( - --mod-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out, - margin - var( - --spectrum-animation-duration-100, - var(--spectrum-animation-duration-100) - ) - ease-out; - margin: 0; - inset-block-end: 0; - inset-inline-end: 0; + border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2 + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); + transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + margin: 0; + inset-block-end: 0; + inset-inline-end: 0; } #switch { - background-color: var( - --highcontrast-switch-background-color, - var( - --mod-switch-background-color, - var(--spectrum-switch-background-color) - ) - ); + background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); } #switch:before { - background-color: var( - --highcontrast-switch-handle-background-color, - var( - --mod-switch-handle-background-color, - var(--spectrum-switch-handle-background-color) - ) - ); - border-color: var( - --highcontrast-switch-handle-border-color-default, - var( - --mod-switch-handle-border-color-default, - var(--spectrum-switch-handle-border-color-default) - ) - ); + background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))); + border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))); } :host(:active) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-down, - var( - --mod-switch-handle-border-color-down, - var(--spectrum-switch-handle-border-color-down) - ) - ); + border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))); } :host(:active) #input ~ #label { - color: var( - --highcontrast-switch-label-color-down, - var( - --mod-switch-label-color-down, - var(--spectrum-switch-label-color-down) - ) - ); + color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); } :host(:active[checked]) #input:enabled + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-down, - var( - --mod-switch-background-color-selected-down, - var(--spectrum-switch-background-color-selected-down) - ) - ); + background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); } :host(:active[checked]) #input:enabled + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-down, - var( - --mod-switch-handle-border-color-selected-down, - var(--spectrum-switch-handle-border-color-selected-down) - ) - ); + border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); } #input:focus-visible + #switch:after { - box-shadow: 0 0 0 - var( - --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) - ) - var( - --highcontrast-switch-focus-indicator-color, - var( - --mod-switch-focus-indicator-color, - var(--spectrum-switch-focus-indicator-color) - ) - ); + box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); } #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-focus, - var( - --mod-switch-handle-border-color-focus, - var(--spectrum-switch-handle-border-color-focus) - ) - ); + border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); } :host([checked]) #input:focus-visible + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-focus, - var( - --mod-switch-background-color-selected-focus, - var(--spectrum-switch-background-color-selected-focus) - ) - ); + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); } :host([checked]) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-focus, - var( - --mod-switch-handle-border-color-selected-focus, - var(--spectrum-switch-handle-border-color-selected-focus) - ) - ); + border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); } #input:focus-visible ~ #label { - color: var( - --highcontrast-switch-label-color-focus, - var( - --mod-switch-label-color-focus, - var(--spectrum-switch-label-color-focus) - ) - ); + color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); } @media (hover: hover) { - :host(:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-hover, - var( - --mod-switch-handle-border-color-hover, - var(--spectrum-switch-handle-border-color-hover) - ) - ); - box-shadow: none; - } - - :host(:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-hover, - var( - --mod-switch-label-color-hover, - var(--spectrum-switch-label-color-hover) - ) - ); - } - - :host([checked]:hover) #input:enabled + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-hover, - var( - --mod-switch-background-color-selected-hover, - var(--spectrum-switch-background-color-selected-hover) - ) - ); - } - - :host([checked]:hover) #input:enabled + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-hover, - var( - --mod-switch-handle-border-color-selected-hover, - var(--spectrum-switch-handle-border-color-selected-hover) - ) - ); - } - - :host([disabled]:hover) #input + #switch, - :host([disabled]:hover) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-disabled, - var( - --mod-switch-background-color-disabled, - var(--spectrum-switch-background-color-disabled) - ) - ); - } - - :host([disabled]:hover) #input + #switch:before, - :host([disabled]:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); - } - - :host([disabled]:hover) #input ~ #label, - :host([disabled]:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input + #switch, - :host([disabled][checked]:hover) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-disabled, - var( - --mod-switch-background-color-selected-disabled, - var(--spectrum-switch-background-color-selected-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input + #switch:before, - :host([disabled][checked]:hover) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); - } - - :host([disabled][checked]:hover) #input ~ #label, - :host([disabled][checked]:hover) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); - } - - :host(:hover) #input:focus-visible + #switch:after { - box-shadow: 0 0 0 - var( - --mod-switch-focus-indicator-thickness, - var( - --mod-focus-indicator-thickness, - var(--spectrum-switch-focus-indicator-thickness) - ) - ) - var( - --highcontrast-switch-focus-indicator-color, - var( - --mod-switch-focus-indicator-color, - var(--spectrum-switch-focus-indicator-color) - ) - ); - } - - :host(:hover) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-focus, - var( - --mod-switch-handle-border-color-focus, - var(--spectrum-switch-handle-border-color-focus) - ) - ); - } - - :host([checked]:hover) #input:focus-visible + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-focus, - var( - --mod-switch-background-color-selected-focus, - var(--spectrum-switch-background-color-selected-focus) - ) - ); - } - - :host([checked]:hover) #input:focus-visible + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-focus, - var( - --mod-switch-handle-border-color-selected-focus, - var(--spectrum-switch-handle-border-color-selected-focus) - ) - ); - } - - :host(:hover) #input:focus-visible ~ #label { - color: var( - --highcontrast-switch-label-color-focus, - var( - --mod-switch-label-color-focus, - var(--spectrum-switch-label-color-focus) - ) - ); - } + :host(:hover) #input + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))); + box-shadow: none; + } + + :host(:hover) #input ~ #label { + color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + } + + :host([checked]:hover) #input:enabled + #switch { + background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); + } + + :host([checked]:hover) #input:enabled + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))); + } + + :host([disabled]:hover) #input + #switch, :host([disabled]:hover) #input + #switch { + background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + } + + :host([disabled]:hover) #input + #switch:before, :host([disabled]:hover) #input + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + + :host([disabled]:hover) #input ~ #label, :host([disabled]:hover) #input ~ #label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + + :host([disabled][checked]:hover) #input + #switch, :host([disabled][checked]:hover) #input + #switch { + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + } + + :host([disabled][checked]:hover) #input + #switch:before, :host([disabled][checked]:hover) #input + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + } + + :host([disabled][checked]:hover) #input ~ #label, :host([disabled][checked]:hover) #input ~ #label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + } + + :host(:hover) #input:focus-visible + #switch:after { + box-shadow: 0 0 0 var(--mod-switch-focus-indicator-thickness, var(--mod-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))) var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + } + + :host(:hover) #input:focus-visible + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); + } + + :host([checked]:hover) #input:focus-visible + #switch { + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); + } + + :host([checked]:hover) #input:focus-visible + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); + } + + :host(:hover) #input:focus-visible ~ #label { + color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + } } :host([checked]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-default, - var( - --mod-switch-background-color-selected-default, - var(--spectrum-switch-background-color-selected-default) - ) - ); + background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); } :host([checked]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-selected-default, - var( - --mod-switch-handle-border-color-selected-default, - var(--spectrum-switch-handle-border-color-selected-default) - ) - ); + border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))); } -:host([disabled]) #input + #switch, -:host([disabled]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-disabled, - var( - --mod-switch-background-color-disabled, - var(--spectrum-switch-background-color-disabled) - ) - ); +:host([disabled]) #input + #switch, :host([disabled]) #input + #switch { + background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); } -:host([disabled]) #input + #switch:before, -:host([disabled]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); +:host([disabled]) #input + #switch:before, :host([disabled]) #input + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); } -:host([disabled][checked]) #input + #switch, -:host([disabled][checked]) #input + #switch { - background-color: var( - --highcontrast-switch-background-color-selected-disabled, - var( - --mod-switch-background-color-selected-disabled, - var(--spectrum-switch-background-color-selected-disabled) - ) - ); +:host([disabled][checked]) #input + #switch, :host([disabled][checked]) #input + #switch { + background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); } -:host([disabled][checked]) #input + #switch:before, -:host([disabled][checked]) #input + #switch:before { - border-color: var( - --highcontrast-switch-handle-border-color-disabled, - var( - --mod-switch-handle-border-color-disabled, - var(--spectrum-switch-handle-border-color-disabled) - ) - ); +:host([disabled][checked]) #input + #switch:before, :host([disabled][checked]) #input + #switch:before { + border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); } -:host([disabled]) #input ~ #label, -:host([disabled]) #input ~ #label { - color: var( - --highcontrast-switch-label-color-disabled, - var( - --mod-switch-label-color-disabled, - var(--spectrum-switch-label-color-disabled) - ) - ); +:host([disabled]) #input ~ #label, :host([disabled]) #input ~ #label { + color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); } @media (forced-colors: active) { - :host { - --highcontrast-switch-label-color-default: ButtonText; - --highcontrast-switch-label-color-hover: ButtonText; - --highcontrast-switch-label-color-down: ButtonText; - --highcontrast-switch-label-color-focus: ButtonText; - --highcontrast-switch-label-color-disabled: GrayText; - --highcontrast-switch-handle-background-color: ButtonFace; - --highcontrast-switch-handle-border-color-default: ButtonText; - --highcontrast-switch-handle-border-color-hover: Highlight; - --highcontrast-switch-handle-border-color-down: Highlight; - --highcontrast-switch-handle-border-color-focus: Highlight; - --highcontrast-switch-handle-border-color-disabled: Highlight; - --highcontrast-switch-handle-border-color-selected-default: Highlight; - --highcontrast-switch-handle-border-color-selected-hover: Highlight; - --highcontrast-switch-handle-border-color-selected-down: Highlight; - --highcontrast-switch-handle-border-color-selected-focus: Highlight; - --highcontrast-switch-background-color: ButtonFace; - --highcontrast-switch-background-color-selected-default: Highlight; - --highcontrast-switch-background-color-selected-hover: Highlight; - --highcontrast-switch-background-color-selected-down: Highlight; - --highcontrast-switch-background-color-selected-focus: Highlight; - --highcontrast-switch-background-color-selected-disabled: Highlight; - --highcontrast-switch-focus-indicator-color: ButtonText; - forced-color-adjust: none; - } - - #input:not(:checked) + #switch { - box-shadow: inset 0 0 0 1px ButtonText; - } - - @media (hover: hover) { - :host(:hover) #input:not(:checked) + #switch { - box-shadow: inset 0 0 0 1px Highlight; - } - - :host([disabled][checked]:hover) #input + #switch, - :host([disabled][checked]:hover) #input + #switch { - background-color: GrayText; - box-shadow: inset 0 0 0 1px GrayText; - } - - :host([disabled][checked]:hover) #input + #switch:before, - :host([disabled][checked]:hover) #input + #switch:before { - background-color: ButtonFace; - border-color: GrayText; - } - } - - :host([disabled]) #input:not(:checked) + #switch, - :host([disabled]) #input:not(:checked) + #switch { - background-color: ButtonFace; - box-shadow: inset 0 0 0 1px GrayText; + :host { + --highcontrast-switch-label-color-default: ButtonText; + --highcontrast-switch-label-color-hover: ButtonText; + --highcontrast-switch-label-color-down: ButtonText; + --highcontrast-switch-label-color-focus: ButtonText; + --highcontrast-switch-label-color-disabled: GrayText; + --highcontrast-switch-handle-background-color: ButtonFace; + --highcontrast-switch-handle-border-color-default: ButtonText; + --highcontrast-switch-handle-border-color-hover: Highlight; + --highcontrast-switch-handle-border-color-down: Highlight; + --highcontrast-switch-handle-border-color-focus: Highlight; + --highcontrast-switch-handle-border-color-disabled: Highlight; + --highcontrast-switch-handle-border-color-selected-default: Highlight; + --highcontrast-switch-handle-border-color-selected-hover: Highlight; + --highcontrast-switch-handle-border-color-selected-down: Highlight; + --highcontrast-switch-handle-border-color-selected-focus: Highlight; + --highcontrast-switch-background-color: ButtonFace; + --highcontrast-switch-background-color-selected-default: Highlight; + --highcontrast-switch-background-color-selected-hover: Highlight; + --highcontrast-switch-background-color-selected-down: Highlight; + --highcontrast-switch-background-color-selected-focus: Highlight; + --highcontrast-switch-background-color-selected-disabled: Highlight; + --highcontrast-switch-focus-indicator-color: ButtonText; + forced-color-adjust: none; + } + + #input:not(:checked) + #switch { + box-shadow: inset 0 0 0 1px ButtonText; + } + + @media (hover: hover) { + :host(:hover) #input:not(:checked) + #switch { + box-shadow: inset 0 0 0 1px Highlight; } - :host([disabled]) #input:not(:checked) + #switch:before, - :host([disabled]) #input:not(:checked) + #switch:before { - background-color: ButtonFace; - border-color: GrayText; + :host([disabled][checked]:hover) #input + #switch, :host([disabled][checked]:hover) #input + #switch { + background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; } - :host([disabled][checked]) #input + #switch, - :host([disabled][checked]) #input + #switch { - background-color: GrayText; - box-shadow: inset 0 0 0 1px GrayText; - } - - :host([disabled][checked]) #input + #switch:before, - :host([disabled][checked]) #input + #switch:before { - background-color: ButtonFace; - border-color: GrayText; - } - - :host([disabled]) #input ~ #label, - :host([disabled]) #input ~ #label { - color: GrayText; + :host([disabled][checked]:hover) #input + #switch:before, :host([disabled][checked]:hover) #input + #switch:before { + background-color: ButtonFace; + border-color: GrayText; } + } + + :host([disabled]) #input:not(:checked) + #switch, :host([disabled]) #input:not(:checked) + #switch { + background-color: ButtonFace; + box-shadow: inset 0 0 0 1px GrayText; + } + + :host([disabled]) #input:not(:checked) + #switch:before, :host([disabled]) #input:not(:checked) + #switch:before { + background-color: ButtonFace; + border-color: GrayText; + } + + :host([disabled][checked]) #input + #switch, :host([disabled][checked]) #input + #switch { + background-color: GrayText; + box-shadow: inset 0 0 0 1px GrayText; + } + + :host([disabled][checked]) #input + #switch:before, :host([disabled][checked]) #input + #switch:before { + background-color: ButtonFace; + border-color: GrayText; + } + + :host([disabled]) #input ~ #label, :host([disabled]) #input ~ #label { + color: GrayText; + } } + diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css index bf96e33c37..37bf369d48 100644 --- a/packages/switch/src/switch-overrides.css +++ b/packages/switch/src/switch-overrides.css @@ -1,184 +1,95 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-switch-handle-border-color-default: var( - --system-switch-handle-border-color-default - ); - --spectrum-switch-handle-border-color-hover: var( - --system-switch-handle-border-color-hover - ); - --spectrum-switch-handle-border-color-down: var( - --system-switch-handle-border-color-down - ); - --spectrum-switch-handle-border-color-focus: var( - --system-switch-handle-border-color-focus - ); - --spectrum-switch-handle-border-color-selected-default: var( - --system-switch-handle-border-color-selected-default - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --system-switch-handle-border-color-selected-hover - ); - --spectrum-switch-handle-border-color-selected-down: var( - --system-switch-handle-border-color-selected-down - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --system-switch-handle-border-color-selected-focus - ); - --spectrum-switch-label-color-default: var( - --system-switch-label-color-default - ); - --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); - --spectrum-switch-label-color-down: var(--system-switch-label-color-down); - --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); - --spectrum-switch-label-color-disabled: var( - --system-switch-label-color-disabled - ); - --spectrum-switch-background-color: var(--system-switch-background-color); - --spectrum-switch-background-color-disabled: var( - --system-switch-background-color-disabled - ); - --spectrum-switch-background-color-selected-disabled: var( - --system-switch-background-color-selected-disabled - ); - --spectrum-switch-background-color-selected-default: var( - --system-switch-background-color-selected-default - ); - --spectrum-switch-background-color-selected-hover: var( - --system-switch-background-color-selected-hover - ); - --spectrum-switch-background-color-selected-down: var( - --system-switch-background-color-selected-down - ); - --spectrum-switch-background-color-selected-focus: var( - --system-switch-background-color-selected-focus - ); - --spectrum-switch-focus-indicator-thickness: var( - --system-switch-focus-indicator-thickness - ); - --spectrum-switch-focus-indicator-color: var( - --system-switch-focus-indicator-color - ); - --spectrum-switch-handle-background-color: var( - --system-switch-handle-background-color - ); - --spectrum-switch-handle-border-color-disabled: var( - --system-switch-handle-border-color-disabled - ); + --spectrum-switch-handle-border-color-default: var(--system-switch-handle-border-color-default); + --spectrum-switch-handle-border-color-hover: var(--system-switch-handle-border-color-hover); + --spectrum-switch-handle-border-color-down: var(--system-switch-handle-border-color-down); + --spectrum-switch-handle-border-color-focus: var(--system-switch-handle-border-color-focus); + --spectrum-switch-handle-border-color-selected-default: var(--system-switch-handle-border-color-selected-default); + --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-handle-border-color-selected-hover); + --spectrum-switch-handle-border-color-selected-down: var(--system-switch-handle-border-color-selected-down); + --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-handle-border-color-selected-focus); + --spectrum-switch-label-color-default: var(--system-switch-label-color-default); + --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover); + --spectrum-switch-label-color-down: var(--system-switch-label-color-down); + --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus); + --spectrum-switch-label-color-disabled: var(--system-switch-label-color-disabled); + --spectrum-switch-background-color: var(--system-switch-background-color); + --spectrum-switch-background-color-disabled: var(--system-switch-background-color-disabled); + --spectrum-switch-background-color-selected-disabled: var(--system-switch-background-color-selected-disabled); + --spectrum-switch-background-color-selected-default: var(--system-switch-background-color-selected-default); + --spectrum-switch-background-color-selected-hover: var(--system-switch-background-color-selected-hover); + --spectrum-switch-background-color-selected-down: var(--system-switch-background-color-selected-down); + --spectrum-switch-background-color-selected-focus: var(--system-switch-background-color-selected-focus); + --spectrum-switch-focus-indicator-thickness: var(--system-switch-focus-indicator-thickness); + --spectrum-switch-focus-indicator-color: var(--system-switch-focus-indicator-color); + --spectrum-switch-handle-background-color: var(--system-switch-handle-background-color); + --spectrum-switch-handle-border-color-disabled: var(--system-switch-handle-border-color-disabled); } :host([disabled]) { - --spectrum-switch-label-color-default: var( - --system-switch-disabled-label-color-default - ); + --spectrum-switch-label-color-default: var(--system-switch-disabled-label-color-default); } :host([emphasized]) { - --spectrum-switch-background-color-selected-default: var( - --system-switch-emphasized-background-color-selected-default - ); - --spectrum-switch-background-color-selected-hover: var( - --system-switch-emphasized-background-color-selected-hover - ); - --spectrum-switch-background-color-selected-down: var( - --system-switch-emphasized-background-color-selected-down - ); - --spectrum-switch-background-color-selected-focus: var( - --system-switch-emphasized-background-color-selected-focus - ); - --spectrum-switch-handle-border-color-selected-default: var( - --system-switch-emphasized-handle-border-color-selected-default - ); - --spectrum-switch-handle-border-color-selected-hover: var( - --system-switch-emphasized-handle-border-color-selected-hover - ); - --spectrum-switch-handle-border-color-selected-down: var( - --system-switch-emphasized-handle-border-color-selected-down - ); - --spectrum-switch-handle-border-color-selected-focus: var( - --system-switch-emphasized-handle-border-color-selected-focus - ); + --spectrum-switch-background-color-selected-default: var(--system-switch-emphasized-background-color-selected-default); + --spectrum-switch-background-color-selected-hover: var(--system-switch-emphasized-background-color-selected-hover); + --spectrum-switch-background-color-selected-down: var(--system-switch-emphasized-background-color-selected-down); + --spectrum-switch-background-color-selected-focus: var(--system-switch-emphasized-background-color-selected-focus); + --spectrum-switch-handle-border-color-selected-default: var(--system-switch-emphasized-handle-border-color-selected-default); + --spectrum-switch-handle-border-color-selected-hover: var(--system-switch-emphasized-handle-border-color-selected-hover); + --spectrum-switch-handle-border-color-selected-down: var(--system-switch-emphasized-handle-border-color-selected-down); + --spectrum-switch-handle-border-color-selected-focus: var(--system-switch-emphasized-handle-border-color-selected-focus); } -:host([size='s']) { - --spectrum-switch-min-height: var(--system-switch-size-s-min-height); - --spectrum-switch-control-width: var(--system-switch-size-s-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-s-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-s-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-s-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-s-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-s-font-size); +:host([size="s"]) { + --spectrum-switch-min-height: var(--system-switch-size-s-min-height); + --spectrum-switch-control-width: var(--system-switch-size-s-control-width); + --spectrum-switch-control-height: var(--system-switch-size-s-control-height); + --spectrum-switch-control-label-spacing: var(--system-switch-size-s-control-label-spacing); + --spectrum-switch-spacing-top-to-control: var(--system-switch-size-s-spacing-top-to-control); + --spectrum-switch-spacing-top-to-label: var(--system-switch-size-s-spacing-top-to-label); + --spectrum-switch-font-size: var(--system-switch-size-s-font-size); } :host { - --spectrum-switch-min-height: var(--system-switch-size-m-min-height); - --spectrum-switch-control-width: var(--system-switch-size-m-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-m-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-m-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-m-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-m-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-m-font-size); + --spectrum-switch-min-height: var(--system-switch-size-m-min-height); + --spectrum-switch-control-width: var(--system-switch-size-m-control-width); + --spectrum-switch-control-height: var(--system-switch-size-m-control-height); + --spectrum-switch-control-label-spacing: var(--system-switch-size-m-control-label-spacing); + --spectrum-switch-spacing-top-to-control: var(--system-switch-size-m-spacing-top-to-control); + --spectrum-switch-spacing-top-to-label: var(--system-switch-size-m-spacing-top-to-label); + --spectrum-switch-font-size: var(--system-switch-size-m-font-size); } -:host([size='l']) { - --spectrum-switch-min-height: var(--system-switch-size-l-min-height); - --spectrum-switch-control-width: var(--system-switch-size-l-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-l-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-l-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-l-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-l-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-l-font-size); +:host([size="l"]) { + --spectrum-switch-min-height: var(--system-switch-size-l-min-height); + --spectrum-switch-control-width: var(--system-switch-size-l-control-width); + --spectrum-switch-control-height: var(--system-switch-size-l-control-height); + --spectrum-switch-control-label-spacing: var(--system-switch-size-l-control-label-spacing); + --spectrum-switch-spacing-top-to-control: var(--system-switch-size-l-spacing-top-to-control); + --spectrum-switch-spacing-top-to-label: var(--system-switch-size-l-spacing-top-to-label); + --spectrum-switch-font-size: var(--system-switch-size-l-font-size); } -:host([size='xl']) { - --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); - --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); - --spectrum-switch-control-height: var( - --system-switch-size-xl-control-height - ); - --spectrum-switch-control-label-spacing: var( - --system-switch-size-xl-control-label-spacing - ); - --spectrum-switch-spacing-top-to-control: var( - --system-switch-size-xl-spacing-top-to-control - ); - --spectrum-switch-spacing-top-to-label: var( - --system-switch-size-xl-spacing-top-to-label - ); - --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); +:host([size="xl"]) { + --spectrum-switch-min-height: var(--system-switch-size-xl-min-height); + --spectrum-switch-control-width: var(--system-switch-size-xl-control-width); + --spectrum-switch-control-height: var(--system-switch-size-xl-control-height); + --spectrum-switch-control-label-spacing: var(--system-switch-size-xl-control-label-spacing); + --spectrum-switch-spacing-top-to-control: var(--system-switch-size-xl-spacing-top-to-control); + --spectrum-switch-spacing-top-to-label: var(--system-switch-size-xl-spacing-top-to-label); + --spectrum-switch-font-size: var(--system-switch-size-xl-font-size); } + diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css index 6ee65c89a5..2aaee01d85 100644 --- a/packages/table/src/spectrum-table-body.css +++ b/packages/table/src/spectrum-table-body.css @@ -1,41 +1,30 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - border-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border: none; - position: relative; + border-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border: none; + position: relative; } :host([drop-target]) { - --spectrum-table-border-color: transparent; - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); + --spectrum-table-border-color: transparent; + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); } :host { - display: table-row-group; + display: table-row-group; } + diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css index 5ddcf20ffc..075aee753e 100644 --- a/packages/table/src/spectrum-table-cell.css +++ b/packages/table/src/spectrum-table-cell.css @@ -1,141 +1,70 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } } -:host([align='center']) { - text-align: center; +:host([align="center"]) { + text-align: center; } -:host([align='end']) { - text-align: end; +:host([align="end"]) { + text-align: end; } :host { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } :host { - box-sizing: border-box; - font-size: var( - --mod-table-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-row-font-weight, - var(--spectrum-table-row-font-weight) - ); - line-height: var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ); - vertical-align: var( - --mod-table-default-vertical-align, - var(--spectrum-table-default-vertical-align) - ); - color: var( - --highcontrast-table-row-text-color, - var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) - ); - background-color: var(--spectrum-table-cell-background-color); - block-size: var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ); - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var( - --mod-table-row-bottom-to-text, - var(--spectrum-table-row-bottom-to-text) - ); - padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - - var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - ); + box-sizing: border-box; + font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); + line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); + vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); + color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); + background-color: var(--spectrum-table-cell-background-color); + block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)); + padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); + padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); } :host { - position: relative; + position: relative; } -:host([focused]), -:host(:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); +:host([focused]), :host(:focus-visible) { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px)); } .divider { - border-inline-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-inline-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } :host { - display: table-cell; + display: table-cell; } .spectrum-Table-cell--collapsible { - padding-block: 0; - padding-inline-start: calc( - var(--spectrum-table-row-tier, 0px) * - var(--spectrum-table-collapsible-tier-indent) - ); + padding-block: 0; + padding-inline-start: calc(var(--spectrum-table-row-tier, 0px) * var(--spectrum-table-collapsible-tier-indent)); } + diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css index 0ffde28e3f..de5c422b7d 100644 --- a/packages/table/src/spectrum-table-checkbox-cell.css +++ b/packages/table/src/spectrum-table-checkbox-cell.css @@ -1,236 +1,97 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host(:not([head-cell])) { - forced-color-adjust: none; - } + :host(:not([head-cell])) { + forced-color-adjust: none; + } } :host([head-cell]) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color, - var( - --mod-table-icon-color-default, - var(--spectrum-table-icon-color-default) - ) - ); - box-sizing: border-box; - text-align: start; - vertical-align: var( - --mod-table-header-vertical-align, - var(--spectrum-table-header-vertical-align) - ); - font-family: var( - --mod-table-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-size: var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-header-font-weight, - var(--spectrum-table-header-font-weight) - ); - line-height: var( - --mod-table-header-line-height, - var(--spectrum-table-row-line-height) - ); - text-transform: none; - text-transform: var(--mod-table-header-text-transform, none); - block-size: var( - --mod-table-min-header-height, - var(--spectrum-table-min-header-height) - ); - padding-block: var( - --mod-table-header-top-to-text, - var(--spectrum-table-header-top-to-text) - ) - var( - --mod-table-header-bottom-to-text, - var(--spectrum-table-header-bottom-to-text) - ); - padding-inline: var( - --mod-table-cell-inline-space, - var(--spectrum-table-cell-inline-space) - ); - color: var( - --mod-table-header-text-color, - var(--spectrum-table-header-text-color) - ); - background-color: var( - --mod-table-header-background-color, - var(--spectrum-table-header-background-color) - ); - transition: color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: auto; - cursor: var(--mod-table-cursor-header-default, initial); - border-radius: 0; - outline: 0; + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + box-sizing: border-box; + text-align: start; + vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align)); + font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); + font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); + line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); + text-transform: none; + text-transform: var(--mod-table-header-text-transform, none); + block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height)); + padding-block: var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)); + padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space)); + color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); + background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); + transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + cursor: auto; + cursor: var(--mod-table-cursor-header-default, initial); + border-radius: 0; + outline: 0; } :host(:not([head-cell])) { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-divider-color, - var(--mod-table-divider-color, var(--spectrum-table-divider-color)) - ); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } :host(:not([head-cell])) { - box-sizing: border-box; - font-size: var( - --mod-table-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-row-font-weight, - var(--spectrum-table-row-font-weight) - ); - line-height: var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ); - vertical-align: var( - --mod-table-default-vertical-align, - var(--spectrum-table-default-vertical-align) - ); - color: var( - --highcontrast-table-row-text-color, - var(--mod-table-row-text-color, var(--spectrum-table-row-text-color)) - ); - background-color: var(--spectrum-table-cell-background-color); - block-size: var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ); - padding-block-start: calc( - var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: var( - --mod-table-row-bottom-to-text, - var(--spectrum-table-row-bottom-to-text) - ); - padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - - var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - ); + box-sizing: border-box; + font-size: var(--mod-table-row-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-row-font-weight, var(--spectrum-table-row-font-weight)); + line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); + vertical-align: var(--mod-table-default-vertical-align, var(--spectrum-table-default-vertical-align)); + color: var(--highcontrast-table-row-text-color, var(--mod-table-row-text-color, var(--spectrum-table-row-text-color))); + background-color: var(--spectrum-table-cell-background-color); + block-size: var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)); + padding-block-start: calc(var(--mod-table-row-top-to-text, var(--spectrum-table-row-top-to-text)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); + padding-inline: calc(var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width))); } -:host(:not([head-cell])), -:host([head-cell]) { - position: relative; +:host(:not([head-cell])), :host([head-cell]) { + position: relative; } -:host(:not([head-cell])[focused]), -:host(:not([head-cell]):focus-visible), -:host([head-cell][focused]), -:host([head-cell]:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); +:host(:not([head-cell])[focused]), :host(:not([head-cell]):focus-visible), :host([head-cell][focused]), :host([head-cell]:focus-visible) { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px)); } :host(:host) { - inline-size: var(--spectrum-checkbox-control-size-small); - padding-block: 0; - padding-inline-end: calc( - var( - --mod-table-checkbox-to-text, - var(--spectrum-table-checkbox-to-text) - ) - - var( - --mod-table-edge-to-content, - var(--spectrum-table-edge-to-content) - ) - ); + inline-size: var(--spectrum-checkbox-control-size-small); + padding-block: 0; + padding-inline-end: calc(var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content))); } :host(:host) sp-checkbox { - --mod-checkbox-spacing: 0px; - min-block-size: 0; + --mod-checkbox-spacing: 0px; + min-block-size: 0; } :host(:host:not([head-cell])) sp-checkbox { - margin-block-start: calc( - var( - --mod-table-row-checkbox-block-spacing, - var(--spectrum-table-row-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-row-checkbox-block-spacing, - var(--spectrum-table-row-checkbox-block-spacing) - ); + margin-block-start: calc(var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + margin-block-end: var(--mod-table-row-checkbox-block-spacing, var(--spectrum-table-row-checkbox-block-spacing)); } :host(:host[head-cell]) sp-checkbox { - margin-block-start: calc( - var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ); + margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)); } -:host(:not([head-cell])), -:host([head-cell]) { - display: table-cell; +:host(:not([head-cell])), :host([head-cell]) { + display: table-cell; } + diff --git a/packages/table/src/spectrum-table-head-cell.css b/packages/table/src/spectrum-table-head-cell.css index 57bac6b077..3145312f50 100644 --- a/packages/table/src/spectrum-table-head-cell.css +++ b/packages/table/src/spectrum-table-head-cell.css @@ -1,239 +1,108 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .sortedIcon { - vertical-align: initial; - transition: transform - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); - margin-inline-end: var( - --mod-table-sort-icon-inline-end-spacing, - var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text)) - ); - display: none; + vertical-align: initial; + transition: transform var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + margin-inline-start: var(--mod-table-sort-icon-inline-start-spacing, 0); + margin-inline-end: var(--mod-table-sort-icon-inline-end-spacing, var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))); + display: none; } :host { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color, - var( - --mod-table-icon-color-default, - var(--spectrum-table-icon-color-default) - ) - ); - box-sizing: border-box; - text-align: start; - vertical-align: var( - --mod-table-header-vertical-align, - var(--spectrum-table-header-vertical-align) - ); - font-family: var( - --mod-table-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-size: var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-weight: var( - --mod-table-header-font-weight, - var(--spectrum-table-header-font-weight) - ); - line-height: var( - --mod-table-header-line-height, - var(--spectrum-table-row-line-height) - ); - text-transform: none; - text-transform: var(--mod-table-header-text-transform, none); - block-size: var( - --mod-table-min-header-height, - var(--spectrum-table-min-header-height) - ); - padding-block: var( - --mod-table-header-top-to-text, - var(--spectrum-table-header-top-to-text) - ) - var( - --mod-table-header-bottom-to-text, - var(--spectrum-table-header-bottom-to-text) - ); - padding-inline: var( - --mod-table-cell-inline-space, - var(--spectrum-table-cell-inline-space) - ); - color: var( - --mod-table-header-text-color, - var(--spectrum-table-header-text-color) - ); - background-color: var( - --mod-table-header-background-color, - var(--spectrum-table-header-background-color) - ); - transition: color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: auto; - cursor: var(--mod-table-cursor-header-default, initial); - border-radius: 0; - outline: 0; + --spectrum-table-icon-color: var(--highcontrast-table-icon-color, var(--mod-table-icon-color-default, var(--spectrum-table-icon-color-default))); + box-sizing: border-box; + text-align: start; + vertical-align: var(--mod-table-header-vertical-align, var(--spectrum-table-header-vertical-align)); + font-family: var(--mod-table-header-font-family, var(--spectrum-table-row-font-family)); + font-size: var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)); + font-weight: var(--mod-table-header-font-weight, var(--spectrum-table-header-font-weight)); + line-height: var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)); + text-transform: none; + text-transform: var(--mod-table-header-text-transform, none); + block-size: var(--mod-table-min-header-height, var(--spectrum-table-min-header-height)); + padding-block: var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)); + padding-inline: var(--mod-table-cell-inline-space, var(--spectrum-table-cell-inline-space)); + color: var(--mod-table-header-text-color, var(--spectrum-table-header-text-color)); + background-color: var(--mod-table-header-background-color, var(--spectrum-table-header-background-color)); + transition: color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + cursor: auto; + cursor: var(--mod-table-cursor-header-default, initial); + border-radius: 0; + outline: 0; } -.spectrum-Table-menuIcon, -.sortedIcon { - color: var(--spectrum-table-icon-color); +.spectrum-Table-menuIcon, .sortedIcon { + color: var(--spectrum-table-icon-color); } :host([sortable]) { - cursor: pointer; - cursor: var(--mod-table-cursor-header-sortable, pointer); + cursor: pointer; + cursor: var(--mod-table-cursor-header-sortable, pointer); } :host([sortable][active]) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-active, - var(--spectrum-table-icon-color-active) - ) - ); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-active, var(--spectrum-table-icon-color-active))); } :host([sortable]:focus) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-focus, - var(--spectrum-table-icon-color-focus) - ) - ); + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus, var(--spectrum-table-icon-color-focus))); } -:host([sortable]) .is-keyboardFocused, -:host([sortable]:focus-visible) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-key-focus, - var(--spectrum-table-icon-color-key-focus) - ) - ); +:host([sortable]) .is-keyboardFocused, :host([sortable]:focus-visible) { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))); } -:host([sort-direction='asc']) .sortedIcon, -:host([sort-direction='desc']) .sortedIcon { - display: inline-block; +:host([sort-direction="asc"]) .sortedIcon, :host([sort-direction="desc"]) .sortedIcon { + display: inline-block; } -:host([sort-direction='asc']) .sortedIcon { - transform: rotate(-90deg); +:host([sort-direction="asc"]) .sortedIcon { + transform: rotate(-90deg); } :host { - position: relative; + position: relative; } -:host([focused]), -:host(:focus-visible) { - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-cell-focus-indicator-color, - var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-focus-indicator-color, - var(--spectrum-table-focus-indicator-color) - ) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px) - ); +:host([focused]), :host(:focus-visible) { + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-cell-focus-indicator-color, var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1 - var(--highcontrast-table-cell-focus-extra-offset, 0px)); } :host .spectrum-Table-checkboxCell .spectrum-Table-checkbox { - margin-block-start: calc( - var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - margin-block-end: var( - --mod-table-header-checkbox-block-spacing, - var(--spectrum-table-header-checkbox-block-spacing) - ); + margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)); } :host { - display: table-cell; + display: table-cell; } -:host .spectrum-Table-scroller { - border-block-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); +:host .spectrum-Table-scroller { + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } @media (hover: hover) { - :host([sortable]:hover) { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-hover, - var(--spectrum-table-icon-color-hover) - ) - ); - } - - :host([sortable]:focus):hover { - --spectrum-table-icon-color: var( - --highcontrast-table-icon-color-focus, - var( - --mod-table-icon-color-focus-hover, - var(--spectrum-table-icon-color-focus-hover) - ) - ); - } + :host([sortable]:hover) { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-hover, var(--spectrum-table-icon-color-hover))); + } + + :host([sortable]:focus):hover { + --spectrum-table-icon-color: var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))); + } } + diff --git a/packages/table/src/spectrum-table-head.css b/packages/table/src/spectrum-table-head.css index d093c53484..b043b9b0e4 100644 --- a/packages/table/src/spectrum-table-head.css +++ b/packages/table/src/spectrum-table-head.css @@ -1,22 +1,23 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - display: table-header-group; + display: table-header-group; } -:host .spectrum-Table-scroller { - z-index: 1; - position: sticky; - inset-block-start: 0; +:host .spectrum-Table-scroller { + z-index: 1; + position: sticky; + inset-block-start: 0; } + diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css index 85ff8f0591..6c74ba4e95 100644 --- a/packages/table/src/spectrum-table-row.css +++ b/packages/table/src/spectrum-table-row.css @@ -1,584 +1,270 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host([focused]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, - :host(:focus-visible) - .spectrum-Table-checkbox - .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } + :host([focused]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, :host(:focus-visible) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-row-text-color-hover) 1px solid; + } - @media (hover: hover) { - :host(:hover) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-row-text-color-hover) 1px solid; - } + @media (hover: hover) { + :host(:hover) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-row-text-color-hover) 1px solid; } + } - :host([drop-target]) .spectrum-Table-body, - :host([drop-target]), - :host([selected]) { - --highcontrast-table-cell-focus-indicator-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-cell-focus-extra-offset: 1px; - } + :host([drop-target]) .spectrum-Table-body , :host([drop-target]), :host([selected]) { + --highcontrast-table-cell-focus-indicator-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-cell-focus-extra-offset: 1px; + } - :host([drop-target]) - .spectrum-Table-body - .spectrum-Table-checkbox - .spectrum-Checkbox-box:before, - :host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, - :host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { - outline: var(--highcontrast-table-selected-row-text-color) 1px solid; - } + :host([drop-target]) .spectrum-Table-body .spectrum-Table-checkbox .spectrum-Checkbox-box:before, :host([drop-target]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before, :host([selected]) .spectrum-Table-checkbox .spectrum-Checkbox-box:before { + outline: var(--highcontrast-table-selected-row-text-color) 1px solid; + } } :host(:first-child) .spectrum-Table-body ::slotted(*) { - border-block-start: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } :host(:last-child) .spectrum-Table-body ::slotted(*) { - border-block-end: var( - --mod-table-border-width, - var(--spectrum-table-border-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } :host .spectrum-Table-body ::slotted(:first-child) { - border-inline-start: var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-inline-start: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } :host .spectrum-Table-body ::slotted(:last-child) { - border-inline-end: var( - --mod-table-outer-border-inline-width, - var(--spectrum-table-outer-border-inline-width) - ) - solid - var( - --highcontrast-table-border-color, - var(--mod-table-border-color, var(--spectrum-table-border-color)) - ); + border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } :host(:first-child) ::slotted(:first-child) { - border-start-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host(:first-child) ::slotted(:last-child) { - border-start-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host(:last-child) ::slotted(:first-child) { - border-end-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host(:last-child) ::slotted(:last-child) { - border-end-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host { - transition: background-color - var( - --highcontrast-table-transition-duration, - var( - --mod-table-transition-duration, - var(--spectrum-table-transition-duration) - ) - ) - ease-in-out; - cursor: pointer; - cursor: var(--mod-table-cursor-row-default, pointer); - border-block-start: none; - position: relative; + transition: background-color var(--highcontrast-table-transition-duration, var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))) ease-in-out; + cursor: pointer; + cursor: var(--mod-table-cursor-row-default, pointer); + border-block-start: none; + position: relative; } :host(:first-child) { - border-start-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border-start-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-start-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-start-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host(:last-child) { - border-end-end-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); - border-end-start-radius: var( - --mod-table-border-radius, - var(--spectrum-table-border-radius) - ); + border-end-end-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); + border-end-start-radius: var(--mod-table-border-radius, var(--spectrum-table-border-radius)); } :host(:focus) { - outline: 0; -} - -:host([focused]), -:host(:focus-visible) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-background-color-hover, - var(--spectrum-table-row-background-color-hover) - ) - ); + outline: 0; +} + +:host([focused]), :host(:focus-visible) { + --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); + --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); } :host:active { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-active-color, - var(--spectrum-table-row-active-color) - ) - ); + --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); + --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-active-color, var(--spectrum-table-row-active-color))); } :host([selected]) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var(--spectrum-table-selected-cell-background-color) - ); -} - -:host([selected][focused]), -:host([selected]:focus-visible) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color-focus, - var(--spectrum-table-selected-cell-background-color-focus) - ); -} - -:host([drop-target]) .spectrum-Table-body, -:host([drop-target]) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-drop-zone-background-color, - var(--spectrum-table-drop-zone-background-color) - ) - ); + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--spectrum-table-selected-cell-background-color)); +} + +:host([selected][focused]), :host([selected]:focus-visible) { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus)); +} + +:host([drop-target]) .spectrum-Table-body , :host([drop-target]) { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); } :host([drop-target]) { - --spectrum-table-border-color: var( - --highcontrast-table-focus-indicator-color, - transparent - ); - outline-width: var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ); - outline-style: solid; - outline-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); - outline-offset: calc( - var( - --mod-table-focus-indicator-thickness, - var(--spectrum-table-focus-indicator-thickness) - ) * -1 - ); + --spectrum-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); + outline-width: var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)); + outline-style: solid; + outline-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); + outline-offset: calc(var(--mod-table-focus-indicator-thickness, var(--spectrum-table-focus-indicator-thickness)) * -1); } :host([drop-target]) ::slotted(*) { - border-block-start-color: var( - --highcontrast-table-focus-indicator-color, - var( - --mod-table-drop-zone-outline-color, - var(--spectrum-table-drop-zone-outline-color) - ) - ); + border-block-start-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); } .spectrum-Table-row--summary { - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color, - var( - --mod-table-summary-row-background-color, - var(--spectrum-table-summary-row-background-color) - ) - ); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))); } .spectrum-Table-row--summary ::slotted(*) { - font-weight: var( - --mod-table-summary-row-font-weight, - var(--spectrum-table-summary-row-font-weight) - ); - font-size: var( - --mod-table-summary-row-font-size, - var(--spectrum-table-row-font-size) - ); - font-family: var( - --mod-table-summary-row-font-family, - var(--spectrum-table-row-font-family) - ); - font-style: var( - --mod-table-summary-row-font-style, - var(--spectrum-table-row-font-style) - ); - line-height: var( - --mod-table-summary-row-line-height, - var(--spectrum-table-row-line-height) - ); - color: var( - --highcontrast-table-row-text-color, - var( - --mod-table-summary-row-text-color, - var(--spectrum-table-row-text-color) - ) - ); + font-weight: var(--mod-table-summary-row-font-weight, var(--spectrum-table-summary-row-font-weight)); + font-size: var(--mod-table-summary-row-font-size, var(--spectrum-table-row-font-size)); + font-family: var(--mod-table-summary-row-font-family, var(--spectrum-table-row-font-family)); + font-style: var(--mod-table-summary-row-font-style, var(--spectrum-table-row-font-style)); + line-height: var(--mod-table-summary-row-line-height, var(--spectrum-table-row-line-height)); + color: var(--highcontrast-table-row-text-color, var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))); } .spectrum-Table-row--sectionHeader { - --spectrum-table-cell-background-color: var( - --highcontrast-table-section-header-background-color, - var( - --mod-table-section-header-background-color, - var(--spectrum-table-section-header-background-color) - ) - ); - cursor: auto; - cursor: var(--mod-table-cursor-section-header, initial); + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + cursor: auto; + cursor: var(--mod-table-cursor-section-header, initial); } .spectrum-Table-row--sectionHeader ::slotted(*) { - font-weight: var( - --mod-table-section-header-font-weight, - var(--spectrum-table-section-header-font-weight) - ); - text-align: start; - block-size: var( - --mod-table-section-header-min-height, - var(--spectrum-table-section-header-min-height) - ); - font-size: var( - --mod-table-section-header-font-size, - var(--spectrum-table-row-font-size) - ); - font-family: var( - --mod-table-section-header-font-family, - var(--spectrum-table-row-font-family) - ); - font-style: var( - --mod-table-section-header-font-style, - var(--spectrum-table-row-font-style) - ); - line-height: var( - --mod-table-section-header-line-height, - var(--spectrum-table-row-line-height) - ); - color: var( - --highcontrast-table-section-header-text-color, - var( - --mod-table-section-header-text-color, - var(--spectrum-table-row-text-color) - ) - ); - padding-block-start: calc( - var( - --mod-table-section-header-block-start-spacing, - var(--spectrum-table-section-header-block-start-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); - padding-block-end: calc( - var( - --mod-table-section-header-block-end-spacing, - var(--spectrum-table-section-header-block-end-spacing) - ) - - var(--mod-table-border-width, var(--spectrum-table-border-width)) - ); + font-weight: var(--mod-table-section-header-font-weight, var(--spectrum-table-section-header-font-weight)); + text-align: start; + block-size: var(--mod-table-section-header-min-height, var(--spectrum-table-section-header-min-height)); + font-size: var(--mod-table-section-header-font-size, var(--spectrum-table-row-font-size)); + font-family: var(--mod-table-section-header-font-family, var(--spectrum-table-row-font-family)); + font-style: var(--mod-table-section-header-font-style, var(--spectrum-table-row-font-style)); + line-height: var(--mod-table-section-header-line-height, var(--spectrum-table-row-line-height)); + color: var(--highcontrast-table-section-header-text-color, var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))); + padding-block-start: calc(var(--mod-table-section-header-block-start-spacing, var(--spectrum-table-section-header-block-start-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); + padding-block-end: calc(var(--mod-table-section-header-block-end-spacing, var(--spectrum-table-section-header-block-end-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width))); } :host { - display: table-row; + display: table-row; } :host(:first-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) { - border-block-start: none; - border-radius: 0; + border-block-start: none; + border-radius: 0; } :host(:last-child) .spectrum-Table-scroller .spectrum-Table-body ::slotted(*) { - border-block-end: none; - border-radius: 0; + border-block-end: none; + border-radius: 0; } :host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:first-child) { - border-inline-start: none; + border-inline-start: none; } :host .spectrum-Table-scroller .spectrum-Table-body ::slotted(:last-child) { - border-inline-end: none; + border-inline-end: none; } .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 0; + --spectrum-table-row-tier: 0; } -:host([data-tier='1']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 1; +:host([data-tier="1"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 1; } -:host([data-tier='2']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 2; +:host([data-tier="2"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 2; } -:host([data-tier='3']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 3; +:host([data-tier="3"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 3; } -:host([data-tier='4']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 4; +:host([data-tier="4"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 4; } -:host([data-tier='5']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 5; +:host([data-tier="5"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 5; } -:host([data-tier='6']) .spectrum-Table-row--collapsible { - --spectrum-table-row-tier: 6; +:host([data-tier="6"]) .spectrum-Table-row--collapsible { + --spectrum-table-row-tier: 6; } .spectrum-Table-row--collapsible .spectrum-Table-checkboxCell { - padding-inline-end: 0; + padding-inline-end: 0; } -.spectrum-Table-row--collapsible.is-last-tier - .spectrum-Table-cell--collapsible { - padding-inline-start: calc( - var(--spectrum-table-row-tier) * - var(--spectrum-table-collapsible-tier-indent) + - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) + - var( - --mod-table-collapsible-disclosure-inline-spacing, - var(--spectrum-table-collapsible-disclosure-inline-spacing) - ) * 2 - ); +.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible { + padding-inline-start: calc(var(--spectrum-table-row-tier) * var(--spectrum-table-collapsible-tier-indent) + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) + var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)) * 2); } .spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-disclosureIcon { - display: none; + display: none; } .spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon { - margin-inline: var( - --mod-table-collapsible-disclosure-inline-spacing, - var(--spectrum-table-collapsible-disclosure-inline-spacing) - ); - margin-block-start: max( - 0px, - calc( - ( - var( - --mod-table-min-row-height, - var(--spectrum-table-min-row-height) - ) - - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) - ) / 2 - ) - ); + margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); + margin-block-start: max(0px, calc((var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2)); } :host([hidden]) .spectrum-Table-row--collapsible { - display: none; + display: none; } @media (hover: hover) { - :host(:hover) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-row-text-color-hover - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-row-text-color-hover - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color-hover, - var( - --mod-table-row-background-color-hover, - var(--spectrum-table-row-background-color-hover) - ) - ); - } + :host(:hover) { + --highcontrast-table-row-text-color: var(--highcontrast-table-row-text-color-hover); + --highcontrast-table-icon-color: var(--highcontrast-table-row-text-color-hover); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))); + } - :host([selected]:hover) { - --highcontrast-table-row-text-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --highcontrast-table-icon-color: var( - --highcontrast-table-selected-row-text-color-focus - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-selected-row-background-color-focus, - var(--spectrum-table-selected-cell-background-color-focus) - ); - } + :host([selected]:hover) { + --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color-focus); + --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color-focus); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color-focus, var(--spectrum-table-selected-cell-background-color-focus)); + } - .spectrum-Table-row--sectionHeader:hover { - --highcontrast-table-row-text-color: var( - --highcontrast-table-section-header-text-color - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-section-header-background-color, - var( - --mod-table-section-header-background-color, - var(--spectrum-table-section-header-background-color) - ) - ); - } + .spectrum-Table-row--sectionHeader:hover { + --highcontrast-table-row-text-color: var(--highcontrast-table-section-header-text-color); + --spectrum-table-cell-background-color: var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))); + } } .spectrum-Table-row--thumbnail { - --table-thumbnail-cell-block-spacing: var( - --mod-table-thumbnail-block-spacing, - var(--spectrum-table-thumbnail-block-spacing) - ); - --table-thumbnail-inner-content-block-spacing: max( - 0px, - calc( - ( - var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ) - - ( - var( - --mod-table-row-line-height, - var(--spectrum-table-row-line-height) - ) * - var( - --mod-table-header-font-size, - var(--spectrum-table-row-font-size) - ) - ) - ) / 2 - ) - ); + --table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)); + --table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2)); } .spectrum-Table-row--thumbnail ::slotted(*) { - padding-block: calc( - var(--table-thumbnail-cell-block-spacing) + - var(--table-thumbnail-inner-content-block-spacing) - ); + padding-block: calc(var(--table-thumbnail-cell-block-spacing) + var(--table-thumbnail-inner-content-block-spacing)); } .spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail { - padding-block: 0; + padding-block: 0; } .spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible { - --table-thumbnail-inner-minimum-block-spacing: max( - 0px, - calc( - ( - var( - --mod-table-disclosure-icon-size, - var(--spectrum-table-disclosure-icon-size) - ) - - var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ) - ) / 2 - ) - ); - --table-thumbnail-cell-block-spacing: max( - var( - --mod-table-thumbnail-block-spacing, - var(--spectrum-table-thumbnail-block-spacing) - ), - var(--table-thumbnail-inner-minimum-block-spacing) - ); + --table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2)); + --table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--table-thumbnail-inner-minimum-block-spacing)); } + diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css index 5bd999c628..e0f4b35a40 100644 --- a/packages/table/src/spectrum-table.css +++ b/packages/table/src/spectrum-table.css @@ -1,335 +1,147 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { + :host { + --highcontrast-table-row-background-color: Canvas; + --highcontrast-table-row-text-color: CanvasText; + --highcontrast-table-divider-color: CanvasText; + --highcontrast-table-border-color: CanvasText; + --highcontrast-table-icon-color: CanvasText; + --highcontrast-table-icon-color-focus: Highlight; + --highcontrast-table-selected-row-background-color: Highlight; + --highcontrast-table-selected-row-text-color: HighlightText; + --highcontrast-table-selected-row-text-color-default: HighlightText; + --highcontrast-table-selected-row-background-color-focus: Highlight; + --highcontrast-table-selected-row-text-color-focus: HighlightText; + --highcontrast-table-row-background-color-hover: Highlight; + --highcontrast-table-row-text-color-hover: HighlightText; + --highcontrast-table-section-header-text-color: Canvas; + --highcontrast-table-section-header-background-color: CanvasText; + --highcontrast-table-focus-indicator-color: Highlight; + --highcontrast-table-transition-duration: 0; + } + + @supports (color: SelectedItem) { :host { - --highcontrast-table-row-background-color: Canvas; - --highcontrast-table-row-text-color: CanvasText; - --highcontrast-table-divider-color: CanvasText; - --highcontrast-table-border-color: CanvasText; - --highcontrast-table-icon-color: CanvasText; - --highcontrast-table-icon-color-focus: Highlight; - --highcontrast-table-selected-row-background-color: Highlight; - --highcontrast-table-selected-row-text-color: HighlightText; - --highcontrast-table-selected-row-text-color-default: HighlightText; - --highcontrast-table-selected-row-background-color-focus: Highlight; - --highcontrast-table-selected-row-text-color-focus: HighlightText; - --highcontrast-table-row-background-color-hover: Highlight; - --highcontrast-table-row-text-color-hover: HighlightText; - --highcontrast-table-section-header-text-color: Canvas; - --highcontrast-table-section-header-background-color: CanvasText; - --highcontrast-table-focus-indicator-color: Highlight; - --highcontrast-table-transition-duration: 0; - } - - @supports (color: SelectedItem) { - :host { - --highcontrast-table-selected-row-background-color: SelectedItem; - --highcontrast-table-selected-row-text-color: SelectedItemText; - --highcontrast-table-selected-row-text-color-default: SelectedItemText; - } + --highcontrast-table-selected-row-background-color: SelectedItem; + --highcontrast-table-selected-row-text-color: SelectedItemText; + --highcontrast-table-selected-row-text-color-default: SelectedItemText; } + } } :host { - --mod-thumbnail-size: var( - --mod-table-thumbnail-size, - var(--spectrum-table-thumbnail-size) - ); - --spectrum-table-cell-background-color: var( - --highcontrast-table-row-background-color, - var( - --mod-table-row-background-color, - var(--spectrum-table-row-background-color) - ) - ); - --spectrum-table-selected-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-selected-row-background-color-non-emphasized, - var(--spectrum-table-selected-row-background-color-non-emphasized) - ) - ); - --spectrum-table-selected-cell-background-color-focus: var( - --highcontrast-table-selected-row-background-color-focus, - var( - --mod-table-selected-row-background-color-non-emphasized-focus, - var( - --spectrum-table-selected-row-background-color-non-emphasized-focus - ) - ) - ); + --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); + --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-non-emphasized-focus, var(--spectrum-table-selected-row-background-color-non-emphasized-focus))); } -:host:dir(rtl), -:host([dir='rtl']) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); +:host:dir(rtl), :host([dir="rtl"]) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } :host:not(.spectrum-Table-scroller) { - border-collapse: initial; - border-spacing: 0; + border-collapse: initial; + border-spacing: 0; } :host:not(.spectrum-Table-scroller) { - display: table; + display: table; } -:host([density='compact']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-medium-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-medium-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-medium-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-medium-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-medium-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-200) - ); +:host([density="compact"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-medium-compact)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-medium-compact)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-medium-compact)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-medium-compact)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200)); } -:host([density='compact'][size='s']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-small-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-small-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-small-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-small-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-small-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-50) - ); +:host([density="compact"][size="s"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-small-compact)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-small-compact)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-small-compact)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-small-compact)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-small-compact)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-50)); } -:host([density='compact'][size='l']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-large-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-large-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-large-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-large-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-large-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-300) - ); +:host([density="compact"][size="l"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-large-compact)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-large-compact)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-large-compact)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-large-compact)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-large-compact)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-300)); } -:host([density='compact'][size='xl']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--compact, - var(--spectrum-table-row-height-extra-large-compact) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--compact, - var(--spectrum-table-row-top-to-text-extra-large-compact) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--compact, - var(--spectrum-table-row-bottom-to-text-extra-large-compact) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--compact, - var(--spectrum-table-row-checkbox-to-top-extra-large-compact) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-compact, - var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-compact, - var(--spectrum-thumbnail-size-500) - ); +:host([density="compact"][size="xl"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--compact, var(--spectrum-table-row-height-extra-large-compact)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--compact, var(--spectrum-table-row-top-to-text-extra-large-compact)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--compact, var(--spectrum-table-row-bottom-to-text-extra-large-compact)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--compact, var(--spectrum-table-row-checkbox-to-top-extra-large-compact)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-500)); } -:host([density='spacious']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-medium-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-medium-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-medium-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-medium-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-500) - ); +:host([density="spacious"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-medium-spacious)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-medium-spacious)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-medium-spacious)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500)); } -:host([density='spacious'][size='s']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-small-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-small-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-small-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-small-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-small-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-300) - ); +:host([density="spacious"][size="s"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-small-spacious)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-small-spacious)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-small-spacious)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-small-spacious)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-300)); } -:host([density='spacious'][size='l']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-large-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-large-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-large-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-large-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-large-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-700) - ); +:host([density="spacious"][size="l"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-large-spacious)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-large-spacious)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-large-spacious)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-large-spacious)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-700)); } -:host([density='spacious'][size='xl']) { - --spectrum-table-min-row-height: var( - --mod-table-min-row-height--spacious, - var(--spectrum-table-row-height-extra-large-spacious) - ); - --spectrum-table-row-top-to-text: var( - --mod-table-row-top-to-text--spacious, - var(--spectrum-table-row-top-to-text-extra-large-spacious) - ); - --spectrum-table-row-bottom-to-text: var( - --mod-table-row-bottom-to-text--spacious, - var(--spectrum-table-row-bottom-to-text-extra-large-spacious) - ); - --spectrum-table-row-checkbox-block-spacing: var( - --mod-table-row-checkbox-block-spacing--spacious, - var(--spectrum-table-row-checkbox-to-top-extra-large-spacious) - ); - --spectrum-table-thumbnail-block-spacing: var( - --mod-table-thumbnail-block-spacing-spacious, - var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious) - ); - --spectrum-table-thumbnail-size: var( - --mod-table-thumbnail-size-spacious, - var(--spectrum-thumbnail-size-800) - ); +:host([density="spacious"][size="xl"]) { + --spectrum-table-min-row-height: var(--mod-table-min-row-height--spacious, var(--spectrum-table-row-height-extra-large-spacious)); + --spectrum-table-row-top-to-text: var(--mod-table-row-top-to-text--spacious, var(--spectrum-table-row-top-to-text-extra-large-spacious)); + --spectrum-table-row-bottom-to-text: var(--mod-table-row-bottom-to-text--spacious, var(--spectrum-table-row-bottom-to-text-extra-large-spacious)); + --spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing--spacious, var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)); + --spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)); + --spectrum-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-800)); } :host([emphasized]) { - --spectrum-table-selected-cell-background-color: var( - --highcontrast-table-selected-row-background-color, - var( - --mod-table-selected-row-background-color, - var(--spectrum-table-selected-row-background-color) - ) - ); - --spectrum-table-selected-cell-background-color-focus: var( - --highcontrast-table-selected-row-background-color-focus, - var( - --mod-table-selected-row-background-color-focus, - var(--spectrum-table-selected-row-background-color-focus) - ) - ); + --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color))); + --spectrum-table-selected-cell-background-color-focus: var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-focus))); } :host([quiet]) { - --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); - --spectrum-table-outer-border-inline-width: var( - --mod-table-outer-border-inline-width--quiet, - 0px - ); - --spectrum-table-header-background-color: var( - --mod-table-header-background-color--quiet, - var(--spectrum-transparent-white-100) - ); - --spectrum-table-row-background-color: var( - --mod-table-row-background-color--quiet, - var(--spectrum-transparent-white-100) - ); + --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px); + --spectrum-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); + --spectrum-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); + --spectrum-table-row-background-color: var(--mod-table-row-background-color--quiet, var(--spectrum-transparent-white-100)); } + diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css index b43c1c2bfa..4b24ecc2e0 100644 --- a/packages/table/src/table-overrides.css +++ b/packages/table/src/table-overrides.css @@ -1,470 +1,221 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text); - --spectrum-table-header-bottom-to-text: var( - --system-table-header-bottom-to-text - ); - --spectrum-table-min-header-height: var(--system-table-min-header-height); - --spectrum-table-min-row-height: var(--system-table-min-row-height); - --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text); - --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text); - --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); - --spectrum-table-border-radius: var(--system-table-border-radius); - --spectrum-table-border-width: var(--system-table-border-width); - --spectrum-table-outer-border-inline-width: var( - --system-table-outer-border-inline-width - ); - --spectrum-table-icon-to-text: var(--system-table-icon-to-text); - --spectrum-table-default-vertical-align: var( - --system-table-default-vertical-align - ); - --spectrum-table-header-vertical-align: var( - --system-table-header-vertical-align - ); - --spectrum-table-header-font-weight: var(--system-table-header-font-weight); - --spectrum-table-row-font-family: var(--system-table-row-font-family); - --spectrum-table-row-font-weight: var(--system-table-row-font-weight); - --spectrum-table-row-font-style: var(--system-table-row-font-style); - --spectrum-table-row-font-size: var(--system-table-row-font-size); - --spectrum-table-row-line-height: var(--system-table-row-line-height); - --spectrum-table-border-color: var(--system-table-border-color); - --spectrum-table-divider-color: var(--system-table-divider-color); - --spectrum-table-header-background-color: var( - --system-table-header-background-color - ); - --spectrum-table-header-text-color: var(--system-table-header-text-color); - --spectrum-table-row-background-color: var( - --system-table-row-background-color - ); - --spectrum-table-row-text-color: var(--system-table-row-text-color); - --spectrum-table-selected-row-background-color: var( - --system-table-selected-row-background-color - ); - --spectrum-table-selected-row-background-color-non-emphasized: var( - --system-table-selected-row-background-color-non-emphasized - ); - --spectrum-table-row-background-color-hover: var( - --system-table-row-background-color-hover - ); - --spectrum-table-row-active-color: var(--system-table-row-active-color); - --spectrum-table-selected-row-background-color-focus: var( - --system-table-selected-row-background-color-focus - ); - --spectrum-table-selected-row-background-color-non-emphasized-focus: var( - --system-table-selected-row-background-color-non-emphasized-focus - ); - --spectrum-table-icon-color-default: var(--system-table-icon-color-default); - --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); - --spectrum-table-icon-color-active: var(--system-table-icon-color-active); - --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); - --spectrum-table-icon-color-focus-hover: var( - --system-table-icon-color-focus-hover - ); - --spectrum-table-icon-color-key-focus: var( - --system-table-icon-color-key-focus - ); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-row-checkbox-block-spacing - ); - --spectrum-table-focus-indicator-thickness: var( - --system-table-focus-indicator-thickness - ); - --spectrum-table-focus-indicator-color: var( - --system-table-focus-indicator-color - ); - --spectrum-table-drop-zone-background-color: var( - --system-table-drop-zone-background-color - ); - --spectrum-table-drop-zone-outline-color: var( - --system-table-drop-zone-outline-color - ); - --spectrum-table-transition-duration: var( - --system-table-transition-duration - ); - --spectrum-table-summary-row-font-weight: var( - --system-table-summary-row-font-weight - ); - --spectrum-table-summary-row-background-color: var( - --system-table-summary-row-background-color - ); - --spectrum-table-section-header-min-height: var( - --system-table-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-section-header-block-end-spacing - ); - --spectrum-table-section-header-font-weight: var( - --system-table-section-header-font-weight - ); - --spectrum-table-section-header-background-color: var( - --system-table-section-header-background-color - ); - --spectrum-table-collapsible-tier-indent: var( - --system-table-collapsible-tier-indent - ); - --spectrum-table-collapsible-disclosure-inline-spacing: var( - --system-table-collapsible-disclosure-inline-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-disclosure-icon-size - ); - --spectrum-table-collapsible-icon-animation-duration: var( - --system-table-collapsible-icon-animation-duration - ); - --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size); - --spectrum-table-cell-background-color: var( - --system-table-cell-background-color - ); - --spectrum-table-selected-cell-background-color: var( - --system-table-selected-cell-background-color - ); - --spectrum-table-selected-cell-background-color-focus: var( - --system-table-selected-cell-background-color-focus - ); + --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text); + --spectrum-table-header-bottom-to-text: var(--system-table-header-bottom-to-text); + --spectrum-table-min-header-height: var(--system-table-min-header-height); + --spectrum-table-min-row-height: var(--system-table-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text); + --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space); + --spectrum-table-border-radius: var(--system-table-border-radius); + --spectrum-table-border-width: var(--system-table-border-width); + --spectrum-table-outer-border-inline-width: var(--system-table-outer-border-inline-width); + --spectrum-table-icon-to-text: var(--system-table-icon-to-text); + --spectrum-table-default-vertical-align: var(--system-table-default-vertical-align); + --spectrum-table-header-vertical-align: var(--system-table-header-vertical-align); + --spectrum-table-header-font-weight: var(--system-table-header-font-weight); + --spectrum-table-row-font-family: var(--system-table-row-font-family); + --spectrum-table-row-font-weight: var(--system-table-row-font-weight); + --spectrum-table-row-font-style: var(--system-table-row-font-style); + --spectrum-table-row-font-size: var(--system-table-row-font-size); + --spectrum-table-row-line-height: var(--system-table-row-line-height); + --spectrum-table-border-color: var(--system-table-border-color); + --spectrum-table-divider-color: var(--system-table-divider-color); + --spectrum-table-header-background-color: var(--system-table-header-background-color); + --spectrum-table-header-text-color: var(--system-table-header-text-color); + --spectrum-table-row-background-color: var(--system-table-row-background-color); + --spectrum-table-row-text-color: var(--system-table-row-text-color); + --spectrum-table-selected-row-background-color: var(--system-table-selected-row-background-color); + --spectrum-table-selected-row-background-color-non-emphasized: var(--system-table-selected-row-background-color-non-emphasized); + --spectrum-table-row-background-color-hover: var(--system-table-row-background-color-hover); + --spectrum-table-row-active-color: var(--system-table-row-active-color); + --spectrum-table-selected-row-background-color-focus: var(--system-table-selected-row-background-color-focus); + --spectrum-table-selected-row-background-color-non-emphasized-focus: var(--system-table-selected-row-background-color-non-emphasized-focus); + --spectrum-table-icon-color-default: var(--system-table-icon-color-default); + --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover); + --spectrum-table-icon-color-active: var(--system-table-icon-color-active); + --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus); + --spectrum-table-icon-color-focus-hover: var(--system-table-icon-color-focus-hover); + --spectrum-table-icon-color-key-focus: var(--system-table-icon-color-key-focus); + --spectrum-table-header-checkbox-block-spacing: var(--system-table-header-checkbox-block-spacing); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-row-checkbox-block-spacing); + --spectrum-table-focus-indicator-thickness: var(--system-table-focus-indicator-thickness); + --spectrum-table-focus-indicator-color: var(--system-table-focus-indicator-color); + --spectrum-table-drop-zone-background-color: var(--system-table-drop-zone-background-color); + --spectrum-table-drop-zone-outline-color: var(--system-table-drop-zone-outline-color); + --spectrum-table-transition-duration: var(--system-table-transition-duration); + --spectrum-table-summary-row-font-weight: var(--system-table-summary-row-font-weight); + --spectrum-table-summary-row-background-color: var(--system-table-summary-row-background-color); + --spectrum-table-section-header-min-height: var(--system-table-section-header-min-height); + --spectrum-table-section-header-block-start-spacing: var(--system-table-section-header-block-start-spacing); + --spectrum-table-section-header-block-end-spacing: var(--system-table-section-header-block-end-spacing); + --spectrum-table-section-header-font-weight: var(--system-table-section-header-font-weight); + --spectrum-table-section-header-background-color: var(--system-table-section-header-background-color); + --spectrum-table-collapsible-tier-indent: var(--system-table-collapsible-tier-indent); + --spectrum-table-collapsible-disclosure-inline-spacing: var(--system-table-collapsible-disclosure-inline-spacing); + --spectrum-table-disclosure-icon-size: var(--system-table-disclosure-icon-size); + --spectrum-table-collapsible-icon-animation-duration: var(--system-table-collapsible-icon-animation-duration); + --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text); + --spectrum-table-thumbnail-block-spacing: var(--system-table-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size); + --spectrum-table-cell-background-color: var(--system-table-cell-background-color); + --spectrum-table-selected-cell-background-color: var(--system-table-selected-cell-background-color); + --spectrum-table-selected-cell-background-color-focus: var(--system-table-selected-cell-background-color-focus); } -:host([size='s']) { - --spectrum-table-min-header-height: var( - --system-table-size-s-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-s-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-s-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-s-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-s-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-s-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-s-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-s-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-s-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-s-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-s-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size); +:host([size="s"]) { + --spectrum-table-min-header-height: var(--system-table-size-s-min-header-height); + --spectrum-table-header-top-to-text: var(--system-table-size-s-header-top-to-text); + --spectrum-table-header-bottom-to-text: var(--system-table-size-s-header-bottom-to-text); + --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-s-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-size-s-row-bottom-to-text); + --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var(--system-table-size-s-header-checkbox-block-spacing); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-size-s-row-checkbox-block-spacing); + --spectrum-table-section-header-min-height: var(--system-table-size-s-section-header-min-height); + --spectrum-table-section-header-block-start-spacing: var(--system-table-size-s-section-header-block-start-spacing); + --spectrum-table-section-header-block-end-spacing: var(--system-table-size-s-section-header-block-end-spacing); + --spectrum-table-disclosure-icon-size: var(--system-table-size-s-disclosure-icon-size); + --spectrum-table-thumbnail-block-spacing: var(--system-table-size-s-thumbnail-block-spacing); + --spectrum-table-thumbnail-to-text: var(--system-table-size-s-thumbnail-to-text); + --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size); } -:host([size='l']) { - --spectrum-table-min-header-height: var( - --system-table-size-l-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-l-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-l-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-l-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-l-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-l-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-l-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-l-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-l-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-l-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-l-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size); +:host([size="l"]) { + --spectrum-table-min-header-height: var(--system-table-size-l-min-header-height); + --spectrum-table-header-top-to-text: var(--system-table-size-l-header-top-to-text); + --spectrum-table-header-bottom-to-text: var(--system-table-size-l-header-bottom-to-text); + --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-l-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-size-l-row-bottom-to-text); + --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var(--system-table-size-l-header-checkbox-block-spacing); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-size-l-row-checkbox-block-spacing); + --spectrum-table-section-header-min-height: var(--system-table-size-l-section-header-min-height); + --spectrum-table-section-header-block-start-spacing: var(--system-table-size-l-section-header-block-start-spacing); + --spectrum-table-section-header-block-end-spacing: var(--system-table-size-l-section-header-block-end-spacing); + --spectrum-table-disclosure-icon-size: var(--system-table-size-l-disclosure-icon-size); + --spectrum-table-thumbnail-block-spacing: var(--system-table-size-l-thumbnail-block-spacing); + --spectrum-table-thumbnail-to-text: var(--system-table-size-l-thumbnail-to-text); + --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size); } -:host([size='xl']) { - --spectrum-table-min-header-height: var( - --system-table-size-xl-min-header-height - ); - --spectrum-table-header-top-to-text: var( - --system-table-size-xl-header-top-to-text - ); - --spectrum-table-header-bottom-to-text: var( - --system-table-size-xl-header-bottom-to-text - ); - --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-size-xl-row-bottom-to-text - ); - --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); - --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); - --spectrum-table-header-checkbox-block-spacing: var( - --system-table-size-xl-header-checkbox-block-spacing - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-section-header-min-height: var( - --system-table-size-xl-section-header-min-height - ); - --spectrum-table-section-header-block-start-spacing: var( - --system-table-size-xl-section-header-block-start-spacing - ); - --spectrum-table-section-header-block-end-spacing: var( - --system-table-size-xl-section-header-block-end-spacing - ); - --spectrum-table-disclosure-icon-size: var( - --system-table-size-xl-disclosure-icon-size - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-to-text: var( - --system-table-size-xl-thumbnail-to-text - ); - --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size); +:host([size="xl"]) { + --spectrum-table-min-header-height: var(--system-table-size-xl-min-header-height); + --spectrum-table-header-top-to-text: var(--system-table-size-xl-header-top-to-text); + --spectrum-table-header-bottom-to-text: var(--system-table-size-xl-header-bottom-to-text); + --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-size-xl-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-size-xl-row-bottom-to-text); + --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text); + --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size); + --spectrum-table-header-checkbox-block-spacing: var(--system-table-size-xl-header-checkbox-block-spacing); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-size-xl-row-checkbox-block-spacing); + --spectrum-table-section-header-min-height: var(--system-table-size-xl-section-header-min-height); + --spectrum-table-section-header-block-start-spacing: var(--system-table-size-xl-section-header-block-start-spacing); + --spectrum-table-section-header-block-end-spacing: var(--system-table-size-xl-section-header-block-end-spacing); + --spectrum-table-disclosure-icon-size: var(--system-table-size-xl-disclosure-icon-size); + --spectrum-table-thumbnail-block-spacing: var(--system-table-size-xl-thumbnail-block-spacing); + --spectrum-table-thumbnail-to-text: var(--system-table-size-xl-thumbnail-to-text); + --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size); } -:host([density='compact']) { - --spectrum-table-min-row-height: var(--system-table-compact-min-row-height); - --spectrum-table-row-top-to-text: var( - --system-table-compact-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size); +:host([density="compact"]) { + --spectrum-table-min-row-height: var(--system-table-compact-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-compact-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-compact-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-compact-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-compact-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size); } -:host([density='compact'][size='s']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-s-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-s-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-s-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-s-thumbnail-size - ); +:host([density="compact"][size="s"]) { + --spectrum-table-min-row-height: var(--system-table-compact-size-s-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-compact-size-s-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-compact-size-s-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-compact-size-s-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-compact-size-s-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-compact-size-s-thumbnail-size); } -:host([density='compact'][size='l']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-l-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-l-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-l-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-l-thumbnail-size - ); +:host([density="compact"][size="l"]) { + --spectrum-table-min-row-height: var(--system-table-compact-size-l-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-compact-size-l-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-compact-size-l-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-compact-size-l-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-compact-size-l-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-compact-size-l-thumbnail-size); } -:host([density='compact'][size='xl']) { - --spectrum-table-min-row-height: var( - --system-table-compact-size-xl-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-compact-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-compact-size-xl-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-compact-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-compact-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-compact-size-xl-thumbnail-size - ); +:host([density="compact"][size="xl"]) { + --spectrum-table-min-row-height: var(--system-table-compact-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-compact-size-xl-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-compact-size-xl-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-compact-size-xl-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-compact-size-xl-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-compact-size-xl-thumbnail-size); } -:host([density='spacious']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-thumbnail-size - ); +:host([density="spacious"]) { + --spectrum-table-min-row-height: var(--system-table-spacious-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-spacious-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-spacious-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-spacious-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-spacious-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-spacious-thumbnail-size); } -:host([density='spacious'][size='s']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-s-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-s-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-s-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-s-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-s-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-s-thumbnail-size - ); +:host([density="spacious"][size="s"]) { + --spectrum-table-min-row-height: var(--system-table-spacious-size-s-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-spacious-size-s-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-spacious-size-s-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-spacious-size-s-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-spacious-size-s-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-spacious-size-s-thumbnail-size); } -:host([density='spacious'][size='l']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-l-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-l-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-l-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-l-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-l-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-l-thumbnail-size - ); +:host([density="spacious"][size="l"]) { + --spectrum-table-min-row-height: var(--system-table-spacious-size-l-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-spacious-size-l-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-spacious-size-l-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-spacious-size-l-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-spacious-size-l-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-spacious-size-l-thumbnail-size); } -:host([density='spacious'][size='xl']) { - --spectrum-table-min-row-height: var( - --system-table-spacious-size-xl-min-row-height - ); - --spectrum-table-row-top-to-text: var( - --system-table-spacious-size-xl-row-top-to-text - ); - --spectrum-table-row-bottom-to-text: var( - --system-table-spacious-size-xl-row-bottom-to-text - ); - --spectrum-table-row-checkbox-block-spacing: var( - --system-table-spacious-size-xl-row-checkbox-block-spacing - ); - --spectrum-table-thumbnail-block-spacing: var( - --system-table-spacious-size-xl-thumbnail-block-spacing - ); - --spectrum-table-thumbnail-size: var( - --system-table-spacious-size-xl-thumbnail-size - ); +:host([density="spacious"][size="xl"]) { + --spectrum-table-min-row-height: var(--system-table-spacious-size-xl-min-row-height); + --spectrum-table-row-top-to-text: var(--system-table-spacious-size-xl-row-top-to-text); + --spectrum-table-row-bottom-to-text: var(--system-table-spacious-size-xl-row-bottom-to-text); + --spectrum-table-row-checkbox-block-spacing: var(--system-table-spacious-size-xl-row-checkbox-block-spacing); + --spectrum-table-thumbnail-block-spacing: var(--system-table-spacious-size-xl-thumbnail-block-spacing); + --spectrum-table-thumbnail-size: var(--system-table-spacious-size-xl-thumbnail-size); } :host([emphasized]) { - --spectrum-table-selected-cell-background-color: var( - --system-table-emphasized-selected-cell-background-color - ); - --spectrum-table-selected-cell-background-color-focus: var( - --system-table-emphasized-selected-cell-background-color-focus - ); + --spectrum-table-selected-cell-background-color: var(--system-table-emphasized-selected-cell-background-color); + --spectrum-table-selected-cell-background-color-focus: var(--system-table-emphasized-selected-cell-background-color-focus); } :host([quiet]) { - --spectrum-table-border-radius: var(--system-table-quiet-border-radius); - --spectrum-table-outer-border-inline-width: var( - --system-table-quiet-outer-border-inline-width - ); - --spectrum-table-header-background-color: var( - --system-table-quiet-header-background-color - ); - --spectrum-table-row-background-color: var( - --system-table-quiet-row-background-color - ); + --spectrum-table-border-radius: var(--system-table-quiet-border-radius); + --spectrum-table-outer-border-inline-width: var(--system-table-quiet-outer-border-inline-width); + --spectrum-table-header-background-color: var(--system-table-quiet-header-background-color); + --spectrum-table-row-background-color: var(--system-table-quiet-row-background-color); } + diff --git a/packages/tabs/src/spectrum-tab.css b/packages/tabs/src/spectrum-tab.css index 116924dce8..e1a62f9707 100644 --- a/packages/tabs/src/spectrum-tab.css +++ b/packages/tabs/src/spectrum-tab.css @@ -1,164 +1,97 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - box-sizing: border-box; - block-size: calc( - var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - z-index: 1; - white-space: nowrap; - color: var( - --highcontrast-tabs-color, - var(--mod-tabs-color, var(--spectrum-tabs-color)) - ); - transition: color - var( - --mod-tabs-animation-duration, - var(--spectrum-tabs-animation-duration) - ) - ease-out; - cursor: pointer; - outline: none; - -webkit-text-decoration: none; - text-decoration: none; - position: relative; + box-sizing: border-box; + block-size: calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); + z-index: 1; + white-space: nowrap; + color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-tabs-color))); + transition: color var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) ease-out; + cursor: pointer; + outline: none; + -webkit-text-decoration: none; + text-decoration: none; + position: relative; } -::slotted([slot='icon']) { - block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); - inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); - margin-block-start: var( - --mod-tabs-top-to-icon, - var(--spectrum-tabs-top-to-icon) - ); +::slotted([slot="icon"]) { + block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); + inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size)); + margin-block-start: var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon)); } -[name='icon'] + #item-label { - margin-inline-start: var( - --mod-tabs-icon-to-text, - var(--spectrum-tabs-icon-to-text) - ); +[name="icon"] + #item-label { + margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text)); } :host:before { - content: ''; - box-sizing: border-box; - block-size: calc( - 100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) - ); - inline-size: calc( - 100% + - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * 2 - ); - border: var( - --mod-tabs-focus-indicator-width, - var(--spectrum-tabs-focus-indicator-width) - ) - solid transparent; - border-radius: var( - --mod-tabs-focus-indicator-border-radius, - var(--spectrum-tabs-focus-indicator-border-radius) - ); - pointer-events: none; - position: absolute; - inset-block-start: calc( - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2 - ); - inset-inline-start: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); - inset-inline-end: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); + content: ""; + box-sizing: border-box; + block-size: calc(100.0% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text))); + inline-size: calc(100.0% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2); + border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) solid transparent; + border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius)); + pointer-events: none; + position: absolute; + inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2); + inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1); + inset-inline-end: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1); } @media (hover: hover) { - :host(:hover) { - color: var( - --highcontrast-tabs-color-hover, - var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)) - ); - } + :host(:hover) { + color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))); + } } :host([selected]) { - color: var( - --highcontrast-tabs-color-selected, - var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) - ); + color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))); } :host([disabled]) { - cursor: default; - color: var( - --highcontrast-tabs-color-disabled, - var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) - ); + cursor: default; + color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))); } :host([disabled]) #item-label { - cursor: default; + cursor: default; } :host(:focus-visible) { - color: var( - --highcontrast-tabs-color-key-focus, - var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)) - ); + color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))); } :host(:focus-visible):before { - border-color: var( - --highcontrast-tabs-focus-indicator-color, - var( - --mod-tabs-focus-indicator-color, - var(--spectrum-tabs-focus-indicator-color) - ) - ); + border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))); } #item-label { - cursor: pointer; - vertical-align: top; - font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family)); - font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style)); - font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size)); - font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight)); - line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height)); - margin-block-start: var( - --mod-tabs-top-to-text, - var(--spectrum-tabs-top-to-text) - ); - margin-block-end: var( - --mod-tabs-bottom-to-text, - var(--spectrum-tabs-bottom-to-text) - ); - -webkit-text-decoration: none; - text-decoration: none; - display: inline-block; + cursor: pointer; + vertical-align: top; + font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family)); + font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style)); + font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size)); + font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight)); + line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height)); + margin-block-start: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)); + margin-block-end: var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text)); + -webkit-text-decoration: none; + text-decoration: none; + display: inline-block; } #item-label:empty { - display: none; + display: none; } + diff --git a/packages/tabs/src/spectrum-tabs-sizes.css b/packages/tabs/src/spectrum-tabs-sizes.css index 0794c4005b..8497570447 100644 --- a/packages/tabs/src/spectrum-tabs-sizes.css +++ b/packages/tabs/src/spectrum-tabs-sizes.css @@ -1,69 +1,34 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='s']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-small) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-small) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-small) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-small) - ); +:host([size="s"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small)); + --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); + --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small)); + --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small)); } -:host([size='l']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-large) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-large) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-large) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-large) - ); +:host([size="l"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large)); + --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); + --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large)); + --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large)); } -:host([size='xl']) #list.spectrum-Tabs--compact { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-extra-large) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-extra-large) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-extra-large) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large) - ); +:host([size="xl"]) #list.spectrum-Tabs--compact { + --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large)); + --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); + --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large)); + --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)); } + diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css index b1f3f3a08c..c8404c988a 100644 --- a/packages/tabs/src/spectrum-tabs.css +++ b/packages/tabs/src/spectrum-tabs.css @@ -1,290 +1,167 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - z-index: 0; - vertical-align: top; - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - margin: 0; - padding-block: 0; - display: flex; - position: relative; + z-index: 0; + vertical-align: top; + background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); + margin: 0; + padding-block: 0; + display: flex; + position: relative; } :host([emphasized]) #list { - --mod-tabs-color-selected: var( - --mod-tabs-color-selected-emphasized, - var(--spectrum-tabs-color-selected) - ); - --mod-tabs-color-hover: var( - --mod-tabs-color-hover-emphasized, - var(--spectrum-tabs-color-hover) - ); - --mod-tabs-color-key-focus: var( - --mod-tabs-color-key-focus-emphasized, - var(--spectrum-tabs-color-key-focus) - ); - --mod-tabs-selection-indicator-color: var( - --mod-tabs-selection-indicator-color-emphasized, - var(--spectrum-tabs-selection-indicator-color) - ); + --mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-tabs-color-selected)); + --mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-tabs-color-hover)); + --mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-tabs-color-key-focus)); + --mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-tabs-selection-indicator-color)); } ::slotted([selected]:not([slot])) { - color: var( - --highcontrast-tabs-color-selected, - var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)) - ); + color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))); } ::slotted([disabled]:not([slot])) { - cursor: default; - color: var( - --highcontrast-tabs-color-disabled, - var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)) - ); + cursor: default; + color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))); } #selection-indicator { - background-color: var( - --highcontrast-tabs-selection-indicator-color, - var( - --mod-tabs-selection-indicator-color, - var(--spectrum-tabs-selection-indicator-color) - ) - ); - z-index: 0; - transition: transform - var( - --mod-tabs-animation-duration, - var(--spectrum-tabs-animation-duration) - ) - var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); - transform-origin: 0 0; - border-radius: var( - --mod-tabs-divider-border-radius, - var(--spectrum-tabs-divider-border-radius) - ); - position: absolute; - inset-inline-start: 0; + background-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))); + z-index: 0; + transition: transform var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease)); + transform-origin: 0 0; + border-radius: var(--mod-tabs-divider-border-radius, var(--spectrum-tabs-divider-border-radius)); + position: absolute; + inset-inline-start: 0; } -:host([direction^='horizontal']) #list { - align-items: center; +:host([direction^="horizontal"]) #list { + align-items: center; } -:host([direction^='horizontal']) #list ::slotted(:not([slot])) { - vertical-align: top; +:host([direction^="horizontal"]) #list ::slotted(:not([slot])) { + vertical-align: top; } -:host([direction^='horizontal']) ::slotted(:not(:first-child)) { - margin-inline-start: var( - --mod-tabs-item-horizontal-spacing, - var(--spectrum-tabs-item-horizontal-spacing) - ); +:host([direction^="horizontal"]) ::slotted(:not(:first-child)) { + margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing)); } -:host([direction^='horizontal']) #list #selection-indicator { - block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); - position: absolute; - inset-block-end: 0; +:host([direction^="horizontal"]) #list #selection-indicator { + block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); + position: absolute; + inset-block-end: 0; } -:host([direction^='horizontal'][compact]) #list { - box-sizing: initial; - align-items: end; +:host([direction^="horizontal"][compact]) #list { + box-sizing: initial; + align-items: end; } :host([quiet]) #list { - background: none; - border-color: #0000; - display: inline-flex; + background: none; + border-color: #0000; + display: inline-flex; } :host([quiet]) #selection-indicator { - padding-inline-start: var( - --mod-tabs-start-to-item-quiet, - var(--spectrum-tabs-start-to-item-quiet) - ); + padding-inline-start: var(--mod-tabs-start-to-item-quiet, var(--spectrum-tabs-start-to-item-quiet)); } -:host([direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); +:host([direction^="vertical"]) #list { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); } -:host([direction^='vertical']) #list, -:host([direction^='vertical-right']) #list { - flex-direction: column; - padding: 0; - display: inline-flex; +:host([direction^="vertical"]) #list , :host([direction^="vertical-right"]) #list { + flex-direction: column; + padding: 0; + display: inline-flex; } -:host([direction^='vertical-right'][quiet]) #list, -:host([direction^='vertical'][quiet]) #list { - border-color: #0000; +:host([direction^="vertical-right"][quiet]) #list , :host([direction^="vertical"][quiet]) #list { + border-color: #0000; } -:host([direction^='vertical']) #list ::slotted(:not([slot])), -:host([direction^='vertical-right']) #list ::slotted(:not([slot])) { - block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); - line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); - margin-block-end: var( - --mod-tabs-item-vertical-spacing, - var(--spectrum-tabs-item-vertical-spacing) - ); - margin-inline-start: var( - --mod-tabs-start-to-edge, - var(--spectrum-tabs-start-to-edge) - ); - margin-inline-end: var( - --mod-tabs-start-to-edge, - var(--spectrum-tabs-start-to-edge) - ); - padding-block: 0; +:host([direction^="vertical"]) #list ::slotted(:not([slot])), :host([direction^="vertical-right"]) #list ::slotted(:not([slot])) { + block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); + line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)); + margin-block-end: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tabs-item-vertical-spacing)); + margin-inline-start: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge)); + margin-inline-end: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge)); + padding-block: 0; } -:host([direction^='vertical']) #list ::slotted(:not([slot])):before, -:host([direction^='vertical-right']) #list ::slotted(:not([slot])):before { - inset-inline-start: calc( - var( - --mod-tabs-focus-indicator-gap, - var(--spectrum-tabs-focus-indicator-gap) - ) * -1 - ); +:host([direction^="vertical"]) #list ::slotted(:not([slot])):before, :host([direction^="vertical-right"]) #list ::slotted(:not([slot])):before { + inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1); } -:host([direction^='vertical']) #list #selection-indicator, -:host([direction^='vertical-right']) #list #selection-indicator { - inline-size: var( - --mod-tabs-divider-size, - var(--spectrum-tabs-divider-size) - ); - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; +:host([direction^="vertical"]) #list #selection-indicator, :host([direction^="vertical-right"]) #list #selection-indicator { + inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)); + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; } -:host([direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical-right, - left - ); +:host([direction^="vertical-right"]) #list { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left); } -:host([direction^='vertical-right']) #list #selection-indicator { - inset-inline: auto 0; +:host([direction^="vertical-right"]) #list #selection-indicator { + inset-inline: auto 0; } -:host([direction^='vertical']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - left - ); +:host([direction^="vertical"]) #list:dir(rtl), :host([dir="rtl"][direction^="vertical"]) #list { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left); } -:host([direction^='vertical-right']) #list:dir(rtl), -:host([dir='rtl'][direction^='vertical-right']) #list { - --mod-tabs-list-background-direction: var( - --mod-tabs-list-background-direction-vertical, - right - ); +:host([direction^="vertical-right"]) #list:dir(rtl), :host([dir="rtl"][direction^="vertical-right"]) #list { + --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right); } :host([compact]) #list { - --spectrum-tabs-item-height: var( - --mod-tabs-item-height-compact, - var(--spectrum-tab-item-compact-height-medium) - ); - --spectrum-tabs-top-to-text: var( - --mod-tabs-top-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --spectrum-tabs-bottom-to-text: var( - --mod-tabs-bottom-to-text-compact, - var(--spectrum-tab-item-top-to-text-compact-medium) - ); - --spectrum-tabs-top-to-icon: var( - --mod-tabs-top-to-icon-compact, - var(--spectrum-tab-item-top-to-workflow-icon-compact-medium) - ); + --spectrum-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium)); + --spectrum-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); + --spectrum-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium)); + --spectrum-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)); } @media (forced-colors: active) { - #list { - --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); - --highcontrast-tabs-selection-indicator-color: Highlight; - --highcontrast-tabs-focus-indicator-color: CanvasText; - --highcontrast-tabs-focus-indicator-background-color: Highlight; - --highcontrast-tabs-color: ButtonText; - --highcontrast-tabs-color-hover: ButtonText; - --highcontrast-tabs-color-selected: HighlightText; - --highcontrast-tabs-color-key-focus: ButtonText; - --highcontrast-tabs-color-disabled: GrayText; - forced-color-adjust: none; - } - - #list ::slotted([selected]:not([slot])):before { - background-color: var( - --highcontrast-tabs-focus-indicator-background-color - ); - } - - :host([direction^='vertical'][compact]) - #list - #list - ::slotted(:not([slot])):before { - block-size: 100%; - inset-block-start: 0; - } + #list { + --highcontrast-tabs-divider-background-color: var(--spectrum-gray-500); + --highcontrast-tabs-selection-indicator-color: Highlight; + --highcontrast-tabs-focus-indicator-color: CanvasText; + --highcontrast-tabs-focus-indicator-background-color: Highlight; + --highcontrast-tabs-color: ButtonText; + --highcontrast-tabs-color-hover: ButtonText; + --highcontrast-tabs-color-selected: HighlightText; + --highcontrast-tabs-color-key-focus: ButtonText; + --highcontrast-tabs-color-disabled: GrayText; + forced-color-adjust: none; + } + + #list ::slotted([selected]:not([slot])):before { + background-color: var(--highcontrast-tabs-focus-indicator-background-color); + } + + :host([direction^="vertical"][compact]) #list #list ::slotted(:not([slot])):before { + block-size: 100%; + inset-block-start: 0; + } - :host([quiet]) #list { - background: linear-gradient( - to - var( - --mod-tabs-list-background-direction, - var(--spectrum-tabs-list-background-direction) - ), - var( - --highcontrast-tabs-divider-background-color, - var( - --mod-tabs-divider-background-color, - var(--spectrum-tabs-divider-background-color) - ) - ) - 0 - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), - transparent - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)) - ); - } + :host([quiet]) #list { + background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size))); + } } + diff --git a/packages/tabs/src/tabs-overrides.css b/packages/tabs/src/tabs-overrides.css index 0b371c8780..9dbf5154dd 100644 --- a/packages/tabs/src/tabs-overrides.css +++ b/packages/tabs/src/tabs-overrides.css @@ -1,76 +1,53 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #list { - --spectrum-tabs-font-weight: var(--system-tabs-font-weight); - --spectrum-tabs-item-height: var(--system-tabs-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); - --spectrum-tabs-color: var(--system-tabs-color); - --spectrum-tabs-color-selected: var(--system-tabs-color-selected); - --spectrum-tabs-color-hover: var(--system-tabs-color-hover); - --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); - --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); - --spectrum-tabs-font-family: var(--system-tabs-font-family); - --spectrum-tabs-font-style: var(--system-tabs-font-style); - --spectrum-tabs-font-size: var(--system-tabs-font-size); - --spectrum-tabs-line-height: var(--system-tabs-line-height); - --spectrum-tabs-focus-indicator-width: var( - --system-tabs-focus-indicator-width - ); - --spectrum-tabs-focus-indicator-border-radius: var( - --system-tabs-focus-indicator-border-radius - ); - --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); - --spectrum-tabs-focus-indicator-color: var( - --system-tabs-focus-indicator-color - ); - --spectrum-tabs-selection-indicator-color: var( - --system-tabs-selection-indicator-color - ); - --spectrum-tabs-list-background-direction: var( - --system-tabs-list-background-direction - ); - --spectrum-tabs-divider-background-color: var( - --system-tabs-divider-background-color - ); - --spectrum-tabs-divider-size: var(--system-tabs-divider-size); - --spectrum-tabs-divider-border-radius: var( - --system-tabs-divider-border-radius - ); - --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); - --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); + --spectrum-tabs-font-weight: var(--system-tabs-font-weight); + --spectrum-tabs-item-height: var(--system-tabs-item-height); + --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-item-horizontal-spacing); + --spectrum-tabs-item-vertical-spacing: var(--system-tabs-item-vertical-spacing); + --spectrum-tabs-start-to-edge: var(--system-tabs-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-top-to-icon); + --spectrum-tabs-color: var(--system-tabs-color); + --spectrum-tabs-color-selected: var(--system-tabs-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-color-hover); + --spectrum-tabs-color-key-focus: var(--system-tabs-color-key-focus); + --spectrum-tabs-color-disabled: var(--system-tabs-color-disabled); + --spectrum-tabs-font-family: var(--system-tabs-font-family); + --spectrum-tabs-font-style: var(--system-tabs-font-style); + --spectrum-tabs-font-size: var(--system-tabs-font-size); + --spectrum-tabs-line-height: var(--system-tabs-line-height); + --spectrum-tabs-focus-indicator-width: var(--system-tabs-focus-indicator-width); + --spectrum-tabs-focus-indicator-border-radius: var(--system-tabs-focus-indicator-border-radius); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-focus-indicator-gap); + --spectrum-tabs-focus-indicator-color: var(--system-tabs-focus-indicator-color); + --spectrum-tabs-selection-indicator-color: var(--system-tabs-selection-indicator-color); + --spectrum-tabs-list-background-direction: var(--system-tabs-list-background-direction); + --spectrum-tabs-divider-background-color: var(--system-tabs-divider-background-color); + --spectrum-tabs-divider-size: var(--system-tabs-divider-size); + --spectrum-tabs-divider-border-radius: var(--system-tabs-divider-border-radius); + --spectrum-tabs-animation-duration: var(--system-tabs-animation-duration); + --spectrum-tabs-animation-ease: var(--system-tabs-animation-ease); } :host([emphasized]) #list { - --spectrum-tabs-color-selected: var( - --system-tabs-emphasized-color-selected - ); - --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); - --spectrum-tabs-color-key-focus: var( - --system-tabs-emphasized-color-key-focus - ); - --spectrum-tabs-selection-indicator-color: var( - --system-tabs-emphasized-selection-indicator-color - ); + --spectrum-tabs-color-selected: var(--system-tabs-emphasized-color-selected); + --spectrum-tabs-color-hover: var(--system-tabs-emphasized-color-hover); + --spectrum-tabs-color-key-focus: var(--system-tabs-emphasized-color-key-focus); + --spectrum-tabs-selection-indicator-color: var(--system-tabs-emphasized-selection-indicator-color); } + diff --git a/packages/tabs/src/tabs-sizes-overrides.css b/packages/tabs/src/tabs-sizes-overrides.css index b1ac5fdf04..2bbdfe62cd 100644 --- a/packages/tabs/src/tabs-sizes-overrides.css +++ b/packages/tabs/src/tabs-sizes-overrides.css @@ -1,72 +1,55 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([size='s']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-s-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-s-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-s-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); +:host([size="s"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-s-item-height); + --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-s-item-horizontal-spacing); + --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-s-item-vertical-spacing); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-s-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-s-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-s-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-s-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-s-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-s-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-s-focus-indicator-gap); + --spectrum-tabs-font-size: var(--system-tabs-size-s-font-size); } -:host([size='l']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-l-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-l-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-l-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); +:host([size="l"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-l-item-height); + --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-l-item-horizontal-spacing); + --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-l-item-vertical-spacing); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-l-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-l-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-l-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-l-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-l-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-l-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-l-focus-indicator-gap); + --spectrum-tabs-font-size: var(--system-tabs-size-l-font-size); } -:host([size='xl']) #list { - --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); - --spectrum-tabs-item-horizontal-spacing: var( - --system-tabs-size-xl-item-horizontal-spacing - ); - --spectrum-tabs-item-vertical-spacing: var( - --system-tabs-size-xl-item-vertical-spacing - ); - --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); - --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); - --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); - --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); - --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); - --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); - --spectrum-tabs-focus-indicator-gap: var( - --system-tabs-size-xl-focus-indicator-gap - ); - --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); +:host([size="xl"]) #list { + --spectrum-tabs-item-height: var(--system-tabs-size-xl-item-height); + --spectrum-tabs-item-horizontal-spacing: var(--system-tabs-size-xl-item-horizontal-spacing); + --spectrum-tabs-item-vertical-spacing: var(--system-tabs-size-xl-item-vertical-spacing); + --spectrum-tabs-start-to-edge: var(--system-tabs-size-xl-start-to-edge); + --spectrum-tabs-top-to-text: var(--system-tabs-size-xl-top-to-text); + --spectrum-tabs-bottom-to-text: var(--system-tabs-size-xl-bottom-to-text); + --spectrum-tabs-icon-size: var(--system-tabs-size-xl-icon-size); + --spectrum-tabs-icon-to-text: var(--system-tabs-size-xl-icon-to-text); + --spectrum-tabs-top-to-icon: var(--system-tabs-size-xl-top-to-icon); + --spectrum-tabs-focus-indicator-gap: var(--system-tabs-size-xl-focus-indicator-gap); + --spectrum-tabs-font-size: var(--system-tabs-size-xl-font-size); } + diff --git a/packages/tags/src/spectrum-tag.css b/packages/tags/src/spectrum-tag.css index 403695cb53..f195a6ecec 100644 --- a/packages/tags/src/spectrum-tag.css +++ b/packages/tags/src/spectrum-tag.css @@ -1,749 +1,287 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - border-color: var( - --highcontrast-tag-border-color, - var(--mod-tag-border-color, var(--spectrum-tag-border-color)) - ); - background-color: var( - --highcontrast-tag-background-color, - var(--mod-tag-background-color, var(--spectrum-tag-background-color)) - ); - color: var( - --highcontrast-tag-content-color, - var(--mod-tag-content-color, var(--spectrum-tag-content-color)) - ); - border-radius: var( - --mod-tag-corner-radius, - var(--spectrum-tag-corner-radius) - ); - border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); - block-size: var(--mod-tag-height, var(--spectrum-tag-height)); - box-sizing: border-box; - vertical-align: bottom; - max-inline-size: 100%; - -webkit-user-select: none; - user-select: none; - transition: - border-color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - box-shadow - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out, - background-color - var( - --mod-tag-animation-duration, - var(--spectrum-tag-animation-duration) - ) - ease-in-out; - border-style: solid; - outline: none; - align-items: center; - padding-inline-start: calc( - var( - --mod-tag-spacing-inline-start, - var(--spectrum-tag-spacing-inline-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-inline-end: 0; - display: inline-flex; - position: relative; + border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color))); + background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color))); + color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color))); + border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)); + border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width)); + block-size: var(--mod-tag-height, var(--spectrum-tag-height)); + box-sizing: border-box; + vertical-align: bottom; + max-inline-size: 100%; + -webkit-user-select: none; + user-select: none; + transition: border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out, background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out; + border-style: solid; + outline: none; + align-items: center; + padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-inline-end: 0; + display: inline-flex; + position: relative; } -::slotted([slot='icon']) { - block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); - flex-shrink: 0; - margin-block-start: calc( - var( - --mod-tag-icon-spacing-block-start, - var(--spectrum-tag-icon-spacing-block-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-block-end: calc( - var( - --mod-tag-icon-spacing-block-end, - var(--spectrum-tag-icon-spacing-block-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-inline-end: var( - --mod-tag-icon-spacing-inline-end, - var(--spectrum-tag-icon-spacing-inline-end) - ); +::slotted([slot="icon"]) { + block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size)); + flex-shrink: 0; + margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end)); } -::slotted([slot='avatar']) { - margin-block-start: calc( - var( - --mod-tag-avatar-spacing-block-start, - var(--spectrum-tag-avatar-spacing-block-start) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-block-end: calc( - var( - --mod-tag-avatar-spacing-block-end, - var(--spectrum-tag-avatar-spacing-block-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - margin-inline-end: var( - --mod-tag-avatar-spacing-inline-end, - var(--spectrum-tag-avatar-spacing-inline-end) - ); +::slotted([slot="avatar"]) { + margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end)); } .clear-button { - --mod-clear-button-width: fit-content; - --spectrum-clearbutton-fill-size: fit-content; - --spectrum-clearbutton-fill-background-color: transparent; - box-sizing: border-box; - color: currentColor; - margin-inline-start: calc( - var( - --mod-tag-clear-button-spacing-inline-start, - var(--spectrum-tag-clear-button-spacing-inline-start) - ) + - var( - --mod-tag-label-spacing-inline-end, - var(--spectrum-tag-label-spacing-inline-end) - ) * -1 - ); - margin-inline-end: calc( - var( - --mod-tag-clear-button-spacing-inline-end, - var(--spectrum-tag-clear-button-spacing-inline-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-start: calc( - var( - --mod-tag-clear-button-spacing-block, - var(--spectrum-tag-clear-button-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-end: calc( - var( - --mod-tag-clear-button-spacing-block, - var(--spectrum-tag-clear-button-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); + --mod-clear-button-width: fit-content; + --spectrum-clearbutton-fill-size: fit-content; + --spectrum-clearbutton-fill-background-color: transparent; + box-sizing: border-box; + color: currentColor; + margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1); + margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); } .clear-button .spectrum-ClearButton-fill { - background-color: var( - --mod-clearbutton-fill-background-color, - var(--spectrum-clearbutton-fill-background-color) - ); - inline-size: var( - --mod-clearbutton-fill-size, - var(--spectrum-clearbutton-fill-size) - ); - block-size: var( - --mod-clearbutton-fill-size, - var(--spectrum-clearbutton-fill-size) - ); + background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color)); + inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); + block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size)); } .label { - block-size: 100%; - box-sizing: border-box; - line-height: var( - --mod-tag-label-line-height, - var(--spectrum-tag-label-line-height) - ); - font-weight: var( - --mod-tag-label-font-weight, - var(--spectrum-tag-label-font-weight) - ); - font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); - cursor: default; - white-space: nowrap; - text-overflow: ellipsis; - flex: auto; - margin-inline-end: calc( - var( - --mod-tag-label-spacing-inline-end, - var(--spectrum-tag-label-spacing-inline-end) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - padding-block-start: calc( - var( - --mod-tag-label-spacing-block, - var(--spectrum-tag-label-spacing-block) - ) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - overflow: hidden; + block-size: 100%; + box-sizing: border-box; + line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height)); + font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight)); + font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size)); + cursor: default; + white-space: nowrap; + text-overflow: ellipsis; + flex: auto; + margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + overflow: hidden; } :host(:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-active, - var( - --mod-tag-border-color-active, - var(--spectrum-tag-border-color-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-active, - var( - --mod-tag-background-color-active, - var(--spectrum-tag-background-color-active) - ) - ); - color: var( - --highcontrast-tag-content-color-active, - var( - --mod-tag-content-color-active, - var(--spectrum-tag-content-color-active) - ) - ); + border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))); + background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))); + color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))); } -:host([focused]), -:host(:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-focus, - var( - --mod-tag-border-color-focus, - var(--spectrum-tag-border-color-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-focus, - var( - --mod-tag-background-color-focus, - var(--spectrum-tag-background-color-focus) - ) - ); - color: var( - --highcontrast-tag-content-color-focus, - var( - --mod-tag-content-color-focus, - var(--spectrum-tag-content-color-focus) - ) - ); +:host([focused]), :host(:focus-visible) { + border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))); + background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))); + color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))); } -:host([focused]):after, -:host(:focus-visible):after { - content: ''; - border-color: var( - --highcontrast-tag-focus-ring-color, - var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color)) - ); - border-radius: calc( - var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - ); - border-width: var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ); - pointer-events: none; - border-style: solid; - display: inline-block; - position: absolute; - inset-block-start: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-block-end: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-inline-start: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); - inset-inline-end: calc( - var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - - var( - --mod-tag-focus-ring-thickness, - var(--spectrum-tag-focus-ring-thickness) - ) - ); +:host([focused]):after, :host(:focus-visible):after { + content: ""; + border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))); + border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width))); + border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)); + pointer-events: none; + border-style: solid; + display: inline-block; + position: absolute; + inset-block-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-block-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-inline-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); + inset-inline-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness))); } :host([selected]) { - border-color: var( - --highcontrast-tag-border-color-selected, - var( - --mod-tag-border-color-selected, - var(--spectrum-tag-border-color-selected) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected, - var( - --mod-tag-background-color-selected, - var(--spectrum-tag-background-color-selected) - ) - ); - color: var( - --highcontrast-tag-content-color-selected, - var( - --mod-tag-content-color-selected, - var(--spectrum-tag-content-color-selected) - ) - ); + border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))); + background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))); + color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); } :host([selected]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-selected-active, - var( - --mod-tag-border-color-selected-active, - var(--spectrum-tag-border-color-selected-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-active, - var( - --mod-tag-background-color-selected-active, - var(--spectrum-tag-background-color-selected-active) - ) - ); + border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))); + background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))); } -:host([selected][focused]), -:host([selected]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-selected-focus, - var( - --mod-tag-border-color-selected-focus, - var(--spectrum-tag-border-color-selected-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-focus, - var( - --mod-tag-background-color-selected-focus, - var(--spectrum-tag-background-color-selected-focus) - ) - ); +:host([selected][focused]), :host([selected]:focus-visible) { + border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))); + background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))); } :host([invalid]) { - border-color: var( - --highcontrast-tag-border-color-invalid, - var( - --mod-tag-border-color-invalid, - var(--spectrum-tag-border-color-invalid) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid, - var( - --mod-tag-content-color-invalid, - var(--spectrum-tag-content-color-invalid) - ) - ); + border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))); + color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))); } :host([invalid]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-invalid-active, - var( - --mod-tag-border-color-invalid-active, - var(--spectrum-tag-border-color-invalid-active) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-active, - var( - --mod-tag-content-color-invalid-active, - var(--spectrum-tag-content-color-invalid-active) - ) - ); + border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))); + color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))); } -:host([invalid][focused]), -:host([invalid]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-invalid-focus, - var( - --mod-tag-border-color-invalid-focus, - var(--spectrum-tag-border-color-invalid-focus) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-focus, - var( - --mod-tag-content-color-invalid-focus, - var(--spectrum-tag-content-color-invalid-focus) - ) - ); +:host([invalid][focused]), :host([invalid]:focus-visible) { + border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))); + color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))); } :host([invalid][selected]) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected, - var( - --mod-tag-border-color-invalid-selected, - var(--spectrum-tag-border-color-invalid-selected) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected, - var( - --mod-tag-background-color-invalid-selected, - var(--spectrum-tag-background-color-invalid-selected) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-selected, - var( - --mod-tag-content-color-invalid-selected, - var(--spectrum-tag-content-color-invalid-selected) - ) - ); + border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))); + background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))); + color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); } :host([invalid][selected]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-active, - var( - --mod-tag-border-color-invalid-selected-active, - var(--spectrum-tag-border-color-invalid-selected-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-active, - var( - --mod-tag-background-color-invalid-selected-active, - var(--spectrum-tag-background-color-invalid-selected-active) - ) - ); + border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))); } -:host([invalid][selected][focused]), -:host([invalid][selected]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-focus, - var( - --mod-tag-border-color-invalid-selected-focus, - var(--spectrum-tag-border-color-invalid-selected-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-focus, - var( - --mod-tag-background-color-invalid-selected-focus, - var(--spectrum-tag-background-color-invalid-selected-focus) - ) - ); +:host([invalid][selected][focused]), :host([invalid][selected]:focus-visible) { + border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))); } :host([emphasized]) { - border-color: var( - --highcontrast-tag-border-color-emphasized, - var( - --mod-tag-border-color-emphasized, - var(--spectrum-tag-border-color-emphasized) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized, - var( - --mod-tag-background-color-emphasized, - var(--spectrum-tag-background-color-emphasized) - ) - ); - color: var( - --highcontrast-tag-content-color-emphasized, - var( - --mod-tag-content-color-emphasized, - var(--spectrum-tag-content-color-emphasized) - ) - ); + border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))); + background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))); + color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); } @media (hover: hover) { - :host(:hover) { - border-color: var( - --highcontrast-tag-border-color-hover, - var( - --mod-tag-border-color-hover, - var(--spectrum-tag-border-color-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-hover, - var( - --mod-tag-background-color-hover, - var(--spectrum-tag-background-color-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-hover, - var( - --mod-tag-content-color-hover, - var(--spectrum-tag-content-color-hover) - ) - ); - } - - :host([selected]:hover) { - border-color: var( - --highcontrast-tag-border-color-selected-hover, - var( - --mod-tag-border-color-selected-hover, - var(--spectrum-tag-border-color-selected-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-selected-hover, - var( - --mod-tag-background-color-selected-hover, - var(--spectrum-tag-background-color-selected-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-selected, - var( - --mod-tag-content-color-selected, - var(--spectrum-tag-content-color-selected) - ) - ); - } - - :host([invalid]:hover) { - border-color: var( - --highcontrast-tag-border-color-invalid-hover, - var( - --mod-tag-border-color-invalid-hover, - var(--spectrum-tag-border-color-invalid-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-hover, - var( - --mod-tag-content-color-invalid-hover, - var(--spectrum-tag-content-color-invalid-hover) - ) - ); - } - - :host([invalid][selected]:hover) { - border-color: var( - --highcontrast-tag-border-color-invalid-selected-hover, - var( - --mod-tag-border-color-invalid-selected-hover, - var(--spectrum-tag-border-color-invalid-selected-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-invalid-selected-hover, - var( - --mod-tag-background-color-invalid-selected-hover, - var(--spectrum-tag-background-color-invalid-selected-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-invalid-selected, - var( - --mod-tag-content-color-invalid-selected, - var(--spectrum-tag-content-color-invalid-selected) - ) - ); - } - - :host([emphasized]:hover) { - border-color: var( - --highcontrast-tag-border-color-emphasized-hover, - var( - --mod-tag-border-color-emphasized-hover, - var(--spectrum-tag-border-color-emphasized-hover) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-hover, - var( - --mod-tag-background-color-emphasized-hover, - var(--spectrum-tag-background-color-emphasized-hover) - ) - ); - color: var( - --highcontrast-tag-content-color-emphasized, - var( - --mod-tag-content-color-emphasized, - var(--spectrum-tag-content-color-emphasized) - ) - ); - } + :host(:hover) { + border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))); + background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))); + color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))); + } + + :host([selected]:hover) { + border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))); + background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))); + color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))); + } + + :host([invalid]:hover) { + border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))); + color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))); + } + + :host([invalid][selected]:hover) { + border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))); + background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))); + color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))); + } + + :host([emphasized]:hover) { + border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))); + background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))); + color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))); + } } :host([emphasized]:is(:active, [active])) { - border-color: var( - --highcontrast-tag-border-color-emphasized-active, - var( - --mod-tag-border-color-emphasized-active, - var(--spectrum-tag-border-color-emphasized-active) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-active, - var( - --mod-tag-background-color-emphasized-active, - var(--spectrum-tag-background-color-emphasized-active) - ) - ); + border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))); + background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))); } -:host([emphasized][focused]), -:host([emphasized]:focus-visible) { - border-color: var( - --highcontrast-tag-border-color-emphasized-focus, - var( - --mod-tag-border-color-emphasized-focus, - var(--spectrum-tag-border-color-emphasized-focus) - ) - ); - background-color: var( - --highcontrast-tag-background-color-emphasized-focus, - var( - --mod-tag-background-color-emphasized-focus, - var(--spectrum-tag-background-color-emphasized-focus) - ) - ); +:host([emphasized][focused]), :host([emphasized]:focus-visible) { + border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))); + background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))); } :host([disabled]) { - border-color: var( - --highcontrast-tag-border-color-disabled, - var( - --mod-tag-border-color-disabled, - var(--spectrum-tag-border-color-disabled) - ) - ); - background-color: var( - --highcontrast-tag-background-color-disabled, - var( - --mod-tag-background-color-disabled, - var(--spectrum-tag-background-color-disabled) - ) - ); - color: var( - --highcontrast-tag-content-color-disabled, - var( - --mod-tag-content-color-disabled, - var(--spectrum-tag-content-color-disabled) - ) - ); - pointer-events: none; + border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))); + background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))); + color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))); + pointer-events: none; } -:host([disabled]) ::slotted([slot='avatar']) { - opacity: var( - --mod-avatar-opacity-disabled, - var(--spectrum-avatar-opacity-disabled) - ); +:host([disabled]) ::slotted([slot="avatar"]) { + opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled)); } @media (forced-colors: active) { - :host { - --highcontrast-tag-border-color: ButtonText; - --highcontrast-tag-border-color-hover: ButtonText; - --highcontrast-tag-border-color-active: ButtonText; - --highcontrast-tag-border-color-focus: Highlight; - --highcontrast-tag-background-color: ButtonFace; - --highcontrast-tag-background-color-hover: ButtonFace; - --highcontrast-tag-background-color-active: ButtonFace; - --highcontrast-tag-background-color-focus: ButtonFace; - --highcontrast-tag-content-color: ButtonText; - --highcontrast-tag-content-color-hover: ButtonText; - --highcontrast-tag-content-color-active: ButtonText; - --highcontrast-tag-content-color-focus: ButtonText; - --highcontrast-tag-focus-ring-color: Highlight; - forced-color-adjust: none; - } - - :host([selected]) { - --highcontrast-tag-border-color-selected: Highlight; - --highcontrast-tag-border-color-selected-hover: Highlight; - --highcontrast-tag-border-color-selected-active: Highlight; - --highcontrast-tag-border-color-selected-focus: Highlight; - --highcontrast-tag-background-color-selected: Highlight; - --highcontrast-tag-background-color-selected-hover: Highlight; - --highcontrast-tag-background-color-selected-active: Highlight; - --highcontrast-tag-background-color-selected-focus: Highlight; - --highcontrast-tag-content-color-selected: HighlightText; - } - - :host([disabled]) { - --highcontrast-tag-border-color-disabled: GrayText; - --highcontrast-tag-background-color-disabled: ButtonFace; - --highcontrast-tag-content-color-disabled: GrayText; - } - - :host([invalid]) { - --highcontrast-tag-border-color-invalid: Highlight; - --highcontrast-tag-border-color-invalid-hover: Highlight; - --highcontrast-tag-border-color-invalid-active: Highlight; - --highcontrast-tag-border-color-invalid-focus: Highlight; - --highcontrast-tag-content-color-invalid: CanvasText; - --highcontrast-tag-content-color-invalid-hover: CanvasText; - --highcontrast-tag-content-color-invalid-active: CanvasText; - --highcontrast-tag-content-color-invalid-focus: CanvasText; - } - - :host([invalid][selected]) { - --highcontrast-tag-border-color-invalid-selected: Highlight; - --highcontrast-tag-border-color-invalid-selected-hover: Highlight; - --highcontrast-tag-border-color-invalid-selected-focus: Highlight; - --highcontrast-tag-border-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected: Highlight; - --highcontrast-tag-background-color-invalid-selected-hover: Highlight; - --highcontrast-tag-background-color-invalid-selected-active: Highlight; - --highcontrast-tag-background-color-invalid-selected-focus: Highlight; - --highcontrast-tag-content-color-invalid-selected: HighlightText; - } - - :host([emphasized]) { - --highcontrast-tag-border-color-emphasized: Highlight; - --highcontrast-tag-border-color-emphasized-hover: Highlight; - --highcontrast-tag-border-color-emphasized-active: Highlight; - --highcontrast-tag-border-color-emphasized-focus: Highlight; - --highcontrast-tag-background-color-emphasized: ButtonFace; - --highcontrast-tag-background-color-emphasized-hover: ButtonFace; - --highcontrast-tag-background-color-emphasized-active: ButtonFace; - --highcontrast-tag-background-color-emphasized-focus: ButtonFace; - --highcontrast-tag-content-color-emphasized: CanvasText; - } + :host { + --highcontrast-tag-border-color: ButtonText; + --highcontrast-tag-border-color-hover: ButtonText; + --highcontrast-tag-border-color-active: ButtonText; + --highcontrast-tag-border-color-focus: Highlight; + --highcontrast-tag-background-color: ButtonFace; + --highcontrast-tag-background-color-hover: ButtonFace; + --highcontrast-tag-background-color-active: ButtonFace; + --highcontrast-tag-background-color-focus: ButtonFace; + --highcontrast-tag-content-color: ButtonText; + --highcontrast-tag-content-color-hover: ButtonText; + --highcontrast-tag-content-color-active: ButtonText; + --highcontrast-tag-content-color-focus: ButtonText; + --highcontrast-tag-focus-ring-color: Highlight; + forced-color-adjust: none; + } + + :host([selected]) { + --highcontrast-tag-border-color-selected: Highlight; + --highcontrast-tag-border-color-selected-hover: Highlight; + --highcontrast-tag-border-color-selected-active: Highlight; + --highcontrast-tag-border-color-selected-focus: Highlight; + --highcontrast-tag-background-color-selected: Highlight; + --highcontrast-tag-background-color-selected-hover: Highlight; + --highcontrast-tag-background-color-selected-active: Highlight; + --highcontrast-tag-background-color-selected-focus: Highlight; + --highcontrast-tag-content-color-selected: HighlightText; + } + + :host([disabled]) { + --highcontrast-tag-border-color-disabled: GrayText; + --highcontrast-tag-background-color-disabled: ButtonFace; + --highcontrast-tag-content-color-disabled: GrayText; + } + + :host([invalid]) { + --highcontrast-tag-border-color-invalid: Highlight; + --highcontrast-tag-border-color-invalid-hover: Highlight; + --highcontrast-tag-border-color-invalid-active: Highlight; + --highcontrast-tag-border-color-invalid-focus: Highlight; + --highcontrast-tag-content-color-invalid: CanvasText; + --highcontrast-tag-content-color-invalid-hover: CanvasText; + --highcontrast-tag-content-color-invalid-active: CanvasText; + --highcontrast-tag-content-color-invalid-focus: CanvasText; + } + + :host([invalid][selected]) { + --highcontrast-tag-border-color-invalid-selected: Highlight; + --highcontrast-tag-border-color-invalid-selected-hover: Highlight; + --highcontrast-tag-border-color-invalid-selected-focus: Highlight; + --highcontrast-tag-border-color-invalid-selected-active: Highlight; + --highcontrast-tag-background-color-invalid-selected: Highlight; + --highcontrast-tag-background-color-invalid-selected-hover: Highlight; + --highcontrast-tag-background-color-invalid-selected-active: Highlight; + --highcontrast-tag-background-color-invalid-selected-focus: Highlight; + --highcontrast-tag-content-color-invalid-selected: HighlightText; + } + + :host([emphasized]) { + --highcontrast-tag-border-color-emphasized: Highlight; + --highcontrast-tag-border-color-emphasized-hover: Highlight; + --highcontrast-tag-border-color-emphasized-active: Highlight; + --highcontrast-tag-border-color-emphasized-focus: Highlight; + --highcontrast-tag-background-color-emphasized: ButtonFace; + --highcontrast-tag-background-color-emphasized-hover: ButtonFace; + --highcontrast-tag-background-color-emphasized-active: ButtonFace; + --highcontrast-tag-background-color-emphasized-focus: ButtonFace; + --highcontrast-tag-content-color-emphasized: CanvasText; + } } + diff --git a/packages/tags/src/spectrum-tags.css b/packages/tags/src/spectrum-tags.css index 1af81362f9..0cc73dc760 100644 --- a/packages/tags/src/spectrum-tags.css +++ b/packages/tags/src/spectrum-tags.css @@ -1,31 +1,26 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; - display: inline-flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; + display: inline-flex; } ::slotted(*) { - margin-block: var( - --mod-tag-group-item-margin-block, - var(--spectrum-tag-group-item-margin-block) - ); - margin-inline: var( - --mod-tag-group-item-margin-inline, - var(--spectrum-tag-group-item-margin-inline) - ); + margin-block: var(--mod-tag-group-item-margin-block, var(--spectrum-tag-group-item-margin-block)); + margin-inline: var(--mod-tag-group-item-margin-inline, var(--spectrum-tag-group-item-margin-inline)); } + diff --git a/packages/tags/src/tag-overrides.css b/packages/tags/src/tag-overrides.css index e26f789802..c909c05fd8 100644 --- a/packages/tags/src/tag-overrides.css +++ b/packages/tags/src/tag-overrides.css @@ -1,356 +1,159 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tag-border-color: var(--system-tag-border-color); - --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); - --spectrum-tag-border-color-active: var(--system-tag-border-color-active); - --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); - --spectrum-tag-size-small-corner-radius: var( - --system-tag-size-small-corner-radius - ); - --spectrum-tag-size-medium-corner-radius: var( - --system-tag-size-medium-corner-radius - ); - --spectrum-tag-size-large-corner-radius: var( - --system-tag-size-large-corner-radius - ); - --spectrum-tag-background-color: var(--system-tag-background-color); - --spectrum-tag-background-color-hover: var( - --system-tag-background-color-hover - ); - --spectrum-tag-background-color-active: var( - --system-tag-background-color-active - ); - --spectrum-tag-background-color-focus: var( - --system-tag-background-color-focus - ); - --spectrum-tag-content-color: var(--system-tag-content-color); - --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); - --spectrum-tag-content-color-active: var(--system-tag-content-color-active); - --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); - --spectrum-tag-border-color-selected: var( - --system-tag-border-color-selected - ); - --spectrum-tag-border-color-selected-hover: var( - --system-tag-border-color-selected-hover - ); - --spectrum-tag-border-color-selected-active: var( - --system-tag-border-color-selected-active - ); - --spectrum-tag-border-color-selected-focus: var( - --system-tag-border-color-selected-focus - ); - --spectrum-tag-border-color-disabled: var( - --system-tag-border-color-disabled - ); - --spectrum-tag-background-color-disabled: var( - --system-tag-background-color-disabled - ); - --spectrum-tag-size-small-spacing-inline-start: var( - --system-tag-size-small-spacing-inline-start - ); - --spectrum-tag-size-small-label-spacing-inline-end: var( - --system-tag-size-small-label-spacing-inline-end - ); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var( - --system-tag-size-small-clear-button-spacing-inline-end - ); - --spectrum-tag-size-medium-spacing-inline-start: var( - --system-tag-size-medium-spacing-inline-start - ); - --spectrum-tag-size-medium-label-spacing-inline-end: var( - --system-tag-size-medium-label-spacing-inline-end - ); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var( - --system-tag-size-medium-clear-button-spacing-inline-end - ); - --spectrum-tag-size-large-spacing-inline-start: var( - --system-tag-size-large-spacing-inline-start - ); - --spectrum-tag-size-large-label-spacing-inline-end: var( - --system-tag-size-large-label-spacing-inline-end - ); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var( - --system-tag-size-large-clear-button-spacing-inline-end - ); - --spectrum-avatar-opacity-disabled: var( - --system-tag-avatar-opacity-disabled - ); - --spectrum-tag-animation-duration: var(--system-tag-animation-duration); - --spectrum-tag-border-width: var(--system-tag-border-width); - --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); - --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); - --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); - --spectrum-tag-label-line-height: var(--system-tag-label-line-height); - --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); - --spectrum-tag-content-color-selected: var( - --system-tag-content-color-selected - ); - --spectrum-tag-background-color-selected: var( - --system-tag-background-color-selected - ); - --spectrum-tag-background-color-selected-hover: var( - --system-tag-background-color-selected-hover - ); - --spectrum-tag-background-color-selected-active: var( - --system-tag-background-color-selected-active - ); - --spectrum-tag-background-color-selected-focus: var( - --system-tag-background-color-selected-focus - ); - --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); - --spectrum-tag-border-color-invalid-hover: var( - --system-tag-border-color-invalid-hover - ); - --spectrum-tag-border-color-invalid-active: var( - --system-tag-border-color-invalid-active - ); - --spectrum-tag-border-color-invalid-focus: var( - --system-tag-border-color-invalid-focus - ); - --spectrum-tag-content-color-invalid: var( - --system-tag-content-color-invalid - ); - --spectrum-tag-content-color-invalid-hover: var( - --system-tag-content-color-invalid-hover - ); - --spectrum-tag-content-color-invalid-active: var( - --system-tag-content-color-invalid-active - ); - --spectrum-tag-content-color-invalid-focus: var( - --system-tag-content-color-invalid-focus - ); - --spectrum-tag-border-color-invalid-selected: var( - --system-tag-border-color-invalid-selected - ); - --spectrum-tag-border-color-invalid-selected-hover: var( - --system-tag-border-color-invalid-selected-hover - ); - --spectrum-tag-border-color-invalid-selected-focus: var( - --system-tag-border-color-invalid-selected-focus - ); - --spectrum-tag-border-color-invalid-selected-active: var( - --system-tag-border-color-invalid-selected-active - ); - --spectrum-tag-background-color-invalid-selected: var( - --system-tag-background-color-invalid-selected - ); - --spectrum-tag-background-color-invalid-selected-hover: var( - --system-tag-background-color-invalid-selected-hover - ); - --spectrum-tag-background-color-invalid-selected-active: var( - --system-tag-background-color-invalid-selected-active - ); - --spectrum-tag-background-color-invalid-selected-focus: var( - --system-tag-background-color-invalid-selected-focus - ); - --spectrum-tag-content-color-invalid-selected: var( - --system-tag-content-color-invalid-selected - ); - --spectrum-tag-border-color-emphasized: var( - --system-tag-border-color-emphasized - ); - --spectrum-tag-border-color-emphasized-hover: var( - --system-tag-border-color-emphasized-hover - ); - --spectrum-tag-border-color-emphasized-active: var( - --system-tag-border-color-emphasized-active - ); - --spectrum-tag-border-color-emphasized-focus: var( - --system-tag-border-color-emphasized-focus - ); - --spectrum-tag-background-color-emphasized: var( - --system-tag-background-color-emphasized - ); - --spectrum-tag-background-color-emphasized-hover: var( - --system-tag-background-color-emphasized-hover - ); - --spectrum-tag-background-color-emphasized-active: var( - --system-tag-background-color-emphasized-active - ); - --spectrum-tag-background-color-emphasized-focus: var( - --system-tag-background-color-emphasized-focus - ); - --spectrum-tag-content-color-emphasized: var( - --system-tag-content-color-emphasized - ); - --spectrum-tag-content-color-disabled: var( - --system-tag-content-color-disabled - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-icon-spacing-inline-end - ); - --spectrum-tag-icon-size: var(--system-tag-icon-size); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-icon-spacing-block-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-clear-button-spacing-inline-start - ); - --spectrum-tag-height: var(--system-tag-height); - --spectrum-tag-font-size: var(--system-tag-font-size); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-clear-button-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-corner-radius); - --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-clear-button-spacing-inline-end - ); + --spectrum-tag-border-color: var(--system-tag-border-color); + --spectrum-tag-border-color-hover: var(--system-tag-border-color-hover); + --spectrum-tag-border-color-active: var(--system-tag-border-color-active); + --spectrum-tag-border-color-focus: var(--system-tag-border-color-focus); + --spectrum-tag-size-small-corner-radius: var(--system-tag-size-small-corner-radius); + --spectrum-tag-size-medium-corner-radius: var(--system-tag-size-medium-corner-radius); + --spectrum-tag-size-large-corner-radius: var(--system-tag-size-large-corner-radius); + --spectrum-tag-background-color: var(--system-tag-background-color); + --spectrum-tag-background-color-hover: var(--system-tag-background-color-hover); + --spectrum-tag-background-color-active: var(--system-tag-background-color-active); + --spectrum-tag-background-color-focus: var(--system-tag-background-color-focus); + --spectrum-tag-content-color: var(--system-tag-content-color); + --spectrum-tag-content-color-hover: var(--system-tag-content-color-hover); + --spectrum-tag-content-color-active: var(--system-tag-content-color-active); + --spectrum-tag-content-color-focus: var(--system-tag-content-color-focus); + --spectrum-tag-border-color-selected: var(--system-tag-border-color-selected); + --spectrum-tag-border-color-selected-hover: var(--system-tag-border-color-selected-hover); + --spectrum-tag-border-color-selected-active: var(--system-tag-border-color-selected-active); + --spectrum-tag-border-color-selected-focus: var(--system-tag-border-color-selected-focus); + --spectrum-tag-border-color-disabled: var(--system-tag-border-color-disabled); + --spectrum-tag-background-color-disabled: var(--system-tag-background-color-disabled); + --spectrum-tag-size-small-spacing-inline-start: var(--system-tag-size-small-spacing-inline-start); + --spectrum-tag-size-small-label-spacing-inline-end: var(--system-tag-size-small-label-spacing-inline-end); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--system-tag-size-small-clear-button-spacing-inline-end); + --spectrum-tag-size-medium-spacing-inline-start: var(--system-tag-size-medium-spacing-inline-start); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--system-tag-size-medium-label-spacing-inline-end); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--system-tag-size-medium-clear-button-spacing-inline-end); + --spectrum-tag-size-large-spacing-inline-start: var(--system-tag-size-large-spacing-inline-start); + --spectrum-tag-size-large-label-spacing-inline-end: var(--system-tag-size-large-label-spacing-inline-end); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--system-tag-size-large-clear-button-spacing-inline-end); + --spectrum-avatar-opacity-disabled: var(--system-tag-avatar-opacity-disabled); + --spectrum-tag-animation-duration: var(--system-tag-animation-duration); + --spectrum-tag-border-width: var(--system-tag-border-width); + --spectrum-tag-focus-ring-thickness: var(--system-tag-focus-ring-thickness); + --spectrum-tag-focus-ring-gap: var(--system-tag-focus-ring-gap); + --spectrum-tag-focus-ring-color: var(--system-tag-focus-ring-color); + --spectrum-tag-label-line-height: var(--system-tag-label-line-height); + --spectrum-tag-label-font-weight: var(--system-tag-label-font-weight); + --spectrum-tag-content-color-selected: var(--system-tag-content-color-selected); + --spectrum-tag-background-color-selected: var(--system-tag-background-color-selected); + --spectrum-tag-background-color-selected-hover: var(--system-tag-background-color-selected-hover); + --spectrum-tag-background-color-selected-active: var(--system-tag-background-color-selected-active); + --spectrum-tag-background-color-selected-focus: var(--system-tag-background-color-selected-focus); + --spectrum-tag-border-color-invalid: var(--system-tag-border-color-invalid); + --spectrum-tag-border-color-invalid-hover: var(--system-tag-border-color-invalid-hover); + --spectrum-tag-border-color-invalid-active: var(--system-tag-border-color-invalid-active); + --spectrum-tag-border-color-invalid-focus: var(--system-tag-border-color-invalid-focus); + --spectrum-tag-content-color-invalid: var(--system-tag-content-color-invalid); + --spectrum-tag-content-color-invalid-hover: var(--system-tag-content-color-invalid-hover); + --spectrum-tag-content-color-invalid-active: var(--system-tag-content-color-invalid-active); + --spectrum-tag-content-color-invalid-focus: var(--system-tag-content-color-invalid-focus); + --spectrum-tag-border-color-invalid-selected: var(--system-tag-border-color-invalid-selected); + --spectrum-tag-border-color-invalid-selected-hover: var(--system-tag-border-color-invalid-selected-hover); + --spectrum-tag-border-color-invalid-selected-focus: var(--system-tag-border-color-invalid-selected-focus); + --spectrum-tag-border-color-invalid-selected-active: var(--system-tag-border-color-invalid-selected-active); + --spectrum-tag-background-color-invalid-selected: var(--system-tag-background-color-invalid-selected); + --spectrum-tag-background-color-invalid-selected-hover: var(--system-tag-background-color-invalid-selected-hover); + --spectrum-tag-background-color-invalid-selected-active: var(--system-tag-background-color-invalid-selected-active); + --spectrum-tag-background-color-invalid-selected-focus: var(--system-tag-background-color-invalid-selected-focus); + --spectrum-tag-content-color-invalid-selected: var(--system-tag-content-color-invalid-selected); + --spectrum-tag-border-color-emphasized: var(--system-tag-border-color-emphasized); + --spectrum-tag-border-color-emphasized-hover: var(--system-tag-border-color-emphasized-hover); + --spectrum-tag-border-color-emphasized-active: var(--system-tag-border-color-emphasized-active); + --spectrum-tag-border-color-emphasized-focus: var(--system-tag-border-color-emphasized-focus); + --spectrum-tag-background-color-emphasized: var(--system-tag-background-color-emphasized); + --spectrum-tag-background-color-emphasized-hover: var(--system-tag-background-color-emphasized-hover); + --spectrum-tag-background-color-emphasized-active: var(--system-tag-background-color-emphasized-active); + --spectrum-tag-background-color-emphasized-focus: var(--system-tag-background-color-emphasized-focus); + --spectrum-tag-content-color-emphasized: var(--system-tag-content-color-emphasized); + --spectrum-tag-content-color-disabled: var(--system-tag-content-color-disabled); + --spectrum-tag-icon-spacing-inline-end: var(--system-tag-icon-spacing-inline-end); + --spectrum-tag-icon-size: var(--system-tag-icon-size); + --spectrum-tag-icon-spacing-block-start: var(--system-tag-icon-spacing-block-start); + --spectrum-tag-icon-spacing-block-end: var(--system-tag-icon-spacing-block-end); + --spectrum-tag-avatar-spacing-block-start: var(--system-tag-avatar-spacing-block-start); + --spectrum-tag-avatar-spacing-block-end: var(--system-tag-avatar-spacing-block-end); + --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-avatar-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--system-tag-label-spacing-block); + --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-clear-button-spacing-inline-start); + --spectrum-tag-height: var(--system-tag-height); + --spectrum-tag-font-size: var(--system-tag-font-size); + --spectrum-tag-clear-button-spacing-block: var(--system-tag-clear-button-spacing-block); + --spectrum-tag-corner-radius: var(--system-tag-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--system-tag-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-clear-button-spacing-inline-end); } -:host([size='s']) { - --spectrum-tag-height: var(--system-tag-size-s-height); - --spectrum-tag-font-size: var(--system-tag-size-s-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-s-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-s-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-s-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-s-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-s-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-s-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-s-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-s-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-s-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-s-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-s-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-s-clear-button-spacing-inline-end - ); +:host([size="s"]) { + --spectrum-tag-height: var(--system-tag-size-s-height); + --spectrum-tag-font-size: var(--system-tag-size-s-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-s-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-s-clear-button-spacing-inline-start); + --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-s-clear-button-spacing-block); + --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-s-icon-spacing-block-start); + --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-s-icon-spacing-block-end); + --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-s-icon-spacing-inline-end); + --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-s-avatar-spacing-block-start); + --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-s-avatar-spacing-block-end); + --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-s-avatar-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--system-tag-size-s-label-spacing-block); + --spectrum-tag-corner-radius: var(--system-tag-size-s-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-size-s-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-s-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-s-clear-button-spacing-inline-end); } :host { - --spectrum-tag-height: var(--system-tag-size-m-height); - --spectrum-tag-font-size: var(--system-tag-size-m-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-m-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-m-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-m-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-m-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-m-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-m-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-m-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-m-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-m-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-m-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-m-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-m-clear-button-spacing-inline-end - ); + --spectrum-tag-height: var(--system-tag-size-m-height); + --spectrum-tag-font-size: var(--system-tag-size-m-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-m-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-m-clear-button-spacing-inline-start); + --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-m-clear-button-spacing-block); + --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-m-icon-spacing-block-start); + --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-m-icon-spacing-block-end); + --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-m-icon-spacing-inline-end); + --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-m-avatar-spacing-block-start); + --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-m-avatar-spacing-block-end); + --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-m-avatar-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--system-tag-size-m-label-spacing-block); + --spectrum-tag-corner-radius: var(--system-tag-size-m-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-size-m-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-m-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-m-clear-button-spacing-inline-end); } -:host([size='l']) { - --spectrum-tag-height: var(--system-tag-size-l-height); - --spectrum-tag-font-size: var(--system-tag-size-l-font-size); - --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); - --spectrum-tag-clear-button-spacing-inline-start: var( - --system-tag-size-l-clear-button-spacing-inline-start - ); - --spectrum-tag-clear-button-spacing-block: var( - --system-tag-size-l-clear-button-spacing-block - ); - --spectrum-tag-icon-spacing-block-start: var( - --system-tag-size-l-icon-spacing-block-start - ); - --spectrum-tag-icon-spacing-block-end: var( - --system-tag-size-l-icon-spacing-block-end - ); - --spectrum-tag-icon-spacing-inline-end: var( - --system-tag-size-l-icon-spacing-inline-end - ); - --spectrum-tag-avatar-spacing-block-start: var( - --system-tag-size-l-avatar-spacing-block-start - ); - --spectrum-tag-avatar-spacing-block-end: var( - --system-tag-size-l-avatar-spacing-block-end - ); - --spectrum-tag-avatar-spacing-inline-end: var( - --system-tag-size-l-avatar-spacing-inline-end - ); - --spectrum-tag-label-spacing-block: var( - --system-tag-size-l-label-spacing-block - ); - --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); - --spectrum-tag-spacing-inline-start: var( - --system-tag-size-l-spacing-inline-start - ); - --spectrum-tag-label-spacing-inline-end: var( - --system-tag-size-l-label-spacing-inline-end - ); - --spectrum-tag-clear-button-spacing-inline-end: var( - --system-tag-size-l-clear-button-spacing-inline-end - ); +:host([size="l"]) { + --spectrum-tag-height: var(--system-tag-size-l-height); + --spectrum-tag-font-size: var(--system-tag-size-l-font-size); + --spectrum-tag-icon-size: var(--system-tag-size-l-icon-size); + --spectrum-tag-clear-button-spacing-inline-start: var(--system-tag-size-l-clear-button-spacing-inline-start); + --spectrum-tag-clear-button-spacing-block: var(--system-tag-size-l-clear-button-spacing-block); + --spectrum-tag-icon-spacing-block-start: var(--system-tag-size-l-icon-spacing-block-start); + --spectrum-tag-icon-spacing-block-end: var(--system-tag-size-l-icon-spacing-block-end); + --spectrum-tag-icon-spacing-inline-end: var(--system-tag-size-l-icon-spacing-inline-end); + --spectrum-tag-avatar-spacing-block-start: var(--system-tag-size-l-avatar-spacing-block-start); + --spectrum-tag-avatar-spacing-block-end: var(--system-tag-size-l-avatar-spacing-block-end); + --spectrum-tag-avatar-spacing-inline-end: var(--system-tag-size-l-avatar-spacing-inline-end); + --spectrum-tag-label-spacing-block: var(--system-tag-size-l-label-spacing-block); + --spectrum-tag-corner-radius: var(--system-tag-size-l-corner-radius); + --spectrum-tag-spacing-inline-start: var(--system-tag-size-l-spacing-inline-start); + --spectrum-tag-label-spacing-inline-end: var(--system-tag-size-l-label-spacing-inline-end); + --spectrum-tag-clear-button-spacing-inline-end: var(--system-tag-size-l-clear-button-spacing-inline-end); } + diff --git a/packages/tags/src/tags-overrides.css b/packages/tags/src/tags-overrides.css index be6f3ee986..ac13a2ba1e 100644 --- a/packages/tags/src/tags-overrides.css +++ b/packages/tags/src/tags-overrides.css @@ -1,21 +1,18 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tag-group-item-margin-block: var( - --system-tag-group-item-margin-block - ); - --spectrum-tag-group-item-margin-inline: var( - --system-tag-group-item-margin-inline - ); + --spectrum-tag-group-item-margin-block: var(--system-tag-group-item-margin-block); + --spectrum-tag-group-item-margin-inline: var(--system-tag-group-item-margin-inline); } + diff --git a/packages/textfield/src/spectrum-textfield.css b/packages/textfield/src/spectrum-textfield.css index 88a6b3d23c..6b560ce5d5 100644 --- a/packages/textfield/src/spectrum-textfield.css +++ b/packages/textfield/src/spectrum-textfield.css @@ -1,856 +1,404 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #textfield { - --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); - text-overflow: ellipsis; - inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); - grid-template-rows: auto auto auto; - grid-template-columns: auto auto; - margin: 0; - display: inline-grid; - position: relative; - overflow: visible; + --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); + text-overflow: ellipsis; + inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width)); + grid-template-rows: auto auto auto; + grid-template-columns: auto auto; + margin: 0; + display: inline-grid; + position: relative; + overflow: visible; } :host([quiet]) #textfield:after { - content: ''; - pointer-events: none; - inline-size: 100%; - block-size: var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ); - position: absolute; - inset-block-end: calc( - ( - var( - --mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ) + - var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ) - ) * -1 - ); - inset-inline-start: 0; + content: ""; + pointer-events: none; + inline-size: 100%; + block-size: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)); + position: absolute; + inset-block-end: calc((var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)) + var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width))) * -1); + inset-inline-start: 0; } :host([quiet][focused]) #textfield:after { - background-color: var( - --highcontrast-textfield-focus-indicator-color, - var( - --mod-textfield-focus-indicator-color, - var(--spectrum-textfield-focus-indicator-color) - ) - ); + background-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); } :host([quiet][invalid]) #textfield .input { - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-invalid, - var(--spectrum-textfield-icon-spacing-inline-start-invalid) - ) + - var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ) - ); + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid))); } :host([quiet][valid]) #textfield .input { - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-valid, - var(--spectrum-textfield-icon-spacing-inline-start-valid) - ) + - var( - --mod-textfield-icon-size-valid, - var(--spectrum-textfield-icon-size-valid) - ) - ); -} - -:host([invalid]) #textfield .icon, -:host([valid]) #textfield .icon { - pointer-events: all; - grid-area: 2 / 2; - margin-inline-start: auto; - position: absolute; - inset-block-start: 0; + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid))); +} + +:host([invalid]) #textfield .icon, :host([valid]) #textfield .icon { + pointer-events: all; + grid-area: 2 / 2; + margin-inline-start: auto; + position: absolute; + inset-block-start: 0; } #textfield.spectrum-Textfield--sideLabel .icon { - grid-area: 1 / 2 / span 1 / span 1; + grid-area: 1 / 2 / span 1 / span 1; } :host([valid]) #textfield .icon { - color: var( - --highcontrast-textfield-icon-color-valid, - var( - --mod-textfield-icon-color-valid, - var(--spectrum-textfield-icon-color-valid) - ) - ); - inset-block-start: var( - --mod-textfield-icon-spacing-block-valid, - var(--spectrum-textfield-icon-spacing-block-valid) - ); - inset-block-end: var( - --mod-textfield-icon-spacing-block-valid, - var(--spectrum-textfield-icon-spacing-block-valid) - ); - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-valid, - var(--spectrum-textfield-icon-spacing-inline-end-valid) - ); + color: var(--highcontrast-textfield-icon-color-valid, var(--mod-textfield-icon-color-valid, var(--spectrum-textfield-icon-color-valid))); + inset-block-start: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); + inset-block-end: var(--mod-textfield-icon-spacing-block-valid, var(--spectrum-textfield-icon-spacing-block-valid)); + inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)); } :host([invalid]) #textfield .icon { - block-size: var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ); - inline-size: var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ); - color: var( - --highcontrast-textfield-icon-color-invalid, - var( - --mod-textfield-icon-color-invalid, - var(--spectrum-textfield-icon-color-invalid) - ) - ); - inset-block-start: var( - --mod-textfield-icon-spacing-block-invalid, - var(--spectrum-textfield-icon-spacing-block-invalid) - ); - inset-block-end: var( - --mod-textfield-icon-spacing-block-invalid, - var(--spectrum-textfield-icon-spacing-block-invalid) - ); - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-invalid) - ); -} - -:host([disabled]) #textfield .icon, -:host([readonly]) #textfield .icon { - color: #0000; + block-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); + inline-size: var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)); + color: var(--highcontrast-textfield-icon-color-invalid, var(--mod-textfield-icon-color-invalid, var(--spectrum-textfield-icon-color-invalid))); + inset-block-start: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); + inset-block-end: var(--mod-textfield-icon-spacing-block-invalid, var(--spectrum-textfield-icon-spacing-block-invalid)); + inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)); +} + +:host([disabled]) #textfield .icon, :host([readonly]) #textfield .icon { + color: #0000; } :host([quiet]) .icon { - padding-inline-end: 0; + padding-inline-end: 0; } :host([quiet][valid]) .icon { - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-quiet-valid, - var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid) - ); + inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-valid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)); } :host([quiet][invalid]) .icon { - inset-inline-end: var( - --mod-textfield-icon-spacing-inline-end-quiet-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid) - ); + inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)); } #textfield .spectrum-FieldLabel { - grid-area: 1 / 1 / auto / span 1; - margin-block-end: var( - --mod-textfield-label-spacing-block, - var(--spectrum-textfield-label-spacing-block) - ); + grid-area: 1 / 1 / auto / span 1; + margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block)); } :host([quiet]) .spectrum-FieldLabel { - margin-block-end: var( - --mod-textfield-label-spacing-block-quiet, - var(--spectrum-textfield-label-spacing-block-quiet) - ); + margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet)); } :host([disabled]) .spectrum-FieldLabel { - color: var(--spectrum-textfield-text-color-disabled); + color: var(--spectrum-textfield-text-color-disabled); } #textfield .spectrum-HelpText { - grid-area: 3 / 1 / auto / span 2; - margin-block-start: var( - --mod-textfield-helptext-spacing-block, - var(--spectrum-textfield-helptext-spacing-block) - ); + grid-area: 3 / 1 / auto / span 2; + margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block)); } .spectrum-Textfield-characterCount { - inline-size: auto; - font-size: var( - --mod-textfield-character-count-font-size, - var(--spectrum-textfield-character-count-font-size) - ); - font-family: var( - --mod-textfield-character-count-font-family, - var(--spectrum-textfield-character-count-font-family) - ); - font-weight: var( - --mod-textfield-character-count-font-weight, - var(--spectrum-textfield-character-count-font-weight) - ); - grid-area: 1 / 2 / auto / span 1; - justify-content: flex-end; - align-items: flex-end; - margin-block-end: var( - --mod-textfield-character-count-spacing-block, - var(--spectrum-textfield-character-count-spacing-block) - ); - margin-inline-start: var( - --mod-textfield-character-count-spacing-inline, - var(--spectrum-textfield-character-count-spacing-inline) - ); - margin-inline-end: 0; - padding-inline-end: calc( - var( - --mod-textfield-corner-radius, - var(--spectrum-textfield-corner-radius) - ) / 2 - ); - display: inline-flex; + inline-size: auto; + font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size)); + font-family: var(--mod-textfield-character-count-font-family, var(--spectrum-textfield-character-count-font-family)); + font-weight: var(--mod-textfield-character-count-font-weight, var(--spectrum-textfield-character-count-font-weight)); + grid-area: 1 / 2 / auto / span 1; + justify-content: flex-end; + align-items: flex-end; + margin-block-end: var(--mod-textfield-character-count-spacing-block, var(--spectrum-textfield-character-count-spacing-block)); + margin-inline-start: var(--mod-textfield-character-count-spacing-inline, var(--spectrum-textfield-character-count-spacing-inline)); + margin-inline-end: 0; + padding-inline-end: calc(var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)) / 2); + display: inline-flex; } :host([quiet]) .spectrum-Textfield-characterCount { - margin-block-end: var( - --mod-textfield-character-count-spacing-block-quiet, - var(--spectrum-textfield-character-count-spacing-block-quiet) - ); + margin-block-end: var(--mod-textfield-character-count-spacing-block-quiet, var(--spectrum-textfield-character-count-spacing-block-quiet)); } .input { - line-height: var(--spectrum-textfield-input-line-height); - box-sizing: border-box; - inline-size: 100%; - min-inline-size: var( - --mod-textfield-min-width, - var(--spectrum-textfield-min-width) - ); - block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); - padding-block-start: calc( - var( - --mod-textfield-spacing-block-start, - var(--spectrum-textfield-spacing-block-start) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - padding-block-end: calc( - var( - --mod-textfield-spacing-block-end, - var(--spectrum-textfield-spacing-block-end) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - padding-inline: calc( - var( - --mod-textfield-spacing-inline, - var(--spectrum-textfield-spacing-inline) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); - vertical-align: top; - background-color: var( - --mod-textfield-background-color, - var(--spectrum-textfield-background-color) - ); - border-color: var( - --highcontrast-textfield-border-color, - var( - --mod-textfield-border-color, - var(--spectrum-textfield-border-color) - ) - ); - border-style: solid; - border-width: var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ); - border-radius: var( - --mod-textfield-corner-radius, - var(--spectrum-textfield-corner-radius) - ); - transition: border-color - var( - --mod-texfield-animation-duration, - var(--spectrum-texfield-animation-duration) - ) - ease-in-out; - font-size: var( - --mod-textfield-placeholder-font-size, - var(--spectrum-textfield-placeholder-font-size) - ); - font-family: var( - --mod-textfield-font-family, - var(--spectrum-textfield-font-family) - ); - font-weight: var( - --mod-textfield-font-weight, - var(--spectrum-textfield-font-weight) - ); - color: var( - --highcontrast-textfield-text-color-default, - var( - --mod-textfield-text-color-default, - var(--spectrum-textfield-text-color-default) - ) - ); - text-overflow: ellipsis; - appearance: none; - outline: none; - grid-area: 2 / 1 / auto / span 2; - margin: 0; + line-height: var(--spectrum-textfield-input-line-height); + box-sizing: border-box; + inline-size: 100%; + min-inline-size: var(--mod-textfield-min-width, var(--spectrum-textfield-min-width)); + block-size: var(--mod-textfield-height, var(--spectrum-textfield-height)); + padding-block-start: calc(var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-block-end: calc(var(--mod-textfield-spacing-block-end, var(--spectrum-textfield-spacing-block-end)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + padding-inline: calc(var(--mod-textfield-spacing-inline, var(--spectrum-textfield-spacing-inline)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); + vertical-align: top; + background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color)); + border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); + border-style: solid; + border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); + border-radius: var(--mod-textfield-corner-radius, var(--spectrum-textfield-corner-radius)); + transition: border-color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out; + font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); + font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); + font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); + text-overflow: ellipsis; + appearance: none; + outline: none; + grid-area: 2 / 1 / auto / span 2; + margin: 0; +} + +:host([type="number"]) .input { + -moz-appearance: textfield; +} + +:host([type="number"]) .input::-webkit-inner-spin-button, :host([type="number"]) .input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.input:-moz-ui-invalid { + box-shadow: none; } -:host([type='number']) .input { - -moz-appearance: textfield; +.input::placeholder { + opacity: 1; + font-size: var(--mod-textfield-placeholder-font-size, var(--spectrum-textfield-placeholder-font-size)); + font-family: var(--mod-textfield-font-family, var(--spectrum-textfield-font-family)); + font-weight: var(--mod-textfield-font-weight, var(--spectrum-textfield-font-weight)); + color: var(--highcontrast-textfield-text-color-default, var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))); + transition: color var(--mod-texfield-animation-duration, var(--spectrum-texfield-animation-duration)) ease-in-out; } -:host([type='number']) .input::-webkit-inner-spin-button, -:host([type='number']) .input::-webkit-outer-spin-button { - -webkit-appearance: none; - margin: 0; +.input:lang(ja)::placeholder, .input:lang(ko)::placeholder, .input:lang(zh)::placeholder { + font-style: normal; } -.input:-moz-ui-invalid { - box-shadow: none; +:host([focused]) .input, .input:focus { + border-color: var(--highcontrast-textfield-border-color-focus, var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))); } -.input::placeholder { - opacity: 1; - font-size: var( - --mod-textfield-placeholder-font-size, - var(--spectrum-textfield-placeholder-font-size) - ); - font-family: var( - --mod-textfield-font-family, - var(--spectrum-textfield-font-family) - ); - font-weight: var( - --mod-textfield-font-weight, - var(--spectrum-textfield-font-weight) - ); - color: var( - --highcontrast-textfield-text-color-default, - var( - --mod-textfield-text-color-default, - var(--spectrum-textfield-text-color-default) - ) - ); - transition: color - var( - --mod-texfield-animation-duration, - var(--spectrum-texfield-animation-duration) - ) - ease-in-out; -} - -.input:lang(ja)::placeholder, -.input:lang(ko)::placeholder, -.input:lang(zh)::placeholder { - font-style: normal; -} - -:host([focused]) .input, -.input:focus { - border-color: var( - --highcontrast-textfield-border-color-focus, - var( - --mod-textfield-border-color-focus, - var(--spectrum-textfield-border-color-focus) - ) - ); -} - -:host([focused]) .input, -:host([focused]) .input::placeholder, -.input:focus, -.input:focus::placeholder { - color: var( - --highcontrast-textfield-text-color-focus, - var( - --mod-textfield-text-color-focus, - var(--spectrum-textfield-text-color-focus) - ) - ); +:host([focused]) .input, :host([focused]) .input::placeholder, .input:focus, .input:focus::placeholder { + color: var(--highcontrast-textfield-text-color-focus, var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))); } :host([focused]) .input { - border-color: var( - --highcontrast-textfield-border-color-keyboard-focus, - var( - --mod-textfield-border-color-keyboard-focus, - var(--spectrum-textfield-border-color-keyboard-focus) - ) - ); - outline: var( - --mod-textfield-focus-indicator-width, - var(--spectrum-textfield-focus-indicator-width) - ) - solid; - outline-color: var( - --highcontrast-textfield-focus-indicator-color, - var( - --mod-textfield-focus-indicator-color, - var(--spectrum-textfield-focus-indicator-color) - ) - ); - outline-offset: var( - --mod-textfield-focus-indicator-gap, - var(--spectrum-textfield-focus-indicator-gap) - ); -} - -:host([focused]) .input, -:host([focused]) .input::placeholder { - color: var( - --highcontrast-textfield-text-color-keyboard-focus, - var( - --mod-textfield-text-color-keyboard-focus, - var(--spectrum-textfield-text-color-keyboard-focus) - ) - ); + border-color: var(--highcontrast-textfield-border-color-keyboard-focus, var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))); + outline: var(--mod-textfield-focus-indicator-width, var(--spectrum-textfield-focus-indicator-width)) solid; + outline-color: var(--highcontrast-textfield-focus-indicator-color, var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))); + outline-offset: var(--mod-textfield-focus-indicator-gap, var(--spectrum-textfield-focus-indicator-gap)); +} + +:host([focused]) .input, :host([focused]) .input::placeholder { + color: var(--highcontrast-textfield-text-color-keyboard-focus, var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))); } :host([valid]) .input { - color: var( - --highcontrast-textfield-text-color-valid, - var( - --mod-textfield-text-color-valid, - var(--spectrum-textfield-text-color-valid) - ) - ); - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-valid, - var(--spectrum-textfield-icon-spacing-inline-start-valid) - ) + - var( - --mod-textfield-icon-size-valid, - var(--spectrum-textfield-icon-size-valid) - ) + - var( - --mod-textfield-icon-spacing-inline-end-valid, - var(--spectrum-textfield-icon-spacing-inline-end-valid) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); + color: var(--highcontrast-textfield-text-color-valid, var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))); + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-valid, var(--spectrum-textfield-icon-spacing-inline-start-valid)) + var(--mod-textfield-icon-size-valid, var(--spectrum-textfield-icon-size-valid)) + var(--mod-textfield-icon-spacing-inline-end-valid, var(--spectrum-textfield-icon-spacing-inline-end-valid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); } :host([invalid]) .input { - color: var( - --highcontrast-textfield-text-color-invalid, - var( - --mod-textfield-text-color-invalid, - var(--spectrum-textfield-text-color-invalid) - ) - ); - border-color: var( - --highcontrast-textfield-border-color-invalid-default, - var( - --mod-textfield-border-color-invalid-default, - var(--spectrum-textfield-border-color-invalid-default) - ) - ); - padding-inline-end: calc( - var( - --mod-textfield-icon-spacing-inline-start-invalid, - var(--spectrum-textfield-icon-spacing-inline-start-invalid) - ) + - var( - --mod-textfield-icon-size-invalid, - var(--spectrum-textfield-icon-size-invalid) - ) + - var( - --mod-textfield-icon-spacing-inline-end-invalid, - var(--spectrum-textfield-icon-spacing-inline-end-invalid) - ) - - var( - --mod-textfield-border-width, - var(--spectrum-textfield-border-width) - ) - ); -} - -:host([invalid]) .input:focus, -:host([invalid][focused]) .input, -:host([invalid]:focus) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-focus, - var( - --mod-textfield-border-color-invalid-focus, - var(--spectrum-textfield-border-color-invalid-focus) - ) - ); -} - -:host([invalid]) .input:focus-visible, -:host([invalid][focused]) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-keyboard-focus, - var( - --mod-textfield-border-color-invalid-keyboard-focus, - var(--spectrum-textfield-border-color-invalid-keyboard-focus) - ) - ); -} - -.input:disabled, -:host([disabled]) #textfield .input { - background-color: var( - --mod-textfield-background-color-disabled, - var(--spectrum-textfield-background-color-disabled) - ); - resize: none; - opacity: 1; - border-color: #0000; + color: var(--highcontrast-textfield-text-color-invalid, var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))); + border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))); + padding-inline-end: calc(var(--mod-textfield-icon-spacing-inline-start-invalid, var(--spectrum-textfield-icon-spacing-inline-start-invalid)) + var(--mod-textfield-icon-size-invalid, var(--spectrum-textfield-icon-size-invalid)) + var(--mod-textfield-icon-spacing-inline-end-invalid, var(--spectrum-textfield-icon-spacing-inline-end-invalid)) - var(--mod-textfield-border-width, var(--spectrum-textfield-border-width))); +} + +:host([invalid]) .input:focus, :host([invalid][focused]) .input, :host([invalid]:focus) .input { + border-color: var(--highcontrast-textfield-border-color-invalid-focus, var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))); +} + +:host([invalid]) .input:focus-visible, :host([invalid][focused]) .input { + border-color: var(--highcontrast-textfield-border-color-invalid-keyboard-focus, var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))); +} + +.input:disabled, :host([disabled]) #textfield .input { + background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); + resize: none; + opacity: 1; + border-color: #0000; } -.input:disabled, -.input:disabled::placeholder, -:host([disabled]) #textfield .input, -:host([disabled]) #textfield .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); +.input:disabled, .input:disabled::placeholder, :host([disabled]) #textfield .input, :host([disabled]) #textfield .input::placeholder { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); } :host([quiet]) .input { - padding-block-start: var( - --mod-textfield-spacing-block-start, - var(--spectrum-textfield-spacing-block-start) - ); - padding-inline: var( - --mod-textfield-spacing-inline-quiet, - var(--spectrum-textfield-spacing-inline-quiet) - ); - background-color: initial; - resize: none; - border-block-start-width: 0; - border-inline-width: 0; - border-radius: 0; - outline: none; - margin-block-end: var( - --mod-textfield-spacing-block-quiet, - var(--spectrum-textfield-spacing-block-quiet) - ); - overflow-y: hidden; + padding-block-start: var(--mod-textfield-spacing-block-start, var(--spectrum-textfield-spacing-block-start)); + padding-inline: var(--mod-textfield-spacing-inline-quiet, var(--spectrum-textfield-spacing-inline-quiet)); + background-color: initial; + resize: none; + border-block-start-width: 0; + border-inline-width: 0; + border-radius: 0; + outline: none; + margin-block-end: var(--mod-textfield-spacing-block-quiet, var(--spectrum-textfield-spacing-block-quiet)); + overflow-y: hidden; } -:host([quiet][disabled]) .input, -.input:disabled { - background-color: initial; - border-color: var( - --mod-textfield-border-color-disabled, - var(--spectrum-textfield-border-color-disabled) - ); -} - -:host([quiet][disabled]) .input, -:host([quiet][disabled]) .input::placeholder, -.input:disabled, -.input:disabled::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); -} - -.input:read-only, -:host([readonly]) #textfield .input { - background-color: initial; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - border-color: #0000; - outline: none; +:host([quiet][disabled]) .input, .input:disabled { + background-color: initial; + border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled)); } -.input:read-only::placeholder, -:host([readonly]) #textfield .input::placeholder { - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - background-color: initial; +:host([quiet][disabled]) .input, :host([quiet][disabled]) .input::placeholder, .input:disabled, .input:disabled::placeholder { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); +} + +.input:read-only, :host([readonly]) #textfield .input { + background-color: initial; + color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + border-color: #0000; + outline: none; +} + +.input:read-only::placeholder, :host([readonly]) #textfield .input::placeholder { + color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + background-color: initial; } @media (hover: hover) { - .input:hover, - #textfield:hover .input { - border-color: var( - --highcontrast-textfield-border-color-hover, - var( - --mod-textfield-border-color-hover, - var(--spectrum-textfield-border-color-hover) - ) - ); - } - - .input:hover, - .input:hover::placeholder, - #textfield:hover .input, - #textfield:hover .input::placeholder { - color: var( - --highcontrast-textfield-text-color-hover, - var( - --mod-textfield-text-color-hover, - var(--spectrum-textfield-text-color-hover) - ) - ); - } - - :host([focused]) .input:hover, - .input:focus:hover { - border-color: var( - --highcontrast-textfield-border-color-focus-hover, - var( - --mod-textfield-border-color-focus-hover, - var(--spectrum-textfield-border-color-focus-hover) - ) - ); - } - - :host([focused]) .input:hover, - :host([focused]) .input:hover::placeholder, - .input:focus:hover, - .input:focus:hover::placeholder { - color: var( - --highcontrast-textfield-text-color-focus-hover, - var( - --mod-textfield-text-color-focus-hover, - var(--spectrum-textfield-text-color-focus-hover) - ) - ); - } - - :host([invalid]) .input:hover:not(.is-disabled), - :host([invalid]:hover):not(.is-disabled) .input { - border-color: var( - --highcontrast-textfield-border-color-invalid-hover, - var( - --mod-textfield-border-color-invalid-hover, - var(--spectrum-textfield-border-color-invalid-hover) - ) - ); - } - - :host([invalid]) .input:focus:hover, - :host([invalid][focused]) .input:hover, - :host([invalid]:focus) .input:hover { - border-color: var( - --highcontrast-textfield-border-color-invalid-focus-hover, - var( - --mod-textfield-border-color-invalid-focus-hover, - var(--spectrum-textfield-border-color-invalid-focus-hover) - ) - ); - } - - :host([disabled]) #textfield:hover .input { - background-color: var( - --mod-textfield-background-color-disabled, - var(--spectrum-textfield-background-color-disabled) - ); - resize: none; - opacity: 1; - border-color: #0000; - } - - :host([quiet][disabled]:hover) .input, - :host([disabled]) #textfield:hover .input, - :host([disabled]) #textfield:hover .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - } - - :host([quiet][disabled]:hover) .input { - background-color: initial; - border-color: var( - --mod-textfield-border-color-disabled, - var(--spectrum-textfield-border-color-disabled) - ); - } - - :host([quiet][disabled]:hover) .input::placeholder { - color: var( - --highcontrast-textfield-text-color-disabled, - var( - --mod-textfield-text-color-disabled, - var(--spectrum-textfield-text-color-disabled) - ) - ); - } - - :host([readonly]) #textfield:hover .input { - border-color: #0000; - outline: none; - } - - :host([readonly]) #textfield:hover .input, - :host([readonly]) #textfield:hover .input::placeholder { - background-color: initial; - color: var( - --highcontrast-textfield-text-color-readonly, - var( - --mod-textfield-text-color-readonly, - var(--spectrum-textfield-text-color-readonly) - ) - ); - } + .input:hover, #textfield:hover .input { + border-color: var(--highcontrast-textfield-border-color-hover, var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))); + } + + .input:hover, .input:hover::placeholder, #textfield:hover .input, #textfield:hover .input::placeholder { + color: var(--highcontrast-textfield-text-color-hover, var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))); + } + + :host([focused]) .input:hover, .input:focus:hover { + border-color: var(--highcontrast-textfield-border-color-focus-hover, var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))); + } + + :host([focused]) .input:hover, :host([focused]) .input:hover::placeholder, .input:focus:hover, .input:focus:hover::placeholder { + color: var(--highcontrast-textfield-text-color-focus-hover, var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))); + } + + :host([invalid]) .input:hover:not(.is-disabled), :host([invalid]:hover):not(.is-disabled) .input { + border-color: var(--highcontrast-textfield-border-color-invalid-hover, var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))); + } + + :host([invalid]) .input:focus:hover, :host([invalid][focused]) .input:hover, :host([invalid]:focus) .input:hover { + border-color: var(--highcontrast-textfield-border-color-invalid-focus-hover, var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))); + } + + :host([disabled]) #textfield:hover .input { + background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); + resize: none; + opacity: 1; + border-color: #0000; + } + + :host([quiet][disabled]:hover) .input, :host([disabled]) #textfield:hover .input, :host([disabled]) #textfield:hover .input::placeholder { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } + + :host([quiet][disabled]:hover) .input { + background-color: initial; + border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled)); + } + + :host([quiet][disabled]:hover) .input::placeholder { + color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); + } + + :host([readonly]) #textfield:hover .input { + border-color: #0000; + outline: none; + } + + :host([readonly]) #textfield:hover .input, :host([readonly]) #textfield:hover .input::placeholder { + background-color: initial; + color: var(--highcontrast-textfield-text-color-readonly, var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))); + } } .spectrum-Textfield--sideLabel { - grid-template-rows: auto auto; - grid-template-columns: auto auto auto; + grid-template-rows: auto auto; + grid-template-columns: auto auto auto; } .spectrum-Textfield--sideLabel:after { - grid-area: 1 / 2 / span 1 / span 1; + grid-area: 1 / 2 / span 1 / span 1; } .spectrum-Textfield--sideLabel .spectrum-FieldLabel { - grid-area: 1 / 1 / span 2 / span 1; - margin-inline-end: var( - --mod-textfield-label-spacing-inline-side-label, - var(--spectrum-textfield-label-spacing-inline-side-label) - ); + grid-area: 1 / 1 / span 2 / span 1; + margin-inline-end: var(--mod-textfield-label-spacing-inline-side-label, var(--spectrum-textfield-label-spacing-inline-side-label)); } .spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount { - grid-area: 1 / 3 / auto / span 1; - align-items: flex-start; - margin-block-start: var( - --mod-textfield-character-count-spacing-block-side, - var(--spectrum-textfield-character-count-spacing-block-side) - ); - margin-inline-start: var( - --mod-textfield-character-count-spacing-inline-side, - var(--spectrum-textfield-character-count-spacing-inline-side) - ); + grid-area: 1 / 3 / auto / span 1; + align-items: flex-start; + margin-block-start: var(--mod-textfield-character-count-spacing-block-side, var(--spectrum-textfield-character-count-spacing-block-side)); + margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side)); } .spectrum-Textfield--sideLabel .spectrum-HelpText { - grid-area: 2 / 2 / auto / span 1; + grid-area: 2 / 2 / auto / span 1; } -.spectrum-Textfield--sideLabel .input, -.spectrum-Textfield--sideLabel .icon { - grid-area: 1 / 2 / span 1 / span 1; +.spectrum-Textfield--sideLabel .input, .spectrum-Textfield--sideLabel .icon { + grid-area: 1 / 2 / span 1 / span 1; } :host([multiline]) { - --spectrum-textfield-input-line-height: normal; + --spectrum-textfield-input-line-height: normal; } :host([multiline]) .input { - min-inline-size: var( - --mod-text-area-min-inline-size, - var(--spectrum-text-area-min-inline-size) - ); - min-block-size: var( - --mod-text-area-min-block-size, - var(--spectrum-text-area-min-block-size) - ); - resize: inherit; + min-inline-size: var(--mod-text-area-min-inline-size, var(--spectrum-text-area-min-inline-size)); + min-block-size: var(--mod-text-area-min-block-size, var(--spectrum-text-area-min-block-size)); + resize: inherit; } :host([multiline][grows]) .input { - grid-row: 2; + grid-row: 2; } :host([multiline][grows]) .spectrum-Textfield--sideLabel .input { - grid-row: 1; + grid-row: 1; } :host([multiline][quiet]) .input { - min-block-size: var( - --mod-text-area-min-block-size-quiet, - var(--spectrum-text-area-min-block-size-quiet) - ); - resize: none; - overflow-y: hidden; + min-block-size: var(--mod-text-area-min-block-size-quiet, var(--spectrum-text-area-min-block-size-quiet)); + resize: none; + overflow-y: hidden; } @media (forced-colors: active) { - :host { - --highcontrast-textfield-border-color-hover: Highlight; - --highcontrast-textfield-border-color-focus: Highlight; - --highcontrast-textfield-border-color-keyboard-focus: CanvasText; - --highcontrast-textfield-focus-indicator-color: Highlight; - --highcontrast-textfield-border-color-invalid-default: Highlight; - --highcontrast-textfield-border-color-invalid-hover: Highlight; - --highcontrast-textfield-border-color-invalid-focus: Highlight; - --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; - --highcontrast-textfield-text-color-valid: CanvasText; - --highcontrast-textfield-text-color-invalid: CanvasText; - } - - #textfield .input { - --highcontrast-textfield-text-color-default: CanvasText; - --highcontrast-textfield-text-color-hover: CanvasText; - --highcontrast-textfield-text-color-keyboard-focus: CanvasText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } - - #textfield .input::placeholder { - --highcontrast-textfield-text-color-default: GrayText; - --highcontrast-textfield-text-color-hover: GrayText; - --highcontrast-textfield-text-color-keyboard-focus: GrayText; - --highcontrast-textfield-text-color-disabled: GrayText; - --highcontrast-textfield-text-color-readonly: CanvasText; - } + :host { + --highcontrast-textfield-border-color-hover: Highlight; + --highcontrast-textfield-border-color-focus: Highlight; + --highcontrast-textfield-border-color-keyboard-focus: CanvasText; + --highcontrast-textfield-focus-indicator-color: Highlight; + --highcontrast-textfield-border-color-invalid-default: Highlight; + --highcontrast-textfield-border-color-invalid-hover: Highlight; + --highcontrast-textfield-border-color-invalid-focus: Highlight; + --highcontrast-textfield-border-color-invalid-keyboard-focus: Highlight; + --highcontrast-textfield-text-color-valid: CanvasText; + --highcontrast-textfield-text-color-invalid: CanvasText; + } + + #textfield .input { + --highcontrast-textfield-text-color-default: CanvasText; + --highcontrast-textfield-text-color-hover: CanvasText; + --highcontrast-textfield-text-color-keyboard-focus: CanvasText; + --highcontrast-textfield-text-color-disabled: GrayText; + --highcontrast-textfield-text-color-readonly: CanvasText; + } + + #textfield .input::placeholder { + --highcontrast-textfield-text-color-default: GrayText; + --highcontrast-textfield-text-color-hover: GrayText; + --highcontrast-textfield-text-color-keyboard-focus: GrayText; + --highcontrast-textfield-text-color-disabled: GrayText; + --highcontrast-textfield-text-color-readonly: CanvasText; + } } + diff --git a/packages/textfield/src/textfield-overrides.css b/packages/textfield/src/textfield-overrides.css index 8b6f36a225..e32545afce 100644 --- a/packages/textfield/src/textfield-overrides.css +++ b/packages/textfield/src/textfield-overrides.css @@ -1,415 +1,166 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-textfield-border-color: var(--system-textfield-border-color); - --spectrum-textfield-border-color-hover: var( - --system-textfield-border-color-hover - ); - --spectrum-textfield-border-color-focus: var( - --system-textfield-border-color-focus - ); - --spectrum-textfield-border-color-focus-hover: var( - --system-textfield-border-color-focus-hover - ); - --spectrum-textfield-border-color-keyboard-focus: var( - --system-textfield-border-color-keyboard-focus - ); - --spectrum-textfield-border-width: var(--system-textfield-border-width); - --spectrum-texfield-animation-duration: var( - --system-textfield-texfield-animation-duration - ); - --spectrum-textfield-width: var(--system-textfield-width); - --spectrum-textfield-min-width: var(--system-textfield-min-width); - --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); - --spectrum-textfield-spacing-inline-quiet: var( - --system-textfield-spacing-inline-quiet - ); - --spectrum-textfield-spacing-block-start: var( - --system-textfield-spacing-block-start - ); - --spectrum-textfield-spacing-block-end: var( - --system-textfield-spacing-block-end - ); - --spectrum-textfield-spacing-block-quiet: var( - --system-textfield-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-block: var( - --system-textfield-label-spacing-block - ); - --spectrum-textfield-helptext-spacing-block: var( - --system-textfield-helptext-spacing-block - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var( - --system-textfield-icon-spacing-inline-end-quiet-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var( - --system-textfield-icon-spacing-inline-end-quiet-valid - ); - --spectrum-textfield-font-family: var(--system-textfield-font-family); - --spectrum-textfield-font-weight: var(--system-textfield-font-weight); - --spectrum-textfield-character-count-font-family: var( - --system-textfield-character-count-font-family - ); - --spectrum-textfield-character-count-font-weight: var( - --system-textfield-character-count-font-weight - ); - --spectrum-textfield-character-count-spacing-inline: var( - --system-textfield-character-count-spacing-inline - ); - --spectrum-textfield-character-count-spacing-inline-side: var( - --system-textfield-character-count-spacing-inline-side - ); - --spectrum-textfield-focus-indicator-width: var( - --system-textfield-focus-indicator-width - ); - --spectrum-textfield-focus-indicator-gap: var( - --system-textfield-focus-indicator-gap - ); - --spectrum-textfield-background-color: var( - --system-textfield-background-color - ); - --spectrum-textfield-text-color-default: var( - --system-textfield-text-color-default - ); - --spectrum-textfield-text-color-hover: var( - --system-textfield-text-color-hover - ); - --spectrum-textfield-text-color-focus: var( - --system-textfield-text-color-focus - ); - --spectrum-textfield-text-color-focus-hover: var( - --system-textfield-text-color-focus-hover - ); - --spectrum-textfield-text-color-keyboard-focus: var( - --system-textfield-text-color-keyboard-focus - ); - --spectrum-textfield-text-color-readonly: var( - --system-textfield-text-color-readonly - ); - --spectrum-textfield-background-color-disabled: var( - --system-textfield-background-color-disabled - ); - --spectrum-textfield-border-color-disabled: var( - --system-textfield-border-color-disabled - ); - --spectrum-textfield-text-color-disabled: var( - --system-textfield-text-color-disabled - ); - --spectrum-textfield-border-color-invalid-default: var( - --system-textfield-border-color-invalid-default - ); - --spectrum-textfield-border-color-invalid-hover: var( - --system-textfield-border-color-invalid-hover - ); - --spectrum-textfield-border-color-invalid-focus: var( - --system-textfield-border-color-invalid-focus - ); - --spectrum-textfield-border-color-invalid-focus-hover: var( - --system-textfield-border-color-invalid-focus-hover - ); - --spectrum-textfield-border-color-invalid-keyboard-focus: var( - --system-textfield-border-color-invalid-keyboard-focus - ); - --spectrum-textfield-icon-color-invalid: var( - --system-textfield-icon-color-invalid - ); - --spectrum-textfield-text-color-invalid: var( - --system-textfield-text-color-invalid - ); - --spectrum-textfield-text-color-valid: var( - --system-textfield-text-color-valid - ); - --spectrum-textfield-icon-color-valid: var( - --system-textfield-icon-color-valid - ); - --spectrum-textfield-focus-indicator-color: var( - --system-textfield-focus-indicator-color - ); - --spectrum-text-area-min-inline-size: var( - --system-textfield-text-area-min-inline-size - ); - --spectrum-text-area-min-block-size: var( - --system-textfield-text-area-min-block-size - ); - --spectrum-textfield-height: var(--system-textfield-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-text-area-min-block-size-quiet - ); + --spectrum-textfield-border-color: var(--system-textfield-border-color); + --spectrum-textfield-border-color-hover: var(--system-textfield-border-color-hover); + --spectrum-textfield-border-color-focus: var(--system-textfield-border-color-focus); + --spectrum-textfield-border-color-focus-hover: var(--system-textfield-border-color-focus-hover); + --spectrum-textfield-border-color-keyboard-focus: var(--system-textfield-border-color-keyboard-focus); + --spectrum-textfield-border-width: var(--system-textfield-border-width); + --spectrum-texfield-animation-duration: var(--system-textfield-texfield-animation-duration); + --spectrum-textfield-width: var(--system-textfield-width); + --spectrum-textfield-min-width: var(--system-textfield-min-width); + --spectrum-textfield-corner-radius: var(--system-textfield-corner-radius); + --spectrum-textfield-spacing-inline-quiet: var(--system-textfield-spacing-inline-quiet); + --spectrum-textfield-spacing-block-start: var(--system-textfield-spacing-block-start); + --spectrum-textfield-spacing-block-end: var(--system-textfield-spacing-block-end); + --spectrum-textfield-spacing-block-quiet: var(--system-textfield-spacing-block-quiet); + --spectrum-textfield-label-spacing-block: var(--system-textfield-label-spacing-block); + --spectrum-textfield-helptext-spacing-block: var(--system-textfield-helptext-spacing-block); + --spectrum-textfield-icon-spacing-inline-end-quiet-invalid: var(--system-textfield-icon-spacing-inline-end-quiet-invalid); + --spectrum-textfield-icon-spacing-inline-end-quiet-valid: var(--system-textfield-icon-spacing-inline-end-quiet-valid); + --spectrum-textfield-font-family: var(--system-textfield-font-family); + --spectrum-textfield-font-weight: var(--system-textfield-font-weight); + --spectrum-textfield-character-count-font-family: var(--system-textfield-character-count-font-family); + --spectrum-textfield-character-count-font-weight: var(--system-textfield-character-count-font-weight); + --spectrum-textfield-character-count-spacing-inline: var(--system-textfield-character-count-spacing-inline); + --spectrum-textfield-character-count-spacing-inline-side: var(--system-textfield-character-count-spacing-inline-side); + --spectrum-textfield-focus-indicator-width: var(--system-textfield-focus-indicator-width); + --spectrum-textfield-focus-indicator-gap: var(--system-textfield-focus-indicator-gap); + --spectrum-textfield-background-color: var(--system-textfield-background-color); + --spectrum-textfield-text-color-default: var(--system-textfield-text-color-default); + --spectrum-textfield-text-color-hover: var(--system-textfield-text-color-hover); + --spectrum-textfield-text-color-focus: var(--system-textfield-text-color-focus); + --spectrum-textfield-text-color-focus-hover: var(--system-textfield-text-color-focus-hover); + --spectrum-textfield-text-color-keyboard-focus: var(--system-textfield-text-color-keyboard-focus); + --spectrum-textfield-text-color-readonly: var(--system-textfield-text-color-readonly); + --spectrum-textfield-background-color-disabled: var(--system-textfield-background-color-disabled); + --spectrum-textfield-border-color-disabled: var(--system-textfield-border-color-disabled); + --spectrum-textfield-text-color-disabled: var(--system-textfield-text-color-disabled); + --spectrum-textfield-border-color-invalid-default: var(--system-textfield-border-color-invalid-default); + --spectrum-textfield-border-color-invalid-hover: var(--system-textfield-border-color-invalid-hover); + --spectrum-textfield-border-color-invalid-focus: var(--system-textfield-border-color-invalid-focus); + --spectrum-textfield-border-color-invalid-focus-hover: var(--system-textfield-border-color-invalid-focus-hover); + --spectrum-textfield-border-color-invalid-keyboard-focus: var(--system-textfield-border-color-invalid-keyboard-focus); + --spectrum-textfield-icon-color-invalid: var(--system-textfield-icon-color-invalid); + --spectrum-textfield-text-color-invalid: var(--system-textfield-text-color-invalid); + --spectrum-textfield-text-color-valid: var(--system-textfield-text-color-valid); + --spectrum-textfield-icon-color-valid: var(--system-textfield-icon-color-valid); + --spectrum-textfield-focus-indicator-color: var(--system-textfield-focus-indicator-color); + --spectrum-text-area-min-inline-size: var(--system-textfield-text-area-min-inline-size); + --spectrum-text-area-min-block-size: var(--system-textfield-text-area-min-block-size); + --spectrum-textfield-height: var(--system-textfield-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-text-area-min-block-size-quiet); } -:host([size='s']) { - --spectrum-textfield-height: var(--system-textfield-size-s-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-s-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-s-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-s-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-s-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-s-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-s-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-s-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-s-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-s-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-s-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-s-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-s-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-s-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-s-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-s-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-s-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-s-text-area-min-block-size-quiet - ); +:host([size="s"]) { + --spectrum-textfield-height: var(--system-textfield-size-s-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-s-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-s-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-s-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-size-s-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-s-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-size-s-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-s-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-s-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-s-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-s-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-s-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-s-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-size-s-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-s-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-s-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-s-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-s-text-area-min-block-size-quiet); } :host { - --spectrum-textfield-height: var(--system-textfield-size-m-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-m-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-m-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-m-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-m-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-m-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-m-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-m-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-m-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-m-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-m-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-m-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-m-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-m-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-m-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-m-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-m-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-m-text-area-min-block-size-quiet - ); + --spectrum-textfield-height: var(--system-textfield-size-m-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-m-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-m-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-m-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-size-m-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-m-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-size-m-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-m-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-m-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-m-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-m-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-m-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-m-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-size-m-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-m-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-m-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-m-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-m-text-area-min-block-size-quiet); } -:host([size='l']) { - --spectrum-textfield-height: var(--system-textfield-size-l-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-l-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-l-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-l-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-l-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-l-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-l-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-l-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-l-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-l-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-l-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-l-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-l-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-l-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-l-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-l-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-l-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-l-text-area-min-block-size-quiet - ); +:host([size="l"]) { + --spectrum-textfield-height: var(--system-textfield-size-l-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-l-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-l-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-l-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-size-l-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-l-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-size-l-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-l-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-l-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-l-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-l-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-l-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-l-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-size-l-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-l-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-l-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-l-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-l-text-area-min-block-size-quiet); } -:host([size='xl']) { - --spectrum-textfield-height: var(--system-textfield-size-xl-height); - --spectrum-textfield-label-spacing-block-quiet: var( - --system-textfield-size-xl-label-spacing-block-quiet - ); - --spectrum-textfield-label-spacing-inline-side-label: var( - --system-textfield-size-xl-label-spacing-inline-side-label - ); - --spectrum-textfield-placeholder-font-size: var( - --system-textfield-size-xl-placeholder-font-size - ); - --spectrum-textfield-spacing-inline: var( - --system-textfield-size-xl-spacing-inline - ); - --spectrum-textfield-icon-size-invalid: var( - --system-textfield-size-xl-icon-size-invalid - ); - --spectrum-textfield-icon-size-valid: var( - --system-textfield-size-xl-icon-size-valid - ); - --spectrum-textfield-icon-spacing-inline-end-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-end-invalid - ); - --spectrum-textfield-icon-spacing-inline-end-valid: var( - --system-textfield-size-xl-icon-spacing-inline-end-valid - ); - --spectrum-textfield-icon-spacing-block-invalid: var( - --system-textfield-size-xl-icon-spacing-block-invalid - ); - --spectrum-textfield-icon-spacing-block-valid: var( - --system-textfield-size-xl-icon-spacing-block-valid - ); - --spectrum-textfield-icon-spacing-inline-start-invalid: var( - --system-textfield-size-xl-icon-spacing-inline-start-invalid - ); - --spectrum-textfield-icon-spacing-inline-start-valid: var( - --system-textfield-size-xl-icon-spacing-inline-start-valid - ); - --spectrum-textfield-character-count-font-size: var( - --system-textfield-size-xl-character-count-font-size - ); - --spectrum-textfield-character-count-spacing-block: var( - --system-textfield-size-xl-character-count-spacing-block - ); - --spectrum-textfield-character-count-spacing-block-quiet: var( - --system-textfield-size-xl-character-count-spacing-block-quiet - ); - --spectrum-textfield-character-count-spacing-block-side: var( - --system-textfield-size-xl-character-count-spacing-block-side - ); - --spectrum-text-area-min-block-size-quiet: var( - --system-textfield-size-xl-text-area-min-block-size-quiet - ); +:host([size="xl"]) { + --spectrum-textfield-height: var(--system-textfield-size-xl-height); + --spectrum-textfield-label-spacing-block-quiet: var(--system-textfield-size-xl-label-spacing-block-quiet); + --spectrum-textfield-label-spacing-inline-side-label: var(--system-textfield-size-xl-label-spacing-inline-side-label); + --spectrum-textfield-placeholder-font-size: var(--system-textfield-size-xl-placeholder-font-size); + --spectrum-textfield-spacing-inline: var(--system-textfield-size-xl-spacing-inline); + --spectrum-textfield-icon-size-invalid: var(--system-textfield-size-xl-icon-size-invalid); + --spectrum-textfield-icon-size-valid: var(--system-textfield-size-xl-icon-size-valid); + --spectrum-textfield-icon-spacing-inline-end-invalid: var(--system-textfield-size-xl-icon-spacing-inline-end-invalid); + --spectrum-textfield-icon-spacing-inline-end-valid: var(--system-textfield-size-xl-icon-spacing-inline-end-valid); + --spectrum-textfield-icon-spacing-block-invalid: var(--system-textfield-size-xl-icon-spacing-block-invalid); + --spectrum-textfield-icon-spacing-block-valid: var(--system-textfield-size-xl-icon-spacing-block-valid); + --spectrum-textfield-icon-spacing-inline-start-invalid: var(--system-textfield-size-xl-icon-spacing-inline-start-invalid); + --spectrum-textfield-icon-spacing-inline-start-valid: var(--system-textfield-size-xl-icon-spacing-inline-start-valid); + --spectrum-textfield-character-count-font-size: var(--system-textfield-size-xl-character-count-font-size); + --spectrum-textfield-character-count-spacing-block: var(--system-textfield-size-xl-character-count-spacing-block); + --spectrum-textfield-character-count-spacing-block-quiet: var(--system-textfield-size-xl-character-count-spacing-block-quiet); + --spectrum-textfield-character-count-spacing-block-side: var(--system-textfield-size-xl-character-count-spacing-block-side); + --spectrum-text-area-min-block-size-quiet: var(--system-textfield-size-xl-text-area-min-block-size-quiet); } + diff --git a/packages/thumbnail/src/spectrum-thumbnail.css b/packages/thumbnail/src/spectrum-thumbnail.css index f7723b6891..3641559ef4 100644 --- a/packages/thumbnail/src/spectrum-thumbnail.css +++ b/packages/thumbnail/src/spectrum-thumbnail.css @@ -1,292 +1,202 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host, -:host([size='500']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); +:host, :host([size="500"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); } -:host([size='50']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); +:host([size="50"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); } -:host([size='75']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); +:host([size="75"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); } -:host([size='100']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); +:host([size="100"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); } -:host([size='200']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); +:host([size="200"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); } -:host([size='300']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); +:host([size="300"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); } -:host([size='400']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); +:host([size="400"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); } -:host([size='600']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); +:host([size="600"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); } -:host([size='700']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); +:host([size="700"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); } -:host([size='800']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); +:host([size="800"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); } -:host([size='900']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); +:host([size="900"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); } -:host([size='1000']) { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); +:host([size="1000"]) { + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); } :host { - --spectrum-thumbnail-size: var( - --mod-thumbnail-size, - var(--spectrum-thumbnail-sized-size) - ); - --spectrum-thumbnail-border-color: var( - --highcontrast-thumbnail-border-color, - var( - --mod-thumbnail-border-color, - rgba( - var(--spectrum-gray-800-rgb), - var(--spectrum-thumbnail-border-opacity) - ) - ) - ); - --spectrum-thumbnail-border-color-selected: var( - --highcontrast-thumbnail-border-color-selected, - var( - --mod-thumbnail-border-color-selected, - var(--spectrum-accent-color-800) - ) - ); - --spectrum-thumbnail-border-width: var( - --mod-thumbnail-border-width, - var(--spectrum-border-width-100) - ); - --spectrum-thumbnail-border-width-selected: var( - --mod-thumbnail-border-width-selected, - var(--spectrum-border-width-200) - ); - --spectrum-thumbnail-border-radius-default: var( - --mod-thumbnail-border-radius, - var(--spectrum-thumbnail-border-radius) - ); - --spectrum-thumbnail-layer-border-color-inner: var( - --highcontrast-thumbnail-layer-border-color-inner, - var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)) - ); - --spectrum-thumbnail-layer-border-color-outer: var( - --highcontrast-thumbnail-layer-border-color-outer, - var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)) - ); - --spectrum-thumbnail-layer-border-width-inner: var( - --mod-thumbnail-layer-border-width-inner, - var(--spectrum-border-width-400) - ); - --spectrum-thumbnail-layer-border-width-outer: var( - --mod-thumbnail-layer-border-width-outer, - var(--spectrum-border-width-100) - ); - --spectrum-thumbnail-focus-indicator-thickness: var( - --mod-thumbnail-focus-indicator-thickness, - var(--spectrum-focus-indicator-thickness) - ); - --spectrum-thumbnail-focus-indicator-gap: var( - --mod-thumbnail-focus-indicator-gap, - var(--spectrum-focus-indicator-gap) - ); - --spectrum-thumbnail-focus-indicator-color: var( - --highcontrast-thumbnail-focus-indicator-color, - var( - --mod-thumbnail-focus-indicator-color, - var(--spectrum-focus-indicator-color) - ) - ); - --spectrum-thumbnail-color-opacity-disabled: var( - --spectrum-thumbnail-opacity-disabled - ); - inline-size: var(--spectrum-thumbnail-size); - block-size: var(--spectrum-thumbnail-size); - z-index: 0; - margin: 0; - padding: 0; - display: block; - position: relative; - overflow: hidden; + --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size)); + --spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)))); + --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800))); + --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100)); + --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200)); + --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white))); + --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500))); + --spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400)); + --spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100)); + --spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + inline-size: var(--spectrum-thumbnail-size); + block-size: var(--spectrum-thumbnail-size); + z-index: 0; + margin: 0; + padding: 0; + display: block; + position: relative; + overflow: hidden; +} + +:host, :host:before { + border-radius: var(--spectrum-thumbnail-border-radius-default); } -:host, :host:before { - border-radius: var(--spectrum-thumbnail-border-radius-default); -} - -:host:before { - content: ''; - z-index: 2; - inline-size: 100%; - block-size: 100%; - box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) - var(--spectrum-thumbnail-border-color); - position: absolute; + content: ""; + z-index: 2; + inline-size: 100%; + block-size: 100%; + box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color); + position: absolute; } :host([disabled]) { - opacity: var( - --mod-thumbnail-color-opacity-disabled, - var(--spectrum-thumbnail-color-opacity-disabled) - ); + opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled)); } :host([focused]) { - overflow: visible; + overflow: visible; } :host([focused]):after { - content: ''; - border-style: solid; - border-width: var(--spectrum-thumbnail-focus-indicator-thickness); - border-color: var(--spectrum-thumbnail-focus-indicator-color); - border-radius: var(--spectrum-thumbnail-border-radius-default); - position: absolute; - inset-block-start: calc( - ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) - ) * -1 - ); - inset-block-end: calc( - ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) - ) * -1 - ); - inset-inline-start: calc( - ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) - ) * -1 - ); - inset-inline-end: calc( - ( - var(--spectrum-thumbnail-focus-indicator-gap) + - var(--spectrum-thumbnail-focus-indicator-thickness) - ) * -1 - ); + content: ""; + border-style: solid; + border-width: var(--spectrum-thumbnail-focus-indicator-thickness); + border-color: var(--spectrum-thumbnail-focus-indicator-color); + border-radius: var(--spectrum-thumbnail-border-radius-default); + position: absolute; + inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); + inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); + inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); + inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); } :host([focused]) .image-wrapper { - border-radius: var(--spectrum-thumbnail-border-radius-default); - overflow: hidden; + border-radius: var(--spectrum-thumbnail-border-radius-default); + overflow: hidden; } :host([layer]) { - border-style: solid; - border-width: var(--spectrum-thumbnail-layer-border-width-outer); - border-color: var(--spectrum-thumbnail-layer-border-color-outer); - box-sizing: border-box; - justify-content: center; - align-items: center; - display: flex; + border-style: solid; + border-width: var(--spectrum-thumbnail-layer-border-width-outer); + border-color: var(--spectrum-thumbnail-layer-border-color-outer); + box-sizing: border-box; + justify-content: center; + align-items: center; + display: flex; } :host([layer]):before { - content: none; + content: none; } :host([layer][selected]) { - outline-style: solid; - outline-color: var(--spectrum-thumbnail-border-color-selected); - outline-width: var(--spectrum-thumbnail-border-width-selected); - outline-offset: calc( - var(--spectrum-thumbnail-border-width-selected) - - var(--spectrum-thumbnail-layer-border-width-inner) - ); + outline-style: solid; + outline-color: var(--spectrum-thumbnail-border-color-selected); + outline-width: var(--spectrum-thumbnail-border-width-selected); + outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner)); } .layer-inner { - inline-size: calc( - var(--spectrum-thumbnail-size) - - var(--spectrum-thumbnail-layer-border-width-inner) * 2 - ); - block-size: calc( - var(--spectrum-thumbnail-size) - - var(--spectrum-thumbnail-layer-border-width-inner) * 2 - ); - outline-style: solid; - outline-color: var(--spectrum-thumbnail-layer-border-color-inner); - outline-width: calc( - var(--spectrum-thumbnail-layer-border-width-inner) - - var(--spectrum-thumbnail-layer-border-width-outer) - ); - justify-content: center; - align-items: center; - display: flex; + inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2); + block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2); + outline-style: solid; + outline-color: var(--spectrum-thumbnail-layer-border-color-inner); + outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer)); + justify-content: center; + align-items: center; + display: flex; } .image-wrapper { - inline-size: 100%; - block-size: 100%; - justify-content: center; - align-items: center; - display: flex; + inline-size: 100%; + block-size: 100%; + justify-content: center; + align-items: center; + display: flex; } ::slotted(*) { - max-inline-size: 100%; - max-block-size: 100%; - z-index: 1; - position: relative; + max-inline-size: 100%; + max-block-size: 100%; + z-index: 1; + position: relative; } :host([cover]) ::slotted(*) { - block-size: 100%; - inline-size: 100%; - object-fit: cover; - object-position: center; + block-size: 100%; + inline-size: 100%; + object-fit: cover; + object-position: center; } .background { - z-index: 0; - block-size: 100%; - inline-size: 100%; - border-radius: var(--spectrum-thumbnail-border-radius-default); - background-position: 50%; - background-size: cover; - position: absolute; - inset-block: 0; - inset-inline: 0; + z-index: 0; + block-size: 100%; + inline-size: 100%; + border-radius: var(--spectrum-thumbnail-border-radius-default); + background-position: 50%; + background-size: cover; + position: absolute; + inset-block: 0; + inset-inline: 0; } @media (forced-colors: active) { - :host { - --highcontrast-thumbnail-border-color-selected: Highlight; - --highcontrast-thumbnail-focus-indicator-color: Highlight; - --highcontrast-thumbnail-border-color: CanvasText; - --highcontrast-thumbnail-layer-border-color-inner: Canvas; - --highcontrast-thumbnail-layer-border-color-outer: CanvasText; - forced-color-adjust: none; - } + :host { + --highcontrast-thumbnail-border-color-selected: Highlight; + --highcontrast-thumbnail-focus-indicator-color: Highlight; + --highcontrast-thumbnail-border-color: CanvasText; + --highcontrast-thumbnail-layer-border-color-inner: Canvas; + --highcontrast-thumbnail-layer-border-color-outer: CanvasText; + forced-color-adjust: none; + } } + diff --git a/packages/thumbnail/src/thumbnail-overrides.css b/packages/thumbnail/src/thumbnail-overrides.css index ef0b80a2f3..e5ebfb75f2 100644 --- a/packages/thumbnail/src/thumbnail-overrides.css +++ b/packages/thumbnail/src/thumbnail-overrides.css @@ -1,16 +1,17 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius); + --spectrum-thumbnail-border-radius: var(--system-thumbnail-border-radius); } + diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css index 06a2738fbe..9ca21d1497 100644 --- a/packages/toast/src/spectrum-toast.css +++ b/packages/toast/src/spectrum-toast.css @@ -1,267 +1,128 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - :host { - --highcontrast-toast-border-color: ButtonText; - border: var( - --mod-toast-border-width, - var(--spectrum-toast-border-width) - ) - solid var(--highcontrast-toast-border-color, transparent); - } + :host { + --highcontrast-toast-border-color: ButtonText; + border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent); + } } :host { - box-sizing: border-box; - min-block-size: var( - --mod-toast-block-size, - var(--spectrum-toast-block-size) - ); - max-inline-size: var( - --mod-toast-max-inline-size, - var(--spectrum-toast-max-inline-size) - ); - border-radius: var( - --mod-toast-corner-radius, - var(--spectrum-toast-corner-radius) - ); - font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); - font-weight: var( - --mod-toast-font-weight, - var(--spectrum-toast-font-weight) - ); - -webkit-font-smoothing: antialiased; - background-color: var( - --highcontrast-toast-background-color-default, - var( - --mod-toast-background-color-default, - var(--spectrum-toast-background-color-default) - ) - ); - color: var( - --highcontrast-toast-background-color-default, - var( - --mod-toast-background-color-default, - var(--spectrum-toast-background-color-default) - ) - ); - overflow-wrap: anywhere; - flex-direction: row; - align-items: stretch; - padding-inline-start: var( - --mod-toast-spacing-start-edge-to-text-and-icon, - var(--spectrum-toast-spacing-start-edge-to-text-and-icon) - ); - display: inline-flex; + box-sizing: border-box; + min-block-size: var(--mod-toast-block-size, var(--spectrum-toast-block-size)); + max-inline-size: var(--mod-toast-max-inline-size, var(--spectrum-toast-max-inline-size)); + border-radius: var(--mod-toast-corner-radius, var(--spectrum-toast-corner-radius)); + font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size)); + font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight)); + -webkit-font-smoothing: antialiased; + background-color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); + color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); + overflow-wrap: anywhere; + flex-direction: row; + align-items: stretch; + padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon)); + display: inline-flex; } -:host([variant='negative']) { - background-color: var( - --highcontrast-toast-negative-background-color-default, - var( - --mod-toast-negative-background-color-default, - var(--spectrum-toast-negative-background-color-default) - ) - ); +:host([variant="negative"]) { + background-color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); } -:host([variant='negative']), -:host([variant='negative']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-negative-background-color-default, - var( - --mod-toast-negative-background-color-default, - var(--spectrum-toast-negative-background-color-default) - ) - ); +:host([variant="negative"]), :host([variant="negative"]) .closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); } -:host([variant='info']) { - background-color: var( - --highcontrast-toast-informative-background-color-default, - var( - --mod-toast-informative-background-color-default, - var(--spectrum-toast-informative-background-color-default) - ) - ); +:host([variant="info"]) { + background-color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); } -:host([variant='info']), -:host([variant='info']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-informative-background-color-default, - var( - --mod-toast-informative-background-color-default, - var(--spectrum-toast-informative-background-color-default) - ) - ); +:host([variant="info"]), :host([variant="info"]) .closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); } -:host([variant='positive']) { - background-color: var( - --highcontrast-toast-positive-background-color-default, - var( - --mod-toast-positive-background-color-default, - var(--spectrum-toast-positive-background-color-default) - ) - ); +:host([variant="positive"]) { + background-color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); } -:host([variant='positive']), -:host([variant='positive']) .closeButton:focus-visible:not(:active) { - color: var( - --highcontrast-toast-positive-background-color-default, - var( - --mod-toast-positive-background-color-default, - var(--spectrum-toast-positive-background-color-default) - ) - ); +:host([variant="positive"]), :host([variant="positive"]) .closeButton:focus-visible:not(:active) { + color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); } .type { - flex-grow: 0; - flex-shrink: 0; - margin-block-start: var( - --mod-toast-spacing-top-edge-to-icon, - var(--spectrum-toast-spacing-top-edge-to-icon) - ); - margin-inline-start: 0; - margin-inline-end: var( - --mod-toast-spacing-icon-to-text, - var(--spectrum-toast-spacing-icon-to-text) - ); + flex-grow: 0; + flex-shrink: 0; + margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon)); + margin-inline-start: 0; + margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text)); } -.content, -.type { - color: var( - --highcontrast-toast-text-and-icon-color, - var( - --mod-toast-text-and-icon-color, - var(--spectrum-toast-text-and-icon-color) - ) - ); +.content, .type { + color: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); } .content { - box-sizing: border-box; - line-height: var( - --mod-toast-line-height, - var(--spectrum-toast-line-height) - ); - text-align: start; - flex: auto; - padding-block-start: calc( - var( - --mod-toast-spacing-top-edge-to-text, - var(--spectrum-toast-spacing-top-edge-to-text) - ) - - var( - --mod-toast-spacing-block-start, - var(--spectrum-toast-spacing-block-start) - ) - ); - padding-block-end: calc( - var( - --mod-toast-spacing-bottom-edge-to-text, - var(--spectrum-toast-spacing-bottom-edge-to-text) - ) - - var( - --mod-toast-spacing-block-end, - var(--spectrum-toast-spacing-block-end) - ) - ); - padding-inline-start: 0; - padding-inline-end: var( - --mod-toast-spacing-text-to-action-button-horizontal, - var(--spectrum-toast-spacing-text-to-action-button-horizontal) - ); - display: inline-block; + box-sizing: border-box; + line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); + text-align: start; + flex: auto; + padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start))); + padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end))); + padding-inline-start: 0; + padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal)); + display: inline-block; } -.content:lang(ja), -.content:lang(ko), -.content:lang(zh) { - line-height: var( - --mod-toast-line-height-cjk, - var(--spectrum-toast-line-height-cjk) - ); +.content:lang(ja), .content:lang(ko), .content:lang(zh) { + line-height: var(--mod-toast-line-height-cjk, var(--spectrum-toast-line-height-cjk)); } .buttons { - border-inline-start-color: var( - --mod-toast-divider-color, - var(--spectrum-toast-divider-color) - ); - flex: none; - align-items: flex-start; - margin-block-start: var( - --mod-toast-spacing-top-edge-to-divider, - var(--spectrum-toast-spacing-top-edge-to-divider) - ); - margin-block-end: var( - --mod-toast-spacing-bottom-edge-to-divider, - var(--spectrum-toast-spacing-bottom-edge-to-divider) - ); - padding-inline-end: var( - --mod-toast-spacing-close-button, - var(--spectrum-toast-spacing-close-button) - ); - display: flex; + border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color)); + flex: none; + align-items: flex-start; + margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider)); + margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider)); + padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); + display: flex; } .buttons .spectrum-CloseButton { - align-self: flex-start; + align-self: flex-start; } .body { - flex-wrap: wrap; - flex: auto; - align-self: center; - align-items: center; - padding-block-start: var( - --mod-toast-spacing-block-start, - var(--spectrum-toast-spacing-block-start) - ); - padding-block-end: var( - --mod-toast-spacing-block-end, - var(--spectrum-toast-spacing-block-end) - ); - display: flex; + flex-wrap: wrap; + flex: auto; + align-self: center; + align-items: center; + padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)); + padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)); + display: flex; } -.body ::slotted([slot='action']) { - margin-inline-start: auto; - margin-inline-end: var( - --mod-toast-spacing-text-and-action-button-to-divider, - var(--spectrum-toast-spacing-text-and-action-button-to-divider) - ); +.body ::slotted([slot="action"]) { + margin-inline-start: auto; + margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); } -.body ::slotted([slot='action']:dir(rtl)), -:host([dir='rtl']) .body ::slotted([slot='action']) { - margin-inline-end: var( - --mod-toast-spacing-text-and-action-button-to-divider, - var(--spectrum-toast-spacing-text-and-action-button-to-divider) - ); +.body ::slotted([slot="action"]:dir(rtl)), :host([dir="rtl"]) .body ::slotted([slot="action"]) { + margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); } .body + .buttons { - border-inline-start-style: solid; - border-inline-start-width: 1px; - padding-inline-start: var( - --mod-toast-spacing-close-button, - var(--spectrum-toast-spacing-close-button) - ); + border-inline-start-style: solid; + border-inline-start-width: 1px; + padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); } + diff --git a/packages/toast/src/toast-overrides.css b/packages/toast/src/toast-overrides.css index 3e680e0ee0..08caae8223 100644 --- a/packages/toast/src/toast-overrides.css +++ b/packages/toast/src/toast-overrides.css @@ -1,73 +1,42 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-toast-background-color-default: var( - --system-toast-background-color-default - ); - --spectrum-toast-font-weight: var(--system-toast-font-weight); - --spectrum-toast-font-size: var(--system-toast-font-size); - --spectrum-toast-corner-radius: var(--system-toast-corner-radius); - --spectrum-toast-block-size: var(--system-toast-block-size); - --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); - --spectrum-toast-border-width: var(--system-toast-border-width); - --spectrum-toast-line-height: var(--system-toast-line-height); - --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); - --spectrum-toast-spacing-icon-to-text: var( - --system-toast-spacing-icon-to-text - ); - --spectrum-toast-spacing-start-edge-to-text-and-icon: var( - --system-toast-spacing-start-edge-to-text-and-icon - ); - --spectrum-toast-spacing-text-and-action-button-to-divider: var( - --system-toast-spacing-text-and-action-button-to-divider - ); - --spectrum-toast-spacing-top-edge-to-divider: var( - --system-toast-spacing-top-edge-to-divider - ); - --spectrum-toast-spacing-bottom-edge-to-divider: var( - --system-toast-spacing-bottom-edge-to-divider - ); - --spectrum-toast-spacing-top-edge-to-icon: var( - --system-toast-spacing-top-edge-to-icon - ); - --spectrum-toast-spacing-text-to-action-button-horizontal: var( - --system-toast-spacing-text-to-action-button-horizontal - ); - --spectrum-toast-spacing-close-button: var( - --system-toast-spacing-close-button - ); - --spectrum-toast-spacing-block-start: var( - --system-toast-spacing-block-start - ); - --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); - --spectrum-toast-spacing-top-edge-to-text: var( - --system-toast-spacing-top-edge-to-text - ); - --spectrum-toast-spacing-bottom-edge-to-text: var( - --system-toast-spacing-bottom-edge-to-text - ); - --spectrum-toast-negative-background-color-default: var( - --system-toast-negative-background-color-default - ); - --spectrum-toast-positive-background-color-default: var( - --system-toast-positive-background-color-default - ); - --spectrum-toast-informative-background-color-default: var( - --system-toast-informative-background-color-default - ); - --spectrum-toast-text-and-icon-color: var( - --system-toast-text-and-icon-color - ); - --spectrum-toast-divider-color: var(--system-toast-divider-color); + --spectrum-toast-background-color-default: var(--system-toast-background-color-default); + --spectrum-toast-font-weight: var(--system-toast-font-weight); + --spectrum-toast-font-size: var(--system-toast-font-size); + --spectrum-toast-corner-radius: var(--system-toast-corner-radius); + --spectrum-toast-block-size: var(--system-toast-block-size); + --spectrum-toast-max-inline-size: var(--system-toast-max-inline-size); + --spectrum-toast-border-width: var(--system-toast-border-width); + --spectrum-toast-line-height: var(--system-toast-line-height); + --spectrum-toast-line-height-cjk: var(--system-toast-line-height-cjk); + --spectrum-toast-spacing-icon-to-text: var(--system-toast-spacing-icon-to-text); + --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--system-toast-spacing-start-edge-to-text-and-icon); + --spectrum-toast-spacing-text-and-action-button-to-divider: var(--system-toast-spacing-text-and-action-button-to-divider); + --spectrum-toast-spacing-top-edge-to-divider: var(--system-toast-spacing-top-edge-to-divider); + --spectrum-toast-spacing-bottom-edge-to-divider: var(--system-toast-spacing-bottom-edge-to-divider); + --spectrum-toast-spacing-top-edge-to-icon: var(--system-toast-spacing-top-edge-to-icon); + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--system-toast-spacing-text-to-action-button-horizontal); + --spectrum-toast-spacing-close-button: var(--system-toast-spacing-close-button); + --spectrum-toast-spacing-block-start: var(--system-toast-spacing-block-start); + --spectrum-toast-spacing-block-end: var(--system-toast-spacing-block-end); + --spectrum-toast-spacing-top-edge-to-text: var(--system-toast-spacing-top-edge-to-text); + --spectrum-toast-spacing-bottom-edge-to-text: var(--system-toast-spacing-bottom-edge-to-text); + --spectrum-toast-negative-background-color-default: var(--system-toast-negative-background-color-default); + --spectrum-toast-positive-background-color-default: var(--system-toast-positive-background-color-default); + --spectrum-toast-informative-background-color-default: var(--system-toast-informative-background-color-default); + --spectrum-toast-text-and-icon-color: var(--system-toast-text-and-icon-color); + --spectrum-toast-divider-color: var(--system-toast-divider-color); } + diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css index 5f133656b3..1a3e65ed61 100644 --- a/packages/tooltip/src/spectrum-tooltip.css +++ b/packages/tooltip/src/spectrum-tooltip.css @@ -1,759 +1,262 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #tooltip { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: transform .13s ease-in-out, opacity .13s ease-in-out, visibility 0s linear .13s; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)); } :host([open]) #tooltip { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s)); } @media (forced-colors: active) { - #tooltip { - border: 1px solid #0000; - } + #tooltip { + border: 1px solid #0000; + } - #tip { - --highcontrast-tooltip-background-color-default: CanvasText; - --highcontrast-tooltip-background-color-informative: CanvasText; - --highcontrast-tooltip-background-color-positive: CanvasText; - --highcontrast-tooltip-background-color-negative: CanvasText; - forced-color-adjust: none; - } + #tip { + --highcontrast-tooltip-background-color-default: CanvasText; + --highcontrast-tooltip-background-color-informative: CanvasText; + --highcontrast-tooltip-background-color-positive: CanvasText; + --highcontrast-tooltip-background-color-negative: CanvasText; + forced-color-adjust: none; + } } #tooltip { - box-sizing: border-box; - vertical-align: top; - inline-size: auto; - padding-inline: var( - --mod-tooltip-spacing-inline, - var(--spectrum-tooltip-spacing-inline) - ); - border-radius: var( - --mod-tooltip-border-radius, - var(--spectrum-tooltip-border-radius) - ); - block-size: auto; - min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); - max-inline-size: var( - --mod-tooltip-max-inline-size, - var(--spectrum-tooltip-max-inline-size) - ); - background-color: var( - --highcontrast-tooltip-background-color-default, - var( - --mod-tooltip-background-color-default, - var(--spectrum-tooltip-background-color-default) - ) - ); - color: var( - --mod-tooltip-content-color, - var(--spectrum-tooltip-content-color) - ); - font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); - font-weight: var( - --mod-tooltip-font-weight, - var(--spectrum-tooltip-font-weight) - ); - line-height: var( - --mod-tooltip-line-height, - var(--spectrum-tooltip-line-height) - ); - word-break: break-word; - -webkit-font-smoothing: antialiased; - cursor: default; - -webkit-user-select: none; - user-select: none; - flex-direction: row; - align-items: center; - display: inline-flex; - position: relative; -} - -:host(:lang(ja)) #tooltip, -:host(:lang(ko)) #tooltip, -:host(:lang(zh)) #tooltip { - line-height: var( - --mod-tooltip-cjk-line-height, - var(--spectrum-tooltip-cjk-line-height) - ); + box-sizing: border-box; + vertical-align: top; + inline-size: auto; + padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)); + border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); + block-size: auto; + min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height)); + max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size)); + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color)); + font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size)); + font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight)); + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + word-break: break-word; + -webkit-font-smoothing: antialiased; + cursor: default; + -webkit-user-select: none; + user-select: none; + flex-direction: row; + align-items: center; + display: inline-flex; + position: relative; +} + +:host(:lang(ja)) #tooltip, :host(:lang(ko)) #tooltip, :host(:lang(zh)) #tooltip { + line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height)); } #tooltip p { - margin: 0; + margin: 0; } -:host([variant='info']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-informative, - var( - --mod-tooltip-background-color-informative, - var(--spectrum-tooltip-background-color-informative) - ) - ); +:host([variant="info"]) #tooltip { + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); } -:host([variant='positive']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-positive, - var( - --mod-tooltip-background-color-positive, - var(--spectrum-tooltip-background-color-positive) - ) - ); +:host([variant="positive"]) #tooltip { + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); } -:host([variant='negative']) #tooltip { - background-color: var( - --highcontrast-tooltip-background-color-negative, - var( - --mod-tooltip-background-color-negative, - var(--spectrum-tooltip-background-color-negative) - ) - ); +:host([variant="negative"]) #tooltip { + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); } #tip { - block-size: var( - --mod-tooltip-tip-square-size, - var(--spectrum-tooltip-tip-square-size) - ); - inline-size: var( - --mod-tooltip-tip-square-size, - var(--spectrum-tooltip-tip-square-size) - ); - inset-block-start: 100%; - background-color: var( - --highcontrast-tooltip-background-color-default, - var( - --mod-tooltip-background-color-default, - var(--spectrum-tooltip-background-color-default) - ) - ); - clip-path: polygon( - 0 - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ), - 50% - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ), - 100% - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - ); - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -:host([variant='info']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-informative, - var( - --mod-tooltip-background-color-informative, - var(--spectrum-tooltip-background-color-informative) - ) - ); -} - -:host([variant='positive']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-positive, - var( - --mod-tooltip-background-color-positive, - var(--spectrum-tooltip-background-color-positive) - ) - ); -} - -:host([variant='negative']) #tooltip #tip { - background-color: var( - --highcontrast-tooltip-background-color-negative, - var( - --mod-tooltip-background-color-negative, - var(--spectrum-tooltip-background-color-negative) - ) - ); -} - -:host([placement*='top']) #tooltip #tip, -.spectrum-Tooltip--top-end #tip, -.spectrum-Tooltip--top-left #tip, -.spectrum-Tooltip--top-right #tip, -.spectrum-Tooltip--top-start #tip { - inset-block-start: 100%; -} - -:host([placement*='bottom']) #tooltip #tip, -.spectrum-Tooltip--bottom-end #tip, -.spectrum-Tooltip--bottom-left #tip, -.spectrum-Tooltip--bottom-right #tip, -.spectrum-Tooltip--bottom-start #tip { - clip-path: polygon( - 50% - calc( - 100% - - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - ), - 0 - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ), - 100% - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - ); - inset-block: auto 100%; -} - -.spectrum-Tooltip--bottom-end #tip, -.spectrum-Tooltip--bottom-left #tip, -.spectrum-Tooltip--bottom-right #tip, -.spectrum-Tooltip--bottom-start #tip, -.spectrum-Tooltip--top-end #tip, -.spectrum-Tooltip--top-left #tip, -.spectrum-Tooltip--top-right #tip, -.spectrum-Tooltip--top-start #tip { - transform: none; -} - -.spectrum-Tooltip--bottom-left #tip, -.spectrum-Tooltip--top-left #tip { - inset-inline-start: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); -} - -.spectrum-Tooltip--bottom-right #tip, -.spectrum-Tooltip--top-right #tip { - inset-inline: auto - var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); -} - -.spectrum-Tooltip--bottom-start #tip, -.spectrum-Tooltip--top-start #tip { - inset-inline: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ) - auto; -} - -.spectrum-Tooltip--bottom-start #tip:dir(rtl), -.spectrum-Tooltip--top-start #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--bottom-start #tip, -:host([dir='rtl']) .spectrum-Tooltip--top-start #tip { - right: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); - left: auto; -} - -.spectrum-Tooltip--bottom-end #tip, -.spectrum-Tooltip--top-end #tip { - inset-inline: auto - var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); -} - -.spectrum-Tooltip--bottom-end #tip:dir(rtl), -.spectrum-Tooltip--top-end #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--bottom-end #tip, -:host([dir='rtl']) .spectrum-Tooltip--top-end #tip { - left: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); - right: auto; -} - -.spectrum-Tooltip--end #tip, -.spectrum-Tooltip--end-bottom #tip, -.spectrum-Tooltip--end-top #tip, -:host([placement*='left']) #tooltip #tip, -.spectrum-Tooltip--left-bottom #tip, -.spectrum-Tooltip--left-top #tip, -:host([placement*='right']) #tooltip #tip, -.spectrum-Tooltip--right-bottom #tip, -.spectrum-Tooltip--right-top #tip, -.spectrum-Tooltip--start #tip, -.spectrum-Tooltip--start-bottom #tip, -.spectrum-Tooltip--start-top #tip { - inset-block-start: 50%; - transform: translateY(-50%); -} - -.spectrum-Tooltip--end-bottom #tip, -.spectrum-Tooltip--end-top #tip, -.spectrum-Tooltip--left-bottom #tip, -.spectrum-Tooltip--left-top #tip, -.spectrum-Tooltip--right-bottom #tip, -.spectrum-Tooltip--right-top #tip, -.spectrum-Tooltip--start-bottom #tip, -.spectrum-Tooltip--start-top #tip { - inset-block-start: auto; - transform: none; -} - -.spectrum-Tooltip--end #tip, -.spectrum-Tooltip--end-bottom #tip, -.spectrum-Tooltip--end-top #tip, -:host([placement*='right']) #tooltip #tip, -.spectrum-Tooltip--right-bottom #tip, -.spectrum-Tooltip--right-top #tip { - clip-path: polygon( - calc( - 100% - - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - ) - 50%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0 - ); - inset-inline: auto 100%; -} - -:host([placement*='left']) #tooltip #tip, -.spectrum-Tooltip--left-bottom #tip, -.spectrum-Tooltip--left-top #tip, -.spectrum-Tooltip--start #tip, -.spectrum-Tooltip--start-bottom #tip, -.spectrum-Tooltip--start-top #tip { - clip-path: polygon( - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0, - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50% - ); - inset-inline-start: 100%; -} - -.spectrum-Tooltip--end-top #tip, -.spectrum-Tooltip--left-top #tip, -.spectrum-Tooltip--right-top #tip, -.spectrum-Tooltip--start-top #tip { - inset-block-start: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); -} - -.spectrum-Tooltip--end-bottom #tip, -.spectrum-Tooltip--left-bottom #tip, -.spectrum-Tooltip--right-bottom #tip, -.spectrum-Tooltip--start-bottom #tip { - inset-block-end: var( - --mod-tooltip-pointer-corner-spacing, - var(--spectrum-tooltip-pointer-corner-spacing) - ); -} - -.spectrum-Tooltip--end #tip:dir(rtl), -.spectrum-Tooltip--end-bottom #tip:dir(rtl), -.spectrum-Tooltip--end-top #tip:dir(rtl), -:host([placement*='left']) #tooltip #tip:dir(rtl), -.spectrum-Tooltip--left-bottom #tip:dir(rtl), -.spectrum-Tooltip--left-top #tip:dir(rtl), -:host([dir='rtl']) .spectrum-Tooltip--end #tip, -:host([dir='rtl']) .spectrum-Tooltip--end-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--end-top #tip, -:host([dir='rtl'][placement*='left']) #tooltip #tip, -:host([dir='rtl']) .spectrum-Tooltip--left-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--left-top #tip { - clip-path: polygon( - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0, - calc( - 0% - - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50% - ); - left: 100%; - right: auto; -} - -:host([placement*='right']) #tooltip #tip:dir(rtl), -.spectrum-Tooltip--right-bottom #tip:dir(rtl), -.spectrum-Tooltip--right-top #tip:dir(rtl), -.spectrum-Tooltip--start #tip:dir(rtl), -.spectrum-Tooltip--start-bottom #tip:dir(rtl), -.spectrum-Tooltip--start-top #tip:dir(rtl), -:host([dir='rtl'][placement*='right']) #tooltip #tip, -:host([dir='rtl']) .spectrum-Tooltip--right-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--right-top #tip, -:host([dir='rtl']) .spectrum-Tooltip--start #tip, -:host([dir='rtl']) .spectrum-Tooltip--start-bottom #tip, -:host([dir='rtl']) .spectrum-Tooltip--start-top #tip { - clip-path: polygon( - var( - --mod-tooltip-tip-height-percentage, - var(--spectrum-tooltip-tip-height-percentage) - ) - 50%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 100%, - calc( - 100% + - var( - --mod-tooltip-tip-antialiasing-inset, - var(--spectrum-tooltip-tip-antialiasing-inset) - ) - ) - 0 - ); - left: auto; - right: 100%; -} - -::slotted([slot='icon']) { - inline-size: var( - --mod-tooltip-icon-width, - var(--spectrum-tooltip-icon-width) - ); - block-size: var( - --mod-tooltip-icon-height, - var(--spectrum-tooltip-icon-height) - ); - flex-shrink: 0; - align-self: flex-start; - margin-block-start: var( - --mod-tooltip-icon-spacing-block-start, - var(--spectrum-tooltip-icon-spacing-block-start) - ); - margin-inline-start: calc( - var( - --mod-tooltip-icon-spacing-inline-start, - var(--spectrum-tooltip-icon-spacing-inline-start) - ) - - var( - --mod-tooltip-spacing-inline, - var(--spectrum-tooltip-spacing-inline) - ) - ); - margin-inline-end: var( - --mod-tooltip-icon-spacing-inline-end, - var(--spectrum-tooltip-icon-spacing-inline-end) - ); + block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); + inset-block-start: 100%; + background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); + clip-path: polygon(0 calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50.0% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100.0% calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +:host([variant="info"]) #tooltip #tip { + background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); +} + +:host([variant="positive"]) #tooltip #tip { + background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); +} + +:host([variant="negative"]) #tooltip #tip { + background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); +} + +:host([placement*="top"]) #tooltip #tip, .spectrum-Tooltip--top-end #tip, .spectrum-Tooltip--top-left #tip, .spectrum-Tooltip--top-right #tip, .spectrum-Tooltip--top-start #tip { + inset-block-start: 100%; +} + +:host([placement*="bottom"]) #tooltip #tip, .spectrum-Tooltip--bottom-end #tip, .spectrum-Tooltip--bottom-left #tip, .spectrum-Tooltip--bottom-right #tip, .spectrum-Tooltip--bottom-start #tip { + clip-path: polygon(50.0% calc(100.0% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100.0% calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); + inset-block: auto 100%; +} + +.spectrum-Tooltip--bottom-end #tip, .spectrum-Tooltip--bottom-left #tip, .spectrum-Tooltip--bottom-right #tip, .spectrum-Tooltip--bottom-start #tip, .spectrum-Tooltip--top-end #tip, .spectrum-Tooltip--top-left #tip, .spectrum-Tooltip--top-right #tip, .spectrum-Tooltip--top-start #tip { + transform: none; +} + +.spectrum-Tooltip--bottom-left #tip, .spectrum-Tooltip--top-left #tip { + inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); +} + +.spectrum-Tooltip--bottom-right #tip, .spectrum-Tooltip--top-right #tip { + inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); +} + +.spectrum-Tooltip--bottom-start #tip, .spectrum-Tooltip--top-start #tip { + inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto; +} + +.spectrum-Tooltip--bottom-start #tip:dir(rtl), .spectrum-Tooltip--top-start #tip:dir(rtl), :host([dir="rtl"]) .spectrum-Tooltip--bottom-start #tip, :host([dir="rtl"]) .spectrum-Tooltip--top-start #tip { + right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + left: auto; +} + +.spectrum-Tooltip--bottom-end #tip, .spectrum-Tooltip--top-end #tip { + inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); +} + +.spectrum-Tooltip--bottom-end #tip:dir(rtl), .spectrum-Tooltip--top-end #tip:dir(rtl), :host([dir="rtl"]) .spectrum-Tooltip--bottom-end #tip, :host([dir="rtl"]) .spectrum-Tooltip--top-end #tip { + left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); + right: auto; +} + +.spectrum-Tooltip--end #tip, .spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--end-top #tip, :host([placement*="left"]) #tooltip #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--left-top #tip, :host([placement*="right"]) #tooltip #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { + inset-block-start: 50%; + transform: translateY(-50%); +} + +.spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--end-top #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--left-top #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { + inset-block-start: auto; + transform: none; +} + +.spectrum-Tooltip--end #tip, .spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--end-top #tip, :host([placement*="right"]) #tooltip #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--right-top #tip { + clip-path: polygon(calc(100.0% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50.0%, calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100.0%, calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + inset-inline: auto 100%; +} + +:host([placement*="left"]) #tooltip #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--left-top #tip, .spectrum-Tooltip--start #tip, .spectrum-Tooltip--start-bottom #tip, .spectrum-Tooltip--start-top #tip { + clip-path: polygon(calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100.0%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50.0%); + inset-inline-start: 100%; +} + +.spectrum-Tooltip--end-top #tip, .spectrum-Tooltip--left-top #tip, .spectrum-Tooltip--right-top #tip, .spectrum-Tooltip--start-top #tip { + inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); +} + +.spectrum-Tooltip--end-bottom #tip, .spectrum-Tooltip--left-bottom #tip, .spectrum-Tooltip--right-bottom #tip, .spectrum-Tooltip--start-bottom #tip { + inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)); +} + +.spectrum-Tooltip--end #tip:dir(rtl), .spectrum-Tooltip--end-bottom #tip:dir(rtl), .spectrum-Tooltip--end-top #tip:dir(rtl), :host([placement*="left"]) #tooltip #tip:dir(rtl), .spectrum-Tooltip--left-bottom #tip:dir(rtl), .spectrum-Tooltip--left-top #tip:dir(rtl), :host([dir="rtl"]) .spectrum-Tooltip--end #tip, :host([dir="rtl"]) .spectrum-Tooltip--end-bottom #tip, :host([dir="rtl"]) .spectrum-Tooltip--end-top #tip, :host([dir="rtl"][placement*="left"]) #tooltip #tip, :host([dir="rtl"]) .spectrum-Tooltip--left-bottom #tip, :host([dir="rtl"]) .spectrum-Tooltip--left-top #tip { + clip-path: polygon(calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0.0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100.0%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50.0%); + left: 100%; + right: auto; +} + +:host([placement*="right"]) #tooltip #tip:dir(rtl), .spectrum-Tooltip--right-bottom #tip:dir(rtl), .spectrum-Tooltip--right-top #tip:dir(rtl), .spectrum-Tooltip--start #tip:dir(rtl), .spectrum-Tooltip--start-bottom #tip:dir(rtl), .spectrum-Tooltip--start-top #tip:dir(rtl), :host([dir="rtl"][placement*="right"]) #tooltip #tip, :host([dir="rtl"]) .spectrum-Tooltip--right-bottom #tip, :host([dir="rtl"]) .spectrum-Tooltip--right-top #tip, :host([dir="rtl"]) .spectrum-Tooltip--start #tip, :host([dir="rtl"]) .spectrum-Tooltip--start-bottom #tip, :host([dir="rtl"]) .spectrum-Tooltip--start-top #tip { + clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50.0%, calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100.0%, calc(100.0% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + left: auto; + right: 100%; +} + +::slotted([slot="icon"]) { + inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); + block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); + flex-shrink: 0; + align-self: flex-start; + margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); + margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); + margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); } #label { - line-height: var( - --mod-tooltip-line-height, - var(--spectrum-tooltip-line-height) - ); - margin-block-start: var( - --mod-tooltip-spacing-block-start, - var(--spectrum-tooltip-spacing-block-start) - ); - margin-block-end: var( - --mod-tooltip-spacing-block-end, - var(--spectrum-tooltip-spacing-block-end) - ); -} - -#tooltip, -:host([placement*='top']) #tooltip, -.spectrum-Tooltip--top-end, -.spectrum-Tooltip--top-left, -.spectrum-Tooltip--top-right, -.spectrum-Tooltip--top-start { - margin-block-end: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--top-end, -:host([open]) .spectrum-Tooltip--top-left, -:host([open]) .spectrum-Tooltip--top-right, -:host([open]) .spectrum-Tooltip--top-start, -:host([placement*='top'][open]) #tooltip, -:host([open]) #tooltip { - transform: translateY( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); -} - -:host([placement*='bottom']) #tooltip, -.spectrum-Tooltip--bottom-end, -.spectrum-Tooltip--bottom-left, -.spectrum-Tooltip--bottom-right, -.spectrum-Tooltip--bottom-start { - margin-block-start: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--bottom-end, -:host([open]) .spectrum-Tooltip--bottom-left, -:host([open]) .spectrum-Tooltip--bottom-right, -:host([open]) .spectrum-Tooltip--bottom-start, -:host([placement*='bottom'][open]) #tooltip { - transform: translateY( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); -} - -:host([placement*='right']) #tooltip, -.spectrum-Tooltip--right-bottom, -.spectrum-Tooltip--right-top { - margin-left: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--right-bottom, -:host([open]) .spectrum-Tooltip--right-top, -:host([placement*='right'][open]) #tooltip { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); -} - -:host([placement*='left']) #tooltip, -.spectrum-Tooltip--left-bottom, -.spectrum-Tooltip--left-top { - margin-right: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--left-bottom, -:host([open]) .spectrum-Tooltip--left-top, -:host([placement*='left'][open]) #tooltip { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); -} - -.spectrum-Tooltip--start, -.spectrum-Tooltip--start-bottom, -.spectrum-Tooltip--start-top { - margin-inline-end: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--start-bottom, -:host([open]) .spectrum-Tooltip--start-top, -:host([open]) .spectrum-Tooltip--start { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); -} - -:host([open]) .spectrum-Tooltip--start-bottom:dir(rtl), -:host([open]) .spectrum-Tooltip--start-top:dir(rtl), -:host([open]) .spectrum-Tooltip--start:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Tooltip--start-bottom, -:host([dir='rtl'][open]) .spectrum-Tooltip--start-top, -:host([dir='rtl'][open]) .spectrum-Tooltip--start { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); -} - -.spectrum-Tooltip--end, -.spectrum-Tooltip--end-bottom, -.spectrum-Tooltip--end-top { - margin-inline-start: calc( - var( - --mod-tooltip-tip-block-size, - var(--spectrum-tooltip-tip-block-size) - ) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)) - ); -} - -:host([open]) .spectrum-Tooltip--end-bottom, -:host([open]) .spectrum-Tooltip--end-top, -:host([open]) .spectrum-Tooltip--end { - transform: translateX( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) - ); -} - -:host([open]) .spectrum-Tooltip--end-bottom:dir(rtl), -:host([open]) .spectrum-Tooltip--end-top:dir(rtl), -:host([open]) .spectrum-Tooltip--end:dir(rtl), -:host([dir='rtl'][open]) .spectrum-Tooltip--end-bottom, -:host([dir='rtl'][open]) .spectrum-Tooltip--end-top, -:host([dir='rtl'][open]) .spectrum-Tooltip--end { - transform: translateX( - calc( - var( - --mod-tooltip-animation-distance, - var(--spectrum-tooltip-animation-distance) - ) * -1 - ) - ); + line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height)); + margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start)); + margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end)); +} + +#tooltip, :host([placement*="top"]) #tooltip, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start { + margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--top-end, :host([open]) .spectrum-Tooltip--top-left, :host([open]) .spectrum-Tooltip--top-right, :host([open]) .spectrum-Tooltip--top-start, :host([placement*="top"][open]) #tooltip, :host([open]) #tooltip { + transform: translateY(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); +} + +:host([placement*="bottom"]) #tooltip, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start { + margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--bottom-end, :host([open]) .spectrum-Tooltip--bottom-left, :host([open]) .spectrum-Tooltip--bottom-right, :host([open]) .spectrum-Tooltip--bottom-start, :host([placement*="bottom"][open]) #tooltip { + transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); +} + +:host([placement*="right"]) #tooltip, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top { + margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--right-bottom, :host([open]) .spectrum-Tooltip--right-top, :host([placement*="right"][open]) #tooltip { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); +} + +:host([placement*="left"]) #tooltip, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top { + margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--left-bottom, :host([open]) .spectrum-Tooltip--left-top, :host([placement*="left"][open]) #tooltip { + transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); +} + +.spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top { + margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--start-bottom, :host([open]) .spectrum-Tooltip--start-top, :host([open]) .spectrum-Tooltip--start { + transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); } + +:host([open]) .spectrum-Tooltip--start-bottom:dir(rtl), :host([open]) .spectrum-Tooltip--start-top:dir(rtl), :host([open]) .spectrum-Tooltip--start:dir(rtl), :host([dir="rtl"][open]) .spectrum-Tooltip--start-bottom, :host([dir="rtl"][open]) .spectrum-Tooltip--start-top, :host([dir="rtl"][open]) .spectrum-Tooltip--start { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); +} + +.spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top { + margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin))); +} + +:host([open]) .spectrum-Tooltip--end-bottom, :host([open]) .spectrum-Tooltip--end-top, :host([open]) .spectrum-Tooltip--end { + transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance))); +} + +:host([open]) .spectrum-Tooltip--end-bottom:dir(rtl), :host([open]) .spectrum-Tooltip--end-top:dir(rtl), :host([open]) .spectrum-Tooltip--end:dir(rtl), :host([dir="rtl"][open]) .spectrum-Tooltip--end-bottom, :host([dir="rtl"][open]) .spectrum-Tooltip--end-top, :host([dir="rtl"][open]) .spectrum-Tooltip--end { + transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1)); +} + diff --git a/packages/tooltip/src/tooltip-overrides.css b/packages/tooltip/src/tooltip-overrides.css index 8688f61963..817d207af5 100644 --- a/packages/tooltip/src/tooltip-overrides.css +++ b/packages/tooltip/src/tooltip-overrides.css @@ -1,72 +1,45 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ #tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var( - --system-tooltip-backgound-color-default-neutral - ); - --spectrum-tooltip-animation-duration: var( - --system-tooltip-animation-duration - ); - --spectrum-tooltip-margin: var(--system-tooltip-margin); - --spectrum-tooltip-height: var(--system-tooltip-height); - --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); - --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); - --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); - --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); - --spectrum-tooltip-font-size: var(--system-tooltip-font-size); - --spectrum-tooltip-line-height: var(--system-tooltip-line-height); - --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); - --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); - --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); - --spectrum-tooltip-spacing-block-start: var( - --system-tooltip-spacing-block-start - ); - --spectrum-tooltip-spacing-block-end: var( - --system-tooltip-spacing-block-end - ); - --spectrum-tooltip-icon-spacing-inline-start: var( - --system-tooltip-icon-spacing-inline-start - ); - --spectrum-tooltip-icon-spacing-inline-end: var( - --system-tooltip-icon-spacing-inline-end - ); - --spectrum-tooltip-icon-spacing-block-start: var( - --system-tooltip-icon-spacing-block-start - ); - --spectrum-tooltip-background-color-informative: var( - --system-tooltip-background-color-informative - ); - --spectrum-tooltip-background-color-positive: var( - --system-tooltip-background-color-positive - ); - --spectrum-tooltip-background-color-negative: var( - --system-tooltip-background-color-negative - ); - --spectrum-tooltip-content-color: var(--system-tooltip-content-color); - --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); - --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); - --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); - --spectrum-tooltip-tip-height-percentage: var( - --system-tooltip-tip-height-percentage - ); - --spectrum-tooltip-tip-antialiasing-inset: var( - --system-tooltip-tip-antialiasing-inset - ); - --spectrum-tooltip-pointer-corner-spacing: var( - --system-tooltip-pointer-corner-spacing - ); - --spectrum-tooltip-background-color-default: var( - --system-tooltip-background-color-default - ); + --spectrum-tooltip-backgound-color-default-neutral: var(--system-tooltip-backgound-color-default-neutral); + --spectrum-tooltip-animation-duration: var(--system-tooltip-animation-duration); + --spectrum-tooltip-margin: var(--system-tooltip-margin); + --spectrum-tooltip-height: var(--system-tooltip-height); + --spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size); + --spectrum-tooltip-border-radius: var(--system-tooltip-border-radius); + --spectrum-tooltip-icon-width: var(--system-tooltip-icon-width); + --spectrum-tooltip-icon-height: var(--system-tooltip-icon-height); + --spectrum-tooltip-font-size: var(--system-tooltip-font-size); + --spectrum-tooltip-line-height: var(--system-tooltip-line-height); + --spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height); + --spectrum-tooltip-font-weight: var(--system-tooltip-font-weight); + --spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline); + --spectrum-tooltip-spacing-block-start: var(--system-tooltip-spacing-block-start); + --spectrum-tooltip-spacing-block-end: var(--system-tooltip-spacing-block-end); + --spectrum-tooltip-icon-spacing-inline-start: var(--system-tooltip-icon-spacing-inline-start); + --spectrum-tooltip-icon-spacing-inline-end: var(--system-tooltip-icon-spacing-inline-end); + --spectrum-tooltip-icon-spacing-block-start: var(--system-tooltip-icon-spacing-block-start); + --spectrum-tooltip-background-color-informative: var(--system-tooltip-background-color-informative); + --spectrum-tooltip-background-color-positive: var(--system-tooltip-background-color-positive); + --spectrum-tooltip-background-color-negative: var(--system-tooltip-background-color-negative); + --spectrum-tooltip-content-color: var(--system-tooltip-content-color); + --spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size); + --spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size); + --spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size); + --spectrum-tooltip-tip-height-percentage: var(--system-tooltip-tip-height-percentage); + --spectrum-tooltip-tip-antialiasing-inset: var(--system-tooltip-tip-antialiasing-inset); + --spectrum-tooltip-pointer-corner-spacing: var(--system-tooltip-pointer-corner-spacing); + --spectrum-tooltip-background-color-default: var(--system-tooltip-background-color-default); } + diff --git a/packages/tray/src/spectrum-tray-wrapper.css b/packages/tray/src/spectrum-tray-wrapper.css index b6dfcc2a85..25f9a4defc 100644 --- a/packages/tray/src/spectrum-tray-wrapper.css +++ b/packages/tray/src/spectrum-tray-wrapper.css @@ -1,21 +1,22 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - inline-size: 100%; - justify-content: center; - display: flex; - position: fixed; - inset-block-end: 0; - inset-inline-start: 0; + inline-size: 100%; + justify-content: center; + display: flex; + position: fixed; + inset-block-end: 0; + inset-inline-start: 0; } + diff --git a/packages/tray/src/spectrum-tray.css b/packages/tray/src/spectrum-tray.css index b805794541..9a717403fc 100644 --- a/packages/tray/src/spectrum-tray.css +++ b/packages/tray/src/spectrum-tray.css @@ -1,138 +1,55 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .tray { - --mod-modal-max-width: 100%; - inline-size: 100%; - max-inline-size: 100%; - max-block-size: calc( - 100vh - - var( - --mod-tray-spacing-edge-to-tray-safe-zone, - var(--spectrum-tray-spacing-edge-to-tray-safe-zone) - ) - ); - box-sizing: border-box; - border-radius: 0; - border-radius: var(--mod-tray-corner-radius-portrait, 0) - var(--mod-tray-corner-radius-portrait, 0) 0 0; - transition: - opacity - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - cubic-bezier(0.5, 0, 1, 1) - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ), - visibility - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - linear - calc( - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ) + - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - ), - transform - var( - --mod-tray-exit-animation-duration, - var(--spectrum-tray-exit-animation-duration) - ) - cubic-bezier(0.5, 0, 1, 1) - var( - --mod-tray-exit-animation-delay, - var(--spectrum-tray-exit-animation-delay) - ); - background-color: var( - --highcontrast-tray-background-color, - var(--mod-tray-background-color, var(--spectrum-tray-background-color)) - ); - outline: none; - margin-block-start: var( - --mod-tray-spacing-edge-to-tray-safe-zone, - var(--spectrum-tray-spacing-edge-to-tray-safe-zone) - ); - padding-block-start: var( - --mod-tray-top-to-content-area, - var(--spectrum-tray-top-to-content-area) - ); - padding-block-end: var( - --mod-tray-bottom-to-content-area, - var(--spectrum-tray-top-to-content-area) - ); - overflow: auto; - transform: translateY(100%); + --mod-modal-max-width: 100.0%; + inline-size: 100%; + max-inline-size: 100%; + max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone))); + box-sizing: border-box; + border-radius: 0; + border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0; + transition: opacity var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)), visibility var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) linear calc(var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)) + var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration))), transform var(--mod-tray-exit-animation-duration, var(--spectrum-tray-exit-animation-duration)) cubic-bezier(.5, 0, 1, 1) var(--mod-tray-exit-animation-delay, var(--spectrum-tray-exit-animation-delay)); + background-color: var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-tray-background-color))); + outline: none; + margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)); + padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area)); + padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area)); + overflow: auto; + transform: translateY(100%); } :host([open]) .tray { - transition: - transform - var( - --mod-tray-entry-animation-duration, - var(--spectrum-tray-entry-animation-duration) - ) - cubic-bezier(0, 0, 0.4, 1) - var( - --mod-tray-entry-animation-delay, - var(--spectrum-tray-entry-animation-delay) - ), - opacity - var( - --spectrum-tray-entry-animation-duration, - var(--mod-tray-entry-animation-duration) - ) - cubic-bezier(0, 0, 0.4, 1) - var( - --mod-tray-entry-animation-delay, - var(--spectrum-tray-entry-animation-delay) - ); - transform: translateY(0); + transition: transform var(--mod-tray-entry-animation-duration, var(--spectrum-tray-entry-animation-duration)) cubic-bezier(0, 0, .4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)), opacity var(--spectrum-tray-entry-animation-duration, var(--mod-tray-entry-animation-duration)) cubic-bezier(0, 0, .4, 1) var(--mod-tray-entry-animation-delay, var(--spectrum-tray-entry-animation-delay)); + transform: translateY(0); } @media screen and (orientation: landscape) { - .tray { - max-inline-size: var( - --mod-tray-max-inline-size, - var(--spectrum-tray-max-inline-size) - ); - border-start-start-radius: var( - --mod-tray-corner-radius, - var(--spectrum-tray-corner-radius) - ); - border-start-end-radius: var( - --mod-tray-corner-radius, - var(--spectrum-tray-corner-radius) - ); - } + .tray { + max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size)); + border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); + border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius)); + } } @media (forced-colors: active) { - .tray { - --highcontrast-tray-background-color: Canvas; - border: solid; - } + .tray { + --highcontrast-tray-background-color: Canvas; + border: solid; + } - .tray ::slotted(*) { - border: none; - } + .tray ::slotted(*) { + border: none; + } } + diff --git a/packages/tray/src/tray-overrides.css b/packages/tray/src/tray-overrides.css index 84349a3825..7b16aedcca 100644 --- a/packages/tray/src/tray-overrides.css +++ b/packages/tray/src/tray-overrides.css @@ -1,33 +1,24 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-tray-exit-animation-delay: var( - --system-tray-exit-animation-delay - ); - --spectrum-tray-entry-animation-delay: var( - --system-tray-entry-animation-delay - ); - --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); - --spectrum-tray-spacing-edge-to-tray-safe-zone: var( - --system-tray-spacing-edge-to-safe-zone - ); - --spectrum-tray-entry-animation-duration: var( - --system-tray-entry-animation-duration - ); - --spectrum-tray-exit-animation-duration: var( - --system-tray-exit-animation-duration - ); - --spectrum-tray-corner-radius: var(--system-tray-corner-radius); - --spectrum-tray-background-color: var(--system-tray-background-color); + --spectrum-tray-exit-animation-delay: var(--system-tray-exit-animation-delay); + --spectrum-tray-entry-animation-delay: var(--system-tray-entry-animation-delay); + --spectrum-tray-max-inline-size: var(--system-tray-max-inline-size); + --spectrum-tray-spacing-edge-to-tray-safe-zone: var(--system-tray-spacing-edge-to-safe-zone); + --spectrum-tray-entry-animation-duration: var(--system-tray-entry-animation-duration); + --spectrum-tray-exit-animation-duration: var(--system-tray-exit-animation-duration); + --spectrum-tray-corner-radius: var(--system-tray-corner-radius); + --spectrum-tray-background-color: var(--system-tray-background-color); } + diff --git a/packages/underlay/src/spectrum-underlay.css b/packages/underlay/src/spectrum-underlay.css index e2732e8653..5460f48bfa 100644 --- a/packages/underlay/src/spectrum-underlay.css +++ b/packages/underlay/src/spectrum-underlay.css @@ -1,106 +1,43 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - pointer-events: none; - visibility: hidden; - opacity: 0; - transition: - transform 0.13s ease-in-out, - opacity 0.13s ease-in-out, - visibility 0s linear 0.13s; - transition: - transform - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - opacity - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ) - ease-in-out, - visibility 0s linear - var( - --mod-overlay-animation-duration, - var(--spectrum-animation-duration-100, 0.13s) - ); + pointer-events: none; + visibility: hidden; + opacity: 0; + transition: transform .13s ease-in-out, opacity .13s ease-in-out, visibility 0s linear .13s; + transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)) ease-in-out, visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, .13s)); } :host([open]) { - pointer-events: auto; - visibility: visible; - opacity: 1; - transition-delay: 0s; - transition-delay: var( - --mod-overlay-animation-duration-opened, - var(--spectrum-animation-duration-0, 0s) - ); + pointer-events: auto; + visibility: visible; + opacity: 1; + transition-delay: 0s; + transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s)); } :host { - background-color: var( - --mod-underlay-background-color, - var(--spectrum-underlay-background-color) - ); - z-index: 1; - transition: - opacity - var( - --mod-underlay-background-exit-animation-duration, - var(--spectrum-underlay-background-exit-animation-duration) - ) - var( - --mod-underlay-background-exit-animation-ease, - var(--spectrum-underlay-background-exit-animation-ease) - ) - var( - --mod-underlay-background-exit-animation-delay, - var(--spectrum-underlay-background-exit-animation-delay) - ), - visibility 0s linear - calc( - var( - --mod-underlay-background-exit-animation-delay, - var(--spectrum-underlay-background-exit-animation-delay) - ) + - var( - --mod-underlay-background-exit-animation-duration, - var( - --spectrum-underlay-background-exit-animation-duration - ) - ) - ); - position: fixed; - inset-block: 0; - inset-inline: 0; - overflow: hidden; + background-color: var(--mod-underlay-background-color, var(--spectrum-underlay-background-color)); + z-index: 1; + transition: opacity var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration)) var(--mod-underlay-background-exit-animation-ease, var(--spectrum-underlay-background-exit-animation-ease)) var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)), visibility 0s linear calc(var(--mod-underlay-background-exit-animation-delay, var(--spectrum-underlay-background-exit-animation-delay)) + var(--mod-underlay-background-exit-animation-duration, var(--spectrum-underlay-background-exit-animation-duration))); + position: fixed; + inset-block: 0; + inset-inline: 0; + overflow: hidden; } :host([open]) { - transition: opacity - var( - --mod-underlay-background-entry-animation-duration, - var(--spectrum-underlay-background-entry-animation-duration) - ) - var( - --mod-underlay-background-entry-animation-ease, - var(--spectrum-underlay-background-entry-animation-ease) - ) - var( - --mod-underlay-background-entry-animation-delay, - var(--spectrum-underlay-background-entry-animation-delay) - ); + transition: opacity var(--mod-underlay-background-entry-animation-duration, var(--spectrum-underlay-background-entry-animation-duration)) var(--mod-underlay-background-entry-animation-ease, var(--spectrum-underlay-background-entry-animation-ease)) var(--mod-underlay-background-entry-animation-delay, var(--spectrum-underlay-background-entry-animation-delay)); } + diff --git a/packages/underlay/src/underlay-overrides.css b/packages/underlay/src/underlay-overrides.css index a79612e6db..cfc36c3efd 100644 --- a/packages/underlay/src/underlay-overrides.css +++ b/packages/underlay/src/underlay-overrides.css @@ -1,36 +1,23 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-underlay-background-entry-animation-delay: var( - --system-underlay-background-entry-animation-delay - ); - --spectrum-underlay-background-exit-animation-ease: var( - --system-underlay-background-exit-animation-ease - ); - --spectrum-underlay-background-entry-animation-ease: var( - --system-underlay-background-entry-animation-ease - ); - --spectrum-underlay-background-entry-animation-duration: var( - --system-underlay-background-entry-animation-duration - ); - --spectrum-underlay-background-exit-animation-duration: var( - --system-underlay-background-exit-animation-duration - ); - --spectrum-underlay-background-exit-animation-delay: var( - --system-underlay-background-exit-animation-delay - ); - --spectrum-underlay-background-color: var( - --system-underlay-background-color - ); + --spectrum-underlay-background-entry-animation-delay: var(--system-underlay-background-entry-animation-delay); + --spectrum-underlay-background-exit-animation-ease: var(--system-underlay-background-exit-animation-ease); + --spectrum-underlay-background-entry-animation-ease: var(--system-underlay-background-entry-animation-ease); + --spectrum-underlay-background-entry-animation-duration: var(--system-underlay-background-entry-animation-duration); + --spectrum-underlay-background-exit-animation-duration: var(--system-underlay-background-exit-animation-duration); + --spectrum-underlay-background-exit-animation-delay: var(--system-underlay-background-exit-animation-delay); + --spectrum-underlay-background-color: var(--system-underlay-background-color); } + diff --git a/stylelint.config.js b/stylelint.config.js new file mode 100755 index 0000000000..b3cc5212a3 --- /dev/null +++ b/stylelint.config.js @@ -0,0 +1,48 @@ +/*! + * 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 { + plugins: ['stylelint-header'], + extends: ['stylelint-config-standard'], + rules: { + 'header/header': [ + './COPYRIGHT', + { nonMatchingTolerance: 0.8 }, + { fix: true }, + ], + 'length-zero-no-unit': [true, { ignore: 'custom-properties' }], + 'selector-type-no-unknown': [true, { ignore: ['custom-elements'] }], + 'selector-pseudo-element-colon-notation': ['single', {}], + 'custom-property-pattern': '^_?([a-z][a-z0-9]*)(-[a-z0-9]+)*$', + 'no-duplicate-selectors': null, + 'selector-class-pattern': null, + 'no-descending-specificity': null, + 'declaration-block-no-redundant-longhand-properties': null, + }, + overrides: [ + { + files: [ + 'packages/**/src/spectrum-*.css', + 'tools/**/src/spectrum-*.css', + 'tools/styles/**/*.css', + ], + extends: [], + rules: { + 'header/header': [ + './COPYRIGHT', + { nonMatchingTolerance: 0.8 }, + { fix: true }, + ], + }, + }, + ], +}; diff --git a/tasks/process-spectrum.js b/tasks/process-spectrum.js index 068dd615d6..1c72138040 100644 --- a/tasks/process-spectrum.js +++ b/tasks/process-spectrum.js @@ -1,33 +1,34 @@ #!/usr/bin/env node // @ts-check -/* -Copyright 2020 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -import fg from 'fast-glob'; -import 'colors'; -import { transform } from 'lightningcss'; +/*! + * 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. + */ + import path from 'path'; import fs from 'fs'; import { createRequire } from 'module'; import { fileURLToPath } from 'url'; -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -const root = path.resolve(__dirname, '../'); +import fg from 'fast-glob'; +import 'colors'; +import { transform } from 'lightningcss'; +const fsp = fs.promises; const require = createRequire(import.meta.url); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const root = path.resolve(__dirname, '../'); /** - * @to-do: normalize deep comparison old vs new usage when recursing. + * @todo: normalize deep comparison old vs new usage when recursing. */ const compareSelectors = (oldSelector, newSelector) => { let matches = true; @@ -158,6 +159,15 @@ async function processComponent(componentPath) { */ const { conversions } = config; + const licensePath = path.resolve(__dirname, '..', 'config', 'license.js'); + let header = ''; + if (fs.existsSync(licensePath)) { + header = fs.readFileSync(licensePath, 'utf8'); + header = header.replace('<%= YEAR %>', new Date().getFullYear()); + } + + const promises = []; + /** * @type { import('./spectrum-css-converter').SpectrumCSSConverter} */ @@ -166,7 +176,7 @@ async function processComponent(componentPath) { const sourcePath = require .resolve(conversion.inPackage) .replace('index.css', 'index-base.css'); - var sourceCSS = fs.readFileSync(sourcePath, 'utf-8'); + const sourceCSS = fs.readFileSync(sourcePath, 'utf-8'); const outputPath = path.join( ...(Array.isArray(conversion.outPackage) @@ -175,6 +185,7 @@ async function processComponent(componentPath) { 'src', `spectrum-${conversion.fileName}.css` ); + const processSelectorV2 = (selector) => { const matches = Array(selector.length); let injected = 0; @@ -417,6 +428,7 @@ async function processComponent(componentPath) { const selectorMetadata = selectors.map(processSelectorV2); return buildSelectorsV2(selectorMetadata); }; + if (conversion.systemOverrides !== false) { // The default package file is index.css but index-theme.css contains the --system custom property mappings that facilitate theme switching. const bridgepath = require @@ -626,21 +638,9 @@ async function processComponent(componentPath) { if (code.length != 1) { fs.writeFileSync( systemsPath, - `/* - Copyright 2023 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. - */ - - /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ - ${code} - `.replace(/\/\*![\w|\W]*\*\//, '') + `${header}\n/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */\n${code + .toString() + ?.replace(/\/\*![\w|\W]*\*\//, '')}\n` ); } } @@ -809,37 +809,33 @@ async function processComponent(componentPath) { filename: outputPath, }); - fs.writeFileSync( - outputPath, - `/* -Copyright 2023 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. -*/ - -/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -${code} -`.replace(/\/\*![\w|\W]*\*\//, '') + promises.push( + fsp.writeFile( + outputPath, + `${header}\n/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */\n${code + ?.toString() + ?.replace(/\/\*![\w|\W]*\*\//, '')}\n` + ) ); } + + return Promise.all(promises); } async function processComponents() { const promises = []; + // eslint-disable-next-line no-console console.log('Processing Spectrum Components'.green); + for (const configPath of await fg( `${root}/{packages,tools}/*/src/spectrum-config.js` )) { promises.push(processComponent(path.join(configPath, '..'))); } + await Promise.all(promises); + // eslint-disable-next-line no-console console.log('Done'.green); } diff --git a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css index 58991f1799..286ca94f71 100644 --- a/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/is-opacity-checkerboard-overrides.css @@ -1,27 +1,20 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-opacity-checkerboard-dark: var( - --system-opacity-checkerboard-dark - ); - --spectrum-opacity-checkerboard-light: var( - --system-opacity-checkerboard-light - ); - --spectrum-opacity-checkerboard-size: var( - --system-opacity-checkerboard-size - ); - --spectrum-opacity-checkerboard-position: var( - --system-opacity-checkerboard-position - ); + --spectrum-opacity-checkerboard-dark: var(--system-opacity-checkerboard-dark); + --spectrum-opacity-checkerboard-light: var(--system-opacity-checkerboard-light); + --spectrum-opacity-checkerboard-size: var(--system-opacity-checkerboard-size); + --spectrum-opacity-checkerboard-position: var(--system-opacity-checkerboard-position); } + diff --git a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css index 316a594a39..2b3b11f9d2 100644 --- a/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css +++ b/tools/opacity-checkerboard/src/opacity-checkerboard-overrides.css @@ -1,27 +1,20 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .opacity-checkerboard { - --spectrum-opacity-checkerboard-dark: var( - --system-opacity-checkerboard-dark - ); - --spectrum-opacity-checkerboard-light: var( - --system-opacity-checkerboard-light - ); - --spectrum-opacity-checkerboard-size: var( - --system-opacity-checkerboard-size - ); - --spectrum-opacity-checkerboard-position: var( - --system-opacity-checkerboard-position - ); + --spectrum-opacity-checkerboard-dark: var(--system-opacity-checkerboard-dark); + --spectrum-opacity-checkerboard-light: var(--system-opacity-checkerboard-light); + --spectrum-opacity-checkerboard-size: var(--system-opacity-checkerboard-size); + --spectrum-opacity-checkerboard-position: var(--system-opacity-checkerboard-position); } + diff --git a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css index 844adb9d69..c8e10a052e 100644 --- a/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-is-opacity-checkerboard.css @@ -1,49 +1,23 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0 25.0%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0 50.0%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); } @media (forced-colors: active) { - :host { - forced-color-adjust: none; - } + :host { + forced-color-adjust: none; + } } + diff --git a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css index 0f55fda1b4..8848c1e7d5 100644 --- a/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css +++ b/tools/opacity-checkerboard/src/spectrum-opacity-checkerboard.css @@ -1,49 +1,23 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .opacity-checkerboard { - background: repeating-conic-gradient( - var( - --mod-opacity-checkerboard-light, - var(--spectrum-opacity-checkerboard-light) - ) - 0 25%, - var( - --mod-opacity-checkerboard-dark, - var(--spectrum-opacity-checkerboard-dark) - ) - 0 50% - ) - var( - --mod-opacity-checkerboard-position, - var(--spectrum-opacity-checkerboard-position) - ) / - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ) - calc( - var( - --mod-opacity-checkerboard-size, - var(--spectrum-opacity-checkerboard-size) - ) * 2 - ); + background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-light)) 0 25.0%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-dark)) 0 50.0%) var(--mod-opacity-checkerboard-position, var(--spectrum-opacity-checkerboard-position)) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-size)) * 2); } @media (forced-colors: active) { - .opacity-checkerboard { - forced-color-adjust: none; - } + .opacity-checkerboard { + forced-color-adjust: none; + } } + diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css index 4156844d04..671dbfa78e 100644 --- a/tools/styles/express/spectrum-core-global.css +++ b/tools/styles/express/spectrum-core-global.css @@ -1,3245 +1,1318 @@ -:root, -:host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-indigo-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-indigo-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); +:root, :host { + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: .13s; + --spectrum-global-animation-duration-200: .16s; + --spectrum-global-animation-duration-300: .19s; + --spectrum-global-animation-duration-400: .22s; + --spectrum-global-animation-duration-500: .25s; + --spectrum-global-animation-duration-600: .3s; + --spectrum-global-animation-duration-700: .35s; + --spectrum-global-animation-duration-800: .4s; + --spectrum-global-animation-duration-900: .45s; + --spectrum-global-animation-duration-1000: .5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(.45, 0, .4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, .4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb)); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb)); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb)); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb)); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb)); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb)); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb)); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb)); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb)); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb)); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb)); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb)); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb)); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb)); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb)); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb)); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb)); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb)); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb)); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb)); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb)); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb)); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb)); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb)); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb)); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb)); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb)); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb)); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb)); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb)); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb)); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb)); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb)); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb)); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb)); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb)); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb)); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb)); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb)); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb)); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb)); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb)); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb)); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb)); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb)); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb)); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb)); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb)); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb)); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb)); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb)); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb)); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb)); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb)); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb)); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb)); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb)); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb)); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb)); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb)); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb)); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb)); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb)); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb)); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb)); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb)); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb)); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb)); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb)); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb)); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb)); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb)); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb)); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb)); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb)); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb)); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb)); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb)); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb)); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb)); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb)); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb)); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb)); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb)); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb)); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb)); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb)); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb)); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb)); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-indigo-600); + --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-indigo-700); + --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-indigo-800); + --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-indigo-700); + --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-indigo-500); + --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-indigo-600); + --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-indigo-700); + --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-indigo-600); + --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800); + --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700); + --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800); + --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700); + --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800); + --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700); + --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800); + --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900); + --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500); + --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400); + --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb)); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb)); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb)); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb)); + --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: .0125em; + --spectrum-global-font-letter-spacing-han: .05em; + --spectrum-global-font-letter-spacing-medium: .06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: .25em; + --spectrum-global-font-multiplier-75: .75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25); + --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base); + --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75); + --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular); + --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code); + --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed); + --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif); + --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large); + --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); } -:root, -:host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-l: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-padding-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-border-radius-sided: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-stepperbutton-gap: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0; - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0; - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0; - --spectrum-alias-stepperbutton-radius-touching: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: 0; - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-50 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-30 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); +:root, :host { + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100); + --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-75); + --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-size-75); + --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-25); + --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-40); + --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-75); + --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-125); + --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-150); + --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300); + --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-75); + --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-175); + --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-200); + --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350); + --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-225); + --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-275); + --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-130); + --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-225); + --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-10); + --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-40); + --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-75); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-infieldbutton-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-padding-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-padding-l: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-padding-xl: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-40); + --spectrum-alias-infieldbutton-border-radius-sided: var(--spectrum-global-dimension-size-40); + --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-10); + --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-40); + --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-75); + --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-500); + --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-130); + --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-stepperbutton-gap: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-65); + --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-65); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-75); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-10); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-10); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-10); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: 0; + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: 0; + --spectrum-alias-stepperbutton-radius-touching: var(--spectrum-global-dimension-size-25); + --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-label-padding-y-s: 0; + --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-40); + --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-65); + --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-100); + --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: var(--spectrum-global-dimension-size-150); + --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-300); + --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-50); + --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-75); + --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-25); + --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25); + --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-130); + --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-175); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-250); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-50); + --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-175); + --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-350); + --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-30); + --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-size-25); + --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10); + --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100); + --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400); + --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400); + --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225); + --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250); + --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300); + --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75); + --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25); } -:root, -:host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-quiet-selected-hover - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-quiet-selected-down - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-quiet-selected-key-focus - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-border-color-disabled-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-focusring-border-color-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-alias-tag-background-color-hover - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-alias-tag-background-color-down - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-alias-tag-background-color-key-focus - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-indigo-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-text-color - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-yellow-background-color-default: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-yellow-background-color-hover: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-yellow-background-color-key-focus: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-yellow-background-color-down: var( - --spectrum-global-color-static-yellow-600 - ); - --spectrum-alias-infieldbutton-background-color: transparent; - --spectrum-alias-infieldbutton-fill-border-color-default: transparent; - --spectrum-alias-infieldbutton-fill-border-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-border-color-down: transparent; - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent; - --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-global-color-gray-400 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-tabitem-text-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-tabitem-text-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-tabitem-text-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-tabitem-text-color-down - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #6d73f633; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-indigo-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); +:root, :host { + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-component-text-color-selected-default: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-icon-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-component-icon-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-300); + --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-400); + --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-300); + --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-component-background-color-hover); + --spectrum-alias-component-background-color-quiet-down: var(--spectrum-alias-component-background-color-down); + --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-component-background-color-key-focus); + --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-border-color-default: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-component-border-color-hover: var(--spectrum-alias-component-background-color-hover); + --spectrum-alias-component-border-color-down: var(--spectrum-alias-component-background-color-down); + --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-component-background-color-key-focus); + --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-component-background-color-selected-down); + --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus); + --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-component-background-color-quiet-default); + --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-quiet-selected-hover); + --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-alias-component-background-color-quiet-selected-down); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-quiet-selected-key-focus); + --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-indigo-500); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-indigo-600); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-indigo-700); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-indigo-600); + --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-border-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-tag-border-color-hover: var(--spectrum-global-color-gray-400); + --spectrum-alias-tag-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-tag-border-color-key-focus: var(--spectrum-global-color-gray-400); + --spectrum-alias-tag-border-color-disabled-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-focusring-border-color-key-focus: var(--spectrum-alias-focus-ring-color); + --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-100); + --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-100); + --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-300); + --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-400); + --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-300); + --spectrum-alias-tag-background-color-error-default: var(--spectrum-alias-tag-background-color-default); + --spectrum-alias-tag-background-color-error-hover: var(--spectrum-alias-tag-background-color-hover); + --spectrum-alias-tag-background-color-error-down: var(--spectrum-alias-tag-background-color-down); + --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-alias-tag-background-color-key-focus); + --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-global-color-gray-900); + --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-indigo-600); + --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-indigo-600); + --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-indigo-700); + --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus); + --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-text-color); + --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover); + --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down); + --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus); + --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-button-primary-border-color-default); + --spectrum-alias-button-primary-text-color-default: var(--spectrum-alias-button-primary-text-color-hover); + --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-button-secondary-border-color-default); + --spectrum-alias-button-secondary-text-color-default: var(--spectrum-alias-button-secondary-text-color-hover); + --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-button-negative-border-color-default); + --spectrum-alias-button-negative-text-color-default: var(--spectrum-alias-button-negative-text-color-hover); + --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color); + --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-input-border-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-input-border-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-yellow-background-color-default: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-yellow-background-color-hover: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-yellow-background-color-key-focus: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-yellow-background-color-down: var(--spectrum-global-color-static-yellow-600); + --spectrum-alias-infieldbutton-background-color: transparent; + --spectrum-alias-infieldbutton-fill-border-color-default: transparent; + --spectrum-alias-infieldbutton-fill-border-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-border-color-down: transparent; + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: transparent; + --spectrum-alias-infieldbutton-fill-border-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-global-color-gray-300); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-global-color-gray-400); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-global-color-gray-300); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-default: #0000001a; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-default: #ffffff1a; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-200); + --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white); + --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-tabitem-text-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900); + --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-indigo-600); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-global-color-gray-900); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled); + --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-tabitem-text-color-hover); + --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-tabitem-text-color-down); + --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-tabitem-text-color-hover); + --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-tabitem-text-color-down); + --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-indigo-500); + --spectrum-alias-assetcard-overlay-background-color: #6d73f633; + --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-indigo-500); + --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-indigo-500); + --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-indigo-600); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover); + --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover); + --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down); + --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default); + --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default); + --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default); + --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus); + --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default); + --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default); + --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default); + --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default); + --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default); + --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default); + --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default); + --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default); + --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default); + --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default); + --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default); + --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color); + --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default); + --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default); + --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default); + --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default); + --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default); + --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default); + --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default); + --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover); + --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down); + --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus); + --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default); + --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover); + --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down); + --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus); + --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default); + --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default); + --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover); + --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down); + --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus); + --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default); + --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover); + --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down); + --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus); + --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default); + --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default); + --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default); + --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover); + --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down); + --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus); + --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default); + --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid); + --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default); + --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down); + --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default); + --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300); + --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default); + --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600); + --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30); + --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100); + --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75); + --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600); + --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600); + --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600); + --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600); + --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600); + --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700); + --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200); + --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700); + --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500); + --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500); + --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200); + --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200); + --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500); + --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800); + --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700); + --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600); + --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300); + --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200); + --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500); + --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200); + --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200); } diff --git a/tools/styles/express/spectrum-scale-large.css b/tools/styles/express/spectrum-scale-large.css index 5650eb9ef0..f6b6f6053a 100644 --- a/tools/styles/express/spectrum-scale-large.css +++ b/tools/styles/express/spectrum-scale-large.css @@ -1,280 +1,147 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-alias-focus-ring-border-radius-regular - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-focus-ring-border-radius-regular: 12px; - --spectrum-alias-control-three-width-m: 34px; - --spectrum-alias-control-three-width-l: 38px; - --spectrum-alias-control-three-width-xl: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325); + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-alias-focus-ring-border-radius-regular); + --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-size-75); + --spectrum-alias-focus-ring-border-radius-regular: 12px; + --spectrum-alias-control-three-width-m: 34px; + --spectrum-alias-control-three-width-l: 38px; + --spectrum-alias-control-three-width-xl: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-static-size-2600); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75); } diff --git a/tools/styles/express/spectrum-scale-medium.css b/tools/styles/express/spectrum-scale-medium.css index ff17b1a3fa..c266531560 100644 --- a/tools/styles/express/spectrum-scale-medium.css +++ b/tools/styles/express/spectrum-scale-medium.css @@ -1,282 +1,147 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-three-width-m: 28px; - --spectrum-alias-control-three-width-l: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-xl: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-size-125); + --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-size-85); + --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-three-width-m: 28px; + --spectrum-alias-control-three-width-l: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-control-three-width-xl: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100); } diff --git a/tools/styles/express/spectrum-theme-dark.css b/tools/styles/express/spectrum-theme-dark.css index 8a2ccfcbcf..6236294f10 100644 --- a/tools/styles/express/spectrum-theme-dark.css +++ b/tools/styles/express/spectrum-theme-dark.css @@ -1,300 +1,169 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-avatar-border-color-default: #ffffff1a; - --spectrum-alias-avatar-border-color-hover: #ffffff40; - --spectrum-alias-avatar-border-color-down: #fff6; - --spectrum-alias-avatar-border-color-key-focus: #ffffff40; - --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a; - --spectrum-alias-transparent-blue-background-color-default: #7c81fb26; - --spectrum-alias-transparent-blue-background-color-hover: #9195ff26; - --spectrum-alias-transparent-blue-background-color-down: #a7aaff26; - --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26; - --spectrum-alias-border-color-selected: #ffffffe6; - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-avatar-border-color-default: #ffffff1a; + --spectrum-alias-avatar-border-color-hover: #ffffff40; + --spectrum-alias-avatar-border-color-down: #fff6; + --spectrum-alias-avatar-border-color-key-focus: #ffffff40; + --spectrum-alias-avatar-border-color-selected-disabled: #ffffff1a; + --spectrum-alias-transparent-blue-background-color-default: #7c81fb26; + --spectrum-alias-transparent-blue-background-color-hover: #9195ff26; + --spectrum-alias-transparent-blue-background-color-down: #a7aaff26; + --spectrum-alias-transparent-blue-background-color-key-focus: #9195ff26; + --spectrum-alias-border-color-selected: #ffffffe6; + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50); } diff --git a/tools/styles/express/spectrum-theme-light.css b/tools/styles/express/spectrum-theme-light.css index e15a59ccb8..d26c58334c 100644 --- a/tools/styles/express/spectrum-theme-light.css +++ b/tools/styles/express/spectrum-theme-light.css @@ -1,300 +1,169 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-avatar-border-color-default: #0000001a; - --spectrum-alias-avatar-border-color-hover: #00000040; - --spectrum-alias-avatar-border-color-down: #0006; - --spectrum-alias-avatar-border-color-key-focus: #00000040; - --spectrum-alias-avatar-border-color-selected-disabled: #0000001a; - --spectrum-alias-transparent-blue-background-color-default: #5258e426; - --spectrum-alias-transparent-blue-background-color-hover: #4046ca26; - --spectrum-alias-transparent-blue-background-color-down: #3236a826; - --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26; - --spectrum-alias-border-color-selected: #000000e6; - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-avatar-border-color-default: #0000001a; + --spectrum-alias-avatar-border-color-hover: #00000040; + --spectrum-alias-avatar-border-color-down: #0006; + --spectrum-alias-avatar-border-color-key-focus: #00000040; + --spectrum-alias-avatar-border-color-selected-disabled: #0000001a; + --spectrum-alias-transparent-blue-background-color-default: #5258e426; + --spectrum-alias-transparent-blue-background-color-hover: #4046ca26; + --spectrum-alias-transparent-blue-background-color-down: #3236a826; + --spectrum-alias-transparent-blue-background-color-key-focus: #4046ca26; + --spectrum-alias-border-color-selected: #000000e6; + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300); } diff --git a/tools/styles/fonts.css b/tools/styles/fonts.css index ef47aa872e..c479bf8921 100755 --- a/tools/styles/fonts.css +++ b/tools/styles/fonts.css @@ -1,1418 +1,606 @@ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); -} - -.spectrum-Heading .spectrum-Heading-strong, -.spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-emphasized, -.spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading em strong, -.spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja), -.spectrum-Heading:lang(ko), -.spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em, -.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em, -.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading:lang(ja) strong, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading:lang(ko) strong, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em strong, -.spectrum-Heading:lang(ja) strong em, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em strong, -.spectrum-Heading:lang(ko) strong em, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em strong, -.spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); + font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); + font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); + line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); + margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); + margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); +} + +.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { + font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { + font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { + font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { + font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); + font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); + font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); + font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); + letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { + font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { + font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); + font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { + font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy em strong, -.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja), -.spectrum-Heading--heavy:lang(ko), -.spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ja) strong, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ko) strong, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em strong, -.spectrum-Heading--heavy:lang(ja) strong em, -.spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em strong, -.spectrum-Heading--heavy:lang(ko) strong em, -.spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em strong, -.spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { + font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { + font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { + font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); + font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { + font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { + font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { + font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light em strong, -.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja), -.spectrum-Heading--light:lang(ko), -.spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ja) strong, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ko) strong, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em strong, -.spectrum-Heading--light:lang(ja) strong em, -.spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em strong, -.spectrum-Heading--light:lang(ko) strong em, -.spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em strong, -.spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); + font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { + font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { + font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { + font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { + font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); + font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { + font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { + font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { + font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-emphasized, -.spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong, -.spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif em strong, -.spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); + font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); + font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { + font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); + font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { + font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); + font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { + font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); + font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { + font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { + font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em strong, -.spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); + font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { + font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { + font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); + font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { + font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); -} - -.spectrum-Body .spectrum-Body-strong, -.spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-emphasized, -.spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body em strong, -.spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja), -.spectrum-Body:lang(ko), -.spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong, -.spectrum-Body:lang(ja) strong, -.spectrum-Body:lang(ko) .spectrum-Body-strong, -.spectrum-Body:lang(ko) strong, -.spectrum-Body:lang(zh) .spectrum-Body-strong, -.spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em, -.spectrum-Body:lang(ko) .spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em, -.spectrum-Body:lang(zh) .spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em strong, -.spectrum-Body:lang(ja) strong em, -.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em strong, -.spectrum-Body:lang(ko) strong em, -.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em strong, -.spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); + font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); + font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, var(--spectrum-body-margin-start, 0))); + margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); +} + +.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { + font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); + font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); +} + +.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { + font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); +} + +.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { + font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { + font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); + font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); + font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { + font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); + font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { + font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); + font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { + font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong, -.spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-emphasized, -.spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body--serif em strong, -.spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); + font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); + font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); +} + +.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { + font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); + font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { + font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); + font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { + font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); -} - -.spectrum-Detail .spectrum-Detail-strong, -.spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); -} - -.spectrum-Detail .spectrum-Detail-emphasized, -.spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail em strong, -.spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Detail:lang(ja), -.spectrum-Detail:lang(ko), -.spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail:lang(ja) strong, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail:lang(ko) strong, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em, -.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em, -.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em strong, -.spectrum-Detail:lang(ja) strong em, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em strong, -.spectrum-Detail:lang(ko) strong em, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em strong, -.spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); + font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); + font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); + letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); + text-transform: uppercase; + margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); + margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); +} + +.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { + font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); +} + +.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { + font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); +} + +.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { + font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { + font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); + font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); + font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { + font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); + font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { + font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { + font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-strong, -.spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-emphasized, -.spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--serif em strong, -.spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); + font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); + font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { + font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); + font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { + font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); + font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { + font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--light em strong, -.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja), -.spectrum-Detail--light:lang(ko), -.spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ja) strong, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ko) strong, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ja) em, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) em, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); + font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { + font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { + font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { + font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); +} + +.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { + font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); + font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { + font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { + font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em strong, -.spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); + font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { + font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); + font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { + font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { + font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); -} - -.spectrum-Code .spectrum-Code-strong, -.spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); -} - -.spectrum-Code .spectrum-Code-emphasized, -.spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); -} - -.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code em strong, -.spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); -} - -.spectrum-Code:lang(ja), -.spectrum-Code:lang(ko), -.spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-strong, -.spectrum-Code:lang(ja) strong, -.spectrum-Code:lang(ko) .spectrum-Code-strong, -.spectrum-Code:lang(ko) strong, -.spectrum-Code:lang(zh) .spectrum-Code-strong, -.spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em, -.spectrum-Code:lang(ko) .spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em, -.spectrum-Code:lang(zh) .spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em strong, -.spectrum-Code:lang(ja) strong em, -.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em strong, -.spectrum-Code:lang(ko) strong em, -.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em strong, -.spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + margin-block-start: var(--mod-code-margin-start, var(--spectrum-code-margin-end, 0)); + margin-block-end: var(--mod-code-margin-end, var(--spectrum-code-margin-end, 0)); +} + +.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { + font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); + font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); +} + +.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { + font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); + font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); +} + +.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { + font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); + font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); +} + +.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { + font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); + font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); + font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); + letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { + font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); + font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { + font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); + font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { + font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); } .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var(--system-heading-sans-serif-font-family); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var(--system-heading-cjk-letter-spacing); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxs-cjk-font-size); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxl-cjk-font-size); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxxl-cjk-font-size); } .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var(--system-body-sans-serif-font-family); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var(--system-detail-sans-serif-font-family); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 7df98ecf56..1e1ce12f67 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -1,3241 +1,1318 @@ -:root, -:host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); +:root, :host { + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: .13s; + --spectrum-global-animation-duration-200: .16s; + --spectrum-global-animation-duration-300: .19s; + --spectrum-global-animation-duration-400: .22s; + --spectrum-global-animation-duration-500: .25s; + --spectrum-global-animation-duration-600: .3s; + --spectrum-global-animation-duration-700: .35s; + --spectrum-global-animation-duration-800: .4s; + --spectrum-global-animation-duration-900: .45s; + --spectrum-global-animation-duration-1000: .5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(.45, 0, .4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, .4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb)); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb)); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb)); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb)); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb)); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb)); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb)); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb)); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb)); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb)); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb)); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb)); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb)); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb)); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb)); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb)); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb)); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb)); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb)); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb)); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb)); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb)); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb)); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb)); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb)); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb)); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb)); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb)); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb)); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb)); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb)); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb)); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb)); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb)); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb)); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb)); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb)); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb)); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb)); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb)); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb)); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb)); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb)); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb)); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb)); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb)); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb)); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb)); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb)); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb)); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb)); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb)); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb)); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb)); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb)); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb)); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb)); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb)); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb)); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb)); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb)); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb)); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb)); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb)); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb)); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb)); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb)); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb)); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb)); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb)); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb)); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb)); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb)); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb)); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb)); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb)); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb)); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb)); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb)); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb)); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb)); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb)); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb)); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb)); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb)); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb)); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb)); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb)); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb)); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800); + --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700); + --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800); + --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700); + --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800); + --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700); + --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800); + --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-blue-800); + --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-blue-500); + --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-blue-600); + --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-blue-700); + --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700); + --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900); + --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500); + --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400); + --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb)); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb)); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb)); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb)); + --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: .0125em; + --spectrum-global-font-letter-spacing-han: .05em; + --spectrum-global-font-letter-spacing-medium: .06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: .25em; + --spectrum-global-font-multiplier-75: .75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25); + --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base); + --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75); + --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular); + --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code); + --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed); + --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif); + --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large); + --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); } -:root, -:host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius-sided: 0; - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-padding-s: 0; - --spectrum-alias-infieldbutton-padding-m: 0; - --spectrum-alias-infieldbutton-padding-l: 0; - --spectrum-alias-infieldbutton-padding-xl: 0; - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-600 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-gap: 0; - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-450 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-radius-touching: 0; - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-800 - ); +:root, :host { + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100); + --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-130); + --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-border-radius-sided: 0; + --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-infieldbutton-padding-s: 0; + --spectrum-alias-infieldbutton-padding-m: 0; + --spectrum-alias-infieldbutton-padding-l: 0; + --spectrum-alias-infieldbutton-padding-xl: 0; + --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-stepperbutton-gap: 0; + --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-450); + --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-65); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-75); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var(--spectrum-global-dimension-size-10); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var(--spectrum-global-dimension-size-40); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-radius-touching: 0; + --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100); + --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-200); + --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-200); + --spectrum-alias-pickerbutton-label-padding-y-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; + --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-100); + --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-25); + --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-0); + --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25); + --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10); + --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100); + --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10); + --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25); + --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50); + --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100); + --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200); + --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300); + --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-50); + --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-150); + --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-250); + --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350); + --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400); + --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400); + --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225); + --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250); + --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300); + --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75); + --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25); + --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800); } -:root, -:host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-transparent-blue-background-color-hover: #0057be26; - --spectrum-alias-transparent-blue-background-color-down: #0048994d; - --spectrum-alias-transparent-blue-background-color-key-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-down - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-key-focus - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-mouse-focus - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral-subdued - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-border-color-quiet-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-alias-border-color-darker-default - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-key-focus: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-avatar-border-color-selected-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-border-color-default: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-infieldbutton-fill-border-color-hover: var( - --spectrum-alias-input-border-color-hover - ); - --spectrum-alias-infieldbutton-fill-border-color-down: var( - --spectrum-alias-input-border-color-down - ); - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( - --spectrum-alias-input-border-color-mouse-focus - ); - --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( - --spectrum-alias-input-border-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; - --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; - --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-icon-color-default - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); +:root, :host { + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-transparent-blue-background-color-hover: #0057be26; + --spectrum-alias-transparent-blue-background-color-down: #0048994d; + --spectrum-alias-transparent-blue-background-color-key-focus: var(--spectrum-alias-transparent-blue-background-color-hover); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover); + --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-selected-default: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-down); + --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-key-focus); + --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-mouse-focus); + --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover); + --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down); + --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default); + --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-component-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default); + --spectrum-alias-component-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral-subdued); + --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-75); + --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-down: var(--spectrum-global-color-gray-300); + --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default); + --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus); + --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default); + --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-default: var(--spectrum-alias-border-color); + --spectrum-alias-component-border-color-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-component-border-color-down: var(--spectrum-alias-border-color-down); + --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default); + --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-border-color); + --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-border-color-down); + --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default); + --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default); + --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-border-color-quiet-selected-default); + --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default); + --spectrum-alias-tag-border-color-default: var(--spectrum-alias-border-color-darker-default); + --spectrum-alias-tag-border-color-hover: var(--spectrum-alias-border-color-darker-hover); + --spectrum-alias-tag-border-color-down: var(--spectrum-alias-border-color-darker-hover); + --spectrum-alias-tag-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default); + --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default); + --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default); + --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default); + --spectrum-alias-tag-background-color-error-default: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default); + --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default); + --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-key-focus: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color); + --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default); + --spectrum-alias-avatar-border-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-down: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default); + --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default); + --spectrum-alias-avatar-border-color-selected-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-blue-500); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default); + --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default); + --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default); + --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover); + --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down); + --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus); + --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default); + --spectrum-alias-button-primary-text-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover); + --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down); + --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus); + --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default); + --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default); + --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover); + --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down); + --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus); + --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default); + --spectrum-alias-button-secondary-text-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover); + --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down); + --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus); + --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default); + --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default); + --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default); + --spectrum-alias-button-negative-text-color-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover); + --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down); + --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus); + --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default); + --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid); + --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color); + --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-input-border-color-down: var(--spectrum-alias-border-color-mouse-focus); + --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-alias-border-color-mouse-focus); + --spectrum-alias-input-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default); + --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down); + --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default); + --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300); + --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default); + --spectrum-alias-infieldbutton-background-color: var(--spectrum-global-color-gray-200); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-infieldbutton-fill-border-color-default: var(--spectrum-alias-input-border-color-default); + --spectrum-alias-infieldbutton-fill-border-color-hover: var(--spectrum-alias-input-border-color-hover); + --spectrum-alias-infieldbutton-fill-border-color-down: var(--spectrum-alias-input-border-color-down); + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(--spectrum-alias-input-border-color-mouse-focus); + --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(--spectrum-alias-input-border-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-alias-component-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-alias-component-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-alias-component-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; + --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; + --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-tabitem-text-color-default: var(--spectrum-alias-label-text-color); + --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900); + --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-static-blue-500); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled); + --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-icon-color-default); + --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral); + --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; + --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-blue-600); + --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-blue-600); + --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus); + --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default); + --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-link-primary-text-color-default); + --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover); + --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down); + --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus); + --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600); + --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30); + --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100); + --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75); + --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600); + --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600); + --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600); + --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600); + --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600); + --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700); + --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200); + --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700); + --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500); + --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500); + --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200); + --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200); + --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500); + --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800); + --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700); + --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600); + --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300); + --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200); + --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500); + --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200); + --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200); } diff --git a/tools/styles/spectrum-scale-large.css b/tools/styles/spectrum-scale-large.css index 42038762ff..f1d1f8e3f5 100644 --- a/tools/styles/spectrum-scale-large.css +++ b/tools/styles/spectrum-scale-large.css @@ -1,291 +1,150 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-l: 41px; - --spectrum-alias-control-three-width-xl: 46px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325); + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-325); + --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-control-three-width-l: 41px; + --spectrum-alias-control-three-width-xl: 46px; + --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-115); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-75); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-static-size-2600); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75); } diff --git a/tools/styles/spectrum-scale-medium.css b/tools/styles/spectrum-scale-medium.css index 67c09f4f63..8ad0995343 100644 --- a/tools/styles/spectrum-scale-medium.css +++ b/tools/styles/spectrum-scale-medium.css @@ -1,287 +1,150 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-width-s: 23px; - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-control-three-width-l: 29px; - --spectrum-alias-control-three-width-xl: 33px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-three-width-s: 23px; + --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-control-three-width-l: 29px; + --spectrum-alias-control-three-width-xl: 33px; + --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-65); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100); } diff --git a/tools/styles/spectrum-theme-dark.css b/tools/styles/spectrum-theme-dark.css index e677ccfb4d..de8357ae29 100644 --- a/tools/styles/spectrum-theme-dark.css +++ b/tools/styles/spectrum-theme-dark.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50); } diff --git a/tools/styles/spectrum-theme-darkest.css b/tools/styles/spectrum-theme-darkest.css index 9092657aa7..3d9103a02f 100644 --- a/tools/styles/spectrum-theme-darkest.css +++ b/tools/styles/spectrum-theme-darkest.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 13, 171, 37; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 45, 191, 58; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 80, 208, 82; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 115, 224, 107; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 138, 180, 3; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 154, 198, 11; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 170, 216, 22; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 187, 232, 41; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 216, 181, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 233, 199, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 247, 216, 4; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 249, 233, 97; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 209, 43, 114; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 227, 69, 137; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 241, 97, 156; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 252, 124, 173; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 191, 43, 191; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 211, 65, 213; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 228, 91, 229; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 239, 120, 238; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 145, 70, 236; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 162, 94, 246; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 178, 119, 250; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 192, 143, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 90, 96, 235; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 110, 115, 246; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 132, 136, 253; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 153, 157, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 146, 140; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 165, 159; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 26, 185, 178; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 66, 202, 195; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 221, 33, 24; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 238, 67, 49; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 249, 99, 76; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 129, 107; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 232, 116, 0; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 249, 137, 23; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 162, 59; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 255, 188, 102; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 149, 98; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 28, 168, 114; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 52, 187, 132; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 75, 205, 149; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 29, 128, 245; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 64, 150, 243; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 94, 170, 247; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 124, 189, 250; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 0, 0, 0; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 14, 14, 14; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 29, 29, 29; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 48, 48, 48; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 75, 75, 75; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 106, 106, 106; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 141, 141, 141; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 176, 176, 176; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 208, 208, 208; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #0009; - --spectrum-alias-dropshadow-color: #000c; - --spectrum-alias-background-color-hover-overlay: #ffffff14; - --spectrum-alias-highlight-hover: #ffffff14; - --spectrum-alias-highlight-down: #ffffff26; - --spectrum-alias-highlight-selected: #4096f333; - --spectrum-alias-highlight-selected-hover: #4096f34d; - --spectrum-alias-text-highlight-color: #4096f34d; - --spectrum-alias-background-color-quickactions: #1d1d1de6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 13, 171, 37; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 45, 191, 58; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 80, 208, 82; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 115, 224, 107; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 138, 180, 3; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 154, 198, 11; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 170, 216, 22; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 187, 232, 41; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 216, 181, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 233, 199, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 247, 216, 4; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 249, 233, 97; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 209, 43, 114; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 227, 69, 137; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 241, 97, 156; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 252, 124, 173; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 191, 43, 191; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 211, 65, 213; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 228, 91, 229; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 239, 120, 238; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 145, 70, 236; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 162, 94, 246; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 178, 119, 250; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 192, 143, 252; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 90, 96, 235; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 110, 115, 246; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 132, 136, 253; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 153, 157, 255; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 146, 140; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 0, 165, 159; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 26, 185, 178; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 66, 202, 195; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 221, 33, 24; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 238, 67, 49; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 249, 99, 76; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 255, 129, 107; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 232, 116, 0; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 249, 137, 23; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 255, 162, 59; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 255, 188, 102; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 0, 149, 98; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 28, 168, 114; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 52, 187, 132; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 75, 205, 149; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 29, 128, 245; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 64, 150, 243; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 94, 170, 247; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 124, 189, 250; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 0, 0, 0; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 14, 14, 14; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 29, 29, 29; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 48, 48, 48; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 75, 75, 75; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 106, 106, 106; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 141, 141, 141; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 176, 176, 176; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 208, 208, 208; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-modal-overlay: #0009; + --spectrum-alias-dropshadow-color: #000c; + --spectrum-alias-background-color-hover-overlay: #ffffff14; + --spectrum-alias-highlight-hover: #ffffff14; + --spectrum-alias-highlight-down: #ffffff26; + --spectrum-alias-highlight-selected: #4096f333; + --spectrum-alias-highlight-selected-hover: #4096f34d; + --spectrum-alias-text-highlight-color: #4096f34d; + --spectrum-alias-background-color-quickactions: #1d1d1de6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50); } diff --git a/tools/styles/spectrum-theme-light.css b/tools/styles/spectrum-theme-light.css index 99414590fb..7da5dd11c3 100644 --- a/tools/styles/spectrum-theme-light.css +++ b/tools/styles/spectrum-theme-light.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300); } diff --git a/tools/styles/spectrum-theme-lightest.css b/tools/styles/spectrum-theme-lightest.css index 0075ba7bb1..dbb3f71afc 100644 --- a/tools/styles/spectrum-theme-lightest.css +++ b/tools/styles/spectrum-theme-lightest.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 161, 93, 246; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 142, 67, 234; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 120, 43, 216; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 98, 23, 190; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 109, 115, 246; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 87, 93, 232; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 68, 74, 208; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 53, 58, 176; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 237, 64, 48; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 217, 28, 21; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 187, 2, 2; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 154, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 148, 97; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 126, 80; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 105, 65; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 86, 53; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 27, 127, 245; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 4, 105, 227; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 87, 190; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 72, 153; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0469e31a; - --spectrum-alias-highlight-selected-hover: #0469e333; - --spectrum-alias-text-highlight-color: #0469e333; - --spectrum-alias-background-color-quickactions: #ffffffe6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 211, 63, 212; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 188, 39, 187; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 163, 10, 163; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 135, 0, 136; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 161, 93, 246; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 142, 67, 234; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 120, 43, 216; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 98, 23, 190; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 109, 115, 246; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 87, 93, 232; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 68, 74, 208; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 53, 58, 176; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 237, 64, 48; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 217, 28, 21; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 187, 2, 2; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 154, 0, 0; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 0, 148, 97; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 0, 126, 80; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 0, 105, 65; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 0, 86, 53; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 27, 127, 245; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 4, 105, 227; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 0, 87, 190; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 0, 72, 153; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0469e31a; + --spectrum-alias-highlight-selected-hover: #0469e333; + --spectrum-alias-text-highlight-color: #0469e333; + --spectrum-alias-background-color-quickactions: #ffffffe6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300); } diff --git a/tools/styles/spectrum-two/spectrum-core-global.css b/tools/styles/spectrum-two/spectrum-core-global.css index 7df98ecf56..1e1ce12f67 100644 --- a/tools/styles/spectrum-two/spectrum-core-global.css +++ b/tools/styles/spectrum-two/spectrum-core-global.css @@ -1,3241 +1,1318 @@ -:root, -:host { - --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-animation-duration-0: 0s; - --spectrum-global-animation-duration-100: 0.13s; - --spectrum-global-animation-duration-200: 0.16s; - --spectrum-global-animation-duration-300: 0.19s; - --spectrum-global-animation-duration-400: 0.22s; - --spectrum-global-animation-duration-500: 0.25s; - --spectrum-global-animation-duration-600: 0.3s; - --spectrum-global-animation-duration-700: 0.35s; - --spectrum-global-animation-duration-800: 0.4s; - --spectrum-global-animation-duration-900: 0.45s; - --spectrum-global-animation-duration-1000: 0.5s; - --spectrum-global-animation-duration-2000: 1s; - --spectrum-global-animation-duration-4000: 2s; - --spectrum-global-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-global-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-global-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-static-black-rgb: 0, 0, 0; - --spectrum-global-color-static-black: rgb( - var(--spectrum-global-color-static-black-rgb) - ); - --spectrum-global-color-static-white-rgb: 255, 255, 255; - --spectrum-global-color-static-white: rgb( - var(--spectrum-global-color-static-white-rgb) - ); - --spectrum-global-color-static-blue-rgb: 0, 87, 191; - --spectrum-global-color-static-blue: rgb( - var(--spectrum-global-color-static-blue-rgb) - ); - --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-50: rgb( - var(--spectrum-global-color-static-gray-50-rgb) - ); - --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-75: rgb( - var(--spectrum-global-color-static-gray-75-rgb) - ); - --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; - --spectrum-global-color-static-gray-100: rgb( - var(--spectrum-global-color-static-gray-100-rgb) - ); - --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; - --spectrum-global-color-static-gray-200: rgb( - var(--spectrum-global-color-static-gray-200-rgb) - ); - --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; - --spectrum-global-color-static-gray-300: rgb( - var(--spectrum-global-color-static-gray-300-rgb) - ); - --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; - --spectrum-global-color-static-gray-400: rgb( - var(--spectrum-global-color-static-gray-400-rgb) - ); - --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; - --spectrum-global-color-static-gray-500: rgb( - var(--spectrum-global-color-static-gray-500-rgb) - ); - --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; - --spectrum-global-color-static-gray-600: rgb( - var(--spectrum-global-color-static-gray-600-rgb) - ); - --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; - --spectrum-global-color-static-gray-700: rgb( - var(--spectrum-global-color-static-gray-700-rgb) - ); - --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-static-gray-800: rgb( - var(--spectrum-global-color-static-gray-800-rgb) - ); - --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-static-gray-900: rgb( - var(--spectrum-global-color-static-gray-900-rgb) - ); - --spectrum-global-color-static-red-400-rgb: 237, 64, 48; - --spectrum-global-color-static-red-400: rgb( - var(--spectrum-global-color-static-red-400-rgb) - ); - --spectrum-global-color-static-red-500-rgb: 217, 28, 21; - --spectrum-global-color-static-red-500: rgb( - var(--spectrum-global-color-static-red-500-rgb) - ); - --spectrum-global-color-static-red-600-rgb: 187, 2, 2; - --spectrum-global-color-static-red-600: rgb( - var(--spectrum-global-color-static-red-600-rgb) - ); - --spectrum-global-color-static-red-700-rgb: 154, 0, 0; - --spectrum-global-color-static-red-700: rgb( - var(--spectrum-global-color-static-red-700-rgb) - ); - --spectrum-global-color-static-red-800-rgb: 124, 0, 0; - --spectrum-global-color-static-red-800: rgb( - var(--spectrum-global-color-static-red-800-rgb) - ); - --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; - --spectrum-global-color-static-orange-400: rgb( - var(--spectrum-global-color-static-orange-400-rgb) - ); - --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; - --spectrum-global-color-static-orange-500: rgb( - var(--spectrum-global-color-static-orange-500-rgb) - ); - --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; - --spectrum-global-color-static-orange-600: rgb( - var(--spectrum-global-color-static-orange-600-rgb) - ); - --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; - --spectrum-global-color-static-orange-700: rgb( - var(--spectrum-global-color-static-orange-700-rgb) - ); - --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; - --spectrum-global-color-static-orange-800: rgb( - var(--spectrum-global-color-static-orange-800-rgb) - ); - --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; - --spectrum-global-color-static-yellow-200: rgb( - var(--spectrum-global-color-static-yellow-200-rgb) - ); - --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; - --spectrum-global-color-static-yellow-300: rgb( - var(--spectrum-global-color-static-yellow-300-rgb) - ); - --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; - --spectrum-global-color-static-yellow-400: rgb( - var(--spectrum-global-color-static-yellow-400-rgb) - ); - --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; - --spectrum-global-color-static-yellow-500: rgb( - var(--spectrum-global-color-static-yellow-500-rgb) - ); - --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; - --spectrum-global-color-static-yellow-600: rgb( - var(--spectrum-global-color-static-yellow-600-rgb) - ); - --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; - --spectrum-global-color-static-yellow-700: rgb( - var(--spectrum-global-color-static-yellow-700-rgb) - ); - --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; - --spectrum-global-color-static-yellow-800: rgb( - var(--spectrum-global-color-static-yellow-800-rgb) - ); - --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; - --spectrum-global-color-static-chartreuse-300: rgb( - var(--spectrum-global-color-static-chartreuse-300-rgb) - ); - --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; - --spectrum-global-color-static-chartreuse-400: rgb( - var(--spectrum-global-color-static-chartreuse-400-rgb) - ); - --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; - --spectrum-global-color-static-chartreuse-500: rgb( - var(--spectrum-global-color-static-chartreuse-500-rgb) - ); - --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; - --spectrum-global-color-static-chartreuse-600: rgb( - var(--spectrum-global-color-static-chartreuse-600-rgb) - ); - --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; - --spectrum-global-color-static-chartreuse-700: rgb( - var(--spectrum-global-color-static-chartreuse-700-rgb) - ); - --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; - --spectrum-global-color-static-chartreuse-800: rgb( - var(--spectrum-global-color-static-chartreuse-800-rgb) - ); - --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; - --spectrum-global-color-static-celery-200: rgb( - var(--spectrum-global-color-static-celery-200-rgb) - ); - --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; - --spectrum-global-color-static-celery-300: rgb( - var(--spectrum-global-color-static-celery-300-rgb) - ); - --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; - --spectrum-global-color-static-celery-400: rgb( - var(--spectrum-global-color-static-celery-400-rgb) - ); - --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; - --spectrum-global-color-static-celery-500: rgb( - var(--spectrum-global-color-static-celery-500-rgb) - ); - --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; - --spectrum-global-color-static-celery-600: rgb( - var(--spectrum-global-color-static-celery-600-rgb) - ); - --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; - --spectrum-global-color-static-celery-700: rgb( - var(--spectrum-global-color-static-celery-700-rgb) - ); - --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; - --spectrum-global-color-static-celery-800: rgb( - var(--spectrum-global-color-static-celery-800-rgb) - ); - --spectrum-global-color-static-green-400-rgb: 29, 169, 115; - --spectrum-global-color-static-green-400: rgb( - var(--spectrum-global-color-static-green-400-rgb) - ); - --spectrum-global-color-static-green-500-rgb: 0, 148, 97; - --spectrum-global-color-static-green-500: rgb( - var(--spectrum-global-color-static-green-500-rgb) - ); - --spectrum-global-color-static-green-600-rgb: 0, 126, 80; - --spectrum-global-color-static-green-600: rgb( - var(--spectrum-global-color-static-green-600-rgb) - ); - --spectrum-global-color-static-green-700-rgb: 0, 105, 65; - --spectrum-global-color-static-green-700: rgb( - var(--spectrum-global-color-static-green-700-rgb) - ); - --spectrum-global-color-static-green-800-rgb: 0, 86, 53; - --spectrum-global-color-static-green-800: rgb( - var(--spectrum-global-color-static-green-800-rgb) - ); - --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; - --spectrum-global-color-static-seafoam-200: rgb( - var(--spectrum-global-color-static-seafoam-200-rgb) - ); - --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; - --spectrum-global-color-static-seafoam-300: rgb( - var(--spectrum-global-color-static-seafoam-300-rgb) - ); - --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; - --spectrum-global-color-static-seafoam-400: rgb( - var(--spectrum-global-color-static-seafoam-400-rgb) - ); - --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; - --spectrum-global-color-static-seafoam-500: rgb( - var(--spectrum-global-color-static-seafoam-500-rgb) - ); - --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; - --spectrum-global-color-static-seafoam-600: rgb( - var(--spectrum-global-color-static-seafoam-600-rgb) - ); - --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; - --spectrum-global-color-static-seafoam-700: rgb( - var(--spectrum-global-color-static-seafoam-700-rgb) - ); - --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; - --spectrum-global-color-static-seafoam-800: rgb( - var(--spectrum-global-color-static-seafoam-800-rgb) - ); - --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; - --spectrum-global-color-static-blue-200: rgb( - var(--spectrum-global-color-static-blue-200-rgb) - ); - --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; - --spectrum-global-color-static-blue-300: rgb( - var(--spectrum-global-color-static-blue-300-rgb) - ); - --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; - --spectrum-global-color-static-blue-400: rgb( - var(--spectrum-global-color-static-blue-400-rgb) - ); - --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; - --spectrum-global-color-static-blue-500: rgb( - var(--spectrum-global-color-static-blue-500-rgb) - ); - --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; - --spectrum-global-color-static-blue-600: rgb( - var(--spectrum-global-color-static-blue-600-rgb) - ); - --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; - --spectrum-global-color-static-blue-700: rgb( - var(--spectrum-global-color-static-blue-700-rgb) - ); - --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; - --spectrum-global-color-static-blue-800: rgb( - var(--spectrum-global-color-static-blue-800-rgb) - ); - --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; - --spectrum-global-color-static-indigo-200: rgb( - var(--spectrum-global-color-static-indigo-200-rgb) - ); - --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; - --spectrum-global-color-static-indigo-300: rgb( - var(--spectrum-global-color-static-indigo-300-rgb) - ); - --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; - --spectrum-global-color-static-indigo-400: rgb( - var(--spectrum-global-color-static-indigo-400-rgb) - ); - --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; - --spectrum-global-color-static-indigo-500: rgb( - var(--spectrum-global-color-static-indigo-500-rgb) - ); - --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; - --spectrum-global-color-static-indigo-600: rgb( - var(--spectrum-global-color-static-indigo-600-rgb) - ); - --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-700: rgb( - var(--spectrum-global-color-static-indigo-700-rgb) - ); - --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; - --spectrum-global-color-static-indigo-800: rgb( - var(--spectrum-global-color-static-indigo-800-rgb) - ); - --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; - --spectrum-global-color-static-purple-400: rgb( - var(--spectrum-global-color-static-purple-400-rgb) - ); - --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; - --spectrum-global-color-static-purple-500: rgb( - var(--spectrum-global-color-static-purple-500-rgb) - ); - --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; - --spectrum-global-color-static-purple-600: rgb( - var(--spectrum-global-color-static-purple-600-rgb) - ); - --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; - --spectrum-global-color-static-purple-700: rgb( - var(--spectrum-global-color-static-purple-700-rgb) - ); - --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; - --spectrum-global-color-static-purple-800: rgb( - var(--spectrum-global-color-static-purple-800-rgb) - ); - --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; - --spectrum-global-color-static-fuchsia-400: rgb( - var(--spectrum-global-color-static-fuchsia-400-rgb) - ); - --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; - --spectrum-global-color-static-fuchsia-500: rgb( - var(--spectrum-global-color-static-fuchsia-500-rgb) - ); - --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; - --spectrum-global-color-static-fuchsia-600: rgb( - var(--spectrum-global-color-static-fuchsia-600-rgb) - ); - --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; - --spectrum-global-color-static-fuchsia-700: rgb( - var(--spectrum-global-color-static-fuchsia-700-rgb) - ); - --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; - --spectrum-global-color-static-fuchsia-800: rgb( - var(--spectrum-global-color-static-fuchsia-800-rgb) - ); - --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; - --spectrum-global-color-static-magenta-200: rgb( - var(--spectrum-global-color-static-magenta-200-rgb) - ); - --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; - --spectrum-global-color-static-magenta-300: rgb( - var(--spectrum-global-color-static-magenta-300-rgb) - ); - --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; - --spectrum-global-color-static-magenta-400: rgb( - var(--spectrum-global-color-static-magenta-400-rgb) - ); - --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; - --spectrum-global-color-static-magenta-500: rgb( - var(--spectrum-global-color-static-magenta-500-rgb) - ); - --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; - --spectrum-global-color-static-magenta-600: rgb( - var(--spectrum-global-color-static-magenta-600-rgb) - ); - --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; - --spectrum-global-color-static-magenta-700: rgb( - var(--spectrum-global-color-static-magenta-700-rgb) - ); - --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; - --spectrum-global-color-static-magenta-800: rgb( - var(--spectrum-global-color-static-magenta-800-rgb) - ); - --spectrum-global-color-static-transparent-white-200: #ffffff1a; - --spectrum-global-color-static-transparent-white-300: #ffffff40; - --spectrum-global-color-static-transparent-white-400: #fff6; - --spectrum-global-color-static-transparent-white-500: #ffffff8c; - --spectrum-global-color-static-transparent-white-600: #ffffffb3; - --spectrum-global-color-static-transparent-white-700: #fffc; - --spectrum-global-color-static-transparent-white-800: #ffffffe6; - --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; - --spectrum-global-color-static-transparent-white-900: rgb( - var(--spectrum-global-color-static-transparent-white-900-rgb) - ); - --spectrum-global-color-static-transparent-black-200: #0000001a; - --spectrum-global-color-static-transparent-black-300: #00000040; - --spectrum-global-color-static-transparent-black-400: #0006; - --spectrum-global-color-static-transparent-black-500: #0000008c; - --spectrum-global-color-static-transparent-black-600: #000000b3; - --spectrum-global-color-static-transparent-black-700: #000c; - --spectrum-global-color-static-transparent-black-800: #000000e6; - --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; - --spectrum-global-color-static-transparent-black-900: rgb( - var(--spectrum-global-color-static-transparent-black-900-rgb) - ); - --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, - #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, - #1a4b83, #1a3979, #1a266f, #191264, #180057; - --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, - #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, - #196b47, #105c45, #094d41, #033f3e, #00313a; - --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, - #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, - #71167c, #560f74, #370b6e, #000968; - --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, - #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, - #3ea8a6, #208288, #076769, #00494b, #002c2d; - --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, - #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, - #397aa8, #1c5796, #163771, #10194d; - --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, - #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, - #2f74b3, #265191, #163670, #0b194c; - --spectrum-semantic-negative-background-color: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-color-default: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-color-hover: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-dark: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-border-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-icon-color: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-status-color: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-text-color-large: var( - --spectrum-global-color-red-500 - ); - --spectrum-semantic-negative-text-color-small: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-text-color-small-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-text-color-small-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-semantic-negative-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-semantic-negative-color-key-focus: var( - --spectrum-global-color-red-400 - ); - --spectrum-semantic-negative-background-color-default: var( - --spectrum-global-color-static-red-600 - ); - --spectrum-semantic-negative-background-color-hover: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-negative-background-color-down: var( - --spectrum-global-color-static-red-800 - ); - --spectrum-semantic-negative-background-color-key-focus: var( - --spectrum-global-color-static-red-700 - ); - --spectrum-semantic-notice-background-color: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-color-default: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-color-dark: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-border-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-icon-color: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-status-color: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-text-color-large: var( - --spectrum-global-color-orange-500 - ); - --spectrum-semantic-notice-text-color-small: var( - --spectrum-global-color-orange-600 - ); - --spectrum-semantic-notice-color-down: var( - --spectrum-global-color-orange-700 - ); - --spectrum-semantic-notice-color-key-focus: var( - --spectrum-global-color-orange-400 - ); - --spectrum-semantic-notice-background-color-default: var( - --spectrum-global-color-static-orange-600 - ); - --spectrum-semantic-notice-background-color-hover: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-notice-background-color-down: var( - --spectrum-global-color-static-orange-800 - ); - --spectrum-semantic-notice-background-color-key-focus: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-semantic-positive-background-color: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-color-default: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-color-dark: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-border-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-icon-color: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-status-color: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-text-color-large: var( - --spectrum-global-color-green-500 - ); - --spectrum-semantic-positive-text-color-small: var( - --spectrum-global-color-green-600 - ); - --spectrum-semantic-positive-color-down: var( - --spectrum-global-color-green-700 - ); - --spectrum-semantic-positive-color-key-focus: var( - --spectrum-global-color-green-400 - ); - --spectrum-semantic-positive-background-color-default: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-semantic-positive-background-color-hover: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-positive-background-color-down: var( - --spectrum-global-color-static-green-800 - ); - --spectrum-semantic-positive-background-color-key-focus: var( - --spectrum-global-color-static-green-700 - ); - --spectrum-semantic-informative-background-color: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-color-dark: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-border-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-icon-color: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-status-color: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-text-color-large: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-informative-text-color-small: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-informative-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-informative-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-semantic-informative-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-informative-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-informative-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-informative-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-default: var( - --spectrum-global-color-static-blue-600 - ); - --spectrum-semantic-cta-background-color-hover: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-cta-background-color-down: var( - --spectrum-global-color-static-blue-800 - ); - --spectrum-semantic-cta-background-color-key-focus: var( - --spectrum-global-color-static-blue-700 - ); - --spectrum-semantic-emphasized-border-color-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-semantic-emphasized-border-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-emphasized-border-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-semantic-emphasized-border-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-semantic-neutral-background-color-default: var( - --spectrum-global-color-static-gray-700 - ); - --spectrum-semantic-neutral-background-color-hover: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-neutral-background-color-down: var( - --spectrum-global-color-static-gray-900 - ); - --spectrum-semantic-neutral-background-color-key-focus: var( - --spectrum-global-color-static-gray-800 - ); - --spectrum-semantic-presence-color-1: var( - --spectrum-global-color-static-red-500 - ); - --spectrum-semantic-presence-color-2: var( - --spectrum-global-color-static-orange-400 - ); - --spectrum-semantic-presence-color-3: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; - --spectrum-semantic-presence-color-4: rgb( - var(--spectrum-semantic-presence-color-4-rgb) - ); - --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; - --spectrum-semantic-presence-color-5: rgb( - var(--spectrum-semantic-presence-color-5-rgb) - ); - --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; - --spectrum-semantic-presence-color-6: rgb( - var(--spectrum-semantic-presence-color-6-rgb) - ); - --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; - --spectrum-semantic-presence-color-7: rgb( - var(--spectrum-semantic-presence-color-7-rgb) - ); - --spectrum-semantic-presence-color-8: var( - --spectrum-global-color-static-fuchsia-600 - ); - --spectrum-global-dimension-static-percent-50: 50%; - --spectrum-global-dimension-static-percent-70: 70%; - --spectrum-global-dimension-static-percent-100: 100%; - --spectrum-global-dimension-static-breakpoint-xsmall: 304px; - --spectrum-global-dimension-static-breakpoint-small: 768px; - --spectrum-global-dimension-static-breakpoint-medium: 1280px; - --spectrum-global-dimension-static-breakpoint-large: 1768px; - --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; - --spectrum-global-dimension-static-grid-columns: 12; - --spectrum-global-dimension-static-grid-fluid-width: 100%; - --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; - --spectrum-global-dimension-static-size-0: 0px; - --spectrum-global-dimension-static-size-10: 1px; - --spectrum-global-dimension-static-size-25: 2px; - --spectrum-global-dimension-static-size-40: 3px; - --spectrum-global-dimension-static-size-50: 4px; - --spectrum-global-dimension-static-size-65: 5px; - --spectrum-global-dimension-static-size-75: 6px; - --spectrum-global-dimension-static-size-85: 7px; - --spectrum-global-dimension-static-size-100: 8px; - --spectrum-global-dimension-static-size-115: 9px; - --spectrum-global-dimension-static-size-125: 10px; - --spectrum-global-dimension-static-size-130: 11px; - --spectrum-global-dimension-static-size-150: 12px; - --spectrum-global-dimension-static-size-160: 13px; - --spectrum-global-dimension-static-size-175: 14px; - --spectrum-global-dimension-static-size-185: 15px; - --spectrum-global-dimension-static-size-200: 16px; - --spectrum-global-dimension-static-size-225: 18px; - --spectrum-global-dimension-static-size-250: 20px; - --spectrum-global-dimension-static-size-275: 22px; - --spectrum-global-dimension-static-size-300: 24px; - --spectrum-global-dimension-static-size-325: 26px; - --spectrum-global-dimension-static-size-350: 28px; - --spectrum-global-dimension-static-size-400: 32px; - --spectrum-global-dimension-static-size-450: 36px; - --spectrum-global-dimension-static-size-500: 40px; - --spectrum-global-dimension-static-size-550: 44px; - --spectrum-global-dimension-static-size-600: 48px; - --spectrum-global-dimension-static-size-700: 56px; - --spectrum-global-dimension-static-size-800: 64px; - --spectrum-global-dimension-static-size-900: 72px; - --spectrum-global-dimension-static-size-1000: 80px; - --spectrum-global-dimension-static-size-1200: 96px; - --spectrum-global-dimension-static-size-1700: 136px; - --spectrum-global-dimension-static-size-2400: 192px; - --spectrum-global-dimension-static-size-2500: 200px; - --spectrum-global-dimension-static-size-2600: 208px; - --spectrum-global-dimension-static-size-2800: 224px; - --spectrum-global-dimension-static-size-3200: 256px; - --spectrum-global-dimension-static-size-3400: 272px; - --spectrum-global-dimension-static-size-3500: 280px; - --spectrum-global-dimension-static-size-3600: 288px; - --spectrum-global-dimension-static-size-3800: 304px; - --spectrum-global-dimension-static-size-4600: 368px; - --spectrum-global-dimension-static-size-5000: 400px; - --spectrum-global-dimension-static-size-6000: 480px; - --spectrum-global-dimension-static-size-16000: 1280px; - --spectrum-global-dimension-static-font-size-50: 11px; - --spectrum-global-dimension-static-font-size-75: 12px; - --spectrum-global-dimension-static-font-size-100: 14px; - --spectrum-global-dimension-static-font-size-150: 15px; - --spectrum-global-dimension-static-font-size-200: 16px; - --spectrum-global-dimension-static-font-size-300: 18px; - --spectrum-global-dimension-static-font-size-400: 20px; - --spectrum-global-dimension-static-font-size-500: 22px; - --spectrum-global-dimension-static-font-size-600: 25px; - --spectrum-global-dimension-static-font-size-700: 28px; - --spectrum-global-dimension-static-font-size-800: 32px; - --spectrum-global-dimension-static-font-size-900: 36px; - --spectrum-global-dimension-static-font-size-1000: 40px; - --spectrum-global-font-family-base: adobe-clean, 'Source Sans Pro', - -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, - 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-family-serif: adobe-clean-serif, 'Source Serif Pro', - Georgia, serif; - --spectrum-global-font-family-code: 'Source Code Pro', Monaco, monospace; - --spectrum-global-font-weight-thin: 100; - --spectrum-global-font-weight-ultra-light: 200; - --spectrum-global-font-weight-light: 300; - --spectrum-global-font-weight-regular: 400; - --spectrum-global-font-weight-medium: 500; - --spectrum-global-font-weight-semi-bold: 600; - --spectrum-global-font-weight-bold: 700; - --spectrum-global-font-weight-extra-bold: 800; - --spectrum-global-font-weight-black: 900; - --spectrum-global-font-style-regular: normal; - --spectrum-global-font-style-italic: italic; - --spectrum-global-font-letter-spacing-none: 0; - --spectrum-global-font-letter-spacing-small: 0.0125em; - --spectrum-global-font-letter-spacing-han: 0.05em; - --spectrum-global-font-letter-spacing-medium: 0.06em; - --spectrum-global-font-line-height-large: 1.7; - --spectrum-global-font-line-height-medium: 1.5; - --spectrum-global-font-line-height-small: 1.3; - --spectrum-global-font-multiplier-0: 0em; - --spectrum-global-font-multiplier-25: 0.25em; - --spectrum-global-font-multiplier-75: 0.75em; - --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', 'sans-serif'; - --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, - source-han-simplified-c, 'SimSun', 'Heiti SC Light', 'sans-serif'; - --spectrum-global-font-font-family-ko: adobe-clean-han-korean, - source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif'; - --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, - 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic, - 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', - 'sans-serif'; - --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, - source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean, - 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-loupe-entry-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-loupe-exit-animation-duration: var( - --spectrum-global-animation-duration-300 - ); - --spectrum-alias-heading-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-text-font-weight-strong-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-heading-margin-bottom: var( - --spectrum-global-font-multiplier-25 - ); - --spectrum-alias-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-body-text-font-family: var( - --spectrum-global-font-family-base - ); - --spectrum-alias-body-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-body-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-body-margin-bottom: var( - --spectrum-global-font-multiplier-75 - ); - --spectrum-alias-detail-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-detail-text-font-weight-light: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-heading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-heading-text-font-weight-quiet: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-body-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-subheading-text-font-weight: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-article-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-article-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-article-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-font-family: var( - --spectrum-global-font-family-code - ); - --spectrum-alias-code-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-code-text-font-weight-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-code-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-code-margin-bottom: var( - --spectrum-global-font-multiplier-0 - ); - --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); - --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); - --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); - --spectrum-alias-font-family-zhhans: var( - --spectrum-global-font-font-family-zhhans - ); - --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); - --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); - --spectrum-alias-font-family-condensed: var( - --spectrum-global-font-font-family-condensed - ); - --spectrum-alias-button-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-component-text-line-height: var( - --spectrum-global-font-line-height-small - ); - --spectrum-alias-han-component-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-serif-text-font-family: var( - --spectrum-global-font-family-serif - ); - --spectrum-alias-han-heading-text-line-height: var( - --spectrum-global-font-line-height-medium - ); - --spectrum-alias-han-heading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-heading-text-font-weight-regular-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-quiet-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-light: var( - --spectrum-global-font-weight-light - ); - --spectrum-alias-han-heading-text-font-weight-light-emphasis: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-heading-text-font-weight-light-strong: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-heading-text-font-weight-heavy: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-heading-text-font-weight-heavy-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-body-text-line-height: var( - --spectrum-global-font-line-height-large - ); - --spectrum-alias-han-body-text-font-weight-regular: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-body-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-body-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-subheading-text-font-weight-regular: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-subheading-text-font-weight-emphasis: var( - --spectrum-global-font-weight-extra-bold - ); - --spectrum-alias-han-subheading-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); - --spectrum-alias-han-detail-text-font-weight: var( - --spectrum-global-font-weight-regular - ); - --spectrum-alias-han-detail-text-font-weight-emphasis: var( - --spectrum-global-font-weight-bold - ); - --spectrum-alias-han-detail-text-font-weight-strong: var( - --spectrum-global-font-weight-black - ); +:root, :host { + --spectrum-global-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-animation-duration-0: 0s; + --spectrum-global-animation-duration-100: .13s; + --spectrum-global-animation-duration-200: .16s; + --spectrum-global-animation-duration-300: .19s; + --spectrum-global-animation-duration-400: .22s; + --spectrum-global-animation-duration-500: .25s; + --spectrum-global-animation-duration-600: .3s; + --spectrum-global-animation-duration-700: .35s; + --spectrum-global-animation-duration-800: .4s; + --spectrum-global-animation-duration-900: .45s; + --spectrum-global-animation-duration-1000: .5s; + --spectrum-global-animation-duration-2000: 1s; + --spectrum-global-animation-duration-4000: 2s; + --spectrum-global-animation-ease-in-out: cubic-bezier(.45, 0, .4, 1); + --spectrum-global-animation-ease-in: cubic-bezier(.5, 0, 1, 1); + --spectrum-global-animation-ease-out: cubic-bezier(0, 0, .4, 1); + --spectrum-global-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-static-black-rgb: 0, 0, 0; + --spectrum-global-color-static-black: rgb(var(--spectrum-global-color-static-black-rgb)); + --spectrum-global-color-static-white-rgb: 255, 255, 255; + --spectrum-global-color-static-white: rgb(var(--spectrum-global-color-static-white-rgb)); + --spectrum-global-color-static-blue-rgb: 0, 87, 191; + --spectrum-global-color-static-blue: rgb(var(--spectrum-global-color-static-blue-rgb)); + --spectrum-global-color-static-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-50: rgb(var(--spectrum-global-color-static-gray-50-rgb)); + --spectrum-global-color-static-gray-75-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-75: rgb(var(--spectrum-global-color-static-gray-75-rgb)); + --spectrum-global-color-static-gray-100-rgb: 255, 255, 255; + --spectrum-global-color-static-gray-100: rgb(var(--spectrum-global-color-static-gray-100-rgb)); + --spectrum-global-color-static-gray-200-rgb: 235, 235, 235; + --spectrum-global-color-static-gray-200: rgb(var(--spectrum-global-color-static-gray-200-rgb)); + --spectrum-global-color-static-gray-300-rgb: 217, 217, 217; + --spectrum-global-color-static-gray-300: rgb(var(--spectrum-global-color-static-gray-300-rgb)); + --spectrum-global-color-static-gray-400-rgb: 179, 179, 179; + --spectrum-global-color-static-gray-400: rgb(var(--spectrum-global-color-static-gray-400-rgb)); + --spectrum-global-color-static-gray-500-rgb: 146, 146, 146; + --spectrum-global-color-static-gray-500: rgb(var(--spectrum-global-color-static-gray-500-rgb)); + --spectrum-global-color-static-gray-600-rgb: 110, 110, 110; + --spectrum-global-color-static-gray-600: rgb(var(--spectrum-global-color-static-gray-600-rgb)); + --spectrum-global-color-static-gray-700-rgb: 71, 71, 71; + --spectrum-global-color-static-gray-700: rgb(var(--spectrum-global-color-static-gray-700-rgb)); + --spectrum-global-color-static-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-static-gray-800: rgb(var(--spectrum-global-color-static-gray-800-rgb)); + --spectrum-global-color-static-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-static-gray-900: rgb(var(--spectrum-global-color-static-gray-900-rgb)); + --spectrum-global-color-static-red-400-rgb: 237, 64, 48; + --spectrum-global-color-static-red-400: rgb(var(--spectrum-global-color-static-red-400-rgb)); + --spectrum-global-color-static-red-500-rgb: 217, 28, 21; + --spectrum-global-color-static-red-500: rgb(var(--spectrum-global-color-static-red-500-rgb)); + --spectrum-global-color-static-red-600-rgb: 187, 2, 2; + --spectrum-global-color-static-red-600: rgb(var(--spectrum-global-color-static-red-600-rgb)); + --spectrum-global-color-static-red-700-rgb: 154, 0, 0; + --spectrum-global-color-static-red-700: rgb(var(--spectrum-global-color-static-red-700-rgb)); + --spectrum-global-color-static-red-800-rgb: 124, 0, 0; + --spectrum-global-color-static-red-800: rgb(var(--spectrum-global-color-static-red-800-rgb)); + --spectrum-global-color-static-orange-400-rgb: 250, 139, 26; + --spectrum-global-color-static-orange-400: rgb(var(--spectrum-global-color-static-orange-400-rgb)); + --spectrum-global-color-static-orange-500-rgb: 233, 117, 0; + --spectrum-global-color-static-orange-500: rgb(var(--spectrum-global-color-static-orange-500-rgb)); + --spectrum-global-color-static-orange-600-rgb: 209, 97, 0; + --spectrum-global-color-static-orange-600: rgb(var(--spectrum-global-color-static-orange-600-rgb)); + --spectrum-global-color-static-orange-700-rgb: 182, 80, 0; + --spectrum-global-color-static-orange-700: rgb(var(--spectrum-global-color-static-orange-700-rgb)); + --spectrum-global-color-static-orange-800-rgb: 155, 64, 0; + --spectrum-global-color-static-orange-800: rgb(var(--spectrum-global-color-static-orange-800-rgb)); + --spectrum-global-color-static-yellow-200-rgb: 250, 237, 123; + --spectrum-global-color-static-yellow-200: rgb(var(--spectrum-global-color-static-yellow-200-rgb)); + --spectrum-global-color-static-yellow-300-rgb: 250, 224, 23; + --spectrum-global-color-static-yellow-300: rgb(var(--spectrum-global-color-static-yellow-300-rgb)); + --spectrum-global-color-static-yellow-400-rgb: 238, 205, 0; + --spectrum-global-color-static-yellow-400: rgb(var(--spectrum-global-color-static-yellow-400-rgb)); + --spectrum-global-color-static-yellow-500-rgb: 221, 185, 0; + --spectrum-global-color-static-yellow-500: rgb(var(--spectrum-global-color-static-yellow-500-rgb)); + --spectrum-global-color-static-yellow-600-rgb: 201, 164, 0; + --spectrum-global-color-static-yellow-600: rgb(var(--spectrum-global-color-static-yellow-600-rgb)); + --spectrum-global-color-static-yellow-700-rgb: 181, 144, 0; + --spectrum-global-color-static-yellow-700: rgb(var(--spectrum-global-color-static-yellow-700-rgb)); + --spectrum-global-color-static-yellow-800-rgb: 160, 125, 0; + --spectrum-global-color-static-yellow-800: rgb(var(--spectrum-global-color-static-yellow-800-rgb)); + --spectrum-global-color-static-chartreuse-300-rgb: 176, 222, 27; + --spectrum-global-color-static-chartreuse-300: rgb(var(--spectrum-global-color-static-chartreuse-300-rgb)); + --spectrum-global-color-static-chartreuse-400-rgb: 157, 203, 13; + --spectrum-global-color-static-chartreuse-400: rgb(var(--spectrum-global-color-static-chartreuse-400-rgb)); + --spectrum-global-color-static-chartreuse-500-rgb: 139, 182, 4; + --spectrum-global-color-static-chartreuse-500: rgb(var(--spectrum-global-color-static-chartreuse-500-rgb)); + --spectrum-global-color-static-chartreuse-600-rgb: 122, 162, 0; + --spectrum-global-color-static-chartreuse-600: rgb(var(--spectrum-global-color-static-chartreuse-600-rgb)); + --spectrum-global-color-static-chartreuse-700-rgb: 106, 141, 0; + --spectrum-global-color-static-chartreuse-700: rgb(var(--spectrum-global-color-static-chartreuse-700-rgb)); + --spectrum-global-color-static-chartreuse-800-rgb: 90, 120, 0; + --spectrum-global-color-static-chartreuse-800: rgb(var(--spectrum-global-color-static-chartreuse-800-rgb)); + --spectrum-global-color-static-celery-200-rgb: 126, 229, 114; + --spectrum-global-color-static-celery-200: rgb(var(--spectrum-global-color-static-celery-200-rgb)); + --spectrum-global-color-static-celery-300-rgb: 87, 212, 86; + --spectrum-global-color-static-celery-300: rgb(var(--spectrum-global-color-static-celery-300-rgb)); + --spectrum-global-color-static-celery-400-rgb: 48, 193, 61; + --spectrum-global-color-static-celery-400: rgb(var(--spectrum-global-color-static-celery-400-rgb)); + --spectrum-global-color-static-celery-500-rgb: 15, 172, 38; + --spectrum-global-color-static-celery-500: rgb(var(--spectrum-global-color-static-celery-500-rgb)); + --spectrum-global-color-static-celery-600-rgb: 0, 150, 20; + --spectrum-global-color-static-celery-600: rgb(var(--spectrum-global-color-static-celery-600-rgb)); + --spectrum-global-color-static-celery-700-rgb: 0, 128, 15; + --spectrum-global-color-static-celery-700: rgb(var(--spectrum-global-color-static-celery-700-rgb)); + --spectrum-global-color-static-celery-800-rgb: 0, 107, 15; + --spectrum-global-color-static-celery-800: rgb(var(--spectrum-global-color-static-celery-800-rgb)); + --spectrum-global-color-static-green-400-rgb: 29, 169, 115; + --spectrum-global-color-static-green-400: rgb(var(--spectrum-global-color-static-green-400-rgb)); + --spectrum-global-color-static-green-500-rgb: 0, 148, 97; + --spectrum-global-color-static-green-500: rgb(var(--spectrum-global-color-static-green-500-rgb)); + --spectrum-global-color-static-green-600-rgb: 0, 126, 80; + --spectrum-global-color-static-green-600: rgb(var(--spectrum-global-color-static-green-600-rgb)); + --spectrum-global-color-static-green-700-rgb: 0, 105, 65; + --spectrum-global-color-static-green-700: rgb(var(--spectrum-global-color-static-green-700-rgb)); + --spectrum-global-color-static-green-800-rgb: 0, 86, 53; + --spectrum-global-color-static-green-800: rgb(var(--spectrum-global-color-static-green-800-rgb)); + --spectrum-global-color-static-seafoam-200-rgb: 75, 206, 199; + --spectrum-global-color-static-seafoam-200: rgb(var(--spectrum-global-color-static-seafoam-200-rgb)); + --spectrum-global-color-static-seafoam-300-rgb: 32, 187, 180; + --spectrum-global-color-static-seafoam-300: rgb(var(--spectrum-global-color-static-seafoam-300-rgb)); + --spectrum-global-color-static-seafoam-400-rgb: 0, 166, 160; + --spectrum-global-color-static-seafoam-400: rgb(var(--spectrum-global-color-static-seafoam-400-rgb)); + --spectrum-global-color-static-seafoam-500-rgb: 0, 145, 139; + --spectrum-global-color-static-seafoam-500: rgb(var(--spectrum-global-color-static-seafoam-500-rgb)); + --spectrum-global-color-static-seafoam-600-rgb: 0, 124, 118; + --spectrum-global-color-static-seafoam-600: rgb(var(--spectrum-global-color-static-seafoam-600-rgb)); + --spectrum-global-color-static-seafoam-700-rgb: 0, 103, 99; + --spectrum-global-color-static-seafoam-700: rgb(var(--spectrum-global-color-static-seafoam-700-rgb)); + --spectrum-global-color-static-seafoam-800-rgb: 10, 83, 80; + --spectrum-global-color-static-seafoam-800: rgb(var(--spectrum-global-color-static-seafoam-800-rgb)); + --spectrum-global-color-static-blue-200-rgb: 130, 193, 251; + --spectrum-global-color-static-blue-200: rgb(var(--spectrum-global-color-static-blue-200-rgb)); + --spectrum-global-color-static-blue-300-rgb: 98, 173, 247; + --spectrum-global-color-static-blue-300: rgb(var(--spectrum-global-color-static-blue-300-rgb)); + --spectrum-global-color-static-blue-400-rgb: 66, 151, 244; + --spectrum-global-color-static-blue-400: rgb(var(--spectrum-global-color-static-blue-400-rgb)); + --spectrum-global-color-static-blue-500-rgb: 27, 127, 245; + --spectrum-global-color-static-blue-500: rgb(var(--spectrum-global-color-static-blue-500-rgb)); + --spectrum-global-color-static-blue-600-rgb: 4, 105, 227; + --spectrum-global-color-static-blue-600: rgb(var(--spectrum-global-color-static-blue-600-rgb)); + --spectrum-global-color-static-blue-700-rgb: 0, 87, 190; + --spectrum-global-color-static-blue-700: rgb(var(--spectrum-global-color-static-blue-700-rgb)); + --spectrum-global-color-static-blue-800-rgb: 0, 72, 153; + --spectrum-global-color-static-blue-800: rgb(var(--spectrum-global-color-static-blue-800-rgb)); + --spectrum-global-color-static-indigo-200-rgb: 178, 181, 255; + --spectrum-global-color-static-indigo-200: rgb(var(--spectrum-global-color-static-indigo-200-rgb)); + --spectrum-global-color-static-indigo-300-rgb: 155, 159, 255; + --spectrum-global-color-static-indigo-300: rgb(var(--spectrum-global-color-static-indigo-300-rgb)); + --spectrum-global-color-static-indigo-400-rgb: 132, 137, 253; + --spectrum-global-color-static-indigo-400: rgb(var(--spectrum-global-color-static-indigo-400-rgb)); + --spectrum-global-color-static-indigo-500-rgb: 109, 115, 246; + --spectrum-global-color-static-indigo-500: rgb(var(--spectrum-global-color-static-indigo-500-rgb)); + --spectrum-global-color-static-indigo-600-rgb: 87, 93, 232; + --spectrum-global-color-static-indigo-600: rgb(var(--spectrum-global-color-static-indigo-600-rgb)); + --spectrum-global-color-static-indigo-700-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-700: rgb(var(--spectrum-global-color-static-indigo-700-rgb)); + --spectrum-global-color-static-indigo-800-rgb: 68, 74, 208; + --spectrum-global-color-static-indigo-800: rgb(var(--spectrum-global-color-static-indigo-800-rgb)); + --spectrum-global-color-static-purple-400-rgb: 178, 121, 250; + --spectrum-global-color-static-purple-400: rgb(var(--spectrum-global-color-static-purple-400-rgb)); + --spectrum-global-color-static-purple-500-rgb: 161, 93, 246; + --spectrum-global-color-static-purple-500: rgb(var(--spectrum-global-color-static-purple-500-rgb)); + --spectrum-global-color-static-purple-600-rgb: 142, 67, 234; + --spectrum-global-color-static-purple-600: rgb(var(--spectrum-global-color-static-purple-600-rgb)); + --spectrum-global-color-static-purple-700-rgb: 120, 43, 216; + --spectrum-global-color-static-purple-700: rgb(var(--spectrum-global-color-static-purple-700-rgb)); + --spectrum-global-color-static-purple-800-rgb: 98, 23, 190; + --spectrum-global-color-static-purple-800: rgb(var(--spectrum-global-color-static-purple-800-rgb)); + --spectrum-global-color-static-fuchsia-400-rgb: 228, 93, 230; + --spectrum-global-color-static-fuchsia-400: rgb(var(--spectrum-global-color-static-fuchsia-400-rgb)); + --spectrum-global-color-static-fuchsia-500-rgb: 211, 63, 212; + --spectrum-global-color-static-fuchsia-500: rgb(var(--spectrum-global-color-static-fuchsia-500-rgb)); + --spectrum-global-color-static-fuchsia-600-rgb: 188, 39, 187; + --spectrum-global-color-static-fuchsia-600: rgb(var(--spectrum-global-color-static-fuchsia-600-rgb)); + --spectrum-global-color-static-fuchsia-700-rgb: 163, 10, 163; + --spectrum-global-color-static-fuchsia-700: rgb(var(--spectrum-global-color-static-fuchsia-700-rgb)); + --spectrum-global-color-static-fuchsia-800-rgb: 135, 0, 136; + --spectrum-global-color-static-fuchsia-800: rgb(var(--spectrum-global-color-static-fuchsia-800-rgb)); + --spectrum-global-color-static-magenta-200-rgb: 253, 127, 175; + --spectrum-global-color-static-magenta-200: rgb(var(--spectrum-global-color-static-magenta-200-rgb)); + --spectrum-global-color-static-magenta-300-rgb: 242, 98, 157; + --spectrum-global-color-static-magenta-300: rgb(var(--spectrum-global-color-static-magenta-300-rgb)); + --spectrum-global-color-static-magenta-400-rgb: 226, 68, 135; + --spectrum-global-color-static-magenta-400: rgb(var(--spectrum-global-color-static-magenta-400-rgb)); + --spectrum-global-color-static-magenta-500-rgb: 205, 40, 111; + --spectrum-global-color-static-magenta-500: rgb(var(--spectrum-global-color-static-magenta-500-rgb)); + --spectrum-global-color-static-magenta-600-rgb: 179, 15, 89; + --spectrum-global-color-static-magenta-600: rgb(var(--spectrum-global-color-static-magenta-600-rgb)); + --spectrum-global-color-static-magenta-700-rgb: 149, 0, 72; + --spectrum-global-color-static-magenta-700: rgb(var(--spectrum-global-color-static-magenta-700-rgb)); + --spectrum-global-color-static-magenta-800-rgb: 119, 0, 58; + --spectrum-global-color-static-magenta-800: rgb(var(--spectrum-global-color-static-magenta-800-rgb)); + --spectrum-global-color-static-transparent-white-200: #ffffff1a; + --spectrum-global-color-static-transparent-white-300: #ffffff40; + --spectrum-global-color-static-transparent-white-400: #fff6; + --spectrum-global-color-static-transparent-white-500: #ffffff8c; + --spectrum-global-color-static-transparent-white-600: #ffffffb3; + --spectrum-global-color-static-transparent-white-700: #fffc; + --spectrum-global-color-static-transparent-white-800: #ffffffe6; + --spectrum-global-color-static-transparent-white-900-rgb: 255, 255, 255; + --spectrum-global-color-static-transparent-white-900: rgb(var(--spectrum-global-color-static-transparent-white-900-rgb)); + --spectrum-global-color-static-transparent-black-200: #0000001a; + --spectrum-global-color-static-transparent-black-300: #00000040; + --spectrum-global-color-static-transparent-black-400: #0006; + --spectrum-global-color-static-transparent-black-500: #0000008c; + --spectrum-global-color-static-transparent-black-600: #000000b3; + --spectrum-global-color-static-transparent-black-700: #000c; + --spectrum-global-color-static-transparent-black-800: #000000e6; + --spectrum-global-color-static-transparent-black-900-rgb: 0, 0, 0; + --spectrum-global-color-static-transparent-black-900: rgb(var(--spectrum-global-color-static-transparent-black-900-rgb)); + --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7, #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d, #1a4b83, #1a3979, #1a266f, #191264, #180057; + --spectrum-global-color-sequential-forest: #ffffdf, #e2f6ba, #c4eb95, #a4e16d, #8dd366, #77c460, #5fb65a, #48a754, #36984f, #2c894d, #237a4a, #196b47, #105c45, #094d41, #033f3e, #00313a; + --spectrum-global-color-sequential-rose: #fff4dd, #ffddd7, #ffc5d2, #feaecb, #fa96c4, #f57ebd, #ef64b5, #e846ad, #d238a1, #bb2e96, #a3248c, #8a1b83, #71167c, #560f74, #370b6e, #000968; + --spectrum-global-color-diverging-orange-yellow-seafoam: #580000, #79260b, #9c4511, #bd651a, #dd8629, #f5ad52, #fed693, #ffffe0, #bbe4d1, #76c7be, #3ea8a6, #208288, #076769, #00494b, #002c2d; + --spectrum-global-color-diverging-red-yellow-blue: #4a001e, #751232, #a52747, #c65154, #e47961, #f0a882, #fad4ac, #ffffe0, #bce2cf, #89c0c4, #579eb9, #397aa8, #1c5796, #163771, #10194d; + --spectrum-global-color-diverging-red-blue: #4a001e, #731331, #9f2945, #cc415a, #e06e85, #ed9ab0, #f8c3d9, #faf0ff, #c6d0f2, #92b2de, #5d94cb, #2f74b3, #265191, #163670, #0b194c; + --spectrum-semantic-negative-background-color: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-color-default: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-color-hover: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-dark: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-border-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-icon-color: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-status-color: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-text-color-large: var(--spectrum-global-color-red-500); + --spectrum-semantic-negative-text-color-small: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-text-color-small-hover: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-text-color-small-key-focus: var(--spectrum-global-color-red-600); + --spectrum-semantic-negative-color-down: var(--spectrum-global-color-red-700); + --spectrum-semantic-negative-color-key-focus: var(--spectrum-global-color-red-400); + --spectrum-semantic-negative-background-color-default: var(--spectrum-global-color-static-red-600); + --spectrum-semantic-negative-background-color-hover: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-negative-background-color-down: var(--spectrum-global-color-static-red-800); + --spectrum-semantic-negative-background-color-key-focus: var(--spectrum-global-color-static-red-700); + --spectrum-semantic-notice-background-color: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-color-default: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-color-dark: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-border-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-icon-color: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-status-color: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-text-color-large: var(--spectrum-global-color-orange-500); + --spectrum-semantic-notice-text-color-small: var(--spectrum-global-color-orange-600); + --spectrum-semantic-notice-color-down: var(--spectrum-global-color-orange-700); + --spectrum-semantic-notice-color-key-focus: var(--spectrum-global-color-orange-400); + --spectrum-semantic-notice-background-color-default: var(--spectrum-global-color-static-orange-600); + --spectrum-semantic-notice-background-color-hover: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-notice-background-color-down: var(--spectrum-global-color-static-orange-800); + --spectrum-semantic-notice-background-color-key-focus: var(--spectrum-global-color-static-orange-700); + --spectrum-semantic-positive-background-color: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-color-default: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-color-dark: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-border-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-icon-color: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-status-color: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-text-color-large: var(--spectrum-global-color-green-500); + --spectrum-semantic-positive-text-color-small: var(--spectrum-global-color-green-600); + --spectrum-semantic-positive-color-down: var(--spectrum-global-color-green-700); + --spectrum-semantic-positive-color-key-focus: var(--spectrum-global-color-green-400); + --spectrum-semantic-positive-background-color-default: var(--spectrum-global-color-static-green-600); + --spectrum-semantic-positive-background-color-hover: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-positive-background-color-down: var(--spectrum-global-color-static-green-800); + --spectrum-semantic-positive-background-color-key-focus: var(--spectrum-global-color-static-green-700); + --spectrum-semantic-informative-background-color: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-color-default: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-color-dark: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-border-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-icon-color: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-status-color: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-text-color-large: var(--spectrum-global-color-blue-500); + --spectrum-semantic-informative-text-color-small: var(--spectrum-global-color-blue-600); + --spectrum-semantic-informative-color-down: var(--spectrum-global-color-blue-700); + --spectrum-semantic-informative-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-semantic-informative-background-color-default: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-informative-background-color-hover: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-informative-background-color-down: var(--spectrum-global-color-static-blue-800); + --spectrum-semantic-informative-background-color-key-focus: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-cta-background-color-default: var(--spectrum-global-color-static-blue-600); + --spectrum-semantic-cta-background-color-hover: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-cta-background-color-down: var(--spectrum-global-color-static-blue-800); + --spectrum-semantic-cta-background-color-key-focus: var(--spectrum-global-color-static-blue-700); + --spectrum-semantic-emphasized-border-color-default: var(--spectrum-global-color-blue-500); + --spectrum-semantic-emphasized-border-color-hover: var(--spectrum-global-color-blue-600); + --spectrum-semantic-emphasized-border-color-down: var(--spectrum-global-color-blue-700); + --spectrum-semantic-emphasized-border-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-semantic-neutral-background-color-default: var(--spectrum-global-color-static-gray-700); + --spectrum-semantic-neutral-background-color-hover: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-neutral-background-color-down: var(--spectrum-global-color-static-gray-900); + --spectrum-semantic-neutral-background-color-key-focus: var(--spectrum-global-color-static-gray-800); + --spectrum-semantic-presence-color-1: var(--spectrum-global-color-static-red-500); + --spectrum-semantic-presence-color-2: var(--spectrum-global-color-static-orange-400); + --spectrum-semantic-presence-color-3: var(--spectrum-global-color-static-yellow-400); + --spectrum-semantic-presence-color-4-rgb: 75, 204, 162; + --spectrum-semantic-presence-color-4: rgb(var(--spectrum-semantic-presence-color-4-rgb)); + --spectrum-semantic-presence-color-5-rgb: 0, 199, 255; + --spectrum-semantic-presence-color-5: rgb(var(--spectrum-semantic-presence-color-5-rgb)); + --spectrum-semantic-presence-color-6-rgb: 0, 140, 184; + --spectrum-semantic-presence-color-6: rgb(var(--spectrum-semantic-presence-color-6-rgb)); + --spectrum-semantic-presence-color-7-rgb: 126, 75, 243; + --spectrum-semantic-presence-color-7: rgb(var(--spectrum-semantic-presence-color-7-rgb)); + --spectrum-semantic-presence-color-8: var(--spectrum-global-color-static-fuchsia-600); + --spectrum-global-dimension-static-percent-50: 50%; + --spectrum-global-dimension-static-percent-70: 70%; + --spectrum-global-dimension-static-percent-100: 100%; + --spectrum-global-dimension-static-breakpoint-xsmall: 304px; + --spectrum-global-dimension-static-breakpoint-small: 768px; + --spectrum-global-dimension-static-breakpoint-medium: 1280px; + --spectrum-global-dimension-static-breakpoint-large: 1768px; + --spectrum-global-dimension-static-breakpoint-xlarge: 2160px; + --spectrum-global-dimension-static-grid-columns: 12; + --spectrum-global-dimension-static-grid-fluid-width: 100%; + --spectrum-global-dimension-static-grid-fixed-max-width: 1280px; + --spectrum-global-dimension-static-size-0: 0px; + --spectrum-global-dimension-static-size-10: 1px; + --spectrum-global-dimension-static-size-25: 2px; + --spectrum-global-dimension-static-size-40: 3px; + --spectrum-global-dimension-static-size-50: 4px; + --spectrum-global-dimension-static-size-65: 5px; + --spectrum-global-dimension-static-size-75: 6px; + --spectrum-global-dimension-static-size-85: 7px; + --spectrum-global-dimension-static-size-100: 8px; + --spectrum-global-dimension-static-size-115: 9px; + --spectrum-global-dimension-static-size-125: 10px; + --spectrum-global-dimension-static-size-130: 11px; + --spectrum-global-dimension-static-size-150: 12px; + --spectrum-global-dimension-static-size-160: 13px; + --spectrum-global-dimension-static-size-175: 14px; + --spectrum-global-dimension-static-size-185: 15px; + --spectrum-global-dimension-static-size-200: 16px; + --spectrum-global-dimension-static-size-225: 18px; + --spectrum-global-dimension-static-size-250: 20px; + --spectrum-global-dimension-static-size-275: 22px; + --spectrum-global-dimension-static-size-300: 24px; + --spectrum-global-dimension-static-size-325: 26px; + --spectrum-global-dimension-static-size-350: 28px; + --spectrum-global-dimension-static-size-400: 32px; + --spectrum-global-dimension-static-size-450: 36px; + --spectrum-global-dimension-static-size-500: 40px; + --spectrum-global-dimension-static-size-550: 44px; + --spectrum-global-dimension-static-size-600: 48px; + --spectrum-global-dimension-static-size-700: 56px; + --spectrum-global-dimension-static-size-800: 64px; + --spectrum-global-dimension-static-size-900: 72px; + --spectrum-global-dimension-static-size-1000: 80px; + --spectrum-global-dimension-static-size-1200: 96px; + --spectrum-global-dimension-static-size-1700: 136px; + --spectrum-global-dimension-static-size-2400: 192px; + --spectrum-global-dimension-static-size-2500: 200px; + --spectrum-global-dimension-static-size-2600: 208px; + --spectrum-global-dimension-static-size-2800: 224px; + --spectrum-global-dimension-static-size-3200: 256px; + --spectrum-global-dimension-static-size-3400: 272px; + --spectrum-global-dimension-static-size-3500: 280px; + --spectrum-global-dimension-static-size-3600: 288px; + --spectrum-global-dimension-static-size-3800: 304px; + --spectrum-global-dimension-static-size-4600: 368px; + --spectrum-global-dimension-static-size-5000: 400px; + --spectrum-global-dimension-static-size-6000: 480px; + --spectrum-global-dimension-static-size-16000: 1280px; + --spectrum-global-dimension-static-font-size-50: 11px; + --spectrum-global-dimension-static-font-size-75: 12px; + --spectrum-global-dimension-static-font-size-100: 14px; + --spectrum-global-dimension-static-font-size-150: 15px; + --spectrum-global-dimension-static-font-size-200: 16px; + --spectrum-global-dimension-static-font-size-300: 18px; + --spectrum-global-dimension-static-font-size-400: 20px; + --spectrum-global-dimension-static-font-size-500: 22px; + --spectrum-global-dimension-static-font-size-600: 25px; + --spectrum-global-dimension-static-font-size-700: 28px; + --spectrum-global-dimension-static-font-size-800: 32px; + --spectrum-global-dimension-static-font-size-900: 36px; + --spectrum-global-dimension-static-font-size-1000: 40px; + --spectrum-global-font-family-base: adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-family-serif: adobe-clean-serif, "Source Serif Pro", Georgia, serif; + --spectrum-global-font-family-code: "Source Code Pro", Monaco, monospace; + --spectrum-global-font-weight-thin: 100; + --spectrum-global-font-weight-ultra-light: 200; + --spectrum-global-font-weight-light: 300; + --spectrum-global-font-weight-regular: 400; + --spectrum-global-font-weight-medium: 500; + --spectrum-global-font-weight-semi-bold: 600; + --spectrum-global-font-weight-bold: 700; + --spectrum-global-font-weight-extra-bold: 800; + --spectrum-global-font-weight-black: 900; + --spectrum-global-font-style-regular: normal; + --spectrum-global-font-style-italic: italic; + --spectrum-global-font-letter-spacing-none: 0; + --spectrum-global-font-letter-spacing-small: .0125em; + --spectrum-global-font-letter-spacing-han: .05em; + --spectrum-global-font-letter-spacing-medium: .06em; + --spectrum-global-font-line-height-large: 1.7; + --spectrum-global-font-line-height-medium: 1.5; + --spectrum-global-font-line-height-small: 1.3; + --spectrum-global-font-multiplier-0: 0em; + --spectrum-global-font-multiplier-25: .25em; + --spectrum-global-font-multiplier-75: .75em; + --spectrum-global-font-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-global-font-font-family-zh: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", "sans-serif"; + --spectrum-global-font-font-family-zhhans: adobe-clean-han-simplified-c, source-han-simplified-c, "SimSun", "Heiti SC Light", "sans-serif"; + --spectrum-global-font-font-family-ko: adobe-clean-han-korean, source-han-korean, "Malgun Gothic", "Apple Gothic", "sans-serif"; + --spectrum-global-font-font-family-ja: adobe-clean-han-japanese, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", YuGothic, "Yu Gothic", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; + --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional, source-han-traditional, "MingLiu", "Heiti TC Light", adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-loupe-entry-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-loupe-exit-animation-duration: var(--spectrum-global-animation-duration-300); + --spectrum-alias-heading-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-light); + --spectrum-alias-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-text-font-weight-strong-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-heading-margin-bottom: var(--spectrum-global-font-multiplier-25); + --spectrum-alias-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-body-text-font-family: var(--spectrum-global-font-family-base); + --spectrum-alias-body-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-body-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-body-margin-bottom: var(--spectrum-global-font-multiplier-75); + --spectrum-alias-detail-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-detail-text-font-weight-light: var(--spectrum-global-font-weight-regular); + --spectrum-alias-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-heading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-heading-text-font-weight-quiet: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-body-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-subheading-text-font-weight: var(--spectrum-global-font-weight-bold); + --spectrum-alias-article-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-article-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-article-detail-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-font-family: var(--spectrum-global-font-family-code); + --spectrum-alias-code-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-code-text-font-weight-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-code-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-code-margin-bottom: var(--spectrum-global-font-multiplier-0); + --spectrum-alias-font-family-ar: var(--spectrum-global-font-font-family-ar); + --spectrum-alias-font-family-he: var(--spectrum-global-font-font-family-he); + --spectrum-alias-font-family-zh: var(--spectrum-global-font-font-family-zh); + --spectrum-alias-font-family-zhhans: var(--spectrum-global-font-font-family-zhhans); + --spectrum-alias-font-family-ko: var(--spectrum-global-font-font-family-ko); + --spectrum-alias-font-family-ja: var(--spectrum-global-font-font-family-ja); + --spectrum-alias-font-family-condensed: var(--spectrum-global-font-font-family-condensed); + --spectrum-alias-button-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-component-text-line-height: var(--spectrum-global-font-line-height-small); + --spectrum-alias-han-component-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-serif-text-font-family: var(--spectrum-global-font-family-serif); + --spectrum-alias-han-heading-text-line-height: var(--spectrum-global-font-line-height-medium); + --spectrum-alias-han-heading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-regular-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-heading-text-font-weight-regular-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-quiet-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-light: var(--spectrum-global-font-weight-light); + --spectrum-alias-han-heading-text-font-weight-light-emphasis: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-heading-text-font-weight-light-strong: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-heading-text-font-weight-heavy: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-emphasis: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-heading-text-font-weight-heavy-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-body-text-line-height: var(--spectrum-global-font-line-height-large); + --spectrum-alias-han-body-text-font-weight-regular: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-body-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-body-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-subheading-text-font-weight-regular: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-subheading-text-font-weight-emphasis: var(--spectrum-global-font-weight-extra-bold); + --spectrum-alias-han-subheading-text-font-weight-strong: var(--spectrum-global-font-weight-black); + --spectrum-alias-han-detail-text-font-weight: var(--spectrum-global-font-weight-regular); + --spectrum-alias-han-detail-text-font-weight-emphasis: var(--spectrum-global-font-weight-bold); + --spectrum-alias-han-detail-text-font-weight-strong: var(--spectrum-global-font-weight-black); } -:root, -:host { - --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); - --spectrum-alias-item-rounded-border-radius-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-border-radius-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-border-radius-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-border-radius-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-text-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-item-text-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-item-text-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-item-text-size-xl: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-item-text-padding-top-s: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-item-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-text-padding-top-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-text-padding-bottom-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-text-padding-bottom-xl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-icon-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-top-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-icon-padding-bottom-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icon-padding-bottom-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icon-padding-bottom-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icon-padding-bottom-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); - --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); - --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); - --spectrum-alias-item-rounded-padding-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-rounded-padding-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-rounded-padding-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-rounded-padding-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-item-icononly-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-icononly-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-icononly-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-icononly-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-gap-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-gap-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-gap-l: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-control-gap-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-workflow-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-workflow-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); - --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); - --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); - --spectrum-alias-item-mark-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-ui-icon-gap-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-ui-icon-gap-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-ui-icon-gap-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-ui-icon-gap-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-item-clearbutton-gap-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-clearbutton-gap-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-clearbutton-gap-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-workflow-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-workflow-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-workflow-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-rounded-workflow-padding-left-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-l: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-padding-top-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-top-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-bottom-s: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-item-mark-padding-bottom-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-mark-padding-bottom-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-item-mark-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-mark-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-mark-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-1-size-s: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-item-control-1-size-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-2-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-2-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-2-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-item-control-2-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-2-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-2-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-2-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-2-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-2-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-control-3-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-control-3-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-item-control-3-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-control-3-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-item-control-3-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-item-control-3-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-item-control-3-padding-m: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-control-3-padding-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-padding-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-item-mark-size-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-item-mark-size-l: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-item-mark-size-xl: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-heading-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-xxl-text-size: var( - --spectrum-global-dimension-font-size-1100 - ); - --spectrum-alias-heading-xl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-l-text-size: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-m-text-size: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-xxl-margin-top: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-xl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-l-margin-top: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-m-margin-top: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-heading-han-xxxl-text-size: var( - --spectrum-global-dimension-font-size-1300 - ); - --spectrum-alias-heading-han-xxl-text-size: var( - --spectrum-global-dimension-font-size-900 - ); - --spectrum-alias-heading-han-xl-text-size: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-l-text-size: var( - --spectrum-global-dimension-font-size-600 - ); - --spectrum-alias-heading-han-m-text-size: var( - --spectrum-global-dimension-font-size-400 - ); - --spectrum-alias-heading-han-s-text-size: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-xs-text-size: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xxs-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxxl-margin-top: var( - --spectrum-global-dimension-font-size-1200 - ); - --spectrum-alias-heading-han-xxl-margin-top: var( - --spectrum-global-dimension-font-size-800 - ); - --spectrum-alias-heading-han-xl-margin-top: var( - --spectrum-global-dimension-font-size-700 - ); - --spectrum-alias-heading-han-l-margin-top: var( - --spectrum-global-dimension-font-size-500 - ); - --spectrum-alias-heading-han-m-margin-top: var( - --spectrum-global-dimension-font-size-300 - ); - --spectrum-alias-heading-han-s-margin-top: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-heading-han-xs-margin-top: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-heading-han-xxs-margin-top: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-component-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-component-border-radius-quiet: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-component-focusring-gap-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-component-focusring-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-component-focusring-size-emphasized: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-input-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-input-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-input-quiet-focusline-gap: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-control-two-size-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-two-size-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-two-size-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-control-two-size-xxl: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-control-two-border-radius-s: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-control-two-border-radius-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-control-two-border-radius-l: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-control-two-border-radius-xl: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-control-two-border-radius-xxl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-s: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-control-two-focus-ring-border-radius-m: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-control-two-focus-ring-border-radius-l: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-two-focus-ring-border-radius-xxl: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-control-three-height-l: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-control-three-height-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-infieldbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-border-radius-sided: 0; - --spectrum-alias-infieldbutton-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-infieldbutton-fill-padding-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-infieldbutton-fill-padding-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-infieldbutton-fill-padding-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-infieldbutton-fill-padding-xl: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-infieldbutton-padding-s: 0; - --spectrum-alias-infieldbutton-padding-m: 0; - --spectrum-alias-infieldbutton-padding-l: 0; - --spectrum-alias-infieldbutton-padding-xl: 0; - --spectrum-alias-infieldbutton-full-height-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-infieldbutton-full-height-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-infieldbutton-full-height-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-infieldbutton-full-height-xl: var( - --spectrum-global-dimension-size-600 - ); - --spectrum-alias-infieldbutton-half-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-infieldbutton-half-height-m: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-infieldbutton-half-height-l: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-infieldbutton-half-height-xl: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-gap: 0; - --spectrum-alias-stepperbutton-width-s: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-stepperbutton-width-m: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-stepperbutton-width-l: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-stepperbutton-width-xl: var( - --spectrum-global-dimension-size-450 - ); - --spectrum-alias-stepperbutton-icon-x-offset-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-x-offset-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-stepperbutton-icon-x-offset-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-stepperbutton-icon-x-offset-xl: var( - --spectrum-global-dimension-size-130 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-s: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-m: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-l: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var( - --spectrum-global-dimension-size-40 - ); - --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-stepperbutton-radius-touching: 0; - --spectrum-alias-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-clearbutton-icon-margin-xl: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-clearbutton-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icononly-padding-x-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-icon-margin-y-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-pickerbutton-icon-margin-y-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-pickerbutton-icon-margin-y-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-pickerbutton-icon-margin-y-xl: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-pickerbutton-label-padding-y-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-label-padding-y-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-pickerbutton-label-padding-y-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-pickerbutton-label-padding-y-xl: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-pickerbutton-border-radius-rounded: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; - --spectrum-alias-search-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-search-border-radius-quiet: 0; - --spectrum-alias-combobox-quiet-button-offset-x: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-thumbnail-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-actiongroup-button-gap: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-compact: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-actiongroup-button-gap-quiet: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-actiongroup-button-gap-quiet-compact: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-search-padding-left-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-search-padding-left-l: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-search-padding-left-xl: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-percent-50: 50%; - --spectrum-alias-percent-70: 70%; - --spectrum-alias-percent-100: 100%; - --spectrum-alias-breakpoint-xsmall: 304px; - --spectrum-alias-breakpoint-small: 768px; - --spectrum-alias-breakpoint-medium: 1280px; - --spectrum-alias-breakpoint-large: 1768px; - --spectrum-alias-breakpoint-xlarge: 2160px; - --spectrum-alias-grid-columns: 12; - --spectrum-alias-grid-fluid-width: 100%; - --spectrum-alias-grid-fixed-max-width: 1280px; - --spectrum-alias-border-size-thin: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-border-size-thick: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-size-thicker: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-size-thickest: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thin: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-border-offset-thick: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-border-offset-thicker: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-border-offset-thickest: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-baseline: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-grid-gutter-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-gutter-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-gutter-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-gutter-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-gutter-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-margin-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-margin-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-margin-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-margin-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-margin-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-grid-layout-region-margin-bottom-small: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-grid-layout-region-margin-bottom-medium: var( - --spectrum-global-dimension-static-size-400 - ); - --spectrum-alias-grid-layout-region-margin-bottom-large: var( - --spectrum-global-dimension-static-size-500 - ); - --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-radial-reaction-size-default: var( - --spectrum-global-dimension-static-size-550 - ); - --spectrum-alias-focus-ring-gap: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-size: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-focus-ring-gap-small: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-focus-ring-size-small: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); - --spectrum-alias-dropshadow-offset-y: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-font-size-default: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-layout-label-gap-size: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-pill-button-text-size: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-pill-button-text-baseline: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-border-radius-xsmall: var( - --spectrum-global-dimension-size-10 - ); - --spectrum-alias-border-radius-small: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-border-radius-regular: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-border-radius-medium: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-border-radius-large: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-border-radius-xlarge: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-focus-ring-border-radius-xsmall: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-focus-ring-border-radius-small: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-focus-ring-border-radius-medium: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-focus-ring-border-radius-large: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-focus-ring-border-radius-xlarge: var( - --spectrum-global-dimension-size-350 - ); - --spectrum-alias-single-line-height: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-single-line-width: var( - --spectrum-global-dimension-size-2400 - ); - --spectrum-alias-workflow-icon-size-s: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-workflow-icon-size-m: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-workflow-icon-size-xl: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-alert-size-75: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-alert-size-100: var( - --spectrum-global-dimension-size-225 - ); - --spectrum-alias-ui-icon-alert-size-200: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-ui-icon-alert-size-300: var( - --spectrum-global-dimension-size-275 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-height: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-width: var( - --spectrum-global-dimension-size-200 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-width: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-ui-icon-cornertriangle-size-75: var( - --spectrum-global-dimension-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-200: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-ui-icon-asterisk-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-100: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); - --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); - --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); - --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); - --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); - --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); - --spectrum-alias-avatar-border-size: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-radius: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-border-size-default: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-border-size-key-focus: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-tag-border-size-disabled: var( - --spectrum-global-dimension-size-0 - ); - --spectrum-alias-tag-border-size: var( - --spectrum-global-dimension-static-size-10 - ); - --spectrum-alias-tag-padding-right-s: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-padding-right-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-padding-right-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); - --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); - --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); - --spectrum-alias-tag-font-size-s: var( - --spectrum-global-dimension-font-size-75 - ); - --spectrum-alias-tag-font-size-m: var( - --spectrum-global-dimension-font-size-100 - ); - --spectrum-alias-tag-font-size-l: var( - --spectrum-global-dimension-font-size-200 - ); - --spectrum-alias-tag-text-padding-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-text-padding-top-m: var( - --spectrum-global-dimension-size-75 - ); - --spectrum-alias-tag-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); - --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); - --spectrum-alias-tag-icon-margin-top-s: var( - --spectrum-global-dimension-size-50 - ); - --spectrum-alias-tag-icon-margin-top-m: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-top-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-tag-icon-margin-right-s: var( - --spectrum-global-dimension-size-85 - ); - --spectrum-alias-tag-icon-margin-right-m: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-icon-margin-right-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-tag-clearbutton-width-s: var( - --spectrum-global-dimension-size-300 - ); - --spectrum-alias-tag-clearbutton-width-m: var( - --spectrum-global-dimension-size-400 - ); - --spectrum-alias-tag-clearbutton-width-l: var( - --spectrum-global-dimension-size-500 - ); - --spectrum-alias-tag-clearbutton-icon-margin-s: var( - --spectrum-global-dimension-size-100 - ); - --spectrum-alias-tag-clearbutton-icon-margin-m: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-tag-clearbutton-icon-margin-l: var( - --spectrum-global-dimension-size-185 - ); - --spectrum-alias-tag-focusring-size: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-tag-focusring-gap: var( - --spectrum-global-dimension-static-size-0 - ); - --spectrum-alias-tag-focusring-gap-selected: var( - --spectrum-global-dimension-size-25 - ); - --spectrum-alias-colorloupe-width: var( - --spectrum-global-dimension-static-size-600 - ); - --spectrum-alias-colorloupe-height: var( - --spectrum-global-dimension-static-size-800 - ); +:root, :host { + --spectrum-alias-item-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-item-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-item-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-item-rounded-border-radius-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-border-radius-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-border-radius-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-border-radius-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-text-size-s: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-item-text-size-m: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-item-text-size-l: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-item-text-size-xl: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-item-text-padding-top-s: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-item-text-padding-top-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-text-padding-top-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-text-padding-bottom-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-text-padding-bottom-xl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-icon-padding-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-top-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-top-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-top-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-icon-padding-bottom-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icon-padding-bottom-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icon-padding-bottom-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icon-padding-bottom-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-padding-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-padding-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-padding-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-padding-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-rounded-padding-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-rounded-padding-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-rounded-padding-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-rounded-padding-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-item-icononly-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-icononly-padding-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-icononly-padding-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-icononly-padding-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-gap-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-gap-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-gap-l: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-control-gap-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-workflow-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-workflow-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-mark-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-mark-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-ui-icon-gap-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-ui-icon-gap-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-ui-icon-gap-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-ui-icon-gap-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-item-clearbutton-gap-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-clearbutton-gap-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-clearbutton-gap-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-workflow-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-workflow-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-workflow-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-rounded-workflow-padding-left-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-l: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-padding-top-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-top-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-bottom-s: var(--spectrum-global-dimension-size-40); + --spectrum-alias-item-mark-padding-bottom-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-mark-padding-bottom-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-item-mark-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-mark-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-mark-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-1-size-s: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-item-control-1-size-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-size-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-2-size-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-2-size-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-2-size-xxl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-item-control-2-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-2-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-2-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-border-radius-xxl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-2-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-2-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-2-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-control-3-height-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-control-3-height-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-item-control-3-height-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-control-3-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-item-control-3-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-item-control-3-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-item-control-3-padding-m: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-control-3-padding-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-padding-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-item-mark-size-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-item-mark-size-l: var(--spectrum-global-dimension-size-275); + --spectrum-alias-item-mark-size-xl: var(--spectrum-global-dimension-size-325); + --spectrum-alias-heading-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-xxl-text-size: var(--spectrum-global-dimension-font-size-1100); + --spectrum-alias-heading-xl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-l-text-size: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-m-text-size: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-xxl-margin-top: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-xl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-l-margin-top: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-m-margin-top: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-heading-han-xxxl-text-size: var(--spectrum-global-dimension-font-size-1300); + --spectrum-alias-heading-han-xxl-text-size: var(--spectrum-global-dimension-font-size-900); + --spectrum-alias-heading-han-xl-text-size: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-l-text-size: var(--spectrum-global-dimension-font-size-600); + --spectrum-alias-heading-han-m-text-size: var(--spectrum-global-dimension-font-size-400); + --spectrum-alias-heading-han-s-text-size: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-xs-text-size: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xxs-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxxl-margin-top: var(--spectrum-global-dimension-font-size-1200); + --spectrum-alias-heading-han-xxl-margin-top: var(--spectrum-global-dimension-font-size-800); + --spectrum-alias-heading-han-xl-margin-top: var(--spectrum-global-dimension-font-size-700); + --spectrum-alias-heading-han-l-margin-top: var(--spectrum-global-dimension-font-size-500); + --spectrum-alias-heading-han-m-margin-top: var(--spectrum-global-dimension-font-size-300); + --spectrum-alias-heading-han-s-margin-top: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-heading-han-xs-margin-top: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-heading-han-xxs-margin-top: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-component-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-component-border-radius-quiet: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-component-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-component-focusring-gap-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-component-focusring-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-component-focusring-size-emphasized: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-input-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-input-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-input-quiet-focusline-gap: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-control-two-size-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-two-size-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-two-size-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-control-two-size-xxl: var(--spectrum-global-dimension-size-250); + --spectrum-alias-control-two-border-radius-s: var(--spectrum-global-dimension-size-75); + --spectrum-alias-control-two-border-radius-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-control-two-border-radius-l: var(--spectrum-global-dimension-size-100); + --spectrum-alias-control-two-border-radius-xl: var(--spectrum-global-dimension-size-115); + --spectrum-alias-control-two-border-radius-xxl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-two-focus-ring-border-radius-s: var(--spectrum-global-dimension-size-125); + --spectrum-alias-control-two-focus-ring-border-radius-m: var(--spectrum-global-dimension-size-130); + --spectrum-alias-control-two-focus-ring-border-radius-l: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-two-focus-ring-border-radius-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-two-focus-ring-border-radius-xxl: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-three-height-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-control-three-height-l: var(--spectrum-global-dimension-size-200); + --spectrum-alias-control-three-height-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-infieldbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-infieldbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-infieldbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-infieldbutton-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-border-radius-sided: 0; + --spectrum-alias-infieldbutton-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-infieldbutton-fill-padding-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-infieldbutton-fill-padding-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-infieldbutton-fill-padding-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-infieldbutton-fill-padding-xl: var(--spectrum-global-dimension-size-160); + --spectrum-alias-infieldbutton-padding-s: 0; + --spectrum-alias-infieldbutton-padding-m: 0; + --spectrum-alias-infieldbutton-padding-l: 0; + --spectrum-alias-infieldbutton-padding-xl: 0; + --spectrum-alias-infieldbutton-full-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-infieldbutton-full-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-infieldbutton-full-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-infieldbutton-full-height-xl: var(--spectrum-global-dimension-size-600); + --spectrum-alias-infieldbutton-half-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-infieldbutton-half-height-m: var(--spectrum-global-dimension-size-200); + --spectrum-alias-infieldbutton-half-height-l: var(--spectrum-global-dimension-size-250); + --spectrum-alias-infieldbutton-half-height-xl: var(--spectrum-global-dimension-size-300); + --spectrum-alias-stepperbutton-gap: 0; + --spectrum-alias-stepperbutton-width-s: var(--spectrum-global-dimension-size-225); + --spectrum-alias-stepperbutton-width-m: var(--spectrum-global-dimension-size-300); + --spectrum-alias-stepperbutton-width-l: var(--spectrum-global-dimension-size-400); + --spectrum-alias-stepperbutton-width-xl: var(--spectrum-global-dimension-size-450); + --spectrum-alias-stepperbutton-icon-x-offset-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-icon-x-offset-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-stepperbutton-icon-x-offset-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-stepperbutton-icon-x-offset-xl: var(--spectrum-global-dimension-size-130); + --spectrum-alias-stepperbutton-icon-y-offset-top-s: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-icon-y-offset-top-m: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-icon-y-offset-top-l: var(--spectrum-global-dimension-size-65); + --spectrum-alias-stepperbutton-icon-y-offset-top-xl: var(--spectrum-global-dimension-size-75); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-s: var(--spectrum-global-dimension-size-10); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-m: var(--spectrum-global-dimension-size-25); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-l: var(--spectrum-global-dimension-size-40); + --spectrum-alias-stepperbutton-icon-y-offset-bottom-xl: var(--spectrum-global-dimension-size-50); + --spectrum-alias-stepperbutton-radius-touching: 0; + --spectrum-alias-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100); + --spectrum-alias-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-clearbutton-icon-margin-xl: var(--spectrum-global-dimension-size-225); + --spectrum-alias-clearbutton-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-icononly-padding-x-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-pickerbutton-icononly-padding-x-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-pickerbutton-icononly-padding-x-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-pickerbutton-icononly-padding-x-xl: var(--spectrum-global-dimension-size-200); + --spectrum-alias-pickerbutton-icon-margin-y-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-pickerbutton-icon-margin-y-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-pickerbutton-icon-margin-y-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-pickerbutton-icon-margin-y-xl: var(--spectrum-global-dimension-size-200); + --spectrum-alias-pickerbutton-label-padding-y-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-label-padding-y-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-pickerbutton-label-padding-y-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-pickerbutton-label-padding-y-xl: var(--spectrum-global-dimension-size-150); + --spectrum-alias-pickerbutton-border-radius-rounded: var(--spectrum-global-dimension-size-50); + --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0; + --spectrum-alias-search-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-search-border-radius-quiet: 0; + --spectrum-alias-combobox-quiet-button-offset-x: var(--spectrum-global-dimension-size-100); + --spectrum-alias-thumbnail-border-radius-small: var(--spectrum-global-dimension-size-25); + --spectrum-alias-actiongroup-button-gap: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-compact: var(--spectrum-global-dimension-size-0); + --spectrum-alias-actiongroup-button-gap-quiet: var(--spectrum-global-dimension-size-100); + --spectrum-alias-actiongroup-button-gap-quiet-compact: var(--spectrum-global-dimension-size-25); + --spectrum-alias-search-padding-left-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-search-padding-left-l: var(--spectrum-global-dimension-size-160); + --spectrum-alias-search-padding-left-xl: var(--spectrum-global-dimension-size-185); + --spectrum-alias-percent-50: 50%; + --spectrum-alias-percent-70: 70%; + --spectrum-alias-percent-100: 100%; + --spectrum-alias-breakpoint-xsmall: 304px; + --spectrum-alias-breakpoint-small: 768px; + --spectrum-alias-breakpoint-medium: 1280px; + --spectrum-alias-breakpoint-large: 1768px; + --spectrum-alias-breakpoint-xlarge: 2160px; + --spectrum-alias-grid-columns: 12; + --spectrum-alias-grid-fluid-width: 100%; + --spectrum-alias-grid-fixed-max-width: 1280px; + --spectrum-alias-border-size-thin: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-size-thicker: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-size-thickest: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thin: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-border-offset-thick: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-border-offset-thicker: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-border-offset-thickest: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-baseline: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-grid-gutter-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-gutter-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-gutter-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-gutter-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-gutter-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-margin-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-margin-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-margin-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-margin-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-margin-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-grid-layout-region-margin-bottom-xsmall: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-grid-layout-region-margin-bottom-small: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-grid-layout-region-margin-bottom-medium: var(--spectrum-global-dimension-static-size-400); + --spectrum-alias-grid-layout-region-margin-bottom-large: var(--spectrum-global-dimension-static-size-500); + --spectrum-alias-grid-layout-region-margin-bottom-xlarge: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-radial-reaction-size-default: var(--spectrum-global-dimension-static-size-550); + --spectrum-alias-focus-ring-gap: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-size: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-focus-ring-gap-small: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-focus-ring-size-small: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-dropshadow-blur: var(--spectrum-global-dimension-size-50); + --spectrum-alias-dropshadow-offset-y: var(--spectrum-global-dimension-size-10); + --spectrum-alias-font-size-default: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-layout-label-gap-size: var(--spectrum-global-dimension-size-100); + --spectrum-alias-pill-button-text-size: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-pill-button-text-baseline: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-border-radius-xsmall: var(--spectrum-global-dimension-size-10); + --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25); + --spectrum-alias-border-radius-regular: var(--spectrum-global-dimension-size-50); + --spectrum-alias-border-radius-medium: var(--spectrum-global-dimension-size-100); + --spectrum-alias-border-radius-large: var(--spectrum-global-dimension-size-200); + --spectrum-alias-border-radius-xlarge: var(--spectrum-global-dimension-size-300); + --spectrum-alias-focus-ring-border-radius-xsmall: var(--spectrum-global-dimension-size-50); + --spectrum-alias-focus-ring-border-radius-small: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-focus-ring-border-radius-medium: var(--spectrum-global-dimension-size-150); + --spectrum-alias-focus-ring-border-radius-large: var(--spectrum-global-dimension-size-250); + --spectrum-alias-focus-ring-border-radius-xlarge: var(--spectrum-global-dimension-size-350); + --spectrum-alias-single-line-height: var(--spectrum-global-dimension-size-400); + --spectrum-alias-single-line-width: var(--spectrum-global-dimension-size-2400); + --spectrum-alias-workflow-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-workflow-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-workflow-icon-size-xl: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-alert-size-75: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-alert-size-100: var(--spectrum-global-dimension-size-225); + --spectrum-alias-ui-icon-alert-size-200: var(--spectrum-global-dimension-size-250); + --spectrum-alias-ui-icon-alert-size-300: var(--spectrum-global-dimension-size-275); + --spectrum-alias-ui-icon-triplegripper-size-100-height: var(--spectrum-global-dimension-size-100); + --spectrum-alias-ui-icon-doublegripper-size-100-width: var(--spectrum-global-dimension-size-200); + --spectrum-alias-ui-icon-singlegripper-size-100-width: var(--spectrum-global-dimension-size-300); + --spectrum-alias-ui-icon-cornertriangle-size-75: var(--spectrum-global-dimension-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-200: var(--spectrum-global-dimension-size-75); + --spectrum-alias-ui-icon-asterisk-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-100: var(--spectrum-global-dimension-size-100); + --spectrum-alias-avatar-size-50: var(--spectrum-global-dimension-size-200); + --spectrum-alias-avatar-size-75: var(--spectrum-global-dimension-size-225); + --spectrum-alias-avatar-size-200: var(--spectrum-global-dimension-size-275); + --spectrum-alias-avatar-size-300: var(--spectrum-global-dimension-size-325); + --spectrum-alias-avatar-size-500: var(--spectrum-global-dimension-size-400); + --spectrum-alias-avatar-size-700: var(--spectrum-global-dimension-size-500); + --spectrum-alias-avatar-border-size: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-radius: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-border-size-default: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-tag-border-size-key-focus: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-tag-border-size-disabled: var(--spectrum-global-dimension-size-0); + --spectrum-alias-tag-border-size: var(--spectrum-global-dimension-static-size-10); + --spectrum-alias-tag-padding-right-s: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-padding-right-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-tag-padding-right-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-font-size-s: var(--spectrum-global-dimension-font-size-75); + --spectrum-alias-tag-font-size-m: var(--spectrum-global-dimension-font-size-100); + --spectrum-alias-tag-font-size-l: var(--spectrum-global-dimension-font-size-200); + --spectrum-alias-tag-text-padding-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-text-padding-top-m: var(--spectrum-global-dimension-size-75); + --spectrum-alias-tag-text-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200); + --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225); + --spectrum-alias-tag-icon-margin-top-s: var(--spectrum-global-dimension-size-50); + --spectrum-alias-tag-icon-margin-top-m: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-margin-top-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-tag-icon-margin-right-s: var(--spectrum-global-dimension-size-85); + --spectrum-alias-tag-icon-margin-right-m: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-icon-margin-right-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-tag-clearbutton-width-s: var(--spectrum-global-dimension-size-300); + --spectrum-alias-tag-clearbutton-width-m: var(--spectrum-global-dimension-size-400); + --spectrum-alias-tag-clearbutton-width-l: var(--spectrum-global-dimension-size-500); + --spectrum-alias-tag-clearbutton-icon-margin-s: var(--spectrum-global-dimension-size-100); + --spectrum-alias-tag-clearbutton-icon-margin-m: var(--spectrum-global-dimension-size-150); + --spectrum-alias-tag-clearbutton-icon-margin-l: var(--spectrum-global-dimension-size-185); + --spectrum-alias-tag-focusring-size: var(--spectrum-global-dimension-size-25); + --spectrum-alias-tag-focusring-gap: var(--spectrum-global-dimension-static-size-0); + --spectrum-alias-tag-focusring-gap-selected: var(--spectrum-global-dimension-size-25); + --spectrum-alias-colorloupe-width: var(--spectrum-global-dimension-static-size-600); + --spectrum-alias-colorloupe-height: var(--spectrum-global-dimension-static-size-800); } -:root, -:host { - --spectrum-alias-colorhandle-outer-border-color: #0000006b; - --spectrum-alias-transparent-blue-background-color-hover: #0057be26; - --spectrum-alias-transparent-blue-background-color-down: #0048994d; - --spectrum-alias-transparent-blue-background-color-key-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color-mouse-focus: var( - --spectrum-alias-transparent-blue-background-color-hover - ); - --spectrum-alias-transparent-blue-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-transparent-red-background-color-hover: #9a000026; - --spectrum-alias-transparent-red-background-color-down: #7c00004d; - --spectrum-alias-transparent-red-background-color-key-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color-mouse-focus: var( - --spectrum-alias-transparent-red-background-color-hover - ); - --spectrum-alias-transparent-red-background-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-component-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-component-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-component-text-color-key-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-mouse-focus: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-default: var( - --spectrum-alias-component-text-color-default - ); - --spectrum-alias-component-text-color-selected-hover: var( - --spectrum-alias-component-text-color-hover - ); - --spectrum-alias-component-text-color-selected-down: var( - --spectrum-alias-component-text-color-down - ); - --spectrum-alias-component-text-color-selected-key-focus: var( - --spectrum-alias-component-text-color-key-focus - ); - --spectrum-alias-component-text-color-selected-mouse-focus: var( - --spectrum-alias-component-text-color-mouse-focus - ); - --spectrum-alias-component-text-color-selected: var( - --spectrum-alias-component-text-color-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-text-color-emphasized-selected-hover: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-down: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-emphasized-selected: var( - --spectrum-alias-component-text-color-emphasized-selected-default - ); - --spectrum-alias-component-text-color-error-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-component-text-color-error-hover: var( - --spectrum-semantic-negative-text-color-small-hover - ); - --spectrum-alias-component-text-color-error-down: var( - --spectrum-semantic-negative-text-color-small-down - ); - --spectrum-alias-component-text-color-error-key-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error-mouse-focus: var( - --spectrum-semantic-negative-text-color-small-key-focus - ); - --spectrum-alias-component-text-color-error: var( - --spectrum-alias-component-text-color-error-default - ); - --spectrum-alias-component-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-component-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-component-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-component-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-component-icon-color: var( - --spectrum-alias-component-icon-color-default - ); - --spectrum-alias-component-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral-subdued - ); - --spectrum-alias-component-icon-color-emphasized-selected-default: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-component-icon-color-emphasized-selected-hover: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-down: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-icon-color-emphasized-selected: var( - --spectrum-alias-component-icon-color-emphasized-selected-default - ); - --spectrum-alias-component-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-quiet-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-selected-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-component-background-color-default: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-component-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-component-background-color: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-component-background-color-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected-key-focus: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-background-color-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet-down: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-component-background-color-quiet-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-component-background-color-quiet: var( - --spectrum-alias-component-background-color-quiet-default - ); - --spectrum-alias-component-background-color-quiet-selected-default: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-quiet-selected-hover: var( - --spectrum-alias-component-background-color-selected-hover - ); - --spectrum-alias-component-background-color-quiet-selected-down: var( - --spectrum-alias-component-background-color-selected-down - ); - --spectrum-alias-component-background-color-quiet-selected-key-focus: var( - --spectrum-alias-component-background-color-selected-key-focus - ); - --spectrum-alias-component-background-color-quiet-selected: var( - --spectrum-alias-component-background-color-selected-default - ); - --spectrum-alias-component-background-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-background-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-background-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-background-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-background-color-emphasized-selected: var( - --spectrum-alias-component-background-color-emphasized-selected-default - ); - --spectrum-alias-component-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-component-border-color-quiet-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color: var( - --spectrum-alias-component-border-color-default - ); - --spectrum-alias-component-border-color-selected-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-component-border-color-selected-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-component-border-color-selected-down: var( - --spectrum-alias-border-color-down - ); - --spectrum-alias-component-border-color-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-selected: var( - --spectrum-alias-component-border-color-selected-default - ); - --spectrum-alias-component-border-color-quiet-default: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-hover: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-down: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-component-border-color-quiet-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet: var( - --spectrum-alias-component-border-color-quiet-default - ); - --spectrum-alias-component-border-color-quiet-selected-default: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-hover: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-component-border-color-quiet-selected-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-component-border-color-quiet-selected: var( - --spectrum-alias-component-border-color-quiet-selected-default - ); - --spectrum-alias-component-border-color-emphasized-selected-default: var( - --spectrum-semantic-cta-background-color-default - ); - --spectrum-alias-component-border-color-emphasized-selected-hover: var( - --spectrum-semantic-cta-background-color-hover - ); - --spectrum-alias-component-border-color-emphasized-selected-down: var( - --spectrum-semantic-cta-background-color-down - ); - --spectrum-alias-component-border-color-emphasized-selected-key-focus: var( - --spectrum-semantic-cta-background-color-key-focus - ); - --spectrum-alias-component-border-color-emphasized-selected: var( - --spectrum-alias-component-border-color-emphasized-selected-default - ); - --spectrum-alias-tag-border-color-default: var( - --spectrum-alias-border-color-darker-default - ); - --spectrum-alias-tag-border-color-hover: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-down: var( - --spectrum-alias-border-color-darker-hover - ); - --spectrum-alias-tag-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-error-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-border-color-error-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-tag-border-color-error-selected: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-border-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-border-color: var( - --spectrum-alias-tag-border-color-default - ); - --spectrum-alias-tag-border-color-disabled: var( - --spectrum-alias-border-color-disabled - ); - --spectrum-alias-tag-border-color-error: var( - --spectrum-alias-tag-border-color-error-default - ); - --spectrum-alias-tag-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tag-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); - --spectrum-alias-tag-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tag-text-color-disabled: var( - --spectrum-global-color-gray-500 - ); - --spectrum-alias-tag-text-color: var( - --spectrum-alias-tag-text-color-default - ); - --spectrum-alias-tag-text-color-error-default: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-text-color-error-hover: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error-key-focus: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-tag-text-color-error: var( - --spectrum-alias-tag-text-color-error-default - ); - --spectrum-alias-tag-text-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); - --spectrum-alias-tag-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); - --spectrum-alias-tag-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tag-icon-color-disabled: var( - --spectrum-alias-icon-color-disabled - ); - --spectrum-alias-tag-icon-color: var( - --spectrum-alias-tag-icon-color-default - ); - --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); - --spectrum-alias-tag-icon-color-selected: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color: var( - --spectrum-alias-tag-background-color-default - ); - --spectrum-alias-tag-background-color-error-default: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error-down: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-tag-background-color-error-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-tag-background-color-error: var( - --spectrum-alias-tag-background-color-error-default - ); - --spectrum-alias-tag-background-color-error-selected-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-tag-background-color-error-selected-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-down: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-tag-background-color-error-selected-key-focus: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-tag-background-color-error-selected: var( - --spectrum-alias-tag-background-color-error-selected-default - ); - --spectrum-alias-tag-background-color-selected-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-tag-background-color-selected-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-tag-background-color-selected-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tag-background-color-selected: var( - --spectrum-alias-tag-background-color-selected-default - ); - --spectrum-alias-tag-focusring-border-color-default: transparent; - --spectrum-alias-tag-focusring-border-color-key-focus: transparent; - --spectrum-alias-tag-focusring-border-color-disabled: transparent; - --spectrum-alias-tag-focusring-border-color-selected-key-focus: var( - --spectrum-alias-focus-ring-color - ); - --spectrum-alias-tag-focusring-border-color: var( - --spectrum-alias-tag-focusring-border-color-default - ); - --spectrum-alias-avatar-border-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color: var( - --spectrum-alias-avatar-border-color-default - ); - --spectrum-alias-avatar-border-color-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-hover: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-down: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected-key-focus: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-avatar-border-color-selected: var( - --spectrum-alias-avatar-border-color-selected-default - ); - --spectrum-alias-avatar-border-color-selected-disabled: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-toggle-background-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-background-color: var( - --spectrum-alias-toggle-background-color-default - ); - --spectrum-alias-toggle-background-color-emphasized-selected-default: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-toggle-background-color-emphasized-selected: var( - --spectrum-alias-toggle-background-color-emphasized-selected-default - ); - --spectrum-alias-toggle-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-toggle-border-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-toggle-border-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-toggle-border-color: var( - --spectrum-alias-toggle-border-color-default - ); - --spectrum-alias-toggle-icon-color-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-toggle-icon-color-emphasized-selected: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-button-primary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-primary-background-color-hover: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-button-primary-background-color-key-focus: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-background-color: var( - --spectrum-alias-button-primary-background-color-default - ); - --spectrum-alias-button-primary-border-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-border-color-hover: var( - --spectrum-alias-button-primary-background-color-hover - ); - --spectrum-alias-button-primary-border-color-down: var( - --spectrum-alias-button-primary-background-color-down - ); - --spectrum-alias-button-primary-border-color-key-focus: var( - --spectrum-alias-button-primary-background-color-key-focus - ); - --spectrum-alias-button-primary-border-color: var( - --spectrum-alias-button-primary-border-color-default - ); - --spectrum-alias-button-primary-text-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-primary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-primary-text-color: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-default: var( - --spectrum-alias-button-primary-text-color-default - ); - --spectrum-alias-button-primary-icon-color-hover: var( - --spectrum-alias-button-primary-text-color-hover - ); - --spectrum-alias-button-primary-icon-color-down: var( - --spectrum-alias-button-primary-text-color-down - ); - --spectrum-alias-button-primary-icon-color-key-focus: var( - --spectrum-alias-button-primary-text-color-key-focus - ); - --spectrum-alias-button-primary-icon-color: var( - --spectrum-alias-button-primary-icon-color-default - ); - --spectrum-alias-button-secondary-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-secondary-background-color-hover: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color-down: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-button-secondary-background-color-key-focus: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-background-color: var( - --spectrum-alias-button-secondary-background-color-default - ); - --spectrum-alias-button-secondary-border-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-border-color-hover: var( - --spectrum-alias-button-secondary-background-color-hover - ); - --spectrum-alias-button-secondary-border-color-down: var( - --spectrum-alias-button-secondary-background-color-down - ); - --spectrum-alias-button-secondary-border-color-key-focus: var( - --spectrum-alias-button-secondary-background-color-key-focus - ); - --spectrum-alias-button-secondary-border-color: var( - --spectrum-alias-button-secondary-border-color-default - ); - --spectrum-alias-button-secondary-text-color-default: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-button-secondary-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-secondary-text-color: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-default: var( - --spectrum-alias-button-secondary-text-color-default - ); - --spectrum-alias-button-secondary-icon-color-hover: var( - --spectrum-alias-button-secondary-text-color-hover - ); - --spectrum-alias-button-secondary-icon-color-down: var( - --spectrum-alias-button-secondary-text-color-down - ); - --spectrum-alias-button-secondary-icon-color-key-focus: var( - --spectrum-alias-button-secondary-text-color-key-focus - ); - --spectrum-alias-button-secondary-icon-color: var( - --spectrum-alias-button-secondary-icon-color-default - ); - --spectrum-alias-button-negative-background-color-default: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-button-negative-background-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-background-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-background-color: var( - --spectrum-alias-button-negative-background-color-default - ); - --spectrum-alias-button-negative-border-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-hover: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color-down: var( - --spectrum-global-color-red-700 - ); - --spectrum-alias-button-negative-border-color-key-focus: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-border-color: var( - --spectrum-alias-button-negative-border-color-default - ); - --spectrum-alias-button-negative-text-color-default: var( - --spectrum-semantic-negative-text-color-small - ); - --spectrum-alias-button-negative-text-color-hover: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-down: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color-key-focus: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-button-negative-text-color: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-default: var( - --spectrum-alias-button-negative-text-color-default - ); - --spectrum-alias-button-negative-icon-color-hover: var( - --spectrum-alias-button-negative-text-color-hover - ); - --spectrum-alias-button-negative-icon-color-down: var( - --spectrum-alias-button-negative-text-color-down - ); - --spectrum-alias-button-negative-icon-color-key-focus: var( - --spectrum-alias-button-negative-text-color-key-focus - ); - --spectrum-alias-button-negative-icon-color: var( - --spectrum-alias-button-negative-icon-color-default - ); - --spectrum-alias-input-border-color-disabled: var( - --spectrum-alias-border-color-transparent - ); - --spectrum-alias-input-border-color-quiet-disabled: var( - --spectrum-alias-border-color-mid - ); - --spectrum-alias-input-border-color-default: var( - --spectrum-alias-border-color - ); - --spectrum-alias-input-border-color-hover: var( - --spectrum-alias-border-color-hover - ); - --spectrum-alias-input-border-color-down: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-mouse-focus: var( - --spectrum-alias-border-color-mouse-focus - ); - --spectrum-alias-input-border-color-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-input-border-color-invalid-default: var( - --spectrum-semantic-negative-color-default - ); - --spectrum-alias-input-border-color-invalid-hover: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-down: var( - --spectrum-semantic-negative-color-down - ); - --spectrum-alias-input-border-color-invalid-mouse-focus: var( - --spectrum-semantic-negative-color-hover - ); - --spectrum-alias-input-border-color-invalid-key-focus: var( - --spectrum-alias-border-color-key-focus - ); - --spectrum-alias-input-border-color-invalid: var( - --spectrum-alias-input-border-color-invalid-default - ); - --spectrum-alias-background-color-yellow-default: var( - --spectrum-global-color-static-yellow-300 - ); - --spectrum-alias-background-color-yellow-hover: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-key-focus: var( - --spectrum-global-color-static-yellow-400 - ); - --spectrum-alias-background-color-yellow-down: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-background-color-yellow: var( - --spectrum-alias-background-color-yellow-default - ); - --spectrum-alias-infieldbutton-background-color: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-infieldbutton-fill-border-color-default: var( - --spectrum-alias-input-border-color-default - ); - --spectrum-alias-infieldbutton-fill-border-color-hover: var( - --spectrum-alias-input-border-color-hover - ); - --spectrum-alias-infieldbutton-fill-border-color-down: var( - --spectrum-alias-input-border-color-down - ); - --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var( - --spectrum-alias-input-border-color-mouse-focus - ); - --spectrum-alias-infieldbutton-fill-border-color-key-focus: var( - --spectrum-alias-input-border-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var( - --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var( - --spectrum-alias-component-background-color-default - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var( - --spectrum-alias-component-background-color-hover - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var( - --spectrum-alias-component-background-color-down - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var( - --spectrum-alias-component-background-color-key-focus - ); - --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var( - --spectrum-alias-component-background-color-disabled - ); - --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; - --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; - --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; - --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; - --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; - --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; - --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; - --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; - --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; - --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; - --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; - --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; - --spectrum-alias-tabs-divider-background-color-default: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-tabs-divider-background-color-quiet: var( - --spectrum-alias-background-color-transparent - ); - --spectrum-alias-tabitem-text-color-default: var( - --spectrum-alias-label-text-color - ); - --spectrum-alias-tabitem-text-color-hover: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-down: var( - --spectrum-alias-text-color-down - ); - --spectrum-alias-tabitem-text-color-key-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color-mouse-focus: var( - --spectrum-alias-text-color-hover - ); - --spectrum-alias-tabitem-text-color: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-selected-default: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-tabitem-text-color-selected-hover: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-down: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-selected: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-default: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-down: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-text-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-default: var( - --spectrum-alias-tabitem-text-color-selected-default - ); - --spectrum-alias-tabitem-selection-indicator-color-emphasized: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-tabitem-icon-color-disabled: var( - --spectrum-alias-text-color-disabled - ); - --spectrum-alias-tabitem-icon-color-default: var( - --spectrum-alias-icon-color - ); - --spectrum-alias-tabitem-icon-color-hover: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-down: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color-key-focus: var( - --spectrum-alias-icon-color-hover - ); - --spectrum-alias-tabitem-icon-color-mouse-focus: var( - --spectrum-alias-icon-color-down - ); - --spectrum-alias-tabitem-icon-color: var( - --spectrum-alias-tabitem-icon-color-default - ); - --spectrum-alias-tabitem-icon-color-selected: var( - --spectrum-alias-icon-color-selected-neutral - ); - --spectrum-alias-tabitem-icon-color-emphasized: var( - --spectrum-alias-tabitem-text-color-default - ); - --spectrum-alias-tabitem-icon-color-emphasized-selected: var( - --spectrum-alias-tabitem-text-color-emphasized-selected-default - ); - --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; - --spectrum-alias-assetcard-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-hover: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-assetcard-border-color-selected-down: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-background-color-default: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-background-color-transparent: transparent; - --spectrum-alias-background-color-overbackground-down: #fff3; - --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; - --spectrum-alias-background-color-quiet-overbackground-down: #fff3; - --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; - --spectrum-alias-background-color-quickactions-overlay: #0003; - --spectrum-alias-placeholder-text-color: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-placeholder-text-color-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-placeholder-text-color-selected: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); - --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-text-color-key-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-mouse-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); - --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); - --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); - --spectrum-alias-text-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-text-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-text-color-overbackground-disabled: #fff3; - --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; - --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); - --spectrum-alias-link-primary-text-color-default: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-link-primary-text-color-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-link-primary-text-color-key-focus: var( - --spectrum-alias-text-color-key-focus - ); - --spectrum-alias-link-primary-text-color: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-default: var( - --spectrum-alias-link-primary-text-color-default - ); - --spectrum-alias-link-secondary-text-color-hover: var( - --spectrum-alias-link-primary-text-color-hover - ); - --spectrum-alias-link-secondary-text-color-down: var( - --spectrum-alias-link-primary-text-color-down - ); - --spectrum-alias-link-secondary-text-color-key-focus: var( - --spectrum-alias-link-primary-text-color-key-focus - ); - --spectrum-alias-link-secondary-text-color: var( - --spectrum-alias-link-secondary-text-color-default - ); - --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); - --spectrum-alias-border-color-key-focus: var( - --spectrum-global-color-blue-400 - ); - --spectrum-alias-border-color-mouse-focus: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-disabled: var( - --spectrum-global-color-gray-200 - ); - --spectrum-alias-border-color-extralight: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); - --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); - --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); - --spectrum-alias-border-color-darker-default: var( - --spectrum-global-color-gray-600 - ); - --spectrum-alias-border-color-darker-hover: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-darker-down: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-border-color-transparent: transparent; - --spectrum-alias-border-color-translucent-dark: #0000000d; - --spectrum-alias-border-color-translucent-darker: #0000001a; - --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); - --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); - --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); - --spectrum-alias-track-fill-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-disabled: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-darksquare-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-thumbnail-lightsquare-background-color: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-track-color-overbackground: #fff3; - --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); - --spectrum-alias-icon-color-overbackground: var( - --spectrum-global-color-static-white - ); - --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); - --spectrum-alias-icon-color-key-focus: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); - --spectrum-alias-icon-color-overbackground-disabled: #fff3; - --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; - --spectrum-alias-icon-color-selected-neutral: var( - --spectrum-global-color-gray-900 - ); - --spectrum-alias-icon-color-selected-neutral-subdued: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); - --spectrum-alias-icon-color-selected-hover: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-icon-color-selected-down: var( - --spectrum-global-color-blue-700 - ); - --spectrum-alias-icon-color-selected-focus: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-image-opacity-disabled: var( - --spectrum-global-color-opacity-30 - ); - --spectrum-alias-toolbar-background-color: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-code-highlight-color-default: var( - --spectrum-global-color-gray-800 - ); - --spectrum-alias-code-highlight-background-color: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-code-highlight-color-keyword: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-section: var( - --spectrum-global-color-red-600 - ); - --spectrum-alias-code-highlight-color-literal: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-attribute: var( - --spectrum-global-color-seafoam-600 - ); - --spectrum-alias-code-highlight-color-class: var( - --spectrum-global-color-magenta-600 - ); - --spectrum-alias-code-highlight-color-variable: var( - --spectrum-global-color-purple-600 - ); - --spectrum-alias-code-highlight-color-title: var( - --spectrum-global-color-indigo-600 - ); - --spectrum-alias-code-highlight-color-string: var( - --spectrum-global-color-fuchsia-600 - ); - --spectrum-alias-code-highlight-color-function: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-code-highlight-color-comment: var( - --spectrum-global-color-gray-700 - ); - --spectrum-alias-categorical-color-1: var( - --spectrum-global-color-static-seafoam-200 - ); - --spectrum-alias-categorical-color-2: var( - --spectrum-global-color-static-indigo-700 - ); - --spectrum-alias-categorical-color-3: var( - --spectrum-global-color-static-orange-500 - ); - --spectrum-alias-categorical-color-4: var( - --spectrum-global-color-static-magenta-500 - ); - --spectrum-alias-categorical-color-5: var( - --spectrum-global-color-static-indigo-200 - ); - --spectrum-alias-categorical-color-6: var( - --spectrum-global-color-static-celery-200 - ); - --spectrum-alias-categorical-color-7: var( - --spectrum-global-color-static-blue-500 - ); - --spectrum-alias-categorical-color-8: var( - --spectrum-global-color-static-purple-800 - ); - --spectrum-alias-categorical-color-9: var( - --spectrum-global-color-static-yellow-500 - ); - --spectrum-alias-categorical-color-10: var( - --spectrum-global-color-static-orange-700 - ); - --spectrum-alias-categorical-color-11: var( - --spectrum-global-color-static-green-600 - ); - --spectrum-alias-categorical-color-12: var( - --spectrum-global-color-static-chartreuse-300 - ); - --spectrum-alias-categorical-color-13: var( - --spectrum-global-color-static-blue-200 - ); - --spectrum-alias-categorical-color-14: var( - --spectrum-global-color-static-fuchsia-500 - ); - --spectrum-alias-categorical-color-15: var( - --spectrum-global-color-static-magenta-200 - ); - --spectrum-alias-categorical-color-16: var( - --spectrum-global-color-static-yellow-200 - ); +:root, :host { + --spectrum-alias-colorhandle-outer-border-color: #0000006b; + --spectrum-alias-transparent-blue-background-color-hover: #0057be26; + --spectrum-alias-transparent-blue-background-color-down: #0048994d; + --spectrum-alias-transparent-blue-background-color-key-focus: var(--spectrum-alias-transparent-blue-background-color-hover); + --spectrum-alias-transparent-blue-background-color-mouse-focus: var(--spectrum-alias-transparent-blue-background-color-hover); + --spectrum-alias-transparent-blue-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-transparent-red-background-color-hover: #9a000026; + --spectrum-alias-transparent-red-background-color-down: #7c00004d; + --spectrum-alias-transparent-red-background-color-key-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color-mouse-focus: var(--spectrum-alias-transparent-red-background-color-hover); + --spectrum-alias-transparent-red-background-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-component-text-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-component-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-component-text-color-key-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color-mouse-focus: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-selected-default: var(--spectrum-alias-component-text-color-default); + --spectrum-alias-component-text-color-selected-hover: var(--spectrum-alias-component-text-color-hover); + --spectrum-alias-component-text-color-selected-down: var(--spectrum-alias-component-text-color-down); + --spectrum-alias-component-text-color-selected-key-focus: var(--spectrum-alias-component-text-color-key-focus); + --spectrum-alias-component-text-color-selected-mouse-focus: var(--spectrum-alias-component-text-color-mouse-focus); + --spectrum-alias-component-text-color-selected: var(--spectrum-alias-component-text-color-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-text-color-emphasized-selected-hover: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-down: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-key-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-emphasized-selected: var(--spectrum-alias-component-text-color-emphasized-selected-default); + --spectrum-alias-component-text-color-error-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-component-text-color-error-hover: var(--spectrum-semantic-negative-text-color-small-hover); + --spectrum-alias-component-text-color-error-down: var(--spectrum-semantic-negative-text-color-small-down); + --spectrum-alias-component-text-color-error-key-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error-mouse-focus: var(--spectrum-semantic-negative-text-color-small-key-focus); + --spectrum-alias-component-text-color-error: var(--spectrum-alias-component-text-color-error-default); + --spectrum-alias-component-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-component-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-component-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-component-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); + --spectrum-alias-component-icon-color: var(--spectrum-alias-component-icon-color-default); + --spectrum-alias-component-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral-subdued); + --spectrum-alias-component-icon-color-emphasized-selected-default: var(--spectrum-global-color-static-white); + --spectrum-alias-component-icon-color-emphasized-selected-hover: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-down: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected-key-focus: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-icon-color-emphasized-selected: var(--spectrum-alias-component-icon-color-emphasized-selected-default); + --spectrum-alias-component-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-quiet-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-selected-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-component-background-color-default: var(--spectrum-global-color-gray-75); + --spectrum-alias-component-background-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-background-color-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-component-background-color: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-component-background-color-selected-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-hover: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected-key-focus: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-background-color-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet-down: var(--spectrum-global-color-gray-300); + --spectrum-alias-component-background-color-quiet-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-component-background-color-quiet: var(--spectrum-alias-component-background-color-quiet-default); + --spectrum-alias-component-background-color-quiet-selected-default: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-quiet-selected-hover: var(--spectrum-alias-component-background-color-selected-hover); + --spectrum-alias-component-background-color-quiet-selected-down: var(--spectrum-alias-component-background-color-selected-down); + --spectrum-alias-component-background-color-quiet-selected-key-focus: var(--spectrum-alias-component-background-color-selected-key-focus); + --spectrum-alias-component-background-color-quiet-selected: var(--spectrum-alias-component-background-color-selected-default); + --spectrum-alias-component-background-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-background-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-background-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-background-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-background-color-emphasized-selected: var(--spectrum-alias-component-background-color-emphasized-selected-default); + --spectrum-alias-component-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-component-border-color-quiet-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-default: var(--spectrum-alias-border-color); + --spectrum-alias-component-border-color-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-component-border-color-down: var(--spectrum-alias-border-color-down); + --spectrum-alias-component-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color: var(--spectrum-alias-component-border-color-default); + --spectrum-alias-component-border-color-selected-default: var(--spectrum-alias-border-color); + --spectrum-alias-component-border-color-selected-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-component-border-color-selected-down: var(--spectrum-alias-border-color-down); + --spectrum-alias-component-border-color-selected-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-selected: var(--spectrum-alias-component-border-color-selected-default); + --spectrum-alias-component-border-color-quiet-default: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-hover: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-down: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-component-border-color-quiet-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-quiet: var(--spectrum-alias-component-border-color-quiet-default); + --spectrum-alias-component-border-color-quiet-selected-default: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-hover: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-component-border-color-quiet-selected-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-component-border-color-quiet-selected: var(--spectrum-alias-component-border-color-quiet-selected-default); + --spectrum-alias-component-border-color-emphasized-selected-default: var(--spectrum-semantic-cta-background-color-default); + --spectrum-alias-component-border-color-emphasized-selected-hover: var(--spectrum-semantic-cta-background-color-hover); + --spectrum-alias-component-border-color-emphasized-selected-down: var(--spectrum-semantic-cta-background-color-down); + --spectrum-alias-component-border-color-emphasized-selected-key-focus: var(--spectrum-semantic-cta-background-color-key-focus); + --spectrum-alias-component-border-color-emphasized-selected: var(--spectrum-alias-component-border-color-emphasized-selected-default); + --spectrum-alias-tag-border-color-default: var(--spectrum-alias-border-color-darker-default); + --spectrum-alias-tag-border-color-hover: var(--spectrum-alias-border-color-darker-hover); + --spectrum-alias-tag-border-color-down: var(--spectrum-alias-border-color-darker-hover); + --spectrum-alias-tag-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-tag-border-color-error-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-error-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-border-color-error-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-tag-border-color-error-selected: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-border-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-border-color: var(--spectrum-alias-tag-border-color-default); + --spectrum-alias-tag-border-color-disabled: var(--spectrum-alias-border-color-disabled); + --spectrum-alias-tag-border-color-error: var(--spectrum-alias-tag-border-color-error-default); + --spectrum-alias-tag-text-color-default: var(--spectrum-alias-label-text-color); + --spectrum-alias-tag-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tag-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tag-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-tag-text-color: var(--spectrum-alias-tag-text-color-default); + --spectrum-alias-tag-text-color-error-default: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-text-color-error-hover: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-down: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error-key-focus: var(--spectrum-global-color-red-700); + --spectrum-alias-tag-text-color-error: var(--spectrum-alias-tag-text-color-error-default); + --spectrum-alias-tag-text-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tag-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tag-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tag-icon-color-disabled: var(--spectrum-alias-icon-color-disabled); + --spectrum-alias-tag-icon-color: var(--spectrum-alias-tag-icon-color-default); + --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-icon-color-selected: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-default: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color: var(--spectrum-alias-tag-background-color-default); + --spectrum-alias-tag-background-color-error-default: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error-down: var(--spectrum-global-color-gray-200); + --spectrum-alias-tag-background-color-error-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-tag-background-color-error: var(--spectrum-alias-tag-background-color-error-default); + --spectrum-alias-tag-background-color-error-selected-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-tag-background-color-error-selected-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-down: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-tag-background-color-error-selected-key-focus: var(--spectrum-global-color-red-600); + --spectrum-alias-tag-background-color-error-selected: var(--spectrum-alias-tag-background-color-error-selected-default); + --spectrum-alias-tag-background-color-selected-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-tag-background-color-selected-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-tag-background-color-selected-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-tag-background-color-selected: var(--spectrum-alias-tag-background-color-selected-default); + --spectrum-alias-tag-focusring-border-color-default: transparent; + --spectrum-alias-tag-focusring-border-color-key-focus: transparent; + --spectrum-alias-tag-focusring-border-color-disabled: transparent; + --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(--spectrum-alias-focus-ring-color); + --spectrum-alias-tag-focusring-border-color: var(--spectrum-alias-tag-focusring-border-color-default); + --spectrum-alias-avatar-border-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-down: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color: var(--spectrum-alias-avatar-border-color-default); + --spectrum-alias-avatar-border-color-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-hover: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-down: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected-key-focus: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-avatar-border-color-selected: var(--spectrum-alias-avatar-border-color-selected-default); + --spectrum-alias-avatar-border-color-selected-disabled: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-toggle-background-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-toggle-background-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-background-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-background-color: var(--spectrum-alias-toggle-background-color-default); + --spectrum-alias-toggle-background-color-emphasized-selected-default: var(--spectrum-global-color-blue-500); + --spectrum-alias-toggle-background-color-emphasized-selected-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-toggle-background-color-emphasized-selected-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-toggle-background-color-emphasized-selected-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-toggle-background-color-emphasized-selected: var(--spectrum-alias-toggle-background-color-emphasized-selected-default); + --spectrum-alias-toggle-border-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-toggle-border-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-border-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-toggle-border-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-toggle-border-color: var(--spectrum-alias-toggle-border-color-default); + --spectrum-alias-toggle-icon-color-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-toggle-icon-color-emphasized-selected: var(--spectrum-global-color-gray-75); + --spectrum-alias-button-primary-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-primary-background-color-hover: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-button-primary-background-color-key-focus: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-background-color: var(--spectrum-alias-button-primary-background-color-default); + --spectrum-alias-button-primary-border-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-border-color-hover: var(--spectrum-alias-button-primary-background-color-hover); + --spectrum-alias-button-primary-border-color-down: var(--spectrum-alias-button-primary-background-color-down); + --spectrum-alias-button-primary-border-color-key-focus: var(--spectrum-alias-button-primary-background-color-key-focus); + --spectrum-alias-button-primary-border-color: var(--spectrum-alias-button-primary-border-color-default); + --spectrum-alias-button-primary-text-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-primary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-primary-text-color: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-primary-icon-color-default: var(--spectrum-alias-button-primary-text-color-default); + --spectrum-alias-button-primary-icon-color-hover: var(--spectrum-alias-button-primary-text-color-hover); + --spectrum-alias-button-primary-icon-color-down: var(--spectrum-alias-button-primary-text-color-down); + --spectrum-alias-button-primary-icon-color-key-focus: var(--spectrum-alias-button-primary-text-color-key-focus); + --spectrum-alias-button-primary-icon-color: var(--spectrum-alias-button-primary-icon-color-default); + --spectrum-alias-button-secondary-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-secondary-background-color-hover: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color-down: var(--spectrum-global-color-gray-800); + --spectrum-alias-button-secondary-background-color-key-focus: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-background-color: var(--spectrum-alias-button-secondary-background-color-default); + --spectrum-alias-button-secondary-border-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-border-color-hover: var(--spectrum-alias-button-secondary-background-color-hover); + --spectrum-alias-button-secondary-border-color-down: var(--spectrum-alias-button-secondary-background-color-down); + --spectrum-alias-button-secondary-border-color-key-focus: var(--spectrum-alias-button-secondary-background-color-key-focus); + --spectrum-alias-button-secondary-border-color: var(--spectrum-alias-button-secondary-border-color-default); + --spectrum-alias-button-secondary-text-color-default: var(--spectrum-global-color-gray-700); + --spectrum-alias-button-secondary-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-secondary-text-color: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-secondary-icon-color-default: var(--spectrum-alias-button-secondary-text-color-default); + --spectrum-alias-button-secondary-icon-color-hover: var(--spectrum-alias-button-secondary-text-color-hover); + --spectrum-alias-button-secondary-icon-color-down: var(--spectrum-alias-button-secondary-text-color-down); + --spectrum-alias-button-secondary-icon-color-key-focus: var(--spectrum-alias-button-secondary-text-color-key-focus); + --spectrum-alias-button-secondary-icon-color: var(--spectrum-alias-button-secondary-icon-color-default); + --spectrum-alias-button-negative-background-color-default: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-button-negative-background-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-background-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-background-color: var(--spectrum-alias-button-negative-background-color-default); + --spectrum-alias-button-negative-border-color-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-hover: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color-down: var(--spectrum-global-color-red-700); + --spectrum-alias-button-negative-border-color-key-focus: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-border-color: var(--spectrum-alias-button-negative-border-color-default); + --spectrum-alias-button-negative-text-color-default: var(--spectrum-semantic-negative-text-color-small); + --spectrum-alias-button-negative-text-color-hover: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-down: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color-key-focus: var(--spectrum-global-color-gray-50); + --spectrum-alias-button-negative-text-color: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-button-negative-icon-color-default: var(--spectrum-alias-button-negative-text-color-default); + --spectrum-alias-button-negative-icon-color-hover: var(--spectrum-alias-button-negative-text-color-hover); + --spectrum-alias-button-negative-icon-color-down: var(--spectrum-alias-button-negative-text-color-down); + --spectrum-alias-button-negative-icon-color-key-focus: var(--spectrum-alias-button-negative-text-color-key-focus); + --spectrum-alias-button-negative-icon-color: var(--spectrum-alias-button-negative-icon-color-default); + --spectrum-alias-input-border-color-disabled: var(--spectrum-alias-border-color-transparent); + --spectrum-alias-input-border-color-quiet-disabled: var(--spectrum-alias-border-color-mid); + --spectrum-alias-input-border-color-default: var(--spectrum-alias-border-color); + --spectrum-alias-input-border-color-hover: var(--spectrum-alias-border-color-hover); + --spectrum-alias-input-border-color-down: var(--spectrum-alias-border-color-mouse-focus); + --spectrum-alias-input-border-color-mouse-focus: var(--spectrum-alias-border-color-mouse-focus); + --spectrum-alias-input-border-color-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-input-border-color: var(--spectrum-alias-input-border-color-default); + --spectrum-alias-input-border-color-invalid-default: var(--spectrum-semantic-negative-color-default); + --spectrum-alias-input-border-color-invalid-hover: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid-down: var(--spectrum-semantic-negative-color-down); + --spectrum-alias-input-border-color-invalid-mouse-focus: var(--spectrum-semantic-negative-color-hover); + --spectrum-alias-input-border-color-invalid-key-focus: var(--spectrum-alias-border-color-key-focus); + --spectrum-alias-input-border-color-invalid: var(--spectrum-alias-input-border-color-invalid-default); + --spectrum-alias-background-color-yellow-default: var(--spectrum-global-color-static-yellow-300); + --spectrum-alias-background-color-yellow-hover: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-key-focus: var(--spectrum-global-color-static-yellow-400); + --spectrum-alias-background-color-yellow-down: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-background-color-yellow: var(--spectrum-alias-background-color-yellow-default); + --spectrum-alias-infieldbutton-background-color: var(--spectrum-global-color-gray-200); + --spectrum-alias-infieldbutton-fill-loudnessLow-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-border-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-border-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-infieldbutton-fill-border-color-default: var(--spectrum-alias-input-border-color-default); + --spectrum-alias-infieldbutton-fill-border-color-hover: var(--spectrum-alias-input-border-color-hover); + --spectrum-alias-infieldbutton-fill-border-color-down: var(--spectrum-alias-input-border-color-down); + --spectrum-alias-infieldbutton-fill-border-color-mouse-focus: var(--spectrum-alias-input-border-color-mouse-focus); + --spectrum-alias-infieldbutton-fill-border-color-key-focus: var(--spectrum-alias-input-border-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus: transparent; + --spectrum-alias-infieldbutton-fill-loudnessLow-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-default: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-default); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-hover: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-down: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-key-focus: var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessMedium-background-color-disabled: transparent; + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-default: var(--spectrum-alias-component-background-color-default); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-hover: var(--spectrum-alias-component-background-color-hover); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-down: var(--spectrum-alias-component-background-color-down); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-key-focus: var(--spectrum-alias-component-background-color-key-focus); + --spectrum-alias-infieldbutton-fill-loudnessHigh-background-color-disabled: var(--spectrum-alias-component-background-color-disabled); + --spectrum-alias-actionbutton-staticBlack-border-color-default: #0006; + --spectrum-alias-actionbutton-staticBlack-background-color-default: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-hover: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-hover: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-down: #000000b3; + --spectrum-alias-actionbutton-staticBlack-background-color-down: #0006; + --spectrum-alias-actionbutton-staticBlack-border-color-key-focus: #0000008c; + --spectrum-alias-actionbutton-staticBlack-background-color-key-focus: #00000040; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled: #00000040; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticBlack-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticBlack-background-color-disabled-selected: #0000001a; + --spectrum-alias-actionbutton-staticWhite-border-color-default: #fff6; + --spectrum-alias-actionbutton-staticWhite-background-color-default: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-hover: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-hover: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-down: #ffffffb3; + --spectrum-alias-actionbutton-staticWhite-background-color-down: #fff6; + --spectrum-alias-actionbutton-staticWhite-border-color-key-focus: #ffffff8c; + --spectrum-alias-actionbutton-staticWhite-background-color-key-focus: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled: #ffffff40; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled: transparent; + --spectrum-alias-actionbutton-staticWhite-border-color-disabled-selected: transparent; + --spectrum-alias-actionbutton-staticWhite-background-color-disabled-selected: #ffffff1a; + --spectrum-alias-tabs-divider-background-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-tabs-divider-background-color-quiet: var(--spectrum-alias-background-color-transparent); + --spectrum-alias-tabitem-text-color-default: var(--spectrum-alias-label-text-color); + --spectrum-alias-tabitem-text-color-hover: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-down: var(--spectrum-alias-text-color-down); + --spectrum-alias-tabitem-text-color-key-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color-mouse-focus: var(--spectrum-alias-text-color-hover); + --spectrum-alias-tabitem-text-color: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-selected-default: var(--spectrum-global-color-gray-900); + --spectrum-alias-tabitem-text-color-selected-hover: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-down: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-key-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-selected: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-text-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(--spectrum-global-color-static-blue-500); + --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-text-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-selection-indicator-color-default: var(--spectrum-alias-tabitem-text-color-selected-default); + --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-tabitem-icon-color-disabled: var(--spectrum-alias-text-color-disabled); + --spectrum-alias-tabitem-icon-color-default: var(--spectrum-alias-icon-color); + --spectrum-alias-tabitem-icon-color-hover: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tabitem-icon-color-down: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tabitem-icon-color-key-focus: var(--spectrum-alias-icon-color-hover); + --spectrum-alias-tabitem-icon-color-mouse-focus: var(--spectrum-alias-icon-color-down); + --spectrum-alias-tabitem-icon-color: var(--spectrum-alias-tabitem-icon-color-default); + --spectrum-alias-tabitem-icon-color-selected: var(--spectrum-alias-icon-color-selected-neutral); + --spectrum-alias-tabitem-icon-color-emphasized: var(--spectrum-alias-tabitem-text-color-default); + --spectrum-alias-tabitem-icon-color-emphasized-selected: var(--spectrum-alias-tabitem-text-color-emphasized-selected-default); + --spectrum-alias-assetcard-selectionindicator-background-color-ordered: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-overlay-background-color: #1b7ff51a; + --spectrum-alias-assetcard-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-border-color-selected-hover: var(--spectrum-global-color-blue-500); + --spectrum-alias-assetcard-border-color-selected-down: var(--spectrum-global-color-blue-600); + --spectrum-alias-background-color-default: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-background-color-transparent: transparent; + --spectrum-alias-background-color-overbackground-down: #fff3; + --spectrum-alias-background-color-quiet-overbackground-hover: #ffffff1a; + --spectrum-alias-background-color-quiet-overbackground-down: #fff3; + --spectrum-alias-background-color-overbackground-disabled: #ffffff1a; + --spectrum-alias-background-color-quickactions-overlay: #0003; + --spectrum-alias-placeholder-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-placeholder-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-placeholder-text-color-selected: var(--spectrum-global-color-gray-800); + --spectrum-alias-label-text-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-text-color: var(--spectrum-global-color-gray-800); + --spectrum-alias-text-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-key-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-mouse-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-500); + --spectrum-alias-text-color-invalid: var(--spectrum-global-color-red-500); + --spectrum-alias-text-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-text-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-text-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-text-color-overbackground-disabled: #fff3; + --spectrum-alias-text-color-quiet-overbackground-disabled: #fff3; + --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900); + --spectrum-alias-link-primary-text-color-default: var(--spectrum-global-color-blue-600); + --spectrum-alias-link-primary-text-color-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-link-primary-text-color-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-link-primary-text-color-key-focus: var(--spectrum-alias-text-color-key-focus); + --spectrum-alias-link-primary-text-color: var(--spectrum-alias-link-primary-text-color-default); + --spectrum-alias-link-secondary-text-color-default: var(--spectrum-alias-link-primary-text-color-default); + --spectrum-alias-link-secondary-text-color-hover: var(--spectrum-alias-link-primary-text-color-hover); + --spectrum-alias-link-secondary-text-color-down: var(--spectrum-alias-link-primary-text-color-down); + --spectrum-alias-link-secondary-text-color-key-focus: var(--spectrum-alias-link-primary-text-color-key-focus); + --spectrum-alias-link-secondary-text-color: var(--spectrum-alias-link-secondary-text-color-default); + --spectrum-alias-border-color: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500); + --spectrum-alias-border-color-key-focus: var(--spectrum-global-color-blue-400); + --spectrum-alias-border-color-mouse-focus: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-disabled: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-extralight: var(--spectrum-global-color-gray-100); + --spectrum-alias-border-color-light: var(--spectrum-global-color-gray-200); + --spectrum-alias-border-color-mid: var(--spectrum-global-color-gray-300); + --spectrum-alias-border-color-dark: var(--spectrum-global-color-gray-400); + --spectrum-alias-border-color-darker-default: var(--spectrum-global-color-gray-600); + --spectrum-alias-border-color-darker-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-darker-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-border-color-transparent: transparent; + --spectrum-alias-border-color-translucent-dark: #0000000d; + --spectrum-alias-border-color-translucent-darker: #0000001a; + --spectrum-alias-focus-color: var(--spectrum-global-color-blue-400); + --spectrum-alias-focus-ring-color: var(--spectrum-alias-focus-color); + --spectrum-alias-track-color-default: var(--spectrum-global-color-gray-300); + --spectrum-alias-track-fill-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-track-color-disabled: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-darksquare-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-thumbnail-lightsquare-background-color: var(--spectrum-global-color-static-white); + --spectrum-alias-track-color-overbackground: #fff3; + --spectrum-alias-icon-color: var(--spectrum-global-color-gray-700); + --spectrum-alias-icon-color-overbackground: var(--spectrum-global-color-static-white); + --spectrum-alias-icon-color-hover: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-down: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-key-focus: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-disabled: var(--spectrum-global-color-gray-400); + --spectrum-alias-icon-color-overbackground-disabled: #fff3; + --spectrum-alias-icon-color-quiet-overbackground-disabled: #ffffff26; + --spectrum-alias-icon-color-selected-neutral: var(--spectrum-global-color-gray-900); + --spectrum-alias-icon-color-selected-neutral-subdued: var(--spectrum-global-color-gray-800); + --spectrum-alias-icon-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-icon-color-selected-hover: var(--spectrum-global-color-blue-600); + --spectrum-alias-icon-color-selected-down: var(--spectrum-global-color-blue-700); + --spectrum-alias-icon-color-selected-focus: var(--spectrum-global-color-blue-600); + --spectrum-alias-image-opacity-disabled: var(--spectrum-global-color-opacity-30); + --spectrum-alias-toolbar-background-color: var(--spectrum-global-color-gray-100); + --spectrum-alias-code-highlight-color-default: var(--spectrum-global-color-gray-800); + --spectrum-alias-code-highlight-background-color: var(--spectrum-global-color-gray-75); + --spectrum-alias-code-highlight-color-keyword: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-section: var(--spectrum-global-color-red-600); + --spectrum-alias-code-highlight-color-literal: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-attribute: var(--spectrum-global-color-seafoam-600); + --spectrum-alias-code-highlight-color-class: var(--spectrum-global-color-magenta-600); + --spectrum-alias-code-highlight-color-variable: var(--spectrum-global-color-purple-600); + --spectrum-alias-code-highlight-color-title: var(--spectrum-global-color-indigo-600); + --spectrum-alias-code-highlight-color-string: var(--spectrum-global-color-fuchsia-600); + --spectrum-alias-code-highlight-color-function: var(--spectrum-global-color-blue-600); + --spectrum-alias-code-highlight-color-comment: var(--spectrum-global-color-gray-700); + --spectrum-alias-categorical-color-1: var(--spectrum-global-color-static-seafoam-200); + --spectrum-alias-categorical-color-2: var(--spectrum-global-color-static-indigo-700); + --spectrum-alias-categorical-color-3: var(--spectrum-global-color-static-orange-500); + --spectrum-alias-categorical-color-4: var(--spectrum-global-color-static-magenta-500); + --spectrum-alias-categorical-color-5: var(--spectrum-global-color-static-indigo-200); + --spectrum-alias-categorical-color-6: var(--spectrum-global-color-static-celery-200); + --spectrum-alias-categorical-color-7: var(--spectrum-global-color-static-blue-500); + --spectrum-alias-categorical-color-8: var(--spectrum-global-color-static-purple-800); + --spectrum-alias-categorical-color-9: var(--spectrum-global-color-static-yellow-500); + --spectrum-alias-categorical-color-10: var(--spectrum-global-color-static-orange-700); + --spectrum-alias-categorical-color-11: var(--spectrum-global-color-static-green-600); + --spectrum-alias-categorical-color-12: var(--spectrum-global-color-static-chartreuse-300); + --spectrum-alias-categorical-color-13: var(--spectrum-global-color-static-blue-200); + --spectrum-alias-categorical-color-14: var(--spectrum-global-color-static-fuchsia-500); + --spectrum-alias-categorical-color-15: var(--spectrum-global-color-static-magenta-200); + --spectrum-alias-categorical-color-16: var(--spectrum-global-color-static-yellow-200); } diff --git a/tools/styles/spectrum-two/spectrum-scale-large.css b/tools/styles/spectrum-two/spectrum-scale-large.css index 42038762ff..f1d1f8e3f5 100644 --- a/tools/styles/spectrum-two/spectrum-scale-large.css +++ b/tools/styles/spectrum-two/spectrum-scale-large.css @@ -1,291 +1,150 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1.25; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 3px; - --spectrum-global-dimension-size-40: 4px; - --spectrum-global-dimension-size-50: 5px; - --spectrum-global-dimension-size-65: 6px; - --spectrum-global-dimension-size-75: 8px; - --spectrum-global-dimension-size-85: 9px; - --spectrum-global-dimension-size-100: 10px; - --spectrum-global-dimension-size-115: 11px; - --spectrum-global-dimension-size-125: 13px; - --spectrum-global-dimension-size-130: 14px; - --spectrum-global-dimension-size-150: 15px; - --spectrum-global-dimension-size-160: 16px; - --spectrum-global-dimension-size-175: 18px; - --spectrum-global-dimension-size-185: 19px; - --spectrum-global-dimension-size-200: 20px; - --spectrum-global-dimension-size-225: 22px; - --spectrum-global-dimension-size-250: 25px; - --spectrum-global-dimension-size-275: 28px; - --spectrum-global-dimension-size-300: 30px; - --spectrum-global-dimension-size-325: 32px; - --spectrum-global-dimension-size-350: 35px; - --spectrum-global-dimension-size-400: 40px; - --spectrum-global-dimension-size-450: 45px; - --spectrum-global-dimension-size-500: 50px; - --spectrum-global-dimension-size-550: 56px; - --spectrum-global-dimension-size-600: 60px; - --spectrum-global-dimension-size-650: 65px; - --spectrum-global-dimension-size-675: 68px; - --spectrum-global-dimension-size-700: 70px; - --spectrum-global-dimension-size-750: 75px; - --spectrum-global-dimension-size-800: 80px; - --spectrum-global-dimension-size-900: 90px; - --spectrum-global-dimension-size-1000: 100px; - --spectrum-global-dimension-size-1125: 112px; - --spectrum-global-dimension-size-1200: 120px; - --spectrum-global-dimension-size-1250: 125px; - --spectrum-global-dimension-size-1600: 160px; - --spectrum-global-dimension-size-1700: 170px; - --spectrum-global-dimension-size-1800: 180px; - --spectrum-global-dimension-size-2000: 200px; - --spectrum-global-dimension-size-2400: 240px; - --spectrum-global-dimension-size-2500: 250px; - --spectrum-global-dimension-size-3000: 300px; - --spectrum-global-dimension-size-3400: 340px; - --spectrum-global-dimension-size-3600: 360px; - --spectrum-global-dimension-size-4600: 460px; - --spectrum-global-dimension-size-5000: 500px; - --spectrum-global-dimension-size-6000: 600px; - --spectrum-global-dimension-font-size-25: 12px; - --spectrum-global-dimension-font-size-50: 13px; - --spectrum-global-dimension-font-size-75: 15px; - --spectrum-global-dimension-font-size-100: 17px; - --spectrum-global-dimension-font-size-150: 18px; - --spectrum-global-dimension-font-size-200: 19px; - --spectrum-global-dimension-font-size-300: 22px; - --spectrum-global-dimension-font-size-400: 24px; - --spectrum-global-dimension-font-size-500: 27px; - --spectrum-global-dimension-font-size-600: 31px; - --spectrum-global-dimension-font-size-700: 34px; - --spectrum-global-dimension-font-size-800: 39px; - --spectrum-global-dimension-font-size-900: 44px; - --spectrum-global-dimension-font-size-1000: 49px; - --spectrum-global-dimension-font-size-1100: 55px; - --spectrum-global-dimension-font-size-1200: 62px; - --spectrum-global-dimension-font-size-1300: 70px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; - --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-item-control-3-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-item-control-3-width-l: 41px; - --spectrum-alias-item-control-3-width-xl: 46px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-160 - ); - --spectrum-alias-control-three-width-s: var( - --spectrum-global-dimension-size-325 - ); - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-450 - ); - --spectrum-alias-control-three-width-l: 41px; - --spectrum-alias-control-three-width-xl: 46px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-115 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-275 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-avatar-size-100: 26px; - --spectrum-alias-avatar-size-400: 36px; - --spectrum-alias-avatar-size-600: 46px; - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-300 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-colorwheel-min-width: var( - --spectrum-global-dimension-static-size-2600 - ); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-xs-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-75 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1.25; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 3px; + --spectrum-global-dimension-size-40: 4px; + --spectrum-global-dimension-size-50: 5px; + --spectrum-global-dimension-size-65: 6px; + --spectrum-global-dimension-size-75: 8px; + --spectrum-global-dimension-size-85: 9px; + --spectrum-global-dimension-size-100: 10px; + --spectrum-global-dimension-size-115: 11px; + --spectrum-global-dimension-size-125: 13px; + --spectrum-global-dimension-size-130: 14px; + --spectrum-global-dimension-size-150: 15px; + --spectrum-global-dimension-size-160: 16px; + --spectrum-global-dimension-size-175: 18px; + --spectrum-global-dimension-size-185: 19px; + --spectrum-global-dimension-size-200: 20px; + --spectrum-global-dimension-size-225: 22px; + --spectrum-global-dimension-size-250: 25px; + --spectrum-global-dimension-size-275: 28px; + --spectrum-global-dimension-size-300: 30px; + --spectrum-global-dimension-size-325: 32px; + --spectrum-global-dimension-size-350: 35px; + --spectrum-global-dimension-size-400: 40px; + --spectrum-global-dimension-size-450: 45px; + --spectrum-global-dimension-size-500: 50px; + --spectrum-global-dimension-size-550: 56px; + --spectrum-global-dimension-size-600: 60px; + --spectrum-global-dimension-size-650: 65px; + --spectrum-global-dimension-size-675: 68px; + --spectrum-global-dimension-size-700: 70px; + --spectrum-global-dimension-size-750: 75px; + --spectrum-global-dimension-size-800: 80px; + --spectrum-global-dimension-size-900: 90px; + --spectrum-global-dimension-size-1000: 100px; + --spectrum-global-dimension-size-1125: 112px; + --spectrum-global-dimension-size-1200: 120px; + --spectrum-global-dimension-size-1250: 125px; + --spectrum-global-dimension-size-1600: 160px; + --spectrum-global-dimension-size-1700: 170px; + --spectrum-global-dimension-size-1800: 180px; + --spectrum-global-dimension-size-2000: 200px; + --spectrum-global-dimension-size-2400: 240px; + --spectrum-global-dimension-size-2500: 250px; + --spectrum-global-dimension-size-3000: 300px; + --spectrum-global-dimension-size-3400: 340px; + --spectrum-global-dimension-size-3600: 360px; + --spectrum-global-dimension-size-4600: 460px; + --spectrum-global-dimension-size-5000: 500px; + --spectrum-global-dimension-size-6000: 600px; + --spectrum-global-dimension-font-size-25: 12px; + --spectrum-global-dimension-font-size-50: 13px; + --spectrum-global-dimension-font-size-75: 15px; + --spectrum-global-dimension-font-size-100: 17px; + --spectrum-global-dimension-font-size-150: 18px; + --spectrum-global-dimension-font-size-200: 19px; + --spectrum-global-dimension-font-size-300: 22px; + --spectrum-global-dimension-font-size-400: 24px; + --spectrum-global-dimension-font-size-500: 27px; + --spectrum-global-dimension-font-size-600: 31px; + --spectrum-global-dimension-font-size-700: 34px; + --spectrum-global-dimension-font-size-800: 39px; + --spectrum-global-dimension-font-size-900: 44px; + --spectrum-global-dimension-font-size-1000: 49px; + --spectrum-global-dimension-font-size-1100: 55px; + --spectrum-global-dimension-font-size-1200: 62px; + --spectrum-global-dimension-font-size-1300: 70px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-rounded-workflow-padding-left-m: 17px; + --spectrum-alias-item-rounded-workflow-padding-left-xl: 27px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-item-control-3-width-s: var(--spectrum-global-dimension-size-325); + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-item-control-3-width-l: 41px; + --spectrum-alias-item-control-3-width-xl: 46px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-160); + --spectrum-alias-control-three-width-s: var(--spectrum-global-dimension-size-325); + --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-450); + --spectrum-alias-control-three-width-l: 41px; + --spectrum-alias-control-three-width-xl: 46px; + --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-115); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-115); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-275); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-avatar-size-100: 26px; + --spectrum-alias-avatar-size-400: 36px; + --spectrum-alias-avatar-size-600: 46px; + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-300); + --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-75); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-static-size-2600); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-xs-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-75); } diff --git a/tools/styles/spectrum-two/spectrum-scale-medium.css b/tools/styles/spectrum-two/spectrum-scale-medium.css index 67c09f4f63..8ad0995343 100644 --- a/tools/styles/spectrum-two/spectrum-scale-medium.css +++ b/tools/styles/spectrum-two/spectrum-scale-medium.css @@ -1,287 +1,150 @@ -:root, -:host { - --spectrum-global-dimension-scale-factor: 1; - --spectrum-global-dimension-size-0: 0px; - --spectrum-global-dimension-size-10: 1px; - --spectrum-global-dimension-size-25: 2px; - --spectrum-global-dimension-size-30: 2px; - --spectrum-global-dimension-size-40: 3px; - --spectrum-global-dimension-size-50: 4px; - --spectrum-global-dimension-size-65: 5px; - --spectrum-global-dimension-size-75: 6px; - --spectrum-global-dimension-size-85: 7px; - --spectrum-global-dimension-size-100: 8px; - --spectrum-global-dimension-size-115: 9px; - --spectrum-global-dimension-size-125: 10px; - --spectrum-global-dimension-size-130: 11px; - --spectrum-global-dimension-size-150: 12px; - --spectrum-global-dimension-size-160: 13px; - --spectrum-global-dimension-size-175: 14px; - --spectrum-global-dimension-size-185: 15px; - --spectrum-global-dimension-size-200: 16px; - --spectrum-global-dimension-size-225: 18px; - --spectrum-global-dimension-size-250: 20px; - --spectrum-global-dimension-size-275: 22px; - --spectrum-global-dimension-size-300: 24px; - --spectrum-global-dimension-size-325: 26px; - --spectrum-global-dimension-size-350: 28px; - --spectrum-global-dimension-size-400: 32px; - --spectrum-global-dimension-size-450: 36px; - --spectrum-global-dimension-size-500: 40px; - --spectrum-global-dimension-size-550: 44px; - --spectrum-global-dimension-size-600: 48px; - --spectrum-global-dimension-size-650: 52px; - --spectrum-global-dimension-size-675: 54px; - --spectrum-global-dimension-size-700: 56px; - --spectrum-global-dimension-size-750: 60px; - --spectrum-global-dimension-size-800: 64px; - --spectrum-global-dimension-size-900: 72px; - --spectrum-global-dimension-size-1000: 80px; - --spectrum-global-dimension-size-1125: 90px; - --spectrum-global-dimension-size-1200: 96px; - --spectrum-global-dimension-size-1250: 100px; - --spectrum-global-dimension-size-1600: 128px; - --spectrum-global-dimension-size-1700: 136px; - --spectrum-global-dimension-size-1800: 144px; - --spectrum-global-dimension-size-2000: 160px; - --spectrum-global-dimension-size-2400: 192px; - --spectrum-global-dimension-size-2500: 200px; - --spectrum-global-dimension-size-3000: 240px; - --spectrum-global-dimension-size-3400: 272px; - --spectrum-global-dimension-size-3600: 288px; - --spectrum-global-dimension-size-4600: 368px; - --spectrum-global-dimension-size-5000: 400px; - --spectrum-global-dimension-size-6000: 480px; - --spectrum-global-dimension-font-size-25: 10px; - --spectrum-global-dimension-font-size-50: 11px; - --spectrum-global-dimension-font-size-75: 12px; - --spectrum-global-dimension-font-size-100: 14px; - --spectrum-global-dimension-font-size-150: 15px; - --spectrum-global-dimension-font-size-200: 16px; - --spectrum-global-dimension-font-size-300: 18px; - --spectrum-global-dimension-font-size-400: 20px; - --spectrum-global-dimension-font-size-500: 22px; - --spectrum-global-dimension-font-size-600: 25px; - --spectrum-global-dimension-font-size-700: 28px; - --spectrum-global-dimension-font-size-800: 32px; - --spectrum-global-dimension-font-size-900: 36px; - --spectrum-global-dimension-font-size-1000: 40px; - --spectrum-global-dimension-font-size-1100: 45px; - --spectrum-global-dimension-font-size-1200: 50px; - --spectrum-global-dimension-font-size-1300: 60px; - --spectrum-alias-item-text-padding-top-l: var( - --spectrum-global-dimension-size-115 - ); - --spectrum-alias-item-text-padding-bottom-s: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-item-workflow-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-rounded-workflow-padding-left-m: var( - --spectrum-global-dimension-size-175 - ); - --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; - --spectrum-alias-item-mark-padding-top-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-bottom-m: var( - --spectrum-global-dimension-static-size-75 - ); - --spectrum-alias-item-mark-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-l: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-1-size-xl: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-item-control-2-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-item-control-3-width-s: 23px; - --spectrum-alias-item-control-3-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-item-control-3-width-l: 29px; - --spectrum-alias-item-control-3-width-xl: 33px; - --spectrum-alias-item-mark-size-m: var( - --spectrum-global-dimension-size-250 - ); - --spectrum-alias-component-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-control-two-size-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-height-s: var( - --spectrum-global-dimension-size-150 - ); - --spectrum-alias-control-three-width-s: 23px; - --spectrum-alias-control-three-width-m: var( - --spectrum-global-dimension-static-size-325 - ); - --spectrum-alias-control-three-width-l: 29px; - --spectrum-alias-control-three-width-xl: 33px; - --spectrum-alias-search-padding-left-m: var( - --spectrum-global-dimension-size-125 - ); - --spectrum-alias-focus-ring-border-radius-regular: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-focus-ring-radius-default: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-workflow-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-chevron-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-chevron-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-chevron-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-chevron-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-chevron-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-50: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-checkmark-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-checkmark-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-checkmark-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-checkmark-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-dash-size-50: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-dash-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-dash-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-dash-size-400: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-dash-size-500: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-dash-size-600: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-cross-size-75: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-100: var( - --spectrum-global-dimension-static-size-100 - ); - --spectrum-alias-ui-icon-cross-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-cross-size-300: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-400: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-cross-size-500: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-cross-size-600: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-75: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-100: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-arrow-size-200: var( - --spectrum-global-dimension-static-size-150 - ); - --spectrum-alias-ui-icon-arrow-size-300: var( - --spectrum-global-dimension-static-size-175 - ); - --spectrum-alias-ui-icon-arrow-size-400: var( - --spectrum-global-dimension-static-size-200 - ); - --spectrum-alias-ui-icon-arrow-size-500: var( - --spectrum-global-dimension-static-size-225 - ); - --spectrum-alias-ui-icon-arrow-size-600: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-ui-icon-triplegripper-size-100-width: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-doublegripper-size-100-height: var( - --spectrum-global-dimension-static-size-50 - ); - --spectrum-alias-ui-icon-singlegripper-size-100-height: var( - --spectrum-global-dimension-static-size-25 - ); - --spectrum-alias-ui-icon-cornertriangle-size-100: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-alias-ui-icon-cornertriangle-size-300: var( - --spectrum-global-dimension-static-size-85 - ); - --spectrum-alias-ui-icon-asterisk-size-200: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-ui-icon-asterisk-size-300: var( - --spectrum-global-dimension-static-size-125 - ); - --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); - --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); - --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); - --spectrum-alias-tag-icon-size-l: var( - --spectrum-global-dimension-static-size-250 - ); - --spectrum-alias-tag-focusring-border-radius: var( - --spectrum-global-dimension-static-size-65 - ); - --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); - --spectrum-dialog-confirm-title-text-size: var( - --spectrum-alias-heading-s-text-size - ); - --spectrum-dialog-confirm-description-text-size: var( - --spectrum-global-dimension-font-size-100 - ); +:root, :host { + --spectrum-global-dimension-scale-factor: 1; + --spectrum-global-dimension-size-0: 0px; + --spectrum-global-dimension-size-10: 1px; + --spectrum-global-dimension-size-25: 2px; + --spectrum-global-dimension-size-30: 2px; + --spectrum-global-dimension-size-40: 3px; + --spectrum-global-dimension-size-50: 4px; + --spectrum-global-dimension-size-65: 5px; + --spectrum-global-dimension-size-75: 6px; + --spectrum-global-dimension-size-85: 7px; + --spectrum-global-dimension-size-100: 8px; + --spectrum-global-dimension-size-115: 9px; + --spectrum-global-dimension-size-125: 10px; + --spectrum-global-dimension-size-130: 11px; + --spectrum-global-dimension-size-150: 12px; + --spectrum-global-dimension-size-160: 13px; + --spectrum-global-dimension-size-175: 14px; + --spectrum-global-dimension-size-185: 15px; + --spectrum-global-dimension-size-200: 16px; + --spectrum-global-dimension-size-225: 18px; + --spectrum-global-dimension-size-250: 20px; + --spectrum-global-dimension-size-275: 22px; + --spectrum-global-dimension-size-300: 24px; + --spectrum-global-dimension-size-325: 26px; + --spectrum-global-dimension-size-350: 28px; + --spectrum-global-dimension-size-400: 32px; + --spectrum-global-dimension-size-450: 36px; + --spectrum-global-dimension-size-500: 40px; + --spectrum-global-dimension-size-550: 44px; + --spectrum-global-dimension-size-600: 48px; + --spectrum-global-dimension-size-650: 52px; + --spectrum-global-dimension-size-675: 54px; + --spectrum-global-dimension-size-700: 56px; + --spectrum-global-dimension-size-750: 60px; + --spectrum-global-dimension-size-800: 64px; + --spectrum-global-dimension-size-900: 72px; + --spectrum-global-dimension-size-1000: 80px; + --spectrum-global-dimension-size-1125: 90px; + --spectrum-global-dimension-size-1200: 96px; + --spectrum-global-dimension-size-1250: 100px; + --spectrum-global-dimension-size-1600: 128px; + --spectrum-global-dimension-size-1700: 136px; + --spectrum-global-dimension-size-1800: 144px; + --spectrum-global-dimension-size-2000: 160px; + --spectrum-global-dimension-size-2400: 192px; + --spectrum-global-dimension-size-2500: 200px; + --spectrum-global-dimension-size-3000: 240px; + --spectrum-global-dimension-size-3400: 272px; + --spectrum-global-dimension-size-3600: 288px; + --spectrum-global-dimension-size-4600: 368px; + --spectrum-global-dimension-size-5000: 400px; + --spectrum-global-dimension-size-6000: 480px; + --spectrum-global-dimension-font-size-25: 10px; + --spectrum-global-dimension-font-size-50: 11px; + --spectrum-global-dimension-font-size-75: 12px; + --spectrum-global-dimension-font-size-100: 14px; + --spectrum-global-dimension-font-size-150: 15px; + --spectrum-global-dimension-font-size-200: 16px; + --spectrum-global-dimension-font-size-300: 18px; + --spectrum-global-dimension-font-size-400: 20px; + --spectrum-global-dimension-font-size-500: 22px; + --spectrum-global-dimension-font-size-600: 25px; + --spectrum-global-dimension-font-size-700: 28px; + --spectrum-global-dimension-font-size-800: 32px; + --spectrum-global-dimension-font-size-900: 36px; + --spectrum-global-dimension-font-size-1000: 40px; + --spectrum-global-dimension-font-size-1100: 45px; + --spectrum-global-dimension-font-size-1200: 50px; + --spectrum-global-dimension-font-size-1300: 60px; + --spectrum-alias-item-text-padding-top-l: var(--spectrum-global-dimension-size-115); + --spectrum-alias-item-text-padding-bottom-s: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-item-workflow-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-rounded-workflow-padding-left-m: var(--spectrum-global-dimension-size-175); + --spectrum-alias-item-rounded-workflow-padding-left-xl: 21px; + --spectrum-alias-item-mark-padding-top-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-bottom-m: var(--spectrum-global-dimension-static-size-75); + --spectrum-alias-item-mark-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-l: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-1-size-xl: var(--spectrum-global-dimension-size-125); + --spectrum-alias-item-control-2-size-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-item-control-3-width-s: 23px; + --spectrum-alias-item-control-3-width-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-item-control-3-width-l: 29px; + --spectrum-alias-item-control-3-width-xl: 33px; + --spectrum-alias-item-mark-size-m: var(--spectrum-global-dimension-size-250); + --spectrum-alias-component-focusring-border-radius: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-control-two-size-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-three-height-s: var(--spectrum-global-dimension-size-150); + --spectrum-alias-control-three-width-s: 23px; + --spectrum-alias-control-three-width-m: var(--spectrum-global-dimension-static-size-325); + --spectrum-alias-control-three-width-l: 29px; + --spectrum-alias-control-three-width-xl: 33px; + --spectrum-alias-search-padding-left-m: var(--spectrum-global-dimension-size-125); + --spectrum-alias-focus-ring-border-radius-regular: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-focus-ring-radius-default: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-workflow-icon-size-l: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-chevron-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-chevron-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-chevron-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-chevron-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-chevron-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-50: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-checkmark-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-checkmark-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-checkmark-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-checkmark-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-dash-size-50: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-dash-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-dash-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-dash-size-400: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-dash-size-500: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-dash-size-600: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-cross-size-75: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-100: var(--spectrum-global-dimension-static-size-100); + --spectrum-alias-ui-icon-cross-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-cross-size-300: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-400: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-cross-size-500: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-cross-size-600: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-75: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-100: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-arrow-size-200: var(--spectrum-global-dimension-static-size-150); + --spectrum-alias-ui-icon-arrow-size-300: var(--spectrum-global-dimension-static-size-175); + --spectrum-alias-ui-icon-arrow-size-400: var(--spectrum-global-dimension-static-size-200); + --spectrum-alias-ui-icon-arrow-size-500: var(--spectrum-global-dimension-static-size-225); + --spectrum-alias-ui-icon-arrow-size-600: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-ui-icon-triplegripper-size-100-width: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-doublegripper-size-100-height: var(--spectrum-global-dimension-static-size-50); + --spectrum-alias-ui-icon-singlegripper-size-100-height: var(--spectrum-global-dimension-static-size-25); + --spectrum-alias-ui-icon-cornertriangle-size-100: var(--spectrum-global-dimension-static-size-65); + --spectrum-alias-ui-icon-cornertriangle-size-300: var(--spectrum-global-dimension-static-size-85); + --spectrum-alias-ui-icon-asterisk-size-200: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-ui-icon-asterisk-size-300: var(--spectrum-global-dimension-static-size-125); + --spectrum-alias-avatar-size-100: var(--spectrum-global-dimension-size-250); + --spectrum-alias-avatar-size-400: var(--spectrum-global-dimension-size-350); + --spectrum-alias-avatar-size-600: var(--spectrum-global-dimension-size-450); + --spectrum-alias-tag-icon-size-l: var(--spectrum-global-dimension-static-size-250); + --spectrum-alias-tag-focusring-border-radius: var(--spectrum-global-dimension-static-size-65); + --spectrum-colorwheel-min-width: var(--spectrum-global-dimension-size-2400); + --spectrum-dialog-confirm-title-text-size: var(--spectrum-alias-heading-s-text-size); + --spectrum-dialog-confirm-description-text-size: var(--spectrum-global-dimension-font-size-100); } diff --git a/tools/styles/spectrum-two/spectrum-theme-dark.css b/tools/styles/spectrum-two/spectrum-theme-dark.css index e677ccfb4d..de8357ae29 100644 --- a/tools/styles/spectrum-two/spectrum-theme-dark.css +++ b/tools/styles/spectrum-two/spectrum-theme-dark.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 34, 184, 51; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 68, 202, 73; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 105, 220, 99; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 142, 235, 127; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 228, 194, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 244, 213, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 249, 232, 92; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 252, 246, 187; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 237, 87, 149; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 249, 114, 167; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 255, 143, 185; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 243; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 172, 111, 249; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 187, 135, 251; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 202, 159, 252; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 124, 129, 251; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 145, 149, 255; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 167, 170, 255; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 246, 88, 67; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 255, 117, 94; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 255, 149, 129; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 244, 129, 12; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 254, 154, 46; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 255, 181, 88; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 253, 206, 136; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 18, 162, 108; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 43, 180, 125; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 67, 199, 143; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 94, 217, 162; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 52, 143, 244; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 84, 163, 246; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 114, 183, 249; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 143, 202, 252; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 29, 29, 29; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 38, 38, 38; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 50, 50, 50; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 63, 63, 63; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 84, 84, 84; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 112, 112, 112; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 178, 178, 178; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 209, 209, 209; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 235, 235, 235; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 255, 255, 255; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-75 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-modal-overlay: #00000080; - --spectrum-alias-dropshadow-color: #00000080; - --spectrum-alias-background-color-hover-overlay: #ffffff0f; - --spectrum-alias-highlight-hover: #ffffff12; - --spectrum-alias-highlight-down: #ffffff1a; - --spectrum-alias-highlight-selected: #54a3f626; - --spectrum-alias-highlight-selected-hover: #54a3f640; - --spectrum-alias-text-highlight-color: #54a3f640; - --spectrum-alias-background-color-quickactions: #323232e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-600 - ); - --spectrum-alias-border-color-translucent: #ffffff1a; - --spectrum-alias-radial-reaction-color-default: #ebebeb99; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-50 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 34, 184, 51; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 68, 202, 73; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 105, 220, 99; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 142, 235, 127; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 148, 192, 8; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 166, 211, 18; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 184, 229, 37; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 205, 245, 71; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 228, 194, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 244, 213, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 249, 232, 92; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 252, 246, 187; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 237, 87, 149; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 249, 114, 167; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 255, 143, 185; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 57, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 223, 81, 224; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 235, 110, 236; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 244, 140, 242; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 243; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 172, 111, 249; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 187, 135, 251; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 202, 159, 252; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 124, 129, 251; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 145, 149, 255; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 167, 170, 255; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 158, 152; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 3, 178, 171; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 54, 197, 189; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 93, 214, 207; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 246, 88, 67; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 255, 117, 94; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 255, 149, 129; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 244, 129, 12; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 254, 154, 46; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 255, 181, 88; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 253, 206, 136; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 18, 162, 108; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 43, 180, 125; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 67, 199, 143; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 94, 217, 162; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 52, 143, 244; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 84, 163, 246; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 114, 183, 249; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 143, 202, 252; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 29, 29, 29; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 38, 38, 38; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 50, 50, 50; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 63, 63, 63; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 84, 84, 84; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 112, 112, 112; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 178, 178, 178; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 209, 209, 209; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 235, 235, 235; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 255, 255, 255; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-75); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-modal-overlay: #00000080; + --spectrum-alias-dropshadow-color: #00000080; + --spectrum-alias-background-color-hover-overlay: #ffffff0f; + --spectrum-alias-highlight-hover: #ffffff12; + --spectrum-alias-highlight-down: #ffffff1a; + --spectrum-alias-highlight-selected: #54a3f626; + --spectrum-alias-highlight-selected-hover: #54a3f640; + --spectrum-alias-text-highlight-color: #54a3f640; + --spectrum-alias-background-color-quickactions: #323232e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-600); + --spectrum-alias-border-color-translucent: #ffffff1a; + --spectrum-alias-radial-reaction-color-default: #ebebeb99; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-50); } diff --git a/tools/styles/spectrum-two/spectrum-theme-light.css b/tools/styles/spectrum-two/spectrum-theme-light.css index 99414590fb..7da5dd11c3 100644 --- a/tools/styles/spectrum-two/spectrum-theme-light.css +++ b/tools/styles/spectrum-two/spectrum-theme-light.css @@ -1,293 +1,160 @@ -:root, -:host { - --spectrum-global-color-status: Verified; - --spectrum-global-color-version: 5.1; - --spectrum-global-color-opacity-100: 1; - --spectrum-global-color-opacity-90: 0.9; - --spectrum-global-color-opacity-80: 0.8; - --spectrum-global-color-opacity-70: 0.7; - --spectrum-global-color-opacity-60: 0.6; - --spectrum-global-color-opacity-55: 0.55; - --spectrum-global-color-opacity-50: 0.5; - --spectrum-global-color-opacity-42: 0.42; - --spectrum-global-color-opacity-40: 0.4; - --spectrum-global-color-opacity-30: 0.3; - --spectrum-global-color-opacity-25: 0.25; - --spectrum-global-color-opacity-20: 0.2; - --spectrum-global-color-opacity-15: 0.15; - --spectrum-global-color-opacity-10: 0.1; - --spectrum-global-color-opacity-8: 0.08; - --spectrum-global-color-opacity-7: 0.07; - --spectrum-global-color-opacity-6: 0.06; - --spectrum-global-color-opacity-5: 0.05; - --spectrum-global-color-opacity-4: 0.04; - --spectrum-global-color-opacity-0: 0; - --spectrum-global-color-celery-400-rgb: 39, 187, 54; - --spectrum-global-color-celery-400: rgb( - var(--spectrum-global-color-celery-400-rgb) - ); - --spectrum-global-color-celery-500-rgb: 7, 167, 33; - --spectrum-global-color-celery-500: rgb( - var(--spectrum-global-color-celery-500-rgb) - ); - --spectrum-global-color-celery-600-rgb: 0, 145, 18; - --spectrum-global-color-celery-600: rgb( - var(--spectrum-global-color-celery-600-rgb) - ); - --spectrum-global-color-celery-700-rgb: 0, 124, 15; - --spectrum-global-color-celery-700: rgb( - var(--spectrum-global-color-celery-700-rgb) - ); - --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; - --spectrum-global-color-chartreuse-400: rgb( - var(--spectrum-global-color-chartreuse-400-rgb) - ); - --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; - --spectrum-global-color-chartreuse-500: rgb( - var(--spectrum-global-color-chartreuse-500-rgb) - ); - --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; - --spectrum-global-color-chartreuse-600: rgb( - var(--spectrum-global-color-chartreuse-600-rgb) - ); - --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; - --spectrum-global-color-chartreuse-700: rgb( - var(--spectrum-global-color-chartreuse-700-rgb) - ); - --spectrum-global-color-yellow-400-rgb: 232, 198, 0; - --spectrum-global-color-yellow-400: rgb( - var(--spectrum-global-color-yellow-400-rgb) - ); - --spectrum-global-color-yellow-500-rgb: 215, 179, 0; - --spectrum-global-color-yellow-500: rgb( - var(--spectrum-global-color-yellow-500-rgb) - ); - --spectrum-global-color-yellow-600-rgb: 196, 159, 0; - --spectrum-global-color-yellow-600: rgb( - var(--spectrum-global-color-yellow-600-rgb) - ); - --spectrum-global-color-yellow-700-rgb: 176, 140, 0; - --spectrum-global-color-yellow-700: rgb( - var(--spectrum-global-color-yellow-700-rgb) - ); - --spectrum-global-color-magenta-400-rgb: 222, 61, 130; - --spectrum-global-color-magenta-400: rgb( - var(--spectrum-global-color-magenta-400-rgb) - ); - --spectrum-global-color-magenta-500-rgb: 200, 34, 105; - --spectrum-global-color-magenta-500: rgb( - var(--spectrum-global-color-magenta-500-rgb) - ); - --spectrum-global-color-magenta-600-rgb: 173, 9, 85; - --spectrum-global-color-magenta-600: rgb( - var(--spectrum-global-color-magenta-600-rgb) - ); - --spectrum-global-color-magenta-700-rgb: 142, 0, 69; - --spectrum-global-color-magenta-700: rgb( - var(--spectrum-global-color-magenta-700-rgb) - ); - --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; - --spectrum-global-color-fuchsia-400: rgb( - var(--spectrum-global-color-fuchsia-400-rgb) - ); - --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; - --spectrum-global-color-fuchsia-500: rgb( - var(--spectrum-global-color-fuchsia-500-rgb) - ); - --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; - --spectrum-global-color-fuchsia-600: rgb( - var(--spectrum-global-color-fuchsia-600-rgb) - ); - --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; - --spectrum-global-color-fuchsia-700: rgb( - var(--spectrum-global-color-fuchsia-700-rgb) - ); - --spectrum-global-color-purple-400-rgb: 157, 87, 244; - --spectrum-global-color-purple-400: rgb( - var(--spectrum-global-color-purple-400-rgb) - ); - --spectrum-global-color-purple-500-rgb: 137, 61, 231; - --spectrum-global-color-purple-500: rgb( - var(--spectrum-global-color-purple-500-rgb) - ); - --spectrum-global-color-purple-600-rgb: 115, 38, 211; - --spectrum-global-color-purple-600: rgb( - var(--spectrum-global-color-purple-600-rgb) - ); - --spectrum-global-color-purple-700-rgb: 93, 19, 183; - --spectrum-global-color-purple-700: rgb( - var(--spectrum-global-color-purple-700-rgb) - ); - --spectrum-global-color-indigo-400-rgb: 104, 109, 244; - --spectrum-global-color-indigo-400: rgb( - var(--spectrum-global-color-indigo-400-rgb) - ); - --spectrum-global-color-indigo-500-rgb: 82, 88, 228; - --spectrum-global-color-indigo-500: rgb( - var(--spectrum-global-color-indigo-500-rgb) - ); - --spectrum-global-color-indigo-600-rgb: 64, 70, 202; - --spectrum-global-color-indigo-600: rgb( - var(--spectrum-global-color-indigo-600-rgb) - ); - --spectrum-global-color-indigo-700-rgb: 50, 54, 168; - --spectrum-global-color-indigo-700: rgb( - var(--spectrum-global-color-indigo-700-rgb) - ); - --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; - --spectrum-global-color-seafoam-400: rgb( - var(--spectrum-global-color-seafoam-400-rgb) - ); - --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; - --spectrum-global-color-seafoam-500: rgb( - var(--spectrum-global-color-seafoam-500-rgb) - ); - --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; - --spectrum-global-color-seafoam-600: rgb( - var(--spectrum-global-color-seafoam-600-rgb) - ); - --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; - --spectrum-global-color-seafoam-700: rgb( - var(--spectrum-global-color-seafoam-700-rgb) - ); - --spectrum-global-color-red-400-rgb: 234, 56, 41; - --spectrum-global-color-red-400: rgb( - var(--spectrum-global-color-red-400-rgb) - ); - --spectrum-global-color-red-500-rgb: 211, 21, 16; - --spectrum-global-color-red-500: rgb( - var(--spectrum-global-color-red-500-rgb) - ); - --spectrum-global-color-red-600-rgb: 180, 0, 0; - --spectrum-global-color-red-600: rgb( - var(--spectrum-global-color-red-600-rgb) - ); - --spectrum-global-color-red-700-rgb: 147, 0, 0; - --spectrum-global-color-red-700: rgb( - var(--spectrum-global-color-red-700-rgb) - ); - --spectrum-global-color-orange-400-rgb: 246, 133, 17; - --spectrum-global-color-orange-400: rgb( - var(--spectrum-global-color-orange-400-rgb) - ); - --spectrum-global-color-orange-500-rgb: 228, 111, 0; - --spectrum-global-color-orange-500: rgb( - var(--spectrum-global-color-orange-500-rgb) - ); - --spectrum-global-color-orange-600-rgb: 203, 93, 0; - --spectrum-global-color-orange-600: rgb( - var(--spectrum-global-color-orange-600-rgb) - ); - --spectrum-global-color-orange-700-rgb: 177, 76, 0; - --spectrum-global-color-orange-700: rgb( - var(--spectrum-global-color-orange-700-rgb) - ); - --spectrum-global-color-green-400-rgb: 0, 143, 93; - --spectrum-global-color-green-400: rgb( - var(--spectrum-global-color-green-400-rgb) - ); - --spectrum-global-color-green-500-rgb: 0, 122, 77; - --spectrum-global-color-green-500: rgb( - var(--spectrum-global-color-green-500-rgb) - ); - --spectrum-global-color-green-600-rgb: 0, 101, 62; - --spectrum-global-color-green-600: rgb( - var(--spectrum-global-color-green-600-rgb) - ); - --spectrum-global-color-green-700-rgb: 0, 81, 50; - --spectrum-global-color-green-700: rgb( - var(--spectrum-global-color-green-700-rgb) - ); - --spectrum-global-color-blue-400-rgb: 20, 122, 243; - --spectrum-global-color-blue-400: rgb( - var(--spectrum-global-color-blue-400-rgb) - ); - --spectrum-global-color-blue-500-rgb: 2, 101, 220; - --spectrum-global-color-blue-500: rgb( - var(--spectrum-global-color-blue-500-rgb) - ); - --spectrum-global-color-blue-600-rgb: 0, 84, 182; - --spectrum-global-color-blue-600: rgb( - var(--spectrum-global-color-blue-600-rgb) - ); - --spectrum-global-color-blue-700-rgb: 0, 68, 145; - --spectrum-global-color-blue-700: rgb( - var(--spectrum-global-color-blue-700-rgb) - ); - --spectrum-global-color-gray-50-rgb: 255, 255, 255; - --spectrum-global-color-gray-50: rgb( - var(--spectrum-global-color-gray-50-rgb) - ); - --spectrum-global-color-gray-75-rgb: 253, 253, 253; - --spectrum-global-color-gray-75: rgb( - var(--spectrum-global-color-gray-75-rgb) - ); - --spectrum-global-color-gray-100-rgb: 248, 248, 248; - --spectrum-global-color-gray-100: rgb( - var(--spectrum-global-color-gray-100-rgb) - ); - --spectrum-global-color-gray-200-rgb: 230, 230, 230; - --spectrum-global-color-gray-200: rgb( - var(--spectrum-global-color-gray-200-rgb) - ); - --spectrum-global-color-gray-300-rgb: 213, 213, 213; - --spectrum-global-color-gray-300: rgb( - var(--spectrum-global-color-gray-300-rgb) - ); - --spectrum-global-color-gray-400-rgb: 177, 177, 177; - --spectrum-global-color-gray-400: rgb( - var(--spectrum-global-color-gray-400-rgb) - ); - --spectrum-global-color-gray-500-rgb: 144, 144, 144; - --spectrum-global-color-gray-500: rgb( - var(--spectrum-global-color-gray-500-rgb) - ); - --spectrum-global-color-gray-600-rgb: 109, 109, 109; - --spectrum-global-color-gray-600: rgb( - var(--spectrum-global-color-gray-600-rgb) - ); - --spectrum-global-color-gray-700-rgb: 70, 70, 70; - --spectrum-global-color-gray-700: rgb( - var(--spectrum-global-color-gray-700-rgb) - ); - --spectrum-global-color-gray-800-rgb: 34, 34, 34; - --spectrum-global-color-gray-800: rgb( - var(--spectrum-global-color-gray-800-rgb) - ); - --spectrum-global-color-gray-900-rgb: 0, 0, 0; - --spectrum-global-color-gray-900: rgb( - var(--spectrum-global-color-gray-900-rgb) - ); - --spectrum-alias-background-color-primary: var( - --spectrum-global-color-gray-50 - ); - --spectrum-alias-background-color-secondary: var( - --spectrum-global-color-gray-100 - ); - --spectrum-alias-background-color-tertiary: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-background-color-modal-overlay: #0006; - --spectrum-alias-dropshadow-color: #00000026; - --spectrum-alias-background-color-hover-overlay: #0000000a; - --spectrum-alias-highlight-hover: #0000000f; - --spectrum-alias-highlight-down: #0000001a; - --spectrum-alias-highlight-selected: #0265dc1a; - --spectrum-alias-highlight-selected-hover: #0265dc33; - --spectrum-alias-text-highlight-color: #0265dc33; - --spectrum-alias-background-color-quickactions: #f8f8f8e6; - --spectrum-alias-border-color-selected: var( - --spectrum-global-color-blue-500 - ); - --spectrum-alias-border-color-translucent: #0000001a; - --spectrum-alias-radial-reaction-color-default: #2229; - --spectrum-alias-pasteboard-background-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-border-color: var( - --spectrum-global-color-gray-300 - ); - --spectrum-alias-appframe-separator-color: var( - --spectrum-global-color-gray-300 - ); +:root, :host { + --spectrum-global-color-status: Verified; + --spectrum-global-color-version: 5.10; + --spectrum-global-color-opacity-100: 1; + --spectrum-global-color-opacity-90: .9; + --spectrum-global-color-opacity-80: .8; + --spectrum-global-color-opacity-70: .7; + --spectrum-global-color-opacity-60: .6; + --spectrum-global-color-opacity-55: .55; + --spectrum-global-color-opacity-50: .5; + --spectrum-global-color-opacity-42: .42; + --spectrum-global-color-opacity-40: .4; + --spectrum-global-color-opacity-30: .3; + --spectrum-global-color-opacity-25: .25; + --spectrum-global-color-opacity-20: .2; + --spectrum-global-color-opacity-15: .15; + --spectrum-global-color-opacity-10: .1; + --spectrum-global-color-opacity-8: .08; + --spectrum-global-color-opacity-7: .07; + --spectrum-global-color-opacity-6: .06; + --spectrum-global-color-opacity-5: .05; + --spectrum-global-color-opacity-4: .04; + --spectrum-global-color-opacity-0: 0; + --spectrum-global-color-celery-400-rgb: 39, 187, 54; + --spectrum-global-color-celery-400: rgb(var(--spectrum-global-color-celery-400-rgb)); + --spectrum-global-color-celery-500-rgb: 7, 167, 33; + --spectrum-global-color-celery-500: rgb(var(--spectrum-global-color-celery-500-rgb)); + --spectrum-global-color-celery-600-rgb: 0, 145, 18; + --spectrum-global-color-celery-600: rgb(var(--spectrum-global-color-celery-600-rgb)); + --spectrum-global-color-celery-700-rgb: 0, 124, 15; + --spectrum-global-color-celery-700: rgb(var(--spectrum-global-color-celery-700-rgb)); + --spectrum-global-color-chartreuse-400-rgb: 152, 197, 10; + --spectrum-global-color-chartreuse-400: rgb(var(--spectrum-global-color-chartreuse-400-rgb)); + --spectrum-global-color-chartreuse-500-rgb: 135, 177, 3; + --spectrum-global-color-chartreuse-500: rgb(var(--spectrum-global-color-chartreuse-500-rgb)); + --spectrum-global-color-chartreuse-600-rgb: 118, 156, 0; + --spectrum-global-color-chartreuse-600: rgb(var(--spectrum-global-color-chartreuse-600-rgb)); + --spectrum-global-color-chartreuse-700-rgb: 103, 136, 0; + --spectrum-global-color-chartreuse-700: rgb(var(--spectrum-global-color-chartreuse-700-rgb)); + --spectrum-global-color-yellow-400-rgb: 232, 198, 0; + --spectrum-global-color-yellow-400: rgb(var(--spectrum-global-color-yellow-400-rgb)); + --spectrum-global-color-yellow-500-rgb: 215, 179, 0; + --spectrum-global-color-yellow-500: rgb(var(--spectrum-global-color-yellow-500-rgb)); + --spectrum-global-color-yellow-600-rgb: 196, 159, 0; + --spectrum-global-color-yellow-600: rgb(var(--spectrum-global-color-yellow-600-rgb)); + --spectrum-global-color-yellow-700-rgb: 176, 140, 0; + --spectrum-global-color-yellow-700: rgb(var(--spectrum-global-color-yellow-700-rgb)); + --spectrum-global-color-magenta-400-rgb: 222, 61, 130; + --spectrum-global-color-magenta-400: rgb(var(--spectrum-global-color-magenta-400-rgb)); + --spectrum-global-color-magenta-500-rgb: 200, 34, 105; + --spectrum-global-color-magenta-500: rgb(var(--spectrum-global-color-magenta-500-rgb)); + --spectrum-global-color-magenta-600-rgb: 173, 9, 85; + --spectrum-global-color-magenta-600: rgb(var(--spectrum-global-color-magenta-600-rgb)); + --spectrum-global-color-magenta-700-rgb: 142, 0, 69; + --spectrum-global-color-magenta-700: rgb(var(--spectrum-global-color-magenta-700-rgb)); + --spectrum-global-color-fuchsia-400-rgb: 205, 58, 206; + --spectrum-global-color-fuchsia-400: rgb(var(--spectrum-global-color-fuchsia-400-rgb)); + --spectrum-global-color-fuchsia-500-rgb: 182, 34, 183; + --spectrum-global-color-fuchsia-500: rgb(var(--spectrum-global-color-fuchsia-500-rgb)); + --spectrum-global-color-fuchsia-600-rgb: 157, 3, 158; + --spectrum-global-color-fuchsia-600: rgb(var(--spectrum-global-color-fuchsia-600-rgb)); + --spectrum-global-color-fuchsia-700-rgb: 128, 0, 129; + --spectrum-global-color-fuchsia-700: rgb(var(--spectrum-global-color-fuchsia-700-rgb)); + --spectrum-global-color-purple-400-rgb: 157, 87, 244; + --spectrum-global-color-purple-400: rgb(var(--spectrum-global-color-purple-400-rgb)); + --spectrum-global-color-purple-500-rgb: 137, 61, 231; + --spectrum-global-color-purple-500: rgb(var(--spectrum-global-color-purple-500-rgb)); + --spectrum-global-color-purple-600-rgb: 115, 38, 211; + --spectrum-global-color-purple-600: rgb(var(--spectrum-global-color-purple-600-rgb)); + --spectrum-global-color-purple-700-rgb: 93, 19, 183; + --spectrum-global-color-purple-700: rgb(var(--spectrum-global-color-purple-700-rgb)); + --spectrum-global-color-indigo-400-rgb: 104, 109, 244; + --spectrum-global-color-indigo-400: rgb(var(--spectrum-global-color-indigo-400-rgb)); + --spectrum-global-color-indigo-500-rgb: 82, 88, 228; + --spectrum-global-color-indigo-500: rgb(var(--spectrum-global-color-indigo-500-rgb)); + --spectrum-global-color-indigo-600-rgb: 64, 70, 202; + --spectrum-global-color-indigo-600: rgb(var(--spectrum-global-color-indigo-600-rgb)); + --spectrum-global-color-indigo-700-rgb: 50, 54, 168; + --spectrum-global-color-indigo-700: rgb(var(--spectrum-global-color-indigo-700-rgb)); + --spectrum-global-color-seafoam-400-rgb: 0, 161, 154; + --spectrum-global-color-seafoam-400: rgb(var(--spectrum-global-color-seafoam-400-rgb)); + --spectrum-global-color-seafoam-500-rgb: 0, 140, 135; + --spectrum-global-color-seafoam-500: rgb(var(--spectrum-global-color-seafoam-500-rgb)); + --spectrum-global-color-seafoam-600-rgb: 0, 119, 114; + --spectrum-global-color-seafoam-600: rgb(var(--spectrum-global-color-seafoam-600-rgb)); + --spectrum-global-color-seafoam-700-rgb: 0, 99, 95; + --spectrum-global-color-seafoam-700: rgb(var(--spectrum-global-color-seafoam-700-rgb)); + --spectrum-global-color-red-400-rgb: 234, 56, 41; + --spectrum-global-color-red-400: rgb(var(--spectrum-global-color-red-400-rgb)); + --spectrum-global-color-red-500-rgb: 211, 21, 16; + --spectrum-global-color-red-500: rgb(var(--spectrum-global-color-red-500-rgb)); + --spectrum-global-color-red-600-rgb: 180, 0, 0; + --spectrum-global-color-red-600: rgb(var(--spectrum-global-color-red-600-rgb)); + --spectrum-global-color-red-700-rgb: 147, 0, 0; + --spectrum-global-color-red-700: rgb(var(--spectrum-global-color-red-700-rgb)); + --spectrum-global-color-orange-400-rgb: 246, 133, 17; + --spectrum-global-color-orange-400: rgb(var(--spectrum-global-color-orange-400-rgb)); + --spectrum-global-color-orange-500-rgb: 228, 111, 0; + --spectrum-global-color-orange-500: rgb(var(--spectrum-global-color-orange-500-rgb)); + --spectrum-global-color-orange-600-rgb: 203, 93, 0; + --spectrum-global-color-orange-600: rgb(var(--spectrum-global-color-orange-600-rgb)); + --spectrum-global-color-orange-700-rgb: 177, 76, 0; + --spectrum-global-color-orange-700: rgb(var(--spectrum-global-color-orange-700-rgb)); + --spectrum-global-color-green-400-rgb: 0, 143, 93; + --spectrum-global-color-green-400: rgb(var(--spectrum-global-color-green-400-rgb)); + --spectrum-global-color-green-500-rgb: 0, 122, 77; + --spectrum-global-color-green-500: rgb(var(--spectrum-global-color-green-500-rgb)); + --spectrum-global-color-green-600-rgb: 0, 101, 62; + --spectrum-global-color-green-600: rgb(var(--spectrum-global-color-green-600-rgb)); + --spectrum-global-color-green-700-rgb: 0, 81, 50; + --spectrum-global-color-green-700: rgb(var(--spectrum-global-color-green-700-rgb)); + --spectrum-global-color-blue-400-rgb: 20, 122, 243; + --spectrum-global-color-blue-400: rgb(var(--spectrum-global-color-blue-400-rgb)); + --spectrum-global-color-blue-500-rgb: 2, 101, 220; + --spectrum-global-color-blue-500: rgb(var(--spectrum-global-color-blue-500-rgb)); + --spectrum-global-color-blue-600-rgb: 0, 84, 182; + --spectrum-global-color-blue-600: rgb(var(--spectrum-global-color-blue-600-rgb)); + --spectrum-global-color-blue-700-rgb: 0, 68, 145; + --spectrum-global-color-blue-700: rgb(var(--spectrum-global-color-blue-700-rgb)); + --spectrum-global-color-gray-50-rgb: 255, 255, 255; + --spectrum-global-color-gray-50: rgb(var(--spectrum-global-color-gray-50-rgb)); + --spectrum-global-color-gray-75-rgb: 253, 253, 253; + --spectrum-global-color-gray-75: rgb(var(--spectrum-global-color-gray-75-rgb)); + --spectrum-global-color-gray-100-rgb: 248, 248, 248; + --spectrum-global-color-gray-100: rgb(var(--spectrum-global-color-gray-100-rgb)); + --spectrum-global-color-gray-200-rgb: 230, 230, 230; + --spectrum-global-color-gray-200: rgb(var(--spectrum-global-color-gray-200-rgb)); + --spectrum-global-color-gray-300-rgb: 213, 213, 213; + --spectrum-global-color-gray-300: rgb(var(--spectrum-global-color-gray-300-rgb)); + --spectrum-global-color-gray-400-rgb: 177, 177, 177; + --spectrum-global-color-gray-400: rgb(var(--spectrum-global-color-gray-400-rgb)); + --spectrum-global-color-gray-500-rgb: 144, 144, 144; + --spectrum-global-color-gray-500: rgb(var(--spectrum-global-color-gray-500-rgb)); + --spectrum-global-color-gray-600-rgb: 109, 109, 109; + --spectrum-global-color-gray-600: rgb(var(--spectrum-global-color-gray-600-rgb)); + --spectrum-global-color-gray-700-rgb: 70, 70, 70; + --spectrum-global-color-gray-700: rgb(var(--spectrum-global-color-gray-700-rgb)); + --spectrum-global-color-gray-800-rgb: 34, 34, 34; + --spectrum-global-color-gray-800: rgb(var(--spectrum-global-color-gray-800-rgb)); + --spectrum-global-color-gray-900-rgb: 0, 0, 0; + --spectrum-global-color-gray-900: rgb(var(--spectrum-global-color-gray-900-rgb)); + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50); + --spectrum-alias-background-color-secondary: var(--spectrum-global-color-gray-100); + --spectrum-alias-background-color-tertiary: var(--spectrum-global-color-gray-300); + --spectrum-alias-background-color-modal-overlay: #0006; + --spectrum-alias-dropshadow-color: #00000026; + --spectrum-alias-background-color-hover-overlay: #0000000a; + --spectrum-alias-highlight-hover: #0000000f; + --spectrum-alias-highlight-down: #0000001a; + --spectrum-alias-highlight-selected: #0265dc1a; + --spectrum-alias-highlight-selected-hover: #0265dc33; + --spectrum-alias-text-highlight-color: #0265dc33; + --spectrum-alias-background-color-quickactions: #f8f8f8e6; + --spectrum-alias-border-color-selected: var(--spectrum-global-color-blue-500); + --spectrum-alias-border-color-translucent: #0000001a; + --spectrum-alias-radial-reaction-color-default: #2229; + --spectrum-alias-pasteboard-background-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-300); + --spectrum-alias-appframe-separator-color: var(--spectrum-global-color-gray-300); } diff --git a/tools/styles/src/body-overrides.css b/tools/styles/src/body-overrides.css index 875493cd52..fc9e9714e4 100644 --- a/tools/styles/src/body-overrides.css +++ b/tools/styles/src/body-overrides.css @@ -1,51 +1,50 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var(--system-body-sans-serif-font-family); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } + diff --git a/tools/styles/src/code-overrides.css b/tools/styles/src/code-overrides.css index 5076d488c6..5bbee53691 100644 --- a/tools/styles/src/code-overrides.css +++ b/tools/styles/src/code-overrides.css @@ -1,39 +1,40 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } + diff --git a/tools/styles/src/detail-overrides.css b/tools/styles/src/detail-overrides.css index 480fe6d0ce..0c4ae42bf4 100644 --- a/tools/styles/src/detail-overrides.css +++ b/tools/styles/src/detail-overrides.css @@ -1,38 +1,37 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var(--system-detail-sans-serif-font-family); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } + diff --git a/tools/styles/src/heading-overrides.css b/tools/styles/src/heading-overrides.css index 55b1329b6d..91b28a3777 100644 --- a/tools/styles/src/heading-overrides.css +++ b/tools/styles/src/heading-overrides.css @@ -1,84 +1,63 @@ -/* - Copyright 2023 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. - */ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var(--system-heading-sans-serif-font-family); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var(--system-heading-cjk-letter-spacing); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxs-cjk-font-size); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxl-cjk-font-size); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxxl-cjk-font-size); } + diff --git a/tools/styles/src/spectrum-body.css b/tools/styles/src/spectrum-body.css index 3b75f4b56c..71f3ec1e8f 100644 --- a/tools/styles/src/spectrum-body.css +++ b/tools/styles/src/spectrum-body.css @@ -1,242 +1,103 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); } @media (forced-colors: active) { - .spectrum-Body { - --highcontrast-body-font-color: Text; - } + .spectrum-Body { + --highcontrast-body-font-color: Text; + } } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); -} - -.spectrum-Body .spectrum-Body-strong, -.spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-emphasized, -.spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body em strong, -.spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja), -.spectrum-Body:lang(ko), -.spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong, -.spectrum-Body:lang(ja) strong, -.spectrum-Body:lang(ko) .spectrum-Body-strong, -.spectrum-Body:lang(ko) strong, -.spectrum-Body:lang(zh) .spectrum-Body-strong, -.spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em, -.spectrum-Body:lang(ko) .spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em, -.spectrum-Body:lang(zh) .spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em strong, -.spectrum-Body:lang(ja) strong em, -.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em strong, -.spectrum-Body:lang(ko) strong em, -.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em strong, -.spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); + font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); + font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, var(--spectrum-body-margin-start, 0))); + margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); +} + +.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { + font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); + font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); +} + +.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { + font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); +} + +.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { + font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { + font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); + font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); + font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { + font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); + font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { + font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); + font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { + font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong, -.spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-emphasized, -.spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body--serif em strong, -.spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); + font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); + font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); +} + +.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { + font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); + font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { + font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); + font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { + font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); } .spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); } + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized { + font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); +} + diff --git a/tools/styles/src/spectrum-code.css b/tools/styles/src/spectrum-code.css index a628316dbc..adc9fba563 100644 --- a/tools/styles/src/spectrum-code.css +++ b/tools/styles/src/spectrum-code.css @@ -1,151 +1,68 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ @media (forced-colors: active) { - .spectrum-Code { - --highcontrast-code-font-color: Text; - } + .spectrum-Code { + --highcontrast-code-font-color: Text; + } } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + margin-block-start: var(--mod-code-margin-start, var(--spectrum-code-margin-end, 0)); + margin-block-end: var(--mod-code-margin-end, var(--spectrum-code-margin-end, 0)); } -.spectrum-Code .spectrum-Code-strong, -.spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); +.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { + font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); + font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); } -.spectrum-Code .spectrum-Code-emphasized, -.spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); +.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { + font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); + font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); } -.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code em strong, -.spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); +.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { + font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); + font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); } -.spectrum-Code:lang(ja), -.spectrum-Code:lang(ko), -.spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); +.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { + font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); + font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); + font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); + letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); } -.spectrum-Code:lang(ja) .spectrum-Code-strong, -.spectrum-Code:lang(ja) strong, -.spectrum-Code:lang(ko) .spectrum-Code-strong, -.spectrum-Code:lang(ko) strong, -.spectrum-Code:lang(zh) .spectrum-Code-strong, -.spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { + font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); + font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); } -.spectrum-Code:lang(ja) .spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em, -.spectrum-Code:lang(ko) .spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em, -.spectrum-Code:lang(zh) .spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { + font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); + font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); } -.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em strong, -.spectrum-Code:lang(ja) strong em, -.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em strong, -.spectrum-Code:lang(ko) strong em, -.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em strong, -.spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { + font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); } + diff --git a/tools/styles/src/spectrum-detail.css b/tools/styles/src/spectrum-detail.css index 17d6726a3d..2140aa2c46 100644 --- a/tools/styles/src/spectrum-detail.css +++ b/tools/styles/src/spectrum-detail.css @@ -1,385 +1,155 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); } @media (forced-colors: active) { - .spectrum-Detail { - --highcontrast-detail-font-color: Text; - } + .spectrum-Detail { + --highcontrast-detail-font-color: Text; + } } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); + font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); + font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); + font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); + letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); + text-transform: uppercase; + margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); + margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); } -.spectrum-Detail .spectrum-Detail-strong, -.spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); +.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { + font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); } -.spectrum-Detail .spectrum-Detail-emphasized, -.spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); +.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { + font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); } -.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail em strong, -.spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); +.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { + font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); } -.spectrum-Detail:lang(ja), -.spectrum-Detail:lang(ko), -.spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); +.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { + font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); + font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); + font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail:lang(ja) strong, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail:lang(ko) strong, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { + font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); + font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em, -.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em, -.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { + font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em strong, -.spectrum-Detail:lang(ja) strong em, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em strong, -.spectrum-Detail:lang(ko) strong em, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em strong, -.spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { + font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); + font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); + font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); + font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); } -.spectrum-Detail--serif .spectrum-Detail-strong, -.spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); +.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { + font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); + font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); } -.spectrum-Detail--serif .spectrum-Detail-emphasized, -.spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); +.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { + font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); + font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); } -.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--serif em strong, -.spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); +.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { + font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); + font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); + font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); } -.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); +.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { + font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); } -.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); +.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { + font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); } -.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--light em strong, -.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); +.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { + font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); } -.spectrum-Detail--light:lang(ja), -.spectrum-Detail--light:lang(ko), -.spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); +.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { + font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); + font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); } -.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ja) strong, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ko) strong, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { + font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); } -.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ja) em, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) em, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { + font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); } -.spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); + font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); + font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); } -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { + font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); + font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); } -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { + font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); } -.spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em strong, -.spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { + font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); } + diff --git a/tools/styles/src/spectrum-heading.css b/tools/styles/src/spectrum-heading.css index e7d20131d7..a8bec99ce3 100644 --- a/tools/styles/src/spectrum-heading.css +++ b/tools/styles/src/spectrum-heading.css @@ -1,558 +1,215 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); } @media (forced-colors: active) { - .spectrum-Heading { - --highcontrast-heading-font-color: Text; - } + .spectrum-Heading { + --highcontrast-heading-font-color: Text; + } } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); -} - -.spectrum-Heading .spectrum-Heading-strong, -.spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-emphasized, -.spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading em strong, -.spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja), -.spectrum-Heading:lang(ko), -.spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em, -.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em, -.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading:lang(ja) strong, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading:lang(ko) strong, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em strong, -.spectrum-Heading:lang(ja) strong em, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em strong, -.spectrum-Heading:lang(ko) strong em, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em strong, -.spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); + font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); + font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); + line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); + margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); + margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); +} + +.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { + font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { + font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { + font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { + font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); + font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); + font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); + font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); + letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { + font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { + font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); + font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { + font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy em strong, -.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja), -.spectrum-Heading--heavy:lang(ko), -.spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ja) strong, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ko) strong, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em strong, -.spectrum-Heading--heavy:lang(ja) strong em, -.spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em strong, -.spectrum-Heading--heavy:lang(ko) strong em, -.spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em strong, -.spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { + font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { + font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { + font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); + font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { + font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { + font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { + font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light em strong, -.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja), -.spectrum-Heading--light:lang(ko), -.spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ja) strong, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ko) strong, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em strong, -.spectrum-Heading--light:lang(ja) strong em, -.spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em strong, -.spectrum-Heading--light:lang(ko) strong em, -.spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em strong, -.spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); + font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { + font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { + font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { + font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { + font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); + font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { + font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { + font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { + font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-emphasized, -.spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong, -.spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif em strong, -.spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); + font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); + font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { + font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); + font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { + font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); + font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { + font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); + font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { + font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { + font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em strong, -.spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); + font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); } + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { + font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { + font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); + font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { + font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); +} + diff --git a/tools/styles/src/spectrum-lang.css b/tools/styles/src/spectrum-lang.css index 15535783fc..1eb970cb21 100644 --- a/tools/styles/src/spectrum-lang.css +++ b/tools/styles/src/spectrum-lang.css @@ -1,519 +1,173 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } -.spectrum-Heading:lang(ja), -.spectrum-Heading:lang(ko), -.spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); +.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { + font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); + font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); + font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); + font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); + letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); } -.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em, -.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em, -.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); +.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { + font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); } -.spectrum-Heading:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading:lang(ja) strong, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading:lang(ko) strong, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); +.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { + font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); + font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); } -.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em strong, -.spectrum-Heading:lang(ja) strong em, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em strong, -.spectrum-Heading:lang(ko) strong em, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em strong, -.spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); +.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { + font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); } -.spectrum-Heading--heavy:lang(ja), -.spectrum-Heading--heavy:lang(ko), -.spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); +.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { + font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); + font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); } -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { + font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); } -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ja) strong, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ko) strong, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { + font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); } -.spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em strong, -.spectrum-Heading--heavy:lang(ja) strong em, -.spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em strong, -.spectrum-Heading--heavy:lang(ko) strong em, -.spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em strong, -.spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { + font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); } -.spectrum-Heading--light:lang(ja), -.spectrum-Heading--light:lang(ko), -.spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); +.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { + font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); + font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); } -.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ja) strong, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ko) strong, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { + font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); } -.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); +.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { + font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); } -.spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em strong, -.spectrum-Heading--light:lang(ja) strong em, -.spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em strong, -.spectrum-Heading--light:lang(ko) strong em, -.spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em strong, -.spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { + font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); } -.spectrum-Body:lang(ja), -.spectrum-Body:lang(ko), -.spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); +.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { + font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); + font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); + font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); } -.spectrum-Body:lang(ja) .spectrum-Body-strong, -.spectrum-Body:lang(ja) strong, -.spectrum-Body:lang(ko) .spectrum-Body-strong, -.spectrum-Body:lang(ko) strong, -.spectrum-Body:lang(zh) .spectrum-Body-strong, -.spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); +.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { + font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); + font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); } -.spectrum-Body:lang(ja) .spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em, -.spectrum-Body:lang(ko) .spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em, -.spectrum-Body:lang(zh) .spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); +.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { + font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); + font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); } -.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em strong, -.spectrum-Body:lang(ja) strong em, -.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em strong, -.spectrum-Body:lang(ko) strong em, -.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em strong, -.spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); +.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { + font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); } -.spectrum-Detail:lang(ja), -.spectrum-Detail:lang(ko), -.spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); +.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { + font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); + font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); + font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail:lang(ja) strong, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail:lang(ko) strong, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { + font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); + font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em, -.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em, -.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { + font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); } -.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em strong, -.spectrum-Detail:lang(ja) strong em, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em strong, -.spectrum-Detail:lang(ko) strong em, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em strong, -.spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); +.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { + font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); } -.spectrum-Detail--light:lang(ja), -.spectrum-Detail--light:lang(ko), -.spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); +.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { + font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); + font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); } -.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ja) strong, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ko) strong, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { + font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); } -.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ja) em, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) em, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { + font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); } -.spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); } -.spectrum-Code:lang(ja), -.spectrum-Code:lang(ko), -.spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); +.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { + font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); + font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); + font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); + letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); } -.spectrum-Code:lang(ja) .spectrum-Code-strong, -.spectrum-Code:lang(ja) strong, -.spectrum-Code:lang(ko) .spectrum-Code-strong, -.spectrum-Code:lang(ko) strong, -.spectrum-Code:lang(zh) .spectrum-Code-strong, -.spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { + font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); + font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); } -.spectrum-Code:lang(ja) .spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em, -.spectrum-Code:lang(ko) .spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em, -.spectrum-Code:lang(zh) .spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { + font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); + font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); } -.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em strong, -.spectrum-Code:lang(ja) strong em, -.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em strong, -.spectrum-Code:lang(ko) strong em, -.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em strong, -.spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); +.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { + font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); } + diff --git a/tools/styles/src/spectrum-typography.css b/tools/styles/src/spectrum-typography.css index 7e3e87e1f5..4cc71d744b 100644 --- a/tools/styles/src/spectrum-typography.css +++ b/tools/styles/src/spectrum-typography.css @@ -1,55 +1,41 @@ -/* -Copyright 2023 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. -*/ +/*! + * 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. + */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); } + diff --git a/tools/styles/tokens/express/custom-large-vars.css b/tools/styles/tokens/express/custom-large-vars.css index 8b60059274..39100b376f 100644 --- a/tools/styles/tokens/express/custom-large-vars.css +++ b/tools/styles/tokens/express/custom-large-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in express/large-vars.css */ :host, :root { diff --git a/tools/styles/tokens/express/custom-medium-vars.css b/tools/styles/tokens/express/custom-medium-vars.css index 603bec8895..e1a94a78e5 100644 --- a/tools/styles/tokens/express/custom-medium-vars.css +++ b/tools/styles/tokens/express/custom-medium-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in express/medium-vars.css */ :host, :root { diff --git a/tools/styles/tokens/express/custom-vars.css b/tools/styles/tokens/express/custom-vars.css index 6498e011d1..58b89d2c21 100644 --- a/tools/styles/tokens/express/custom-vars.css +++ b/tools/styles/tokens/express/custom-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in express/global-vars.css */ :host, :root { diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index ce67a1b262..3aea8224a8 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in spectrum/large-vars.css */ :host, :root { diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 1a4d3b8bea..b2bc24f542 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in spectrum/medium-vars.css */ :host, :root { diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 78ef5e021f..27bce3e5d6 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -1,3 +1,16 @@ +/*! + * Copyright 2023 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 + * + * 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. + */ + /* @deprecated these assets should not be used; the custom override values exist in spectrum/global-vars.css */ :host, :root { diff --git a/tools/styles/typography.css b/tools/styles/typography.css index ef47aa872e..c479bf8921 100644 --- a/tools/styles/typography.css +++ b/tools/styles/typography.css @@ -1,1418 +1,606 @@ .spectrum-Typography { - font-family: var(--spectrum-font-family); - font-style: var(--spectrum-font-style); - font-size: var(--spectrum-font-size); + font-family: var(--spectrum-font-family); + font-style: var(--spectrum-font-style); + font-size: var(--spectrum-font-size); } .spectrum-Typography:lang(ar) { - font-family: var(--spectrum-font-family-ar); + font-family: var(--spectrum-font-family-ar); } .spectrum-Typography:lang(he) { - font-family: var(--spectrum-font-family-he); + font-family: var(--spectrum-font-family-he); } .spectrum-Typography .spectrum-Heading { - --spectrum-heading-margin-start: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-top-multiplier) - ); - --spectrum-heading-margin-end: calc( - var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * - var(--spectrum-heading-margin-bottom-multiplier) - ); + --spectrum-heading-margin-start: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier)); + --spectrum-heading-margin-end: calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier)); } .spectrum-Typography .spectrum-Body { - --spectrum-body-margin-end: calc( - var(--mod-body-font-size, var(--spectrum-body-font-size)) * - var(--spectrum-body-margin-multiplier) - ); + --spectrum-body-margin-end: calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier)); } .spectrum-Typography .spectrum-Detail { - --spectrum-detail-margin-start: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-top-multiplier) - ); - --spectrum-detail-margin-end: calc( - var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * - var(--spectrum-detail-margin-bottom-multiplier) - ); + --spectrum-detail-margin-start: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier)); + --spectrum-detail-margin-end: calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier)); } .spectrum-Heading { - font-family: var( - --mod-heading-sans-serif-font-family, - var(--spectrum-heading-sans-serif-font-family) - ); - font-style: var( - --mod-heading-sans-serif-font-style, - var(--spectrum-heading-sans-serif-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-font-weight, - var(--spectrum-heading-sans-serif-font-weight) - ); - font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); - color: var( - --highcontrast-heading-font-color, - var(--mod-heading-font-color, var(--spectrum-heading-font-color)) - ); - line-height: var( - --mod-heading-line-height, - var(--spectrum-heading-line-height) - ); - margin-block-start: var( - --mod-heading-margin-start, - var(--spectrum-heading-margin-start, 0) - ); - margin-block-end: var( - --mod-heading-margin-end, - var(--spectrum-heading-margin-end, 0) - ); -} - -.spectrum-Heading .spectrum-Heading-strong, -.spectrum-Heading strong { - font-style: var( - --mod-heading-sans-serif-strong-font-style, - var(--spectrum-heading-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-font-weight, - var(--spectrum-heading-sans-serif-strong-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-emphasized, -.spectrum-Heading em { - font-style: var( - --mod-heading-sans-serif-emphasized-font-style, - var(--spectrum-heading-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-emphasized-font-weight, - var(--spectrum-heading-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading em strong, -.spectrum-Heading strong em { - font-style: var( - --mod-heading-sans-serif-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja), -.spectrum-Heading:lang(ko), -.spectrum-Heading:lang(zh) { - font-family: var( - --mod-heading-cjk-font-family, - var(--spectrum-heading-cjk-font-family) - ); - font-style: var( - --mod-heading-cjk-font-style, - var(--spectrum-heading-cjk-font-style) - ); - font-weight: var( - --mod-heading-cjk-font-weight, - var(--spectrum-heading-cjk-font-weight) - ); - font-size: var( - --mod-heading-cjk-font-size, - var(--spectrum-heading-cjk-font-size) - ); - line-height: var( - --mod-heading-cjk-line-height, - var(--spectrum-heading-cjk-line-height) - ); - letter-spacing: var( - --mod-heading-cjk-letter-spacing, - var(--spectrum-heading-cjk-letter-spacing) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em, -.spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em, -.spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em { - font-style: var( - --mod-heading-cjk-emphasized-font-style, - var(--spectrum-heading-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-emphasized-font-weight, - var(--spectrum-heading-cjk-emphasized-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading:lang(ja) strong, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading:lang(ko) strong, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading:lang(zh) strong { - font-style: var( - --mod-heading-cjk-strong-font-style, - var(--spectrum-heading-cjk-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-font-weight, - var(--spectrum-heading-cjk-strong-font-weight) - ); -} - -.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ja) em strong, -.spectrum-Heading:lang(ja) strong em, -.spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(ko) em strong, -.spectrum-Heading:lang(ko) strong em, -.spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading:lang(zh) em strong, -.spectrum-Heading:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-strong-emphasized-font-style, - var(--spectrum-heading-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family)); + font-style: var(--mod-heading-sans-serif-font-style, var(--spectrum-heading-sans-serif-font-style)); + font-weight: var(--mod-heading-sans-serif-font-weight, var(--spectrum-heading-sans-serif-font-weight)); + font-size: var(--mod-heading-font-size, var(--spectrum-heading-font-size)); + color: var(--highcontrast-heading-font-color, var(--mod-heading-font-color, var(--spectrum-heading-font-color))); + line-height: var(--mod-heading-line-height, var(--spectrum-heading-line-height)); + margin-block-start: var(--mod-heading-margin-start, var(--spectrum-heading-margin-start, 0)); + margin-block-end: var(--mod-heading-margin-end, var(--spectrum-heading-margin-end, 0)); +} + +.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong { + font-style: var(--mod-heading-sans-serif-strong-font-style, var(--spectrum-heading-sans-serif-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-font-weight, var(--spectrum-heading-sans-serif-strong-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em { + font-style: var(--mod-heading-sans-serif-emphasized-font-style, var(--spectrum-heading-sans-serif-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-emphasized-font-weight, var(--spectrum-heading-sans-serif-emphasized-font-weight)); +} + +.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em { + font-style: var(--mod-heading-sans-serif-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh) { + font-family: var(--mod-heading-cjk-font-family, var(--spectrum-heading-cjk-font-family)); + font-style: var(--mod-heading-cjk-font-style, var(--spectrum-heading-cjk-font-style)); + font-weight: var(--mod-heading-cjk-font-weight, var(--spectrum-heading-cjk-font-weight)); + font-size: var(--mod-heading-cjk-font-size, var(--spectrum-heading-cjk-font-size)); + line-height: var(--mod-heading-cjk-line-height, var(--spectrum-heading-cjk-line-height)); + letter-spacing: var(--mod-heading-cjk-letter-spacing, var(--spectrum-heading-cjk-letter-spacing)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em { + font-style: var(--mod-heading-cjk-emphasized-font-style, var(--spectrum-heading-cjk-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-emphasized-font-weight, var(--spectrum-heading-cjk-emphasized-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong { + font-style: var(--mod-heading-cjk-strong-font-style, var(--spectrum-heading-cjk-strong-font-style)); + font-weight: var(--mod-heading-cjk-strong-font-weight, var(--spectrum-heading-cjk-strong-font-weight)); +} + +.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em { + font-style: var(--mod-heading-cjk-strong-emphasized-font-style, var(--spectrum-heading-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-strong-emphasized-font-weight, var(--spectrum-heading-cjk-strong-emphasized-font-weight)); } .spectrum-Heading--heavy { - font-style: var( - --mod-heading-sans-serif-heavy-font-style, - var(--spectrum-heading-sans-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-font-weight, - var(--spectrum-heading-sans-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-sans-serif-heavy-strong-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-sans-serif-heavy-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy em strong, -.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja), -.spectrum-Heading--heavy:lang(ko), -.spectrum-Heading--heavy:lang(zh) { - font-style: var( - --mod-heading-cjk-heavy-font-style, - var(--spectrum-heading-cjk-heavy-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-font-weight, - var(--spectrum-heading-cjk-heavy-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em { - font-style: var( - --mod-heading-cjk-heavy-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ja) strong, -.spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(ko) strong, -.spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--heavy:lang(zh) strong { - font-style: var( - --mod-heading-cjk-heavy-strong-font-style, - var(--spectrum-heading-cjk-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-font-weight, - var(--spectrum-heading-cjk-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--heavy:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ja) em strong, -.spectrum-Heading--heavy:lang(ja) strong em, -.spectrum-Heading--heavy:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(ko) em strong, -.spectrum-Heading--heavy:lang(ko) strong em, -.spectrum-Heading--heavy:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--heavy:lang(zh) em strong, -.spectrum-Heading--heavy:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-heavy-strong-emphasized-font-style, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-heavy-font-style, var(--spectrum-heading-sans-serif-heavy-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-font-weight, var(--spectrum-heading-sans-serif-heavy-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong { + font-style: var(--mod-heading-sans-serif-heavy-strong-font-style, var(--spectrum-heading-sans-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em { + font-style: var(--mod-heading-sans-serif-heavy-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh) { + font-style: var(--mod-heading-cjk-heavy-font-style, var(--spectrum-heading-cjk-heavy-font-style)); + font-weight: var(--mod-heading-cjk-heavy-font-weight, var(--spectrum-heading-cjk-heavy-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em { + font-style: var(--mod-heading-cjk-heavy-emphasized-font-style, var(--spectrum-heading-cjk-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong { + font-style: var(--mod-heading-cjk-heavy-strong-font-style, var(--spectrum-heading-cjk-heavy-strong-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-font-weight, var(--spectrum-heading-cjk-heavy-strong-font-weight)); +} + +.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em { + font-style: var(--mod-heading-cjk-heavy-strong-emphasized-font-style, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-heavy-strong-emphasized-font-weight, var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--light { - font-style: var( - --mod-heading-sans-serif-light-font-style, - var(--spectrum-heading-sans-serif-light-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-font-weight, - var(--spectrum-heading-sans-serif-light-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--light em { - font-style: var( - --mod-heading-sans-serif-light-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--light strong { - font-style: var( - --mod-heading-sans-serif-light-strong-font-style, - var(--spectrum-heading-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-font-weight, - var(--spectrum-heading-sans-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light em strong, -.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja), -.spectrum-Heading--light:lang(ko), -.spectrum-Heading--light:lang(zh) { - font-style: var( - --mod-heading-cjk-light-font-style, - var(--spectrum-heading-cjk-light-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-font-weight, - var(--spectrum-heading-cjk-light-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ja) strong, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(ko) strong, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, -.spectrum-Heading--light:lang(zh) strong { - font-style: var( - --mod-heading-cjk-light-strong-font-style, - var(--spectrum-heading-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-font-weight, - var(--spectrum-heading-cjk-light-strong-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em, -.spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em, -.spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em { - font-style: var( - --mod-heading-cjk-light-emphasized-font-style, - var(--spectrum-heading-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-emphasized-font-weight, - var(--spectrum-heading-cjk-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--light:lang(ja) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ja) em strong, -.spectrum-Heading--light:lang(ja) strong em, -.spectrum-Heading--light:lang(ko) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(ko) em strong, -.spectrum-Heading--light:lang(ko) strong em, -.spectrum-Heading--light:lang(zh) - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--light:lang(zh) em strong, -.spectrum-Heading--light:lang(zh) strong em { - font-style: var( - --mod-heading-cjk-light-strong-emphasized-font-style, - var(--spectrum-heading-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-cjk-light-strong-emphasized-font-weight, - var(--spectrum-heading-cjk-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-sans-serif-light-font-style, var(--spectrum-heading-sans-serif-light-font-style)); + font-weight: var(--mod-heading-sans-serif-light-font-weight, var(--spectrum-heading-sans-serif-light-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em { + font-style: var(--mod-heading-sans-serif-light-emphasized-font-style, var(--spectrum-heading-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong { + font-style: var(--mod-heading-sans-serif-light-strong-font-style, var(--spectrum-heading-sans-serif-light-strong-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-font-weight, var(--spectrum-heading-sans-serif-light-strong-font-weight)); +} + +.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em { + font-style: var(--mod-heading-sans-serif-light-strong-emphasized-font-style, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh) { + font-style: var(--mod-heading-cjk-light-font-style, var(--spectrum-heading-cjk-light-font-style)); + font-weight: var(--mod-heading-cjk-light-font-weight, var(--spectrum-heading-cjk-light-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong { + font-style: var(--mod-heading-cjk-light-strong-font-style, var(--spectrum-heading-cjk-light-strong-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-font-weight, var(--spectrum-heading-cjk-light-strong-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em { + font-style: var(--mod-heading-cjk-light-emphasized-font-style, var(--spectrum-heading-cjk-light-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-emphasized-font-weight, var(--spectrum-heading-cjk-light-emphasized-font-weight)); +} + +.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em { + font-style: var(--mod-heading-cjk-light-strong-emphasized-font-style, var(--spectrum-heading-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-cjk-light-strong-emphasized-font-weight, var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)); } .spectrum-Heading--serif { - font-family: var( - --mod-heading-serif-font-family, - var(--spectrum-heading-serif-font-family) - ); - font-style: var( - --mod-heading-serif-font-style, - var(--spectrum-heading-serif-font-style) - ); - font-weight: var( - --mod-heading-serif-font-weight, - var(--spectrum-heading-serif-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-emphasized, -.spectrum-Heading--serif em { - font-style: var( - --mod-heading-serif-emphasized-font-style, - var(--spectrum-heading-serif-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-emphasized-font-weight, - var(--spectrum-heading-serif-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong, -.spectrum-Heading--serif strong { - font-style: var( - --mod-heading-serif-strong-font-style, - var(--spectrum-heading-serif-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-font-weight, - var(--spectrum-heading-serif-strong-font-weight) - ); -} - -.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif em strong, -.spectrum-Heading--serif strong em { - font-style: var( - --mod-heading-serif-strong-emphasized-font-style, - var(--spectrum-heading-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-strong-emphasized-font-weight, - var(--spectrum-heading-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-heading-serif-font-family, var(--spectrum-heading-serif-font-family)); + font-style: var(--mod-heading-serif-font-style, var(--spectrum-heading-serif-font-style)); + font-weight: var(--mod-heading-serif-font-weight, var(--spectrum-heading-serif-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em { + font-style: var(--mod-heading-serif-emphasized-font-style, var(--spectrum-heading-serif-emphasized-font-style)); + font-weight: var(--mod-heading-serif-emphasized-font-weight, var(--spectrum-heading-serif-emphasized-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong { + font-style: var(--mod-heading-serif-strong-font-style, var(--spectrum-heading-serif-strong-font-style)); + font-weight: var(--mod-heading-serif-strong-font-weight, var(--spectrum-heading-serif-strong-font-weight)); +} + +.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em { + font-style: var(--mod-heading-serif-strong-emphasized-font-style, var(--spectrum-heading-serif-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-strong-emphasized-font-weight, var(--spectrum-heading-serif-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--heavy { - font-style: var( - --mod-heading-serif-heavy-font-style, - var(--spectrum-heading-serif-heavy-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-font-weight, - var(--spectrum-heading-serif-heavy-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong { - font-style: var( - --mod-heading-serif-heavy-strong-font-style, - var(--spectrum-heading-serif-heavy-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-font-weight, - var(--spectrum-heading-serif-heavy-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em { - font-style: var( - --mod-heading-serif-heavy-emphasized-font-style, - var(--spectrum-heading-serif-heavy-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--heavy - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--heavy em strong, -.spectrum-Heading--serif.spectrum-Heading--heavy strong em { - font-style: var( - --mod-heading-serif-heavy-strong-emphasized-font-style, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-heavy-strong-emphasized-font-weight, - var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-heavy-font-style, var(--spectrum-heading-serif-heavy-font-style)); + font-weight: var(--mod-heading-serif-heavy-font-weight, var(--spectrum-heading-serif-heavy-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong { + font-style: var(--mod-heading-serif-heavy-strong-font-style, var(--spectrum-heading-serif-heavy-strong-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-font-weight, var(--spectrum-heading-serif-heavy-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em { + font-style: var(--mod-heading-serif-heavy-emphasized-font-style, var(--spectrum-heading-serif-heavy-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-emphasized-font-weight, var(--spectrum-heading-serif-heavy-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em { + font-style: var(--mod-heading-serif-heavy-strong-emphasized-font-style, var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-heavy-strong-emphasized-font-weight, var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)); } .spectrum-Heading--serif.spectrum-Heading--light { - font-style: var( - --mod-heading-serif-light-font-style, - var(--spectrum-heading-serif-light-font-style) - ); - font-weight: var( - --mod-heading-serif-light-font-weight, - var(--spectrum-heading-serif-light-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em { - font-style: var( - --mod-heading-serif-light-emphasized-font-style, - var(--spectrum-heading-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-emphasized-font-weight, - var(--spectrum-heading-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, -.spectrum-Heading--serif.spectrum-Heading--light strong { - font-style: var( - --mod-heading-serif-light-strong-font-style, - var(--spectrum-heading-serif-light-strong-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-font-weight, - var(--spectrum-heading-serif-light-strong-font-weight) - ); -} - -.spectrum-Heading--serif.spectrum-Heading--light - .spectrum-Heading-strong.spectrum-Heading-emphasized, -.spectrum-Heading--serif.spectrum-Heading--light em strong, -.spectrum-Heading--serif.spectrum-Heading--light strong em { - font-style: var( - --mod-heading-serif-light-strong-emphasized-font-style, - var(--spectrum-heading-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-heading-serif-light-strong-emphasized-font-weight, - var(--spectrum-heading-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-heading-serif-light-font-style, var(--spectrum-heading-serif-light-font-style)); + font-weight: var(--mod-heading-serif-light-font-weight, var(--spectrum-heading-serif-light-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em { + font-style: var(--mod-heading-serif-light-emphasized-font-style, var(--spectrum-heading-serif-light-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-emphasized-font-weight, var(--spectrum-heading-serif-light-emphasized-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong { + font-style: var(--mod-heading-serif-light-strong-font-style, var(--spectrum-heading-serif-light-strong-font-style)); + font-weight: var(--mod-heading-serif-light-strong-font-weight, var(--spectrum-heading-serif-light-strong-font-weight)); +} + +.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em { + font-style: var(--mod-heading-serif-light-strong-emphasized-font-style, var(--spectrum-heading-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-heading-serif-light-strong-emphasized-font-weight, var(--spectrum-heading-serif-light-strong-emphasized-font-weight)); } .spectrum-Body { - font-family: var( - --mod-body-sans-serif-font-family, - var(--spectrum-body-sans-serif-font-family) - ); - font-style: var( - --mod-body-sans-serif-font-style, - var(--spectrum-body-sans-serif-font-style) - ); - font-weight: var( - --mod-body-sans-serif-font-weight, - var(--spectrum-body-sans-serif-font-weight) - ); - font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); - color: var( - --highcontrast-body-font-color, - var(--mod-body-font-color, var(--spectrum-body-font-color)) - ); - line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); - margin-block-start: var( - --mod-body-margin-start, - var(--mod-body-margin, var(--spectrum-body-margin-start, 0)) - ); - margin-block-end: var( - --mod-body-margin-end, - var(--mod-body-margin, var(--spectrum-body-margin-end, 0)) - ); -} - -.spectrum-Body .spectrum-Body-strong, -.spectrum-Body strong { - font-style: var( - --mod-body-sans-serif-strong-font-style, - var(--spectrum-body-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-font-weight, - var(--spectrum-body-sans-serif-strong-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-emphasized, -.spectrum-Body em { - font-style: var( - --mod-body-sans-serif-emphasized-font-style, - var(--spectrum-body-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-emphasized-font-weight, - var(--spectrum-body-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body em strong, -.spectrum-Body strong em { - font-style: var( - --mod-body-sans-serif-strong-emphasized-font-style, - var(--spectrum-body-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-sans-serif-strong-emphasized-font-weight, - var(--spectrum-body-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja), -.spectrum-Body:lang(ko), -.spectrum-Body:lang(zh) { - font-family: var( - --mod-body-cjk-font-family, - var(--spectrum-body-cjk-font-family) - ); - font-style: var( - --mod-body-cjk-font-style, - var(--spectrum-body-cjk-font-style) - ); - font-weight: var( - --mod-body-cjk-font-weight, - var(--spectrum-body-cjk-font-weight) - ); - line-height: var( - --mod-body-cjk-line-height, - var(--spectrum-body-cjk-line-height) - ); - letter-spacing: var( - --mod-body-cjk-letter-spacing, - var(--spectrum-body-cjk-letter-spacing) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong, -.spectrum-Body:lang(ja) strong, -.spectrum-Body:lang(ko) .spectrum-Body-strong, -.spectrum-Body:lang(ko) strong, -.spectrum-Body:lang(zh) .spectrum-Body-strong, -.spectrum-Body:lang(zh) strong { - font-style: var( - --mod-body-cjk-strong-font-style, - var(--spectrum-body-cjk-strong-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-font-weight, - var(--spectrum-body-cjk-strong-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em, -.spectrum-Body:lang(ko) .spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em, -.spectrum-Body:lang(zh) .spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em { - font-style: var( - --mod-body-cjk-emphasized-font-style, - var(--spectrum-body-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-emphasized-font-weight, - var(--spectrum-body-cjk-emphasized-font-weight) - ); -} - -.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ja) em strong, -.spectrum-Body:lang(ja) strong em, -.spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(ko) em strong, -.spectrum-Body:lang(ko) strong em, -.spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body:lang(zh) em strong, -.spectrum-Body:lang(zh) strong em { - font-style: var( - --mod-body-cjk-strong-emphasized-font-style, - var(--spectrum-body-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-cjk-strong-emphasized-font-weight, - var(--spectrum-body-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-sans-serif-font-family, var(--spectrum-body-sans-serif-font-family)); + font-style: var(--mod-body-sans-serif-font-style, var(--spectrum-body-sans-serif-font-style)); + font-weight: var(--mod-body-sans-serif-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-size: var(--mod-body-font-size, var(--spectrum-body-font-size)); + color: var(--highcontrast-body-font-color, var(--mod-body-font-color, var(--spectrum-body-font-color))); + line-height: var(--mod-body-line-height, var(--spectrum-body-line-height)); + margin-block-start: var(--mod-body-margin-start, var(--mod-body-margin, var(--spectrum-body-margin-start, 0))); + margin-block-end: var(--mod-body-margin-end, var(--mod-body-margin, var(--spectrum-body-margin-end, 0))); +} + +.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong { + font-style: var(--mod-body-sans-serif-strong-font-style, var(--spectrum-body-sans-serif-strong-font-style)); + font-weight: var(--mod-body-sans-serif-strong-font-weight, var(--spectrum-body-sans-serif-strong-font-weight)); +} + +.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em { + font-style: var(--mod-body-sans-serif-emphasized-font-style, var(--spectrum-body-sans-serif-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-emphasized-font-weight, var(--spectrum-body-sans-serif-emphasized-font-weight)); +} + +.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em { + font-style: var(--mod-body-sans-serif-strong-emphasized-font-style, var(--spectrum-body-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-sans-serif-strong-emphasized-font-weight, var(--spectrum-body-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh) { + font-family: var(--mod-body-cjk-font-family, var(--spectrum-body-cjk-font-family)); + font-style: var(--mod-body-cjk-font-style, var(--spectrum-body-cjk-font-style)); + font-weight: var(--mod-body-cjk-font-weight, var(--spectrum-body-cjk-font-weight)); + line-height: var(--mod-body-cjk-line-height, var(--spectrum-body-cjk-line-height)); + letter-spacing: var(--mod-body-cjk-letter-spacing, var(--spectrum-body-cjk-letter-spacing)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong { + font-style: var(--mod-body-cjk-strong-font-style, var(--spectrum-body-cjk-strong-font-style)); + font-weight: var(--mod-body-cjk-strong-font-weight, var(--spectrum-body-cjk-strong-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em { + font-style: var(--mod-body-cjk-emphasized-font-style, var(--spectrum-body-cjk-emphasized-font-style)); + font-weight: var(--mod-body-cjk-emphasized-font-weight, var(--spectrum-body-cjk-emphasized-font-weight)); +} + +.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em { + font-style: var(--mod-body-cjk-strong-emphasized-font-style, var(--spectrum-body-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-body-cjk-strong-emphasized-font-weight, var(--spectrum-body-cjk-strong-emphasized-font-weight)); } .spectrum-Body--serif { - font-family: var( - --mod-body-serif-font-family, - var(--spectrum-body-serif-font-family) - ); - font-weight: var( - --mod-body-serif-font-weight, - var(--spectrum-body-serif-font-weight) - ); - font-style: var( - --mod-body-serif-font-style, - var(--spectrum-body-serif-font-style) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong, -.spectrum-Body--serif strong { - font-style: var( - --mod-body-serif-strong-font-style, - var(--spectrum-body-serif-strong-font-style) - ); - font-weight: var( - --mod-body-serif-strong-font-weight, - var(--spectrum-body-serif-strong-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-emphasized, -.spectrum-Body--serif em { - font-style: var( - --mod-body-serif-emphasized-font-style, - var(--spectrum-body-serif-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-emphasized-font-weight, - var(--spectrum-body-serif-emphasized-font-weight) - ); -} - -.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, -.spectrum-Body--serif em strong, -.spectrum-Body--serif strong em { - font-style: var( - --mod-body-serif-strong-emphasized-font-style, - var(--spectrum-body-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-body-serif-strong-emphasized-font-weight, - var(--spectrum-body-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-body-serif-font-family, var(--spectrum-body-serif-font-family)); + font-weight: var(--mod-body-serif-font-weight, var(--spectrum-body-serif-font-weight)); + font-style: var(--mod-body-serif-font-style, var(--spectrum-body-serif-font-style)); +} + +.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong { + font-style: var(--mod-body-serif-strong-font-style, var(--spectrum-body-serif-strong-font-style)); + font-weight: var(--mod-body-serif-strong-font-weight, var(--spectrum-body-serif-strong-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em { + font-style: var(--mod-body-serif-emphasized-font-style, var(--spectrum-body-serif-emphasized-font-style)); + font-weight: var(--mod-body-serif-emphasized-font-weight, var(--spectrum-body-serif-emphasized-font-weight)); +} + +.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em { + font-style: var(--mod-body-serif-strong-emphasized-font-style, var(--spectrum-body-serif-strong-emphasized-font-style)); + font-weight: var(--mod-body-serif-strong-emphasized-font-weight, var(--spectrum-body-serif-strong-emphasized-font-weight)); } .spectrum-Detail { - font-family: var( - --mod-detail-sans-serif-font-family, - var(--spectrum-detail-sans-serif-font-family) - ); - font-style: var( - --mod-detail-sans-serif-font-style, - var(--spectrum-detail-sans-serif-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-font-weight, - var(--spectrum-detail-sans-serif-font-weight) - ); - font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); - color: var( - --highcontrast-detail-font-color, - var(--mod-detail-font-color, var(--spectrum-detail-font-color)) - ); - line-height: var( - --mod-detail-line-height, - var(--spectrum-detail-line-height) - ); - letter-spacing: var( - --mod-detail-letter-spacing, - var(--spectrum-detail-letter-spacing) - ); - text-transform: uppercase; - margin-block-start: var( - --mod-detail-margin-start, - var(--spectrum-detail-margin-start, 0) - ); - margin-block-end: var( - --mod-detail-margin-end, - var(--spectrum-detail-margin-end, 0) - ); -} - -.spectrum-Detail .spectrum-Detail-strong, -.spectrum-Detail strong { - font-style: var( - --mod-detail-sans-serif-strong-font-style, - var(--spectrum-detail-sans-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-font-weight, - var(--spectrum-detail-sans-serif-strong-font-weight) - ); -} - -.spectrum-Detail .spectrum-Detail-emphasized, -.spectrum-Detail em { - font-style: var( - --mod-detail-sans-serif-emphasized-font-style, - var(--spectrum-detail-sans-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-emphasized-font-weight, - var(--spectrum-detail-sans-serif-emphasized-font-weight) - ); -} - -.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail em strong, -.spectrum-Detail strong em { - font-style: var( - --mod-detail-sans-serif-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-strong-emphasized-font-weight) - ); -} - -.spectrum-Detail:lang(ja), -.spectrum-Detail:lang(ko), -.spectrum-Detail:lang(zh) { - font-family: var( - --mod-detail-cjk-font-family, - var(--spectrum-detail-cjk-font-family) - ); - font-style: var( - --mod-detail-cjk-font-style, - var(--spectrum-detail-cjk-font-style) - ); - font-weight: var( - --mod-detail-cjk-font-weight, - var(--spectrum-detail-cjk-font-weight) - ); - line-height: var( - --mod-detail-cjk-line-height, - var(--spectrum-detail-cjk-line-height) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail:lang(ja) strong, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail:lang(ko) strong, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail:lang(zh) strong { - font-style: var( - --mod-detail-cjk-strong-font-style, - var(--spectrum-detail-cjk-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-font-weight, - var(--spectrum-detail-cjk-strong-font-weight) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em, -.spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em, -.spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em { - font-style: var( - --mod-detail-cjk-emphasized-font-style, - var(--spectrum-detail-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-emphasized-font-weight, - var(--spectrum-detail-cjk-emphasized-font-weight) - ); -} - -.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ja) em strong, -.spectrum-Detail:lang(ja) strong em, -.spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(ko) em strong, -.spectrum-Detail:lang(ko) strong em, -.spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail:lang(zh) em strong, -.spectrum-Detail:lang(zh) strong em { - font-style: var( - --mod-detail-cjk-strong-emphasized-font-style, - var(--spectrum-detail-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-detail-sans-serif-font-family, var(--spectrum-detail-sans-serif-font-family)); + font-style: var(--mod-detail-sans-serif-font-style, var(--spectrum-detail-sans-serif-font-style)); + font-weight: var(--mod-detail-sans-serif-font-weight, var(--spectrum-detail-sans-serif-font-weight)); + font-size: var(--mod-detail-font-size, var(--spectrum-detail-font-size)); + color: var(--highcontrast-detail-font-color, var(--mod-detail-font-color, var(--spectrum-detail-font-color))); + line-height: var(--mod-detail-line-height, var(--spectrum-detail-line-height)); + letter-spacing: var(--mod-detail-letter-spacing, var(--spectrum-detail-letter-spacing)); + text-transform: uppercase; + margin-block-start: var(--mod-detail-margin-start, var(--spectrum-detail-margin-start, 0)); + margin-block-end: var(--mod-detail-margin-end, var(--spectrum-detail-margin-end, 0)); +} + +.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong { + font-style: var(--mod-detail-sans-serif-strong-font-style, var(--spectrum-detail-sans-serif-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-font-weight, var(--spectrum-detail-sans-serif-strong-font-weight)); +} + +.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em { + font-style: var(--mod-detail-sans-serif-emphasized-font-style, var(--spectrum-detail-sans-serif-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-emphasized-font-weight, var(--spectrum-detail-sans-serif-emphasized-font-weight)); +} + +.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em { + font-style: var(--mod-detail-sans-serif-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)); +} + +.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh) { + font-family: var(--mod-detail-cjk-font-family, var(--spectrum-detail-cjk-font-family)); + font-style: var(--mod-detail-cjk-font-style, var(--spectrum-detail-cjk-font-style)); + font-weight: var(--mod-detail-cjk-font-weight, var(--spectrum-detail-cjk-font-weight)); + line-height: var(--mod-detail-cjk-line-height, var(--spectrum-detail-cjk-line-height)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong { + font-style: var(--mod-detail-cjk-strong-font-style, var(--spectrum-detail-cjk-strong-font-style)); + font-weight: var(--mod-detail-cjk-strong-font-weight, var(--spectrum-detail-cjk-strong-font-weight)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em { + font-style: var(--mod-detail-cjk-emphasized-font-style, var(--spectrum-detail-cjk-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-emphasized-font-weight, var(--spectrum-detail-cjk-emphasized-font-weight)); +} + +.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em { + font-style: var(--mod-detail-cjk-strong-emphasized-font-style, var(--spectrum-detail-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-strong-emphasized-font-weight, var(--spectrum-detail-cjk-strong-emphasized-font-weight)); } .spectrum-Detail--serif { - font-family: var( - --mod-detail-serif-font-family, - var(--spectrum-detail-serif-font-family) - ); - font-style: var( - --mod-detail-serif-font-style, - var(--spectrum-detail-serif-font-style) - ); - font-weight: var( - --mod-detail-serif-font-weight, - var(--spectrum-detail-serif-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-strong, -.spectrum-Detail--serif strong { - font-style: var( - --mod-detail-serif-strong-font-style, - var(--spectrum-detail-serif-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-font-weight, - var(--spectrum-detail-serif-strong-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-emphasized, -.spectrum-Detail--serif em { - font-style: var( - --mod-detail-serif-emphasized-font-style, - var(--spectrum-detail-serif-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-emphasized-font-weight, - var(--spectrum-detail-serif-emphasized-font-weight) - ); -} - -.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--serif em strong, -.spectrum-Detail--serif strong em { - font-style: var( - --mod-detail-serif-strong-emphasized-font-style, - var(--spectrum-detail-serif-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-strong-emphasized-font-weight, - var(--spectrum-detail-serif-strong-emphasized-font-weight) - ); + font-family: var(--mod-detail-serif-font-family, var(--spectrum-detail-serif-font-family)); + font-style: var(--mod-detail-serif-font-style, var(--spectrum-detail-serif-font-style)); + font-weight: var(--mod-detail-serif-font-weight, var(--spectrum-detail-serif-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong { + font-style: var(--mod-detail-serif-strong-font-style, var(--spectrum-detail-serif-strong-font-style)); + font-weight: var(--mod-detail-serif-strong-font-weight, var(--spectrum-detail-serif-strong-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em { + font-style: var(--mod-detail-serif-emphasized-font-style, var(--spectrum-detail-serif-emphasized-font-style)); + font-weight: var(--mod-detail-serif-emphasized-font-weight, var(--spectrum-detail-serif-emphasized-font-weight)); +} + +.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em { + font-style: var(--mod-detail-serif-strong-emphasized-font-style, var(--spectrum-detail-serif-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-strong-emphasized-font-weight, var(--spectrum-detail-serif-strong-emphasized-font-weight)); } .spectrum-Detail--light { - font-style: var( - --mod-detail-sans-serif-light-font-style, - var(--spectrum-detail-sans-serif-light-font-style) - ); - font-weight: var( - --spectrum-detail-sans-serif-light-font-weight, - var(--spectrum-detail-sans-serif-light-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--light strong { - font-style: var( - --mod-detail-sans-serif-light-strong-font-style, - var(--spectrum-detail-sans-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-font-weight, - var(--spectrum-detail-sans-serif-light-strong-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--light em { - font-style: var( - --mod-detail-sans-serif-light-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--light em strong, -.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-sans-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-sans-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja), -.spectrum-Detail--light:lang(ko), -.spectrum-Detail--light:lang(zh) { - font-style: var( - --mod-detail-cjk-light-font-style, - var(--spectrum-detail-cjk-light-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-font-weight, - var(--spectrum-detail-cjk-light-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ja) strong, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(ko) strong, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, -.spectrum-Detail--light:lang(zh) strong { - font-style: var( - --mod-detail-cjk-light-strong-font-style, - var(--spectrum-detail-cjk-light-strong-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-font-weight, - var(--spectrum-detail-cjk-light-strong-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ja) em, -.spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) em, -.spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) em { - font-style: var( - --mod-detail-cjk-light-emphasized-font-style, - var(--spectrum-detail-cjk-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-emphasized-font-weight, - var(--spectrum-detail-cjk-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--light:lang(ja) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(ko) - .spectrum-Detail-strong.spectrum-Detail-emphasized, -.spectrum-Detail--light:lang(zh) - .spectrum-Detail-strong.spectrum-Detail-emphasized { - font-style: var( - --mod-detail-cjk-light-strong-emphasized-font-style, - var(--spectrum-detail-cjk-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-cjk-light-strong-emphasized-font-weight, - var(--spectrum-detail-cjk-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-detail-sans-serif-light-font-style, var(--spectrum-detail-sans-serif-light-font-style)); + font-weight: var(--spectrum-detail-sans-serif-light-font-weight, var(--spectrum-detail-sans-serif-light-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong { + font-style: var(--mod-detail-sans-serif-light-strong-font-style, var(--spectrum-detail-sans-serif-light-strong-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-font-weight, var(--spectrum-detail-sans-serif-light-strong-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em { + font-style: var(--mod-detail-sans-serif-light-emphasized-font-style, var(--spectrum-detail-sans-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-emphasized-font-weight)); +} + +.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em { + font-style: var(--mod-detail-sans-serif-light-strong-emphasized-font-style, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-sans-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)); +} + +.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh) { + font-style: var(--mod-detail-cjk-light-font-style, var(--spectrum-detail-cjk-light-font-style)); + font-weight: var(--mod-detail-cjk-light-font-weight, var(--spectrum-detail-cjk-light-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong { + font-style: var(--mod-detail-cjk-light-strong-font-style, var(--spectrum-detail-cjk-light-strong-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-font-weight, var(--spectrum-detail-cjk-light-strong-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em { + font-style: var(--mod-detail-cjk-light-emphasized-font-style, var(--spectrum-detail-cjk-light-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-emphasized-font-weight, var(--spectrum-detail-cjk-light-emphasized-font-weight)); +} + +.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized { + font-style: var(--mod-detail-cjk-light-strong-emphasized-font-style, var(--spectrum-detail-cjk-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-cjk-light-strong-emphasized-font-weight, var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)); } .spectrum-Detail--serif.spectrum-Detail--light { - font-style: var( - --mod-detail-serif-light-font-style, - var(--spectrum-detail-serif-light-font-style) - ); - font-weight: var( - --mod-detail-serif-light-font-weight, - var(--spectrum-detail-serif-light-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, -.spectrum-Detail--serif.spectrum-Detail--light strong { - font-style: var( - --mod-detail-serif-light-strong-font-style, - var(--spectrum-detail-serif-light-strong-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-font-weight, - var(--spectrum-detail-serif-light-strong-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em { - font-style: var( - --mod-detail-serif-light-emphasized-font-style, - var(--spectrum-detail-serif-light-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-emphasized-font-weight, - var(--spectrum-detail-serif-light-emphasized-font-weight) - ); -} - -.spectrum-Detail--serif.spectrum-Detail--light - .spectrum-Detail-strong.spectrum-Body-emphasized, -.spectrum-Detail--serif.spectrum-Detail--light em strong, -.spectrum-Detail--serif.spectrum-Detail--light strong em { - font-style: var( - --mod-detail-serif-light-strong-emphasized-font-style, - var(--spectrum-detail-serif-light-strong-emphasized-font-style) - ); - font-weight: var( - --mod-detail-serif-light-strong-emphasized-font-weight, - var(--spectrum-detail-serif-light-strong-emphasized-font-weight) - ); + font-style: var(--mod-detail-serif-light-font-style, var(--spectrum-detail-serif-light-font-style)); + font-weight: var(--mod-detail-serif-light-font-weight, var(--spectrum-detail-serif-light-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong { + font-style: var(--mod-detail-serif-light-strong-font-style, var(--spectrum-detail-serif-light-strong-font-style)); + font-weight: var(--mod-detail-serif-light-strong-font-weight, var(--spectrum-detail-serif-light-strong-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em { + font-style: var(--mod-detail-serif-light-emphasized-font-style, var(--spectrum-detail-serif-light-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-emphasized-font-weight, var(--spectrum-detail-serif-light-emphasized-font-weight)); +} + +.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em { + font-style: var(--mod-detail-serif-light-strong-emphasized-font-style, var(--spectrum-detail-serif-light-strong-emphasized-font-style)); + font-weight: var(--mod-detail-serif-light-strong-emphasized-font-weight, var(--spectrum-detail-serif-light-strong-emphasized-font-weight)); } .spectrum-Code { - font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); - font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); - font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); - font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); - line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); - color: var( - --highcontrast-code-font-color, - var(--mod-code-font-color, var(--spectrum-code-font-color)) - ); - margin-block-start: var( - --mod-code-margin-start, - var(--spectrum-code-margin-end, 0) - ); - margin-block-end: var( - --mod-code-margin-end, - var(--spectrum-code-margin-end, 0) - ); -} - -.spectrum-Code .spectrum-Code-strong, -.spectrum-Code strong { - font-style: var( - --mod-code-strong-font-style, - var(--spectrum-code-strong-font-style) - ); - font-weight: var( - --mod-code-strong-font-weight, - var(--spectrum-code-strong-font-weight) - ); -} - -.spectrum-Code .spectrum-Code-emphasized, -.spectrum-Code em { - font-style: var( - --mod-code-emphasized-font-style, - var(--spectrum-code-emphasized-font-style) - ); - font-weight: var( - --mod-code-emphasized-font-weight, - var(--spectrum-code-emphasized-font-weight) - ); -} - -.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code em strong, -.spectrum-Code strong em { - font-style: var( - --mod-code-strong-emphasized-font-style, - var(--spectrum-code-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-strong-emphasized-font-weight, - var(--spectrum-code-strong-emphasized-font-weight) - ); -} - -.spectrum-Code:lang(ja), -.spectrum-Code:lang(ko), -.spectrum-Code:lang(zh) { - font-family: var( - --mod-code-cjk-font-family, - var(--spectrum-code-cjk-font-family) - ); - font-style: var( - --mod-code-cjk-font-style, - var(--spectrum-code-cjk-font-style) - ); - font-weight: var( - --mod-code-cjk-font-weight, - var(--spectrum-code-cjk-font-weight) - ); - line-height: var( - --mod-code-cjk-line-height, - var(--spectrum-code-cjk-line-height) - ); - letter-spacing: var( - --mod-code-cjk-letter-spacing, - var(--spectrum-code-cjk-letter-spacing) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-strong, -.spectrum-Code:lang(ja) strong, -.spectrum-Code:lang(ko) .spectrum-Code-strong, -.spectrum-Code:lang(ko) strong, -.spectrum-Code:lang(zh) .spectrum-Code-strong, -.spectrum-Code:lang(zh) strong { - font-style: var( - --mod-code-cjk-strong-font-style, - var(--spectrum-code-cjk-strong-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-font-weight, - var(--spectrum-code-cjk-strong-font-weight) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em, -.spectrum-Code:lang(ko) .spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em, -.spectrum-Code:lang(zh) .spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em { - font-style: var( - --mod-code-cjk-emphasized-font-style, - var(--spectrum-code-cjk-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-emphasized-font-weight, - var(--spectrum-code-cjk-emphasized-font-weight) - ); -} - -.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ja) em strong, -.spectrum-Code:lang(ja) strong em, -.spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(ko) em strong, -.spectrum-Code:lang(ko) strong em, -.spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, -.spectrum-Code:lang(zh) em strong, -.spectrum-Code:lang(zh) strong em { - font-style: var( - --mod-code-cjk-strong-emphasized-font-style, - var(--spectrum-code-cjk-strong-emphasized-font-style) - ); - font-weight: var( - --mod-code-cjk-strong-emphasized-font-weight, - var(--spectrum-code-cjk-strong-emphasized-font-weight) - ); + font-family: var(--mod-code-font-family, var(--spectrum-code-font-family)); + font-style: var(--mod-code-font-style, var(--spectrum-code-font-style)); + font-weight: var(--mod-code-font-weight, var(--spectrum-code-font-weight)); + font-size: var(--mod-code-font-size, var(--spectrum-code-font-size)); + line-height: var(--mod-code-line-height, var(--spectrum-code-line-height)); + color: var(--highcontrast-code-font-color, var(--mod-code-font-color, var(--spectrum-code-font-color))); + margin-block-start: var(--mod-code-margin-start, var(--spectrum-code-margin-end, 0)); + margin-block-end: var(--mod-code-margin-end, var(--spectrum-code-margin-end, 0)); +} + +.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong { + font-style: var(--mod-code-strong-font-style, var(--spectrum-code-strong-font-style)); + font-weight: var(--mod-code-strong-font-weight, var(--spectrum-code-strong-font-weight)); +} + +.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em { + font-style: var(--mod-code-emphasized-font-style, var(--spectrum-code-emphasized-font-style)); + font-weight: var(--mod-code-emphasized-font-weight, var(--spectrum-code-emphasized-font-weight)); +} + +.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em { + font-style: var(--mod-code-strong-emphasized-font-style, var(--spectrum-code-strong-emphasized-font-style)); + font-weight: var(--mod-code-strong-emphasized-font-weight, var(--spectrum-code-strong-emphasized-font-weight)); +} + +.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh) { + font-family: var(--mod-code-cjk-font-family, var(--spectrum-code-cjk-font-family)); + font-style: var(--mod-code-cjk-font-style, var(--spectrum-code-cjk-font-style)); + font-weight: var(--mod-code-cjk-font-weight, var(--spectrum-code-cjk-font-weight)); + line-height: var(--mod-code-cjk-line-height, var(--spectrum-code-cjk-line-height)); + letter-spacing: var(--mod-code-cjk-letter-spacing, var(--spectrum-code-cjk-letter-spacing)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong { + font-style: var(--mod-code-cjk-strong-font-style, var(--spectrum-code-cjk-strong-font-style)); + font-weight: var(--mod-code-cjk-strong-font-weight, var(--spectrum-code-cjk-strong-font-weight)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em { + font-style: var(--mod-code-cjk-emphasized-font-style, var(--spectrum-code-cjk-emphasized-font-style)); + font-weight: var(--mod-code-cjk-emphasized-font-weight, var(--spectrum-code-cjk-emphasized-font-weight)); +} + +.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em { + font-style: var(--mod-code-cjk-strong-emphasized-font-style, var(--spectrum-code-cjk-strong-emphasized-font-style)); + font-weight: var(--mod-code-cjk-strong-emphasized-font-weight, var(--spectrum-code-cjk-strong-emphasized-font-weight)); } .spectrum-Heading { - --spectrum-heading-sans-serif-font-family: var( - --system-heading-sans-serif-font-family - ); - --spectrum-heading-serif-font-family: var( - --system-heading-serif-font-family - ); - --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); - --spectrum-heading-cjk-letter-spacing: var( - --system-heading-cjk-letter-spacing - ); - --spectrum-heading-font-color: var(--system-heading-font-color); - --spectrum-heading-font-size: var(--system-heading-font-size); - --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); + --spectrum-heading-sans-serif-font-family: var(--system-heading-sans-serif-font-family); + --spectrum-heading-serif-font-family: var(--system-heading-serif-font-family); + --spectrum-heading-cjk-font-family: var(--system-heading-cjk-font-family); + --spectrum-heading-cjk-letter-spacing: var(--system-heading-cjk-letter-spacing); + --spectrum-heading-font-color: var(--system-heading-font-color); + --spectrum-heading-font-size: var(--system-heading-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-cjk-font-size); } .spectrum-Heading--sizeXXS { - --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxs-cjk-font-size); } .spectrum-Heading--sizeXS { - --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xs-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xs-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xs-cjk-font-size); } .spectrum-Heading--sizeS { - --spectrum-heading-font-size: var(--system-heading-size-s-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-s-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-s-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-s-cjk-font-size); } .spectrum-Heading--sizeM { - --spectrum-heading-font-size: var(--system-heading-size-m-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-m-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-m-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-m-cjk-font-size); } .spectrum-Heading--sizeL { - --spectrum-heading-font-size: var(--system-heading-size-l-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-l-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-l-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-l-cjk-font-size); } .spectrum-Heading--sizeXL { - --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xl-cjk-font-size); } .spectrum-Heading--sizeXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxl-cjk-font-size); } .spectrum-Heading--sizeXXXL { - --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); - --spectrum-heading-cjk-font-size: var( - --system-heading-size-xxxl-cjk-font-size - ); + --spectrum-heading-font-size: var(--system-heading-size-xxxl-font-size); + --spectrum-heading-cjk-font-size: var(--system-heading-size-xxxl-cjk-font-size); } .spectrum-Body { - --spectrum-body-sans-serif-font-family: var( - --system-body-sans-serif-font-family - ); - --spectrum-body-serif-font-family: var(--system-body-serif-font-family); - --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); - --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); - --spectrum-body-font-color: var(--system-body-font-color); - --spectrum-body-font-size: var(--system-body-font-size); + --spectrum-body-sans-serif-font-family: var(--system-body-sans-serif-font-family); + --spectrum-body-serif-font-family: var(--system-body-serif-font-family); + --spectrum-body-cjk-font-family: var(--system-body-cjk-font-family); + --spectrum-body-cjk-letter-spacing: var(--system-body-cjk-letter-spacing); + --spectrum-body-font-color: var(--system-body-font-color); + --spectrum-body-font-size: var(--system-body-font-size); } .spectrum-Body--sizeXS { - --spectrum-body-font-size: var(--system-body-size-xs-font-size); + --spectrum-body-font-size: var(--system-body-size-xs-font-size); } .spectrum-Body--sizeS { - --spectrum-body-font-size: var(--system-body-size-s-font-size); + --spectrum-body-font-size: var(--system-body-size-s-font-size); } .spectrum-Body--sizeM { - --spectrum-body-font-size: var(--system-body-size-m-font-size); + --spectrum-body-font-size: var(--system-body-size-m-font-size); } .spectrum-Body--sizeL { - --spectrum-body-font-size: var(--system-body-size-l-font-size); + --spectrum-body-font-size: var(--system-body-size-l-font-size); } .spectrum-Body--sizeXL { - --spectrum-body-font-size: var(--system-body-size-xl-font-size); + --spectrum-body-font-size: var(--system-body-size-xl-font-size); } .spectrum-Body--sizeXXL { - --spectrum-body-font-size: var(--system-body-size-xxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxl-font-size); } .spectrum-Body--sizeXXXL { - --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); + --spectrum-body-font-size: var(--system-body-size-xxxl-font-size); } .spectrum-Detail { - --spectrum-detail-sans-serif-font-family: var( - --system-detail-sans-serif-font-family - ); - --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); - --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); - --spectrum-detail-font-color: var(--system-detail-font-color); - --spectrum-detail-font-size: var(--system-detail-font-size); + --spectrum-detail-sans-serif-font-family: var(--system-detail-sans-serif-font-family); + --spectrum-detail-serif-font-family: var(--system-detail-serif-font-family); + --spectrum-detail-cjk-font-family: var(--system-detail-cjk-font-family); + --spectrum-detail-font-color: var(--system-detail-font-color); + --spectrum-detail-font-size: var(--system-detail-font-size); } .spectrum-Detail--sizeS { - --spectrum-detail-font-size: var(--system-detail-size-s-font-size); + --spectrum-detail-font-size: var(--system-detail-size-s-font-size); } .spectrum-Detail--sizeM { - --spectrum-detail-font-size: var(--system-detail-size-m-font-size); + --spectrum-detail-font-size: var(--system-detail-size-m-font-size); } .spectrum-Detail--sizeL { - --spectrum-detail-font-size: var(--system-detail-size-l-font-size); + --spectrum-detail-font-size: var(--system-detail-size-l-font-size); } .spectrum-Detail--sizeXL { - --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); + --spectrum-detail-font-size: var(--system-detail-size-xl-font-size); } .spectrum-Code { - --spectrum-code-font-family: var(--system-code-font-family); - --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); - --spectrum-code-font-color: var(--system-code-font-color); - --spectrum-code-font-size: var(--system-code-font-size); + --spectrum-code-font-family: var(--system-code-font-family); + --spectrum-code-cjk-letter-spacing: var(--system-code-cjk-letter-spacing); + --spectrum-code-font-color: var(--system-code-font-color); + --spectrum-code-font-size: var(--system-code-font-size); } .spectrum-Code--sizeXS { - --spectrum-code-font-size: var(--system-code-size-xs-font-size); + --spectrum-code-font-size: var(--system-code-size-xs-font-size); } .spectrum-Code--sizeS { - --spectrum-code-font-size: var(--system-code-size-s-font-size); + --spectrum-code-font-size: var(--system-code-size-s-font-size); } .spectrum-Code--sizeM { - --spectrum-code-font-size: var(--system-code-size-m-font-size); + --spectrum-code-font-size: var(--system-code-size-m-font-size); } .spectrum-Code--sizeL { - --spectrum-code-font-size: var(--system-code-size-l-font-size); + --spectrum-code-font-size: var(--system-code-size-l-font-size); } .spectrum-Code--sizeXL { - --spectrum-code-font-size: var(--system-code-size-xl-font-size); + --spectrum-code-font-size: var(--system-code-size-xl-font-size); } diff --git a/yarn.lock b/yarn.lock index d80a2aa7ff..d7a728c9e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -270,9 +270,11 @@ __metadata: gh-pages: "npm:^6.0.0" gunzip-maybe: "npm:^1.4.2" husky: "npm:^9.0.10" + jsonc-eslint-parser: "npm:^2.4.0" latest-version: "npm:^9.0.0" lerna: "npm:^8.1.2" lightningcss: "npm:1.19.0" + lint-staged: "npm:^15.3.0" lit: "npm:^2.5.0 || ^3.1.3" lit-analyzer: "npm:^2.0.3" lit-html: "npm:^2.4.0 || ^3.1.3" @@ -293,8 +295,9 @@ __metadata: rollup: "npm:^4.12.0" sinon: "npm:^17.0.1" storybook: "npm:^7.5.0" - stylelint: "npm:^16.4.0" - stylelint-config-standard: "npm:^36.0.0" + stylelint: "npm:^16.9.0" + stylelint-config-standard: "npm:^36.0.1" + stylelint-header: "npm:^2.0.1" tachometer: "npm:^0.7.0" tar-stream: "npm:^3.0.0" terser: "npm:^4.8.1" @@ -340,7 +343,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.11, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.11, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2": version: 7.24.2 resolution: "@babel/code-frame@npm:7.24.2" dependencies: @@ -357,7 +360,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.1.0, @babel/core@npm:^7.11.1, @babel/core@npm:^7.12.10, @babel/core@npm:^7.7.2, @babel/core@npm:^7.8.0": +"@babel/core@npm:^7.11.1, @babel/core@npm:^7.12.10": version: 7.24.0 resolution: "@babel/core@npm:7.24.0" dependencies: @@ -429,7 +432,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.4.4, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:^7.4.4": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -671,7 +674,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-string-parser@npm:^7.23.4, @babel/helper-string-parser@npm:^7.24.1": +"@babel/helper-string-parser@npm:^7.24.1": version: 7.24.1 resolution: "@babel/helper-string-parser@npm:7.24.1" checksum: 10c0/2f9bfcf8d2f9f083785df0501dbab92770111ece2f90d120352fda6dd2a7d47db11b807d111e6f32aa1ba6d763fe2dc6603d153068d672a5d0ad33ca802632b2 @@ -863,18 +866,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-bigint@npm:^7.8.3": - version: 7.8.3 - resolution: "@babel/plugin-syntax-bigint@npm:7.8.3" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.8.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/686891b81af2bc74c39013655da368a480f17dd237bf9fbc32048e5865cb706d5a8f65438030da535b332b1d6b22feba336da8fa931f663b6b34e13147d12dde - languageName: node - linkType: hard - -"@babel/plugin-syntax-class-properties@npm:^7.12.13, @babel/plugin-syntax-class-properties@npm:^7.8.3": +"@babel/plugin-syntax-class-properties@npm:^7.12.13": version: 7.12.13 resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13" dependencies: @@ -962,7 +954,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3": +"@babel/plugin-syntax-import-meta@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" dependencies: @@ -995,7 +987,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3": +"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" dependencies: @@ -1017,7 +1009,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-numeric-separator@npm:^7.10.4, @babel/plugin-syntax-numeric-separator@npm:^7.8.3": +"@babel/plugin-syntax-numeric-separator@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4" dependencies: @@ -1072,7 +1064,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-top-level-await@npm:^7.12.1, @babel/plugin-syntax-top-level-await@npm:^7.14.5, @babel/plugin-syntax-top-level-await@npm:^7.8.3": +"@babel/plugin-syntax-top-level-await@npm:^7.12.1, @babel/plugin-syntax-top-level-await@npm:^7.14.5": version: 7.14.5 resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5" dependencies: @@ -1094,17 +1086,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.7.2": - version: 7.23.3 - resolution: "@babel/plugin-syntax-typescript@npm:7.23.3" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10c0/4d6e9cdb9d0bfb9bd9b220fc951d937fce2ca69135ec121153572cebe81d86abc9a489208d6b69ee5f10cadcaeffa10d0425340a5029e40e14a6025021b90948 - languageName: node - linkType: hard - "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6" @@ -2014,7 +1995,7 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3": +"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0": version: 7.24.0 resolution: "@babel/template@npm:7.24.0" dependencies: @@ -2043,7 +2024,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.4.5, @babel/traverse@npm:^7.7.2": +"@babel/traverse@npm:^7.4.5": version: 7.24.0 resolution: "@babel/traverse@npm:7.24.0" dependencies: @@ -2094,17 +2075,6 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.3.3": - version: 7.24.0 - resolution: "@babel/types@npm:7.24.0" - dependencies: - "@babel/helper-string-parser": "npm:^7.23.4" - "@babel/helper-validator-identifier": "npm:^7.22.20" - to-fast-properties: "npm:^2.0.0" - checksum: 10c0/777a0bb5dbe038ca4c905fdafb1cdb6bdd10fe9d63ce13eca0bd91909363cbad554a53dc1f902004b78c1dcbc742056f877f2c99eeedff647333b1fadf51235d - languageName: node - linkType: hard - "@babel/types@npm:^7.8.3": version: 7.26.5 resolution: "@babel/types@npm:7.26.5" @@ -2115,13 +2085,6 @@ __metadata: languageName: node linkType: hard -"@bcoe/v8-coverage@npm:^0.2.3": - version: 0.2.3 - resolution: "@bcoe/v8-coverage@npm:0.2.3" - checksum: 10c0/6b80ae4cb3db53f486da2dc63b6e190a74c8c3cca16bb2733f234a0b6a9382b09b146488ae08e2b22cf00f6c83e20f3e040a2f7894f05c045c946d6a090b1d52 - languageName: node - linkType: hard - "@bugsnag/browser@npm:^7.22.7": version: 7.22.7 resolution: "@bugsnag/browser@npm:7.22.7" @@ -2470,38 +2433,38 @@ __metadata: languageName: node linkType: hard -"@csstools/css-parser-algorithms@npm:^2.6.1": - version: 2.6.1 - resolution: "@csstools/css-parser-algorithms@npm:2.6.1" +"@csstools/css-parser-algorithms@npm:^3.0.4": + version: 3.0.4 + resolution: "@csstools/css-parser-algorithms@npm:3.0.4" peerDependencies: - "@csstools/css-tokenizer": ^2.2.4 - checksum: 10c0/2c60377c4ffc96bbeb962cab19c09fccbcc834785928747219ed3bd916a34e52977393935d1d36501403f3f95ff59d358dd741d1dddcdaf9564ab36d73926aa6 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10c0/d411f07765e14eede17bccc6bd4f90ff303694df09aabfede3fd104b2dfacfd4fe3697cd25ddad14684c850328f3f9420ebfa9f78380892492974db24ae47dbd languageName: node linkType: hard -"@csstools/css-tokenizer@npm:^2.2.4": - version: 2.2.4 - resolution: "@csstools/css-tokenizer@npm:2.2.4" - checksum: 10c0/23997db5874514f4b951ebd215e1e6cc8baf03adf9a35fc6fd028b84cb52aa2dc053860722108c09859a9b37b455f62b84181fe15539cd37797ea699b9ff85f0 +"@csstools/css-tokenizer@npm:^3.0.3": + version: 3.0.3 + resolution: "@csstools/css-tokenizer@npm:3.0.3" + checksum: 10c0/c31bf410e1244b942e71798e37c54639d040cb59e0121b21712b40015fced2b0fb1ffe588434c5f8923c9cd0017cfc1c1c8f3921abc94c96edf471aac2eba5e5 languageName: node linkType: hard -"@csstools/media-query-list-parser@npm:^2.1.9": - version: 2.1.9 - resolution: "@csstools/media-query-list-parser@npm:2.1.9" +"@csstools/media-query-list-parser@npm:^4.0.2": + version: 4.0.2 + resolution: "@csstools/media-query-list-parser@npm:4.0.2" peerDependencies: - "@csstools/css-parser-algorithms": ^2.6.1 - "@csstools/css-tokenizer": ^2.2.4 - checksum: 10c0/602e9b5631928c078e670018df20b959bfb8e42ea11024d5218f1604e5ef94e070a74934a919ccbff3713e506d99096057947fa0c2e4768939f7b22479553534 + "@csstools/css-parser-algorithms": ^3.0.4 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10c0/5d008a70f5d4fd96224066a433f5cdefa76cfd78a74416a20d6d5b2bb1bc8282b140e8373015d807d4dadb91daf3deb73eb13f853ec4e0479d0cb92e80c6f20d languageName: node linkType: hard -"@csstools/selector-specificity@npm:^3.0.3": - version: 3.0.3 - resolution: "@csstools/selector-specificity@npm:3.0.3" +"@csstools/selector-specificity@npm:^5.0.0": + version: 5.0.0 + resolution: "@csstools/selector-specificity@npm:5.0.0" peerDependencies: - postcss-selector-parser: ^6.0.13 - checksum: 10c0/e4f0355165882ddde8bd4a2f0252868150e67b9fae927fd2d94a91cee31e438e7041059f20b9c755a93b0bd8e527a9f78b01168fe67b3539be32091240aa63bf + postcss-selector-parser: ^7.0.0 + checksum: 10c0/186b444cabcdcdeb553bfe021f80c58bfe9ef38dcc444f2b1f34a5aab9be063ab4e753022b2d5792049c041c28cfbb78e4b707ec398459300e402030d35c07eb languageName: node linkType: hard @@ -2570,10 +2533,10 @@ __metadata: languageName: node linkType: hard -"@dual-bundle/import-meta-resolve@npm:^4.0.0": - version: 4.0.0 - resolution: "@dual-bundle/import-meta-resolve@npm:4.0.0" - checksum: 10c0/868b8314fc753b7767887108535afe3288de941d92bc8453164dbcb1abe886b171e338f6f7d02ff556256dee69c90e4ac6360e0c6a856a5ad7190274ab52de2e +"@dual-bundle/import-meta-resolve@npm:^4.1.0": + version: 4.1.0 + resolution: "@dual-bundle/import-meta-resolve@npm:4.1.0" + checksum: 10c0/55069e550ee2710e738dd8bbd34aba796cede456287454b50c3be46fbef8695d00625677f3f41f5ffbec1174c0f57f314da9a908388bc9f8ad41a8438db884d9 languageName: node linkType: hard @@ -3906,136 +3869,6 @@ __metadata: languageName: node linkType: hard -"@jest/console@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/console@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - jest-message-util: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - slash: "npm:^3.0.0" - checksum: 10c0/6cb46d721698aaeb0d57ace967f7a36bbefc20719d420ea8bf8ec8adf9994cb1ec11a93bbd9b1514c12a19b5dd99dcbbd1d3e22fd8bea8e41e845055b03ac18d - languageName: node - linkType: hard - -"@jest/core@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/core@npm:27.5.1" - dependencies: - "@jest/console": "npm:^27.5.1" - "@jest/reporters": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - ansi-escapes: "npm:^4.2.1" - chalk: "npm:^4.0.0" - emittery: "npm:^0.8.1" - exit: "npm:^0.1.2" - graceful-fs: "npm:^4.2.9" - jest-changed-files: "npm:^27.5.1" - jest-config: "npm:^27.5.1" - jest-haste-map: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-regex-util: "npm:^27.5.1" - jest-resolve: "npm:^27.5.1" - jest-resolve-dependencies: "npm:^27.5.1" - jest-runner: "npm:^27.5.1" - jest-runtime: "npm:^27.5.1" - jest-snapshot: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-validate: "npm:^27.5.1" - jest-watcher: "npm:^27.5.1" - micromatch: "npm:^4.0.4" - rimraf: "npm:^3.0.0" - slash: "npm:^3.0.0" - strip-ansi: "npm:^6.0.0" - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - checksum: 10c0/8c858fe99cec9eabde8c894d4313171b923e1d4b8f66884b1fa1b7a0123db9f94b797f77d888a2b57d4832e7e46cd67aa1e2f227f1544643478de021c4b84db2 - languageName: node - linkType: hard - -"@jest/environment@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/environment@npm:27.5.1" - dependencies: - "@jest/fake-timers": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - jest-mock: "npm:^27.5.1" - checksum: 10c0/50e40b4f0a351a83f21af03c5cffd9f061729aee8f73131dbb32b39838c575a89d313e946ded91c08e16cf58ff470d74d6b3a48f664cec5c70a946aff45310b3 - languageName: node - linkType: hard - -"@jest/fake-timers@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/fake-timers@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@sinonjs/fake-timers": "npm:^8.0.1" - "@types/node": "npm:*" - jest-message-util: "npm:^27.5.1" - jest-mock: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - checksum: 10c0/df6113d11f572219ac61d3946b6cc1aaa8632e3afed9ff959bdb46e122e7cc5b5a16451a88d5fca7cc8daa66333adde3cf70d96c936f3d8406276f6e6e2cbacd - languageName: node - linkType: hard - -"@jest/globals@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/globals@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - expect: "npm:^27.5.1" - checksum: 10c0/b7309297f13b02bf748782772ab2054bbd11f10eb13e9b4660b33acb8c2c4bc7ee07aa1175045feb27ce3a6916b2d3982a3c5350ea1f9c2c3852334942077471 - languageName: node - linkType: hard - -"@jest/reporters@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/reporters@npm:27.5.1" - dependencies: - "@bcoe/v8-coverage": "npm:^0.2.3" - "@jest/console": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - collect-v8-coverage: "npm:^1.0.0" - exit: "npm:^0.1.2" - glob: "npm:^7.1.2" - graceful-fs: "npm:^4.2.9" - istanbul-lib-coverage: "npm:^3.0.0" - istanbul-lib-instrument: "npm:^5.1.0" - istanbul-lib-report: "npm:^3.0.0" - istanbul-lib-source-maps: "npm:^4.0.0" - istanbul-reports: "npm:^3.1.3" - jest-haste-map: "npm:^27.5.1" - jest-resolve: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-worker: "npm:^27.5.1" - slash: "npm:^3.0.0" - source-map: "npm:^0.6.0" - string-length: "npm:^4.0.1" - terminal-link: "npm:^2.0.0" - v8-to-istanbul: "npm:^8.1.0" - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - checksum: 10c0/fd66b17ca8af0464759d12525cfd84ae87403132da61f18ee76a2f07ecd64427797f7ad6e56d338ffa9f956cce153444edf1e5775093e9be2903aaf4d0e049bc - languageName: node - linkType: hard - "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -4045,64 +3878,6 @@ __metadata: languageName: node linkType: hard -"@jest/source-map@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/source-map@npm:27.5.1" - dependencies: - callsites: "npm:^3.0.0" - graceful-fs: "npm:^4.2.9" - source-map: "npm:^0.6.0" - checksum: 10c0/7d9937675ba4cb2f27635b13be0f86588d18cf3b2d5442e818e702ea87afa5048c5f8892c749857fd7dd884fd6e14f799851ec9af61940813a690c6d5a70979e - languageName: node - linkType: hard - -"@jest/test-result@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/test-result@npm:27.5.1" - dependencies: - "@jest/console": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/istanbul-lib-coverage": "npm:^2.0.0" - collect-v8-coverage: "npm:^1.0.0" - checksum: 10c0/4fb8cbefda8f645c57e2fc0d0df169b0bf5f6cb456b42dc09f5138595b736e800d8d83e3fd36a47fd801a2359988c841792d7fc46784bec908c88b39b6581749 - languageName: node - linkType: hard - -"@jest/test-sequencer@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/test-sequencer@npm:27.5.1" - dependencies: - "@jest/test-result": "npm:^27.5.1" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^27.5.1" - jest-runtime: "npm:^27.5.1" - checksum: 10c0/f43ecfc5b4c736c7f6e8521c13ef7b447ad29f96732675776be69b2631eb76019793a02ad58e69baf7ffbce1cc8d5b62ca30294091c4ad3acbdce6c12b73d049 - languageName: node - linkType: hard - -"@jest/transform@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/transform@npm:27.5.1" - dependencies: - "@babel/core": "npm:^7.1.0" - "@jest/types": "npm:^27.5.1" - babel-plugin-istanbul: "npm:^6.1.1" - chalk: "npm:^4.0.0" - convert-source-map: "npm:^1.4.0" - fast-json-stable-stringify: "npm:^2.0.0" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^27.5.1" - jest-regex-util: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - micromatch: "npm:^4.0.4" - pirates: "npm:^4.0.4" - slash: "npm:^3.0.0" - source-map: "npm:^0.6.1" - write-file-atomic: "npm:^3.0.0" - checksum: 10c0/2d1819dad9621a562a1ff6eceefeb5ae0900063c50e982b9f08e48d7328a0c343520ba27ce291cb72c113d4f441ef4a95285b9d4ef6604cffd53740e951c99b6 - languageName: node - linkType: hard - "@jest/transform@npm:^29.3.1": version: 29.7.0 resolution: "@jest/transform@npm:29.7.0" @@ -4239,6 +4014,15 @@ __metadata: languageName: node linkType: hard +"@keyv/serialize@npm:^1.0.2": + version: 1.0.2 + resolution: "@keyv/serialize@npm:1.0.2" + dependencies: + buffer: "npm:^6.0.3" + checksum: 10c0/31c5cb0938d22ce890314befc4d00c248c4c9be9664885978d6449b1787993dbc91999041076d53437888bb5f4280233276fbc4c72f97955d111d7a6ccd4cd67 + languageName: node + linkType: hard + "@leichtgewicht/ip-codec@npm:^2.0.1": version: 2.0.4 resolution: "@leichtgewicht/ip-codec@npm:2.0.4" @@ -7271,15 +7055,6 @@ __metadata: languageName: node linkType: hard -"@sinonjs/commons@npm:^1.7.0": - version: 1.8.3 - resolution: "@sinonjs/commons@npm:1.8.3" - dependencies: - type-detect: "npm:4.0.8" - checksum: 10c0/e4d2471feb19f735654f798fcdf389b90fab5913da609f566b04c4cdd9131a97e897d565251d35389aeebcca70a22ab4ed2291c7f7927706ead12e4f94841bf1 - languageName: node - linkType: hard - "@sinonjs/commons@npm:^2.0.0": version: 2.0.0 resolution: "@sinonjs/commons@npm:2.0.0" @@ -7307,15 +7082,6 @@ __metadata: languageName: node linkType: hard -"@sinonjs/fake-timers@npm:^8.0.1": - version: 8.1.0 - resolution: "@sinonjs/fake-timers@npm:8.1.0" - dependencies: - "@sinonjs/commons": "npm:^1.7.0" - checksum: 10c0/d6b795f9ddaf044daf184c151555ca557ccd23636f2ee3d2f76a9d128329f81fc1aac412f6f67239ab92cb9390aad9955b71df93cf4bd442c68b1f341e381ab6 - languageName: node - linkType: hard - "@sinonjs/samsam@npm:^8.0.0": version: 8.0.0 resolution: "@sinonjs/samsam@npm:8.0.0" @@ -10074,13 +9840,6 @@ __metadata: languageName: node linkType: hard -"@tootallnate/once@npm:1": - version: 1.1.2 - resolution: "@tootallnate/once@npm:1.1.2" - checksum: 10c0/8fe4d006e90422883a4fa9339dd05a83ff626806262e1710cee5758d493e8cbddf2db81c0e4690636dc840b02c9fda62877866ea774ebd07c1777ed5fafbdec6 - languageName: node - linkType: hard - "@tootallnate/once@npm:2": version: 2.0.0 resolution: "@tootallnate/once@npm:2.0.0" @@ -10209,19 +9968,6 @@ __metadata: languageName: node linkType: hard -"@types/babel__core@npm:^7.1.14": - version: 7.20.1 - resolution: "@types/babel__core@npm:7.20.1" - dependencies: - "@babel/parser": "npm:^7.20.7" - "@babel/types": "npm:^7.20.7" - "@types/babel__generator": "npm:*" - "@types/babel__template": "npm:*" - "@types/babel__traverse": "npm:*" - checksum: 10c0/c83402fc7ef8abd1f94ffe350b8bde9a35ccb6c3624bc8e39b6a7e1a675d112f6b70ac1b05391a579ca3b126baffe66b0b94f954edef086c4482b97d293c3659 - languageName: node - linkType: hard - "@types/babel__generator@npm:*": version: 7.6.8 resolution: "@types/babel__generator@npm:7.6.8" @@ -10259,15 +10005,6 @@ __metadata: languageName: node linkType: hard -"@types/babel__traverse@npm:^7.0.4, @types/babel__traverse@npm:^7.0.6": - version: 7.20.1 - resolution: "@types/babel__traverse@npm:7.20.1" - dependencies: - "@babel/types": "npm:^7.20.7" - checksum: 10c0/5a6a3a26be090573309527184a31f1b82ef55f3d73d811c15f181d323e471305f2390651a04d49d4cd4ca41bbeabb53c9f7862a8e09eab5a0f8910a6aec6e867 - languageName: node - linkType: hard - "@types/body-parser@npm:*": version: 1.19.5 resolution: "@types/body-parser@npm:1.19.5" @@ -10616,15 +10353,6 @@ __metadata: languageName: node linkType: hard -"@types/graceful-fs@npm:^4.1.2": - version: 4.1.6 - resolution: "@types/graceful-fs@npm:4.1.6" - dependencies: - "@types/node": "npm:*" - checksum: 10c0/b1d32c5ae7bd52cf60e29df20407904c4312a39612e7ec2ee23c1e3731c1cfe31d97c6941bf6cb52f5f929d50d86d92dd506436b63fafa833181d439b628885e - languageName: node - linkType: hard - "@types/graceful-fs@npm:^4.1.3": version: 4.1.9 resolution: "@types/graceful-fs@npm:4.1.9" @@ -11010,13 +10738,6 @@ __metadata: languageName: node linkType: hard -"@types/prettier@npm:^2.1.5": - version: 2.7.3 - resolution: "@types/prettier@npm:2.7.3" - checksum: 10c0/0960b5c1115bb25e979009d0b44c42cf3d792accf24085e4bfce15aef5794ea042e04e70c2139a2c3387f781f18c89b5706f000ddb089e9a4a2ccb7536a2c5f0 - languageName: node - linkType: hard - "@types/pretty-hrtime@npm:^1.0.0": version: 1.0.3 resolution: "@types/pretty-hrtime@npm:1.0.3" @@ -11189,13 +10910,6 @@ __metadata: languageName: node linkType: hard -"@types/stack-utils@npm:^2.0.0": - version: 2.0.1 - resolution: "@types/stack-utils@npm:2.0.1" - checksum: 10c0/3327ee919a840ffe907bbd5c1d07dfd79137dd9732d2d466cf717ceec5bb21f66296173c53bb56cff95fae4185b9cd6770df3e9745fe4ba528bbc4975f54d13f - languageName: node - linkType: hard - "@types/supports-color@npm:^8.0.0": version: 8.1.1 resolution: "@types/supports-color@npm:8.1.1" @@ -12367,13 +12081,6 @@ __metadata: languageName: node linkType: hard -"abab@npm:^2.0.3, abab@npm:^2.0.5": - version: 2.0.6 - resolution: "abab@npm:2.0.6" - checksum: 10c0/0b245c3c3ea2598fe0025abf7cc7bb507b06949d51e8edae5d12c1b847a0a0c09639abcb94788332b4e2044ac4491c1e8f571b51c7826fd4b0bda1685ad4a278 - languageName: node - linkType: hard - "abbrev@npm:1": version: 1.1.1 resolution: "abbrev@npm:1.1.1" @@ -12421,16 +12128,6 @@ __metadata: languageName: node linkType: hard -"acorn-globals@npm:^6.0.0": - version: 6.0.0 - resolution: "acorn-globals@npm:6.0.0" - dependencies: - acorn: "npm:^7.1.1" - acorn-walk: "npm:^7.1.1" - checksum: 10c0/5f92390a3fd7e5a4f84fe976d4650e2a33ecf27135aa9efc5406e3406df7f00a1bbb00648ee0c8058846f55ad0924ff574e6c73395705690e754589380a41801 - languageName: node - linkType: hard - "acorn-import-assertions@npm:^1.9.0": version: 1.9.0 resolution: "acorn-import-assertions@npm:1.9.0" @@ -12467,13 +12164,6 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^7.1.1": - version: 7.2.0 - resolution: "acorn-walk@npm:7.2.0" - checksum: 10c0/ff99f3406ed8826f7d6ef6ac76b7608f099d45a1ff53229fa267125da1924188dbacf02e7903dfcfd2ae4af46f7be8847dc7d564c73c4e230dfb69c8ea8e6b4c - languageName: node - linkType: hard - "acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.1.1, acorn-walk@npm:^8.3.2": version: 8.3.2 resolution: "acorn-walk@npm:8.3.2" @@ -12481,16 +12171,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^7.1.1": - version: 7.4.1 - resolution: "acorn@npm:7.4.1" - bin: - acorn: bin/acorn - checksum: 10c0/bd0b2c2b0f334bbee48828ff897c12bd2eb5898d03bf556dcc8942022cec795ac5bb5b6b585e2de687db6231faf07e096b59a361231dd8c9344d5df5f7f0e526 - languageName: node - linkType: hard - -"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.1.3, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.0.0, acorn@npm:^8.0.4, acorn@npm:^8.1.3, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0": version: 8.11.3 resolution: "acorn@npm:8.11.3" bin: @@ -13420,24 +13101,6 @@ __metadata: languageName: node linkType: hard -"babel-jest@npm:^27.5.1": - version: 27.5.1 - resolution: "babel-jest@npm:27.5.1" - dependencies: - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/babel__core": "npm:^7.1.14" - babel-plugin-istanbul: "npm:^6.1.1" - babel-preset-jest: "npm:^27.5.1" - chalk: "npm:^4.0.0" - graceful-fs: "npm:^4.2.9" - slash: "npm:^3.0.0" - peerDependencies: - "@babel/core": ^7.8.0 - checksum: 10c0/3ec8fdabba150431e430ab98d31ba62a1e0bc0fb2fd8d9236cb7dffda740de99c0b04f24da54ff0b5814dce9f81ff0c35a61add53c0734775996a11a7ba38318 - languageName: node - linkType: hard - "babel-plugin-istanbul@npm:^6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" @@ -13451,18 +13114,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-jest-hoist@npm:^27.5.1": - version: 27.5.1 - resolution: "babel-plugin-jest-hoist@npm:27.5.1" - dependencies: - "@babel/template": "npm:^7.3.3" - "@babel/types": "npm:^7.3.3" - "@types/babel__core": "npm:^7.0.0" - "@types/babel__traverse": "npm:^7.0.6" - checksum: 10c0/2f08ebde32d9d2bffff75524bda44812995b3fcab6cbf259e1db52561b6c8d829f4688db77ef277054a362c9a61826e121a2a4853b0bf93d077ebb3b69685f8e - languageName: node - linkType: hard - "babel-plugin-polyfill-corejs2@npm:^0.4.10, babel-plugin-polyfill-corejs2@npm:^0.4.8": version: 0.4.11 resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" @@ -13533,40 +13184,6 @@ __metadata: languageName: node linkType: hard -"babel-preset-current-node-syntax@npm:^1.0.0": - version: 1.0.1 - resolution: "babel-preset-current-node-syntax@npm:1.0.1" - dependencies: - "@babel/plugin-syntax-async-generators": "npm:^7.8.4" - "@babel/plugin-syntax-bigint": "npm:^7.8.3" - "@babel/plugin-syntax-class-properties": "npm:^7.8.3" - "@babel/plugin-syntax-import-meta": "npm:^7.8.3" - "@babel/plugin-syntax-json-strings": "npm:^7.8.3" - "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.8.3" - "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" - "@babel/plugin-syntax-numeric-separator": "npm:^7.8.3" - "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" - "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" - "@babel/plugin-syntax-top-level-await": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/5ba39a3a0e6c37d25e56a4fb843be632dac98d54706d8a0933f9bcb1a07987a96d55c2b5a6c11788a74063fb2534fe68c1f1dbb6c93626850c785e0938495627 - languageName: node - linkType: hard - -"babel-preset-jest@npm:^27.5.1": - version: 27.5.1 - resolution: "babel-preset-jest@npm:27.5.1" - dependencies: - babel-plugin-jest-hoist: "npm:^27.5.1" - babel-preset-current-node-syntax: "npm:^1.0.0" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 10c0/fc2f7fd03d8cddb36e0a07a94f1bb1826f7d7dae1f3519ed170c7a5e56c863aecbdb3fd2b034674a53210088478f000318b06415bad511bcf203c5729e5dd079 - languageName: node - linkType: hard - "backoff@npm:2.5.0": version: 2.5.0 resolution: "backoff@npm:2.5.0" @@ -13926,13 +13543,6 @@ __metadata: languageName: node linkType: hard -"browser-process-hrtime@npm:^1.0.0": - version: 1.0.0 - resolution: "browser-process-hrtime@npm:1.0.0" - checksum: 10c0/65da78e51e9d7fa5909147f269c54c65ae2e03d1cf797cc3cfbbe49f475578b8160ce4a76c36c1a2ffbff26c74f937d73096c508057491ddf1a6dfd11143f72d - languageName: node - linkType: hard - "browserify-zlib@npm:^0.1.4": version: 0.1.4 resolution: "browserify-zlib@npm:0.1.4" @@ -14191,6 +13801,16 @@ __metadata: languageName: node linkType: hard +"cacheable@npm:^1.8.7": + version: 1.8.7 + resolution: "cacheable@npm:1.8.7" + dependencies: + hookified: "npm:^1.6.0" + keyv: "npm:^5.2.3" + checksum: 10c0/3403c2afe9f8bb804b2371e2aa45f10c1f817945ce20b3da2338d2f0b099c9a9d28e59939592e832ba0e6b1d932f8555cc0a0d815ca7bd68a086e1ad131ae40a + languageName: node + linkType: hard + "cachedir@npm:^2.3.0": version: 2.4.0 resolution: "cachedir@npm:2.4.0" @@ -14449,6 +14069,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" @@ -14469,13 +14096,6 @@ __metadata: languageName: node linkType: hard -"char-regex@npm:^1.0.2": - version: 1.0.2 - resolution: "char-regex@npm:1.0.2" - checksum: 10c0/57a09a86371331e0be35d9083ba429e86c4f4648ecbe27455dbfb343037c16ee6fdc7f6b61f433a57cc5ded5561d71c56a150e018f40c2ffb7bc93a26dae341e - languageName: node - linkType: hard - "character-entities-html4@npm:^2.0.0": version: 2.1.0 resolution: "character-entities-html4@npm:2.1.0" @@ -14722,7 +14342,7 @@ __metadata: languageName: node linkType: hard -"cjs-module-lexer@npm:^1.0.0, cjs-module-lexer@npm:^1.2.3": +"cjs-module-lexer@npm:^1.2.3": version: 1.2.3 resolution: "cjs-module-lexer@npm:1.2.3" checksum: 10c0/0de9a9c3fad03a46804c0d38e7b712fb282584a9c7ef1ed44cae22fb71d9bb600309d66a9711ac36a596fd03422f5bb03e021e8f369c12a39fa1786ae531baab @@ -14995,13 +14615,6 @@ __metadata: languageName: node linkType: hard -"collect-v8-coverage@npm:^1.0.0": - version: 1.0.2 - resolution: "collect-v8-coverage@npm:1.0.2" - checksum: 10c0/ed7008e2e8b6852c5483b444a3ae6e976e088d4335a85aa0a9db2861c5f1d31bd2d7ff97a60469b3388deeba661a619753afbe201279fb159b4b9548ab8269a1 - languageName: node - linkType: hard - "color-convert@npm:^1.9.0, color-convert@npm:^1.9.3": version: 1.9.3 resolution: "color-convert@npm:1.9.3" @@ -15256,6 +14869,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:~12.1.0": + version: 12.1.0 + resolution: "commander@npm:12.1.0" + checksum: 10c0/6e1996680c083b3b897bfc1cfe1c58dfbcd9842fd43e1aaf8a795fbc237f65efcc860a3ef457b318e73f29a4f4a28f6403c3d653d021d960e4632dd45bde54a9 + languageName: node + linkType: hard + "comment-json@npm:4.2.5": version: 4.2.5 resolution: "comment-json@npm:4.2.5" @@ -15645,13 +15265,6 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.6.0": - version: 1.9.0 - resolution: "convert-source-map@npm:1.9.0" - checksum: 10c0/281da55454bf8126cbc6625385928c43479f2060984180c42f3a86c8b8c12720a24eac260624a7d1e090004028d2dee78602330578ceec1a08e27cb8bb0a8a5b - languageName: node - linkType: hard - "convert-source-map@npm:^2.0.0": version: 2.0.0 resolution: "convert-source-map@npm:2.0.0" @@ -15978,10 +15591,10 @@ __metadata: languageName: node linkType: hard -"css-functions-list@npm:^3.2.2": - version: 3.2.2 - resolution: "css-functions-list@npm:3.2.2" - checksum: 10c0/8638a63d0cf1bdc50d4a752ec1c94a57e9953c3b03eace4f5526db20bec3c061e95089f905dbb4999c44b9780ce777ba856967560f6d15119a303f6030901c10 +"css-functions-list@npm:^3.2.3": + version: 3.2.3 + resolution: "css-functions-list@npm:3.2.3" + checksum: 10c0/03f9ed34eeed310d2b1cf0e524eea02bc5f87854a4de85f8957ea432ab1036841a3fb00879590519f7bb8fda40d992ce7a72fa9b61696ca1dc53b90064858f96 languageName: node linkType: hard @@ -16065,6 +15678,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^3.1.0": + version: 3.1.0 + resolution: "css-tree@npm:3.1.0" + dependencies: + mdn-data: "npm:2.12.2" + source-map-js: "npm:^1.0.1" + checksum: 10c0/b5715852c2f397c715ca00d56ec53fc83ea596295ae112eb1ba6a1bda3b31086380e596b1d8c4b980fe6da09e7d0fc99c64d5bb7313030dd0fba9c1415f30979 + languageName: node + linkType: hard + "css-tree@npm:~2.2.0": version: 2.2.1 resolution: "css-tree@npm:2.2.1" @@ -16245,29 +15868,6 @@ __metadata: languageName: node linkType: hard -"cssom@npm:^0.4.4": - version: 0.4.4 - resolution: "cssom@npm:0.4.4" - checksum: 10c0/0d4fc70255ea3afbd4add79caffa3b01720929da91105340600d8c0f06c31716f933c6314c3d43b62b57c9637bc2eb35296a9e2db427e8b572ee38a4be2b5f82 - languageName: node - linkType: hard - -"cssom@npm:~0.3.6": - version: 0.3.8 - resolution: "cssom@npm:0.3.8" - checksum: 10c0/d74017b209440822f9e24d8782d6d2e808a8fdd58fa626a783337222fe1c87a518ba944d4c88499031b4786e68772c99dfae616638d71906fe9f203aeaf14411 - languageName: node - linkType: hard - -"cssstyle@npm:^2.3.0": - version: 2.3.0 - resolution: "cssstyle@npm:2.3.0" - dependencies: - cssom: "npm:~0.3.6" - checksum: 10c0/863400da2a458f73272b9a55ba7ff05de40d850f22eb4f37311abebd7eff801cf1cd2fb04c4c92b8c3daed83fe766e52e4112afb7bc88d86c63a9c2256a7d178 - languageName: node - linkType: hard - "csstype@npm:^3.0.2": version: 3.1.3 resolution: "csstype@npm:3.1.3" @@ -16347,17 +15947,6 @@ __metadata: languageName: node linkType: hard -"data-urls@npm:^2.0.0": - version: 2.0.0 - resolution: "data-urls@npm:2.0.0" - dependencies: - abab: "npm:^2.0.3" - whatwg-mimetype: "npm:^2.3.0" - whatwg-url: "npm:^8.0.0" - checksum: 10c0/1246442178eb756afb1d99e54669a119eafb3e69c73300d14089687c50c64f9feadd93c973f496224a12f89daa94267a6114aecd70e9b279c09d908c5be44d01 - languageName: node - linkType: hard - "data-view-buffer@npm:^1.0.1": version: 1.0.1 resolution: "data-view-buffer@npm:1.0.1" @@ -16484,6 +16073,18 @@ __metadata: languageName: node linkType: hard +"debug@npm:~4.4.0": + version: 4.4.0 + resolution: "debug@npm:4.4.0" + dependencies: + ms: "npm:^2.1.3" + peerDependenciesMeta: + supports-color: + optional: true + checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de + languageName: node + linkType: hard + "decache@npm:4.6.2": version: 4.6.2 resolution: "decache@npm:4.6.2" @@ -16517,13 +16118,6 @@ __metadata: languageName: node linkType: hard -"decimal.js@npm:^10.2.1": - version: 10.4.3 - resolution: "decimal.js@npm:10.4.3" - checksum: 10c0/6d60206689ff0911f0ce968d40f163304a6c1bc739927758e6efc7921cfa630130388966f16bf6ef6b838cb33679fbe8e7a78a2f3c478afce841fd55ac8fb8ee - languageName: node - linkType: hard - "decode-named-character-reference@npm:^1.0.0": version: 1.0.2 resolution: "decode-named-character-reference@npm:1.0.2" @@ -16867,13 +16461,6 @@ __metadata: languageName: node linkType: hard -"detect-newline@npm:^3.0.0": - version: 3.1.0 - resolution: "detect-newline@npm:3.1.0" - checksum: 10c0/c38cfc8eeb9fda09febb44bcd85e467c970d4e3bf526095394e5a4f18bc26dd0cf6b22c69c1fa9969261521c593836db335c2795218f6d781a512aea2fb8209d - languageName: node - linkType: hard - "detect-node-es@npm:^1.1.0": version: 1.1.0 resolution: "detect-node-es@npm:1.1.0" @@ -17020,13 +16607,6 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^27.5.1": - version: 27.5.1 - resolution: "diff-sequences@npm:27.5.1" - checksum: 10c0/a52566d891b89a666f48ba69f54262fa8293ae6264ae04da82c7bf3b6661cba75561de0729f18463179d56003cc0fd69aa09845f2c2cd7a353b1ec1e1a96beb9 - languageName: node - linkType: hard - "diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" @@ -17178,15 +16758,6 @@ __metadata: languageName: node linkType: hard -"domexception@npm:^2.0.1": - version: 2.0.1 - resolution: "domexception@npm:2.0.1" - dependencies: - webidl-conversions: "npm:^5.0.0" - checksum: 10c0/24a3a07b85420671bc805ead7305e0f2ec9e55f104889b64c5a9fa7d93681e514f05c65f947bd9401b3da67f77b92fe7861bd15f4d0d418c4d32e34a2cd55d38 - languageName: node - linkType: hard - "domhandler@npm:^4.2.0, domhandler@npm:^4.2.2": version: 4.2.2 resolution: "domhandler@npm:4.2.2" @@ -17384,13 +16955,6 @@ __metadata: languageName: node linkType: hard -"emittery@npm:^0.8.1": - version: 0.8.1 - resolution: "emittery@npm:0.8.1" - checksum: 10c0/1302868b6e258909964339f28569b97658d75c1030271024ac2f50f84957eab6a6a04278861a9c1d47131b9dfb50f25a5d017750d1c99cd86763e19a93b838bf - languageName: node - linkType: hard - "emoji-regex@npm:^10.2.1": version: 10.2.1 resolution: "emoji-regex@npm:10.2.1" @@ -18331,13 +17895,6 @@ __metadata: languageName: node linkType: hard -"escape-string-regexp@npm:^2.0.0": - version: 2.0.0 - resolution: "escape-string-regexp@npm:2.0.0" - checksum: 10c0/2530479fe8db57eace5e8646c9c2a9c80fa279614986d16dcc6bcaceb63ae77f05a851ba6c43756d816c61d7f4534baf56e3c705e3e0d884818a46808811c507 - languageName: node - linkType: hard - "escape-string-regexp@npm:^4.0.0": version: 4.0.0 resolution: "escape-string-regexp@npm:4.0.0" @@ -18645,7 +18202,7 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": +"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820 @@ -18709,7 +18266,7 @@ __metadata: languageName: node linkType: hard -"espree@npm:^9.6.0, espree@npm:^9.6.1": +"espree@npm:^9.0.0, espree@npm:^9.6.0, espree@npm:^9.6.1": version: 9.6.1 resolution: "espree@npm:9.6.1" dependencies: @@ -18991,7 +18548,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:^8.0.1": +"execa@npm:^8.0.1, execa@npm:~8.0.1": version: 8.0.1 resolution: "execa@npm:8.0.1" dependencies: @@ -19008,13 +18565,6 @@ __metadata: languageName: node linkType: hard -"exit@npm:^0.1.2": - version: 0.1.2 - resolution: "exit@npm:0.1.2" - checksum: 10c0/71d2ad9b36bc25bb8b104b17e830b40a08989be7f7d100b13269aaae7c3784c3e6e1e88a797e9e87523993a25ba27c8958959a554535370672cfb4d824af8989 - languageName: node - linkType: hard - "expand-template@npm:^2.0.3": version: 2.0.3 resolution: "expand-template@npm:2.0.3" @@ -19031,18 +18581,6 @@ __metadata: languageName: node linkType: hard -"expect@npm:^27.5.1": - version: 27.5.1 - resolution: "expect@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - jest-get-type: "npm:^27.5.1" - jest-matcher-utils: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - checksum: 10c0/020e237c7191a584bc25a98181c3969cdd62fa1c044e4d81d5968e24075f39bc2349fcee48de82431033823b525e7cf5ac410b253b3115392f1026cb27258811 - languageName: node - linkType: hard - "exponential-backoff@npm:^3.1.1": version: 3.1.1 resolution: "exponential-backoff@npm:3.1.1" @@ -19276,6 +18814,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:^3.3.3": + version: 3.3.3 + resolution: "fast-glob@npm:3.3.3" + dependencies: + "@nodelib/fs.stat": "npm:^2.0.2" + "@nodelib/fs.walk": "npm:^1.2.3" + glob-parent: "npm:^5.1.2" + merge2: "npm:^1.3.0" + micromatch: "npm:^4.0.8" + checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe + languageName: node + linkType: hard + "fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" @@ -19520,6 +19071,15 @@ __metadata: languageName: node linkType: hard +"file-entry-cache@npm:^10.0.5": + version: 10.0.5 + resolution: "file-entry-cache@npm:10.0.5" + dependencies: + flat-cache: "npm:^6.1.5" + checksum: 10c0/c7d9bd537d1862db5357ecc688a22dc9287c2590e9eba04e85e0601d6143905eaa5edc5534f1dd92e24713f230ee69d99e150d7b6120c6d940f40beccdd5caf3 + languageName: node + linkType: hard + "file-entry-cache@npm:^6.0.1": version: 6.0.1 resolution: "file-entry-cache@npm:6.0.1" @@ -19529,15 +19089,6 @@ __metadata: languageName: node linkType: hard -"file-entry-cache@npm:^8.0.0": - version: 8.0.0 - resolution: "file-entry-cache@npm:8.0.0" - dependencies: - flat-cache: "npm:^4.0.0" - checksum: 10c0/9e2b5938b1cd9b6d7e3612bdc533afd4ac17b2fc646569e9a8abbf2eb48e5eb8e316bc38815a3ef6a1b456f4107f0d0f055a614ca613e75db6bf9ff4d72c1638 - languageName: node - linkType: hard - "file-system-cache@npm:2.3.0": version: 2.3.0 resolution: "file-system-cache@npm:2.3.0" @@ -19864,13 +19415,14 @@ __metadata: languageName: node linkType: hard -"flat-cache@npm:^4.0.0": - version: 4.0.1 - resolution: "flat-cache@npm:4.0.1" +"flat-cache@npm:^6.1.5": + version: 6.1.5 + resolution: "flat-cache@npm:6.1.5" dependencies: - flatted: "npm:^3.2.9" - keyv: "npm:^4.5.4" - checksum: 10c0/2c59d93e9faa2523e4fda6b4ada749bed432cfa28c8e251f33b25795e426a1c6dbada777afb1f74fcfff33934fdbdea921ee738fcc33e71adc9d6eca984a1cfc + cacheable: "npm:^1.8.7" + flatted: "npm:^3.3.2" + hookified: "npm:^1.6.0" + checksum: 10c0/b107edc1c24a8fabe89645001fb8b1479016177d92be45dc6ba739e688131fe35fffbf13516d2f7bb3dc5c1256ff8721f16ec1858c4ee77e46f93c9093c53689 languageName: node linkType: hard @@ -19890,6 +19442,13 @@ __metadata: languageName: node linkType: hard +"flatted@npm:^3.3.2": + version: 3.3.2 + resolution: "flatted@npm:3.3.2" + checksum: 10c0/24cc735e74d593b6c767fe04f2ef369abe15b62f6906158079b9874bdb3ee5ae7110bb75042e70cd3f99d409d766f357caf78d5ecee9780206f5fdc5edbad334 + languageName: node + linkType: hard + "flow-parser@npm:0.*": version: 0.235.1 resolution: "flow-parser@npm:0.235.1" @@ -19982,17 +19541,6 @@ __metadata: languageName: node linkType: hard -"form-data@npm:^3.0.0": - version: 3.0.1 - resolution: "form-data@npm:3.0.1" - dependencies: - asynckit: "npm:^0.4.0" - combined-stream: "npm:^1.0.8" - mime-types: "npm:^2.1.12" - checksum: 10c0/1ccc3ae064a080a799923f754d49fcebdd90515a8924f0f54de557540b50e7f1fe48ba5f2bd0435a5664aa2d49729107e6aaf2155a9abf52339474c5638b4485 - languageName: node - linkType: hard - "form-data@npm:^4.0.0": version: 4.0.0 resolution: "form-data@npm:4.0.0" @@ -20767,7 +20315,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": +"glob@npm:^7.0.3, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": version: 7.2.3 resolution: "glob@npm:7.2.3" dependencies: @@ -21402,6 +20950,13 @@ __metadata: languageName: node linkType: hard +"hookified@npm:^1.6.0": + version: 1.6.0 + resolution: "hookified@npm:1.6.0" + checksum: 10c0/00ae9502315a21b559c2d057e02d1418a812e015df701b89f590ddbce135e422058e6e97b1047ef4b0b96477bf08e36f3f572fe247c8f3370a126555800ae46f + languageName: node + linkType: hard + "hosted-git-info@npm:^2.1.4": version: 2.8.9 resolution: "hosted-git-info@npm:2.8.9" @@ -21490,15 +21045,6 @@ __metadata: languageName: node linkType: hard -"html-encoding-sniffer@npm:^2.0.1": - version: 2.0.1 - resolution: "html-encoding-sniffer@npm:2.0.1" - dependencies: - whatwg-encoding: "npm:^1.0.5" - checksum: 10c0/6dc3aa2d35a8f0c8c7906ffb665dd24a88f7004f913fafdd3541d24a4da6182ab30c4a0a81387649a1234ecb90182c4136220ed12ae3dc1a57ed68e533dea416 - languageName: node - linkType: hard - "html-encoding-sniffer@npm:^3.0.0": version: 3.0.0 resolution: "html-encoding-sniffer@npm:3.0.0" @@ -21680,17 +21226,6 @@ __metadata: languageName: node linkType: hard -"http-proxy-agent@npm:^4.0.1": - version: 4.0.1 - resolution: "http-proxy-agent@npm:4.0.1" - dependencies: - "@tootallnate/once": "npm:1" - agent-base: "npm:6" - debug: "npm:4" - checksum: 10c0/4fa4774d65b5331814b74ac05cefea56854fc0d5989c80b13432c1b0d42a14c9f4342ca3ad9f0359a52e78da12b1744c9f8a28e50042136ea9171675d972a5fd - languageName: node - linkType: hard - "http-proxy-agent@npm:^5.0.0": version: 5.0.0 resolution: "http-proxy-agent@npm:5.0.0" @@ -21953,6 +21488,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^7.0.1": + version: 7.0.3 + resolution: "ignore@npm:7.0.3" + checksum: 10c0/8e21637513cbcd888a4873d34d5c651a2e24b3c4c9a6b159335a26bed348c3c386c51d6fab23577f59140e1b226323138fbd50e63882d4568fd12aa6c822029e + languageName: node + linkType: hard + "image-meta@npm:^0.2.0": version: 0.2.1 resolution: "image-meta@npm:0.2.1" @@ -22596,13 +22138,6 @@ __metadata: languageName: node linkType: hard -"is-generator-fn@npm:^2.0.0": - version: 2.1.0 - resolution: "is-generator-fn@npm:2.1.0" - checksum: 10c0/2957cab387997a466cd0bf5c1b6047bd21ecb32bdcfd8996b15747aa01002c1c88731802f1b3d34ac99f4f6874b626418bd118658cf39380fe5fff32a3af9c4d - languageName: node - linkType: hard - "is-generator-function@npm:^1.0.7": version: 1.0.10 resolution: "is-generator-function@npm:1.0.10" @@ -22882,13 +22417,6 @@ __metadata: languageName: node linkType: hard -"is-potential-custom-element-name@npm:^1.0.1": - version: 1.0.1 - resolution: "is-potential-custom-element-name@npm:1.0.1" - checksum: 10c0/b73e2f22bc863b0939941d369486d308b43d7aef1f9439705e3582bfccaa4516406865e32c968a35f97a99396dac84e2624e67b0a16b0a15086a785e16ce7db9 - languageName: node - linkType: hard - "is-reference@npm:1.2.1": version: 1.2.1 resolution: "is-reference@npm:1.2.1" @@ -23260,7 +22788,7 @@ __metadata: languageName: node linkType: hard -"istanbul-lib-instrument@npm:^5.0.4, istanbul-lib-instrument@npm:^5.1.0": +"istanbul-lib-instrument@npm:^5.0.4": version: 5.2.1 resolution: "istanbul-lib-instrument@npm:5.2.1" dependencies: @@ -23284,17 +22812,6 @@ __metadata: languageName: node linkType: hard -"istanbul-lib-source-maps@npm:^4.0.0": - version: 4.0.1 - resolution: "istanbul-lib-source-maps@npm:4.0.1" - dependencies: - debug: "npm:^4.1.1" - istanbul-lib-coverage: "npm:^3.0.0" - source-map: "npm:^0.6.1" - checksum: 10c0/19e4cc405016f2c906dff271a76715b3e881fa9faeb3f09a86cb99b8512b3a5ed19cadfe0b54c17ca0e54c1142c9c6de9330d65506e35873994e06634eebeb66 - languageName: node - linkType: hard - "istanbul-reports@npm:^3.0.2": version: 3.1.7 resolution: "istanbul-reports@npm:3.1.7" @@ -23305,16 +22822,6 @@ __metadata: languageName: node linkType: hard -"istanbul-reports@npm:^3.1.3": - version: 3.1.5 - resolution: "istanbul-reports@npm:3.1.5" - dependencies: - html-escaper: "npm:^2.0.0" - istanbul-lib-report: "npm:^3.0.0" - checksum: 10c0/3a147171bffdbd3034856410b6ec81637871d17d10986513328fec23df6b666f66bd08ea480f5b7a5b9f7e8abc30f3e3c2e7d1b661fc57cdc479aaaa677b1011 - languageName: node - linkType: hard - "jackspeak@npm:^2.3.5, jackspeak@npm:^2.3.6": version: 2.3.6 resolution: "jackspeak@npm:2.3.6" @@ -23355,108 +22862,6 @@ __metadata: languageName: node linkType: hard -"jest-changed-files@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-changed-files@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - execa: "npm:^5.0.0" - throat: "npm:^6.0.1" - checksum: 10c0/ee2e663da669a1f8a1452626c71b9691a34cc6789bbf6cb04ef4430a63301db806039e93dd5c9cc6c0caa3d3f250ff18ed51e058fc3533a71f73e24f41b5d1bd - languageName: node - linkType: hard - -"jest-circus@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-circus@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - co: "npm:^4.6.0" - dedent: "npm:^0.7.0" - expect: "npm:^27.5.1" - is-generator-fn: "npm:^2.0.0" - jest-each: "npm:^27.5.1" - jest-matcher-utils: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-runtime: "npm:^27.5.1" - jest-snapshot: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - slash: "npm:^3.0.0" - stack-utils: "npm:^2.0.3" - throat: "npm:^6.0.1" - checksum: 10c0/195b88ff6c74a1ad0f2386bea25700e884f32e05be9211bc197b960e7553a952ab38aff9aafb057c6a92eaa85bde2804e01244278a477b80a99e11f890ee15d9 - languageName: node - linkType: hard - -"jest-cli@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-cli@npm:27.5.1" - dependencies: - "@jest/core": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - chalk: "npm:^4.0.0" - exit: "npm:^0.1.2" - graceful-fs: "npm:^4.2.9" - import-local: "npm:^3.0.2" - jest-config: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-validate: "npm:^27.5.1" - prompts: "npm:^2.0.1" - yargs: "npm:^16.2.0" - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - bin: - jest: bin/jest.js - checksum: 10c0/45abaafbe1a01ea4c48953c85d42c961b6e33ef5847e10642713cde97761611b0af56d5a0dcb82abf19c500c6e9b680222a7f953b437e5760ba584521b74f9ea - languageName: node - linkType: hard - -"jest-config@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-config@npm:27.5.1" - dependencies: - "@babel/core": "npm:^7.8.0" - "@jest/test-sequencer": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - babel-jest: "npm:^27.5.1" - chalk: "npm:^4.0.0" - ci-info: "npm:^3.2.0" - deepmerge: "npm:^4.2.2" - glob: "npm:^7.1.1" - graceful-fs: "npm:^4.2.9" - jest-circus: "npm:^27.5.1" - jest-environment-jsdom: "npm:^27.5.1" - jest-environment-node: "npm:^27.5.1" - jest-get-type: "npm:^27.5.1" - jest-jasmine2: "npm:^27.5.1" - jest-regex-util: "npm:^27.5.1" - jest-resolve: "npm:^27.5.1" - jest-runner: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-validate: "npm:^27.5.1" - micromatch: "npm:^4.0.4" - parse-json: "npm:^5.2.0" - pretty-format: "npm:^27.5.1" - slash: "npm:^3.0.0" - strip-json-comments: "npm:^3.1.1" - peerDependencies: - ts-node: ">=9.0.0" - peerDependenciesMeta: - ts-node: - optional: true - checksum: 10c0/28867b165f0e25b711a2ade5f261a1b1606b476704ff68a50688eaf3b9c853f69542645cc7e0dab38079ed74e3acc99e38628faf736c1739e44fc869c62c6051 - languageName: node - linkType: hard - "jest-diff@npm:>=29.4.3 < 30, jest-diff@npm:^29.4.1": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" @@ -23469,69 +22874,6 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-diff@npm:27.5.1" - dependencies: - chalk: "npm:^4.0.0" - diff-sequences: "npm:^27.5.1" - jest-get-type: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - checksum: 10c0/48f008c7b4ea7794108319eb61050315b1723e7391cb01e4377c072cadcab10a984cb09d2a6876cb65f100d06c970fd932996192e092b26006f885c00945e7ad - languageName: node - linkType: hard - -"jest-docblock@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-docblock@npm:27.5.1" - dependencies: - detect-newline: "npm:^3.0.0" - checksum: 10c0/0ce3661a9152497b3a766996eda42edeab51f676fa57ec414a0168fef2a9b1784d056879281c22bca2875c9e63d41327cac0749a8c6e205330e13fcfe0e40316 - languageName: node - linkType: hard - -"jest-each@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-each@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - chalk: "npm:^4.0.0" - jest-get-type: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - checksum: 10c0/e382f677e69c15aa906ec0ae2d3d944aa948ce338b2bbcb480b76c16eb12cc2141d78edda48c510363e3b2c507cc2140569c3a163c64ffa34e14cc6a8b37fb81 - languageName: node - linkType: hard - -"jest-environment-jsdom@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-environment-jsdom@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/fake-timers": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - jest-mock: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jsdom: "npm:^16.6.0" - checksum: 10c0/ea759ffa43e96d773983a4172c32c1a3774907723564a30a001c8a85d22d9ed82f6c45329a514152744e8916379c1c4cf9e527297ecfa1e8a4cc4888141b38fd - languageName: node - linkType: hard - -"jest-environment-node@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-environment-node@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/fake-timers": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - jest-mock: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - checksum: 10c0/3bbc31545436c6bb4a18841241e62036382a7261b9bb8cdc2823ec942a8a3053f98219b3ec2a4a7920bfba347602c16dd16767d9fece915134aee2e30091165c - languageName: node - linkType: hard - "jest-get-type@npm:^27.5.1": version: 27.5.1 resolution: "jest-get-type@npm:27.5.1" @@ -23546,30 +22888,6 @@ __metadata: languageName: node linkType: hard -"jest-haste-map@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-haste-map@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/graceful-fs": "npm:^4.1.2" - "@types/node": "npm:*" - anymatch: "npm:^3.0.3" - fb-watchman: "npm:^2.0.0" - fsevents: "npm:^2.3.2" - graceful-fs: "npm:^4.2.9" - jest-regex-util: "npm:^27.5.1" - jest-serializer: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-worker: "npm:^27.5.1" - micromatch: "npm:^4.0.4" - walker: "npm:^1.0.7" - dependenciesMeta: - fsevents: - optional: true - checksum: 10c0/831ae476fddc6babe64ea3e7f91b4ccee0371c03ec88af5a615023711866abdd496b51344f47c4d02b6b47b433367ca41e9e42d79527b39afec767e8be9e8a63 - languageName: node - linkType: hard - "jest-haste-map@npm:^29.7.0": version: 29.7.0 resolution: "jest-haste-map@npm:29.7.0" @@ -23593,108 +22911,6 @@ __metadata: languageName: node linkType: hard -"jest-jasmine2@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-jasmine2@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/source-map": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - co: "npm:^4.6.0" - expect: "npm:^27.5.1" - is-generator-fn: "npm:^2.0.0" - jest-each: "npm:^27.5.1" - jest-matcher-utils: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-runtime: "npm:^27.5.1" - jest-snapshot: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - throat: "npm:^6.0.1" - checksum: 10c0/028172d5d65abf7e8da89c30894112efdd18007a934f30b89e3f35def3764824a9680917996d5e551caa2087589a372a2539777d5554fa3bae6c7e36afec6d4c - languageName: node - linkType: hard - -"jest-leak-detector@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-leak-detector@npm:27.5.1" - dependencies: - jest-get-type: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - checksum: 10c0/33ec88ab7d76931ae0a03b18186234114e42a4e9fae748f8a197f7f85b884c2e92ea692c06704b8a469ac26b9c6411a7a1bbc8d34580ed56672a7f6be2681aee - languageName: node - linkType: hard - -"jest-matcher-utils@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-matcher-utils@npm:27.5.1" - dependencies: - chalk: "npm:^4.0.0" - jest-diff: "npm:^27.5.1" - jest-get-type: "npm:^27.5.1" - pretty-format: "npm:^27.5.1" - checksum: 10c0/a2f082062e8bedc9cfe2654177a894ca43768c6db4c0f4efc0d6ec195e305a99e3d868ff54cc61bcd7f1c810d8ee28c9ac6374de21715dc52f136876de739a73 - languageName: node - linkType: hard - -"jest-message-util@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-message-util@npm:27.5.1" - dependencies: - "@babel/code-frame": "npm:^7.12.13" - "@jest/types": "npm:^27.5.1" - "@types/stack-utils": "npm:^2.0.0" - chalk: "npm:^4.0.0" - graceful-fs: "npm:^4.2.9" - micromatch: "npm:^4.0.4" - pretty-format: "npm:^27.5.1" - slash: "npm:^3.0.0" - stack-utils: "npm:^2.0.3" - checksum: 10c0/447c99061006949bd0c5ac3fcf4dfad11e763712ada1b3df1c1f276d1d4f55b3f7a8bee27591cd1fe23b56220830b2a74f321925d345374d1b7cf9cd536f19b5 - languageName: node - linkType: hard - -"jest-mock@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-mock@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - checksum: 10c0/6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52 - languageName: node - linkType: hard - -"jest-pnp-resolver@npm:^1.2.2": - version: 1.2.3 - resolution: "jest-pnp-resolver@npm:1.2.3" - peerDependencies: - jest-resolve: "*" - peerDependenciesMeta: - jest-resolve: - optional: true - checksum: 10c0/86eec0c78449a2de733a6d3e316d49461af6a858070e113c97f75fb742a48c2396ea94150cbca44159ffd4a959f743a47a8b37a792ef6fdad2cf0a5cba973fac - languageName: node - linkType: hard - -"jest-preset-stylelint@npm:^7.0.0": - version: 7.0.0 - resolution: "jest-preset-stylelint@npm:7.0.0" - peerDependencies: - jest: ^29.0.2 - checksum: 10c0/cb1615d82f9300f569587a561639e5fadc9303d6cd9c1bc2f646fff5091750fd488e1a25218afb4cd445e09e4d4c4489b38d15e67cd7e24ba5543231a2b3193c - languageName: node - linkType: hard - -"jest-regex-util@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-regex-util@npm:27.5.1" - checksum: 10c0/f9790d417b667b38155c4bbd58f2afc0ad9f774381e5358776df02df3f29564069d4773c7ba050db6826bad8a4cc7ef82c3b4c65bfa508e419fdd063a9682c42 - languageName: node - linkType: hard - "jest-regex-util@npm:^29.6.3": version: 29.6.3 resolution: "jest-regex-util@npm:29.6.3" @@ -23702,148 +22918,6 @@ __metadata: languageName: node linkType: hard -"jest-resolve-dependencies@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-resolve-dependencies@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - jest-regex-util: "npm:^27.5.1" - jest-snapshot: "npm:^27.5.1" - checksum: 10c0/06ba847f9386b0c198bb033a2041fac141dec443ae3c60acdc3426c1844aa4c942770f8f272a1f54686979894e389bc7774d4123bb3a0fbfabe02b7deef9ef62 - languageName: node - linkType: hard - -"jest-resolve@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-resolve@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - chalk: "npm:^4.0.0" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^27.5.1" - jest-pnp-resolver: "npm:^1.2.2" - jest-util: "npm:^27.5.1" - jest-validate: "npm:^27.5.1" - resolve: "npm:^1.20.0" - resolve.exports: "npm:^1.1.0" - slash: "npm:^3.0.0" - checksum: 10c0/5f9577e424346881964683f22472bd12bd9cfd70e49cb1800ccd31f2e88b0985ed353ca5cc7fb02de9093be2c733ab32de526c99a1192455ddb167afe916efd1 - languageName: node - linkType: hard - -"jest-runner@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-runner@npm:27.5.1" - dependencies: - "@jest/console": "npm:^27.5.1" - "@jest/environment": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - emittery: "npm:^0.8.1" - graceful-fs: "npm:^4.2.9" - jest-docblock: "npm:^27.5.1" - jest-environment-jsdom: "npm:^27.5.1" - jest-environment-node: "npm:^27.5.1" - jest-haste-map: "npm:^27.5.1" - jest-leak-detector: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-resolve: "npm:^27.5.1" - jest-runtime: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - jest-worker: "npm:^27.5.1" - source-map-support: "npm:^0.5.6" - throat: "npm:^6.0.1" - checksum: 10c0/b79962003c641eaabe4fa8855ee2127009c48f929dfca67f7fbdbc3fe84ea827964d5cbfcfd791405448011014172ea8c4faffe3669a148824ef4fac37838fe8 - languageName: node - linkType: hard - -"jest-runtime@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-runtime@npm:27.5.1" - dependencies: - "@jest/environment": "npm:^27.5.1" - "@jest/fake-timers": "npm:^27.5.1" - "@jest/globals": "npm:^27.5.1" - "@jest/source-map": "npm:^27.5.1" - "@jest/test-result": "npm:^27.5.1" - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - chalk: "npm:^4.0.0" - cjs-module-lexer: "npm:^1.0.0" - collect-v8-coverage: "npm:^1.0.0" - execa: "npm:^5.0.0" - glob: "npm:^7.1.3" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-mock: "npm:^27.5.1" - jest-regex-util: "npm:^27.5.1" - jest-resolve: "npm:^27.5.1" - jest-snapshot: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - slash: "npm:^3.0.0" - strip-bom: "npm:^4.0.0" - checksum: 10c0/22ec24f4b928bdbdb7415ae7470ef523a6379812b8d0500d4d2f2124107d3af2c8fb99842352e320e79a47508a017dd5ab4b713270ad04ba9144c1961672ce29 - languageName: node - linkType: hard - -"jest-serializer@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-serializer@npm:27.5.1" - dependencies: - "@types/node": "npm:*" - graceful-fs: "npm:^4.2.9" - checksum: 10c0/7a2b634a5a044b3ccf912a17032338309c90b50831a2e500f963b25e9a4ce9b550a1af1fb64f7c9a271ed6a1f951fca37bd0d61a0b286aefe197812193b0d825 - languageName: node - linkType: hard - -"jest-snapshot@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-snapshot@npm:27.5.1" - dependencies: - "@babel/core": "npm:^7.7.2" - "@babel/generator": "npm:^7.7.2" - "@babel/plugin-syntax-typescript": "npm:^7.7.2" - "@babel/traverse": "npm:^7.7.2" - "@babel/types": "npm:^7.0.0" - "@jest/transform": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/babel__traverse": "npm:^7.0.4" - "@types/prettier": "npm:^2.1.5" - babel-preset-current-node-syntax: "npm:^1.0.0" - chalk: "npm:^4.0.0" - expect: "npm:^27.5.1" - graceful-fs: "npm:^4.2.9" - jest-diff: "npm:^27.5.1" - jest-get-type: "npm:^27.5.1" - jest-haste-map: "npm:^27.5.1" - jest-matcher-utils: "npm:^27.5.1" - jest-message-util: "npm:^27.5.1" - jest-util: "npm:^27.5.1" - natural-compare: "npm:^1.4.0" - pretty-format: "npm:^27.5.1" - semver: "npm:^7.3.2" - checksum: 10c0/819ed445a749065efdfb7c3a5befb9331e550930acdcb8cbe49d5e64a1f05451a91094550aae6840e17afeeefc3660f205f2a7ba780fa0d0ebfa5dcfb1345f15 - languageName: node - linkType: hard - -"jest-util@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-util@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - ci-info: "npm:^3.2.0" - graceful-fs: "npm:^4.2.9" - picomatch: "npm:^2.2.3" - checksum: 10c0/0f60cd2a2e09a6646ccd4ff489f1970282c0694724104979e897bd5164f91204726f5408572bf5e759d09e59d5c4e4dc65a643d2b630e06a10402bba07bf2a2e - languageName: node - linkType: hard - "jest-util@npm:^29.7.0": version: 29.7.0 resolution: "jest-util@npm:29.7.0" @@ -23858,7 +22932,7 @@ __metadata: languageName: node linkType: hard -"jest-validate@npm:^27.3.1, jest-validate@npm:^27.4.2, jest-validate@npm:^27.5.1": +"jest-validate@npm:^27.3.1, jest-validate@npm:^27.4.2": version: 27.5.1 resolution: "jest-validate@npm:27.5.1" dependencies: @@ -23872,21 +22946,6 @@ __metadata: languageName: node linkType: hard -"jest-watcher@npm:^27.5.1": - version: 27.5.1 - resolution: "jest-watcher@npm:27.5.1" - dependencies: - "@jest/test-result": "npm:^27.5.1" - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - ansi-escapes: "npm:^4.2.1" - chalk: "npm:^4.0.0" - jest-util: "npm:^27.5.1" - string-length: "npm:^4.0.1" - checksum: 10c0/e42f5e38bc4da56bde6ccec4b13b7646460a3d6b567934e0ca96d72c2ce837223ffbb84a2f8428197da4323870c03f00969237f9b40f83a3072111a8cd66cc4b - languageName: node - linkType: hard - "jest-worker@npm:^26.2.1": version: 26.6.2 resolution: "jest-worker@npm:26.6.2" @@ -23898,7 +22957,7 @@ __metadata: languageName: node linkType: hard -"jest-worker@npm:^27.4.5, jest-worker@npm:^27.5.1": +"jest-worker@npm:^27.4.5": version: 27.5.1 resolution: "jest-worker@npm:27.5.1" dependencies: @@ -23921,24 +22980,6 @@ __metadata: languageName: node linkType: hard -"jest@npm:^27.0.1": - version: 27.5.1 - resolution: "jest@npm:27.5.1" - dependencies: - "@jest/core": "npm:^27.5.1" - import-local: "npm:^3.0.2" - jest-cli: "npm:^27.5.1" - peerDependencies: - node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0 - peerDependenciesMeta: - node-notifier: - optional: true - bin: - jest: bin/jest.js - checksum: 10c0/c013d07e911e423612756bc42d376e578b8721d847db38d94344f9cdf8fdaa0241b0a5c2fe1aad7b7758d415e0b9517c1098312f0d03760f123958d5b6cf5597 - languageName: node - linkType: hard - "jiti@npm:^1.19.1": version: 1.21.0 resolution: "jiti@npm:1.21.0" @@ -24043,46 +23084,6 @@ __metadata: languageName: node linkType: hard -"jsdom@npm:^16.6.0": - version: 16.7.0 - resolution: "jsdom@npm:16.7.0" - dependencies: - abab: "npm:^2.0.5" - acorn: "npm:^8.2.4" - acorn-globals: "npm:^6.0.0" - cssom: "npm:^0.4.4" - cssstyle: "npm:^2.3.0" - data-urls: "npm:^2.0.0" - decimal.js: "npm:^10.2.1" - domexception: "npm:^2.0.1" - escodegen: "npm:^2.0.0" - form-data: "npm:^3.0.0" - html-encoding-sniffer: "npm:^2.0.1" - http-proxy-agent: "npm:^4.0.1" - https-proxy-agent: "npm:^5.0.0" - is-potential-custom-element-name: "npm:^1.0.1" - nwsapi: "npm:^2.2.0" - parse5: "npm:6.0.1" - saxes: "npm:^5.0.1" - symbol-tree: "npm:^3.2.4" - tough-cookie: "npm:^4.0.0" - w3c-hr-time: "npm:^1.0.2" - w3c-xmlserializer: "npm:^2.0.0" - webidl-conversions: "npm:^6.1.0" - whatwg-encoding: "npm:^1.0.5" - whatwg-mimetype: "npm:^2.3.0" - whatwg-url: "npm:^8.5.0" - ws: "npm:^7.4.6" - xml-name-validator: "npm:^3.0.0" - peerDependencies: - canvas: ^2.5.0 - peerDependenciesMeta: - canvas: - optional: true - checksum: 10c0/e9ba6ea5f5e0d18647ccedec16bc3c69c8c739732ffcb27c66ffd3cc3f876add291ca4f0b9c209ace939ce2aa3ba9e4d67b7f05317921a4d3eab02fe1cc164ef - languageName: node - linkType: hard - "jsesc@npm:^2.5.1": version: 2.5.2 resolution: "jsesc@npm:2.5.2" @@ -24202,6 +23203,18 @@ __metadata: languageName: node linkType: hard +"jsonc-eslint-parser@npm:^2.4.0": + version: 2.4.0 + resolution: "jsonc-eslint-parser@npm:2.4.0" + dependencies: + acorn: "npm:^8.5.0" + eslint-visitor-keys: "npm:^3.0.0" + espree: "npm:^9.0.0" + semver: "npm:^7.3.5" + checksum: 10c0/1bef9f4f12122824e1d13ef651b7a8d16cbf6995bfd08fabb81df34ff0cf57f5c1c822dd5ee7aece0575fb1351538c8c5ce86f9b94d8f41bcd3bbe2773b62db3 + languageName: node + linkType: hard + "jsonc-parser@npm:3.2.0": version: 3.2.0 resolution: "jsonc-parser@npm:3.2.0" @@ -24379,7 +23392,7 @@ __metadata: languageName: node linkType: hard -"keyv@npm:^4.5.3, keyv@npm:^4.5.4": +"keyv@npm:^4.5.3": version: 4.5.4 resolution: "keyv@npm:4.5.4" dependencies: @@ -24388,6 +23401,15 @@ __metadata: languageName: node linkType: hard +"keyv@npm:^5.2.3": + version: 5.2.3 + resolution: "keyv@npm:5.2.3" + dependencies: + "@keyv/serialize": "npm:^1.0.2" + checksum: 10c0/76b87dd2c21a4c1c5c05e9ff3b85670beab98f153429aaa9aee544b72b65411a7d80d96c29f3fef3e9dcebb672c8268e7209d6f80beb5da939b4e019722948b4 + languageName: node + linkType: hard + "kind-of@npm:^6.0.0, kind-of@npm:^6.0.2, kind-of@npm:^6.0.3": version: 6.0.3 resolution: "kind-of@npm:6.0.3" @@ -24418,10 +23440,10 @@ __metadata: languageName: node linkType: hard -"known-css-properties@npm:^0.30.0": - version: 0.30.0 - resolution: "known-css-properties@npm:0.30.0" - checksum: 10c0/8b487a6b33487affcec41eb392ceb77acf4d093558dde5c88b5ea06b9a3c81781876d7cb09872e0518b9602f27c8f4112c9ac333e02c90a91c8fbd12e202ed48 +"known-css-properties@npm:^0.35.0": + version: 0.35.0 + resolution: "known-css-properties@npm:0.35.0" + checksum: 10c0/04a4a2859d62670bb25b5b28091a1f03f6f0d3298a5ed3e7476397c5287b98c434f6dd9c004a0c67a53b7f21acc93f83c972e98c122f568d4d0bd21fd2b90fb6 languageName: node linkType: hard @@ -25038,6 +24060,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" @@ -25068,6 +24097,26 @@ __metadata: languageName: node linkType: hard +"lint-staged@npm:^15.3.0": + version: 15.3.0 + resolution: "lint-staged@npm:15.3.0" + dependencies: + chalk: "npm:~5.4.1" + commander: "npm:~12.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.6.1" + bin: + lint-staged: bin/lint-staged.js + checksum: 10c0/1ddf9488c523c0b65c85b755428d4ad74fac3aa6ccb2e28e9bff5b8d86503158fe241d20d5433a11146872050b43580644901a5ef4c924b1ad7017c224a07339 + languageName: node + linkType: hard + "liquidjs@npm:^10.17.0": version: 10.18.0 resolution: "liquidjs@npm:10.18.0" @@ -25116,7 +24165,7 @@ __metadata: languageName: node linkType: hard -"listr2@npm:8.2.5": +"listr2@npm:8.2.5, listr2@npm:~8.2.5": version: 8.2.5 resolution: "listr2@npm:8.2.5" dependencies: @@ -25494,7 +24543,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:4.17.21, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.7.0": +"lodash@npm:4.17.21, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c @@ -26299,6 +25348,13 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.12.2": + version: 2.12.2 + resolution: "mdn-data@npm:2.12.2" + checksum: 10c0/b22443b71d70f72ccc3c6ba1608035431a8fc18c3c8fc53523f06d20e05c2ac10f9b53092759a2ca85cf02f0d37036f310b581ce03e7b99ac74d388ef8152ade + languageName: node + linkType: hard + "mdurl@npm:^2.0.0": version: 2.0.0 resolution: "mdurl@npm:2.0.0" @@ -26947,7 +26003,7 @@ __metadata: languageName: node linkType: hard -"micromatch@npm:^4.0.8": +"micromatch@npm:^4.0.8, micromatch@npm:~4.0.8": version: 4.0.8 resolution: "micromatch@npm:4.0.8" dependencies: @@ -27559,6 +26615,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^3.3.8": + version: 3.3.8 + resolution: "nanoid@npm:3.3.8" + bin: + nanoid: bin/nanoid.cjs + checksum: 10c0/4b1bb29f6cfebf3be3bc4ad1f1296fb0a10a3043a79f34fbffe75d1621b4318319211cd420549459018ea3592f0d2f159247a6f874911d6d26eaaadda2478120 + languageName: node + linkType: hard + "napi-build-utils@npm:^1.0.1": version: 1.0.2 resolution: "napi-build-utils@npm:1.0.2" @@ -28566,13 +27631,6 @@ __metadata: languageName: node linkType: hard -"nwsapi@npm:^2.2.0": - version: 2.2.7 - resolution: "nwsapi@npm:2.2.7" - checksum: 10c0/44be198adae99208487a1c886c0a3712264f7bbafa44368ad96c003512fed2753d4e22890ca1e6edb2690c3456a169f2a3c33bfacde1905cf3bf01c7722464db - languageName: node - linkType: hard - "nx@npm:18.3.4, nx@npm:>=17.1.2 < 19": version: 18.3.4 resolution: "nx@npm:18.3.4" @@ -29734,13 +28792,6 @@ __metadata: languageName: node linkType: hard -"parse5@npm:6.0.1, parse5@npm:^6.0.0, parse5@npm:^6.0.1": - version: 6.0.1 - resolution: "parse5@npm:6.0.1" - checksum: 10c0/595821edc094ecbcfb9ddcb46a3e1fe3a718540f8320eff08b8cf6742a5114cce2d46d45f95c26191c11b184dcaf4e2960abcd9c5ed9eb9393ac9a37efcfdecb - languageName: node - linkType: hard - "parse5@npm:^4.0.0": version: 4.0.0 resolution: "parse5@npm:4.0.0" @@ -29755,6 +28806,13 @@ __metadata: languageName: node linkType: hard +"parse5@npm:^6.0.0, parse5@npm:^6.0.1": + version: 6.0.1 + resolution: "parse5@npm:6.0.1" + checksum: 10c0/595821edc094ecbcfb9ddcb46a3e1fe3a718540f8320eff08b8cf6742a5114cce2d46d45f95c26191c11b184dcaf4e2960abcd9c5ed9eb9393ac9a37efcfdecb + languageName: node + linkType: hard + "parse5@npm:^7.0.0, parse5@npm:^7.1.2": version: 7.1.2 resolution: "parse5@npm:7.1.2" @@ -30058,6 +29116,13 @@ __metadata: languageName: node linkType: hard +"picocolors@npm:^1.1.1": + version: 1.1.1 + resolution: "picocolors@npm:1.1.1" + checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 + languageName: node + linkType: hard + "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -30072,7 +29137,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:^0.6.0": +"pidtree@npm:^0.6.0, pidtree@npm:~0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -31020,19 +30085,19 @@ __metadata: languageName: node linkType: hard -"postcss-resolve-nested-selector@npm:^0.1.1": - version: 0.1.1 - resolution: "postcss-resolve-nested-selector@npm:0.1.1" - checksum: 10c0/e86412064c5d805fbee20f4e851395304102addd7d583b6a991adaa5616e8d5f45549864eb6292d4cf15075cd261c289f069acdf6a2556689fc44fe72bcb306e +"postcss-resolve-nested-selector@npm:^0.1.6": + version: 0.1.6 + resolution: "postcss-resolve-nested-selector@npm:0.1.6" + checksum: 10c0/84213a2bccce481b1569c595a3c547b25c6ef1cca839fbd6c82c12ab407559966e968613c7454b573aa54f38cfd7e900c1fd603f0efc9f51939ab9f93f115455 languageName: node linkType: hard -"postcss-safe-parser@npm:^7.0.0": - version: 7.0.0 - resolution: "postcss-safe-parser@npm:7.0.0" +"postcss-safe-parser@npm:^7.0.1": + version: 7.0.1 + resolution: "postcss-safe-parser@npm:7.0.1" peerDependencies: postcss: ^8.4.31 - checksum: 10c0/4217afd8ce2809e959dc365e4675f499303cc6b91f94db06c8164422822db2d3b3124df701ee2234db4127ad05619b016bfb9c2bccae9bf9cf898a396f1632c9 + checksum: 10c0/6957b10b818bd8d4664ec0e548af967f7549abedfb37f844d389571d36af681340f41f9477b9ccf34bcc7599bdef222d1d72e79c64373001fae77089fba6d965 languageName: node linkType: hard @@ -31056,6 +30121,16 @@ __metadata: languageName: node linkType: hard +"postcss-selector-parser@npm:^7.0.0": + version: 7.0.0 + resolution: "postcss-selector-parser@npm:7.0.0" + dependencies: + cssesc: "npm:^3.0.0" + util-deprecate: "npm:^1.0.2" + checksum: 10c0/e96e096afcce70bf5c97789f5ea09d7415ae5eb701d82b05b5e8532885d31363b484fcb1ca9488c9a331f30508d9e5bb6c3109eb2eb5067ef3d3919f9928cd9d + languageName: node + linkType: hard + "postcss-svgo@npm:^5.1.0": version: 5.1.0 resolution: "postcss-svgo@npm:5.1.0" @@ -31133,7 +30208,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.23, postcss@npm:^8.4.33, postcss@npm:^8.4.38": +"postcss@npm:^8.4.23, postcss@npm:^8.4.33": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -31144,6 +30219,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.49": + version: 8.5.1 + resolution: "postcss@npm:8.5.1" + dependencies: + nanoid: "npm:^3.3.8" + picocolors: "npm:^1.1.1" + source-map-js: "npm:^1.2.1" + checksum: 10c0/c4d90c59c98e8a0c102b77d3f4cac190f883b42d63dc60e2f3ed840f16197c0c8e25a4327d2e9a847b45a985612317dc0534178feeebd0a1cf3eb0eecf75cae4 + languageName: node + linkType: hard + "posthtml-attrs-parser@npm:^1.0.1": version: 1.1.0 resolution: "posthtml-attrs-parser@npm:1.1.0" @@ -31470,7 +30556,7 @@ __metadata: languageName: node linkType: hard -"prompts@npm:^2.0.1, prompts@npm:^2.4.0": +"prompts@npm:^2.4.0": version: 2.4.2 resolution: "prompts@npm:2.4.2" dependencies: @@ -31568,13 +30654,6 @@ __metadata: languageName: node linkType: hard -"psl@npm:^1.1.33": - version: 1.9.0 - resolution: "psl@npm:1.9.0" - checksum: 10c0/6a3f805fdab9442f44de4ba23880c4eba26b20c8e8e0830eff1cb31007f6825dace61d17203c58bfe36946842140c97a1ba7f67bc63ca2d88a7ee052b65d97ab - languageName: node - linkType: hard - "pump-chain@npm:1.0.0": version: 1.0.0 resolution: "pump-chain@npm:1.0.0" @@ -31739,13 +30818,6 @@ __metadata: languageName: node linkType: hard -"querystringify@npm:^2.1.1": - version: 2.2.0 - resolution: "querystringify@npm:2.2.0" - checksum: 10c0/3258bc3dbdf322ff2663619afe5947c7926a6ef5fb78ad7d384602974c467fadfc8272af44f5eb8cddd0d011aae8fabf3a929a8eee4b86edcc0a21e6bd10f9aa - languageName: node - linkType: hard - "queue-microtask@npm:^1.2.2": version: 1.2.3 resolution: "queue-microtask@npm:1.2.3" @@ -33308,15 +32380,6 @@ __metadata: languageName: node linkType: hard -"saxes@npm:^5.0.1": - version: 5.0.1 - resolution: "saxes@npm:5.0.1" - dependencies: - xmlchars: "npm:^2.2.0" - checksum: 10c0/b7476c41dbe1c3a89907d2546fecfba234de5e66743ef914cde2603f47b19bed09732ab51b528ad0f98b958369d8be72b6f5af5c9cfad69972a73d061f0b3952 - languageName: node - linkType: hard - "scheduler@npm:^0.23.2": version: 0.23.2 resolution: "scheduler@npm:0.23.2" @@ -34091,7 +33154,14 @@ __metadata: languageName: node linkType: hard -"source-map-support@npm:0.5.21, source-map-support@npm:^0.5.16, source-map-support@npm:^0.5.6, source-map-support@npm:~0.5.12, source-map-support@npm:~0.5.20": +"source-map-js@npm:^1.2.1": + version: 1.2.1 + resolution: "source-map-js@npm:1.2.1" + checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf + languageName: node + linkType: hard + +"source-map-support@npm:0.5.21, source-map-support@npm:^0.5.16, source-map-support@npm:~0.5.12, source-map-support@npm:~0.5.20": version: 0.5.21 resolution: "source-map-support@npm:0.5.21" dependencies: @@ -34357,15 +33427,6 @@ __metadata: languageName: node linkType: hard -"stack-utils@npm:^2.0.3": - version: 2.0.6 - resolution: "stack-utils@npm:2.0.6" - dependencies: - escape-string-regexp: "npm:^2.0.0" - checksum: 10c0/651c9f87667e077584bbe848acaecc6049bc71979f1e9a46c7b920cad4431c388df0f51b8ad7cfd6eed3db97a2878d0fc8b3122979439ea8bac29c61c95eec8a - languageName: node - linkType: hard - "stackframe@npm:^1.3.4": version: 1.3.4 resolution: "stackframe@npm:1.3.4" @@ -34471,13 +33532,10 @@ __metadata: languageName: node linkType: hard -"string-length@npm:^4.0.1": - version: 4.0.2 - resolution: "string-length@npm:4.0.2" - dependencies: - char-regex: "npm:^1.0.2" - strip-ansi: "npm:^6.0.0" - checksum: 10c0/1cd77409c3d7db7bc59406f6bcc9ef0783671dcbabb23597a1177c166906ef2ee7c8290f78cae73a8aec858768f189d2cb417797df5e15ec4eb5e16b3346340c +"string-argv@npm:~0.3.2": + version: 0.3.2 + resolution: "string-argv@npm:0.3.2" + checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82 languageName: node linkType: hard @@ -34916,86 +33974,82 @@ __metadata: languageName: node linkType: hard -"stylelint-config-recommended@npm:^14.0.0": - version: 14.0.0 - resolution: "stylelint-config-recommended@npm:14.0.0" +"stylelint-config-recommended@npm:^14.0.1": + version: 14.0.1 + resolution: "stylelint-config-recommended@npm:14.0.1" peerDependencies: - stylelint: ^16.0.0 - checksum: 10c0/4ad15c36e8c03291aa7bbe4b672ebfb0f46ab698e7580a0da8d29644046d102d7f31dbf00a2a6eab94b565c390c6fb0d5d528737b83ac3acf6dc2ef085a90b11 + stylelint: ^16.1.0 + checksum: 10c0/a0a0ecd91f4d193bbe2cc3408228f8a2d8fcb2b2578d77233f86780c9247c796a04e16aad7a91d97cb918e2de34b6a8062bab66ee017c3835d855081d94f4828 languageName: node linkType: hard -"stylelint-config-standard@npm:^36.0.0": - version: 36.0.0 - resolution: "stylelint-config-standard@npm:36.0.0" +"stylelint-config-standard@npm:^36.0.1": + version: 36.0.1 + resolution: "stylelint-config-standard@npm:36.0.1" dependencies: - stylelint-config-recommended: "npm:^14.0.0" + stylelint-config-recommended: "npm:^14.0.1" peerDependencies: stylelint: ^16.1.0 - checksum: 10c0/1fc9adddfc5cf0a1d7a443182a0731712a3950ace72a24081b4ede2b0bb6fc1eebd003c009f1d8d06c3a64ba9b31b0ed12512db2f91c8fa549238d8341580e4b + checksum: 10c0/7f9b954694358e77be5110418f31335be579ce59dd952bc3c6a9449265297db3170ec520e0905769253b48b99c3109a95c71f5b985bf402e48fd6c89b5364cb2 languageName: node linkType: hard -"stylelint-header@workspace:linters/stylelint-header": - version: 0.0.0-use.local - resolution: "stylelint-header@workspace:linters/stylelint-header" +"stylelint-header@npm:^2.0.1": + version: 2.0.1 + resolution: "stylelint-header@npm:2.0.1" dependencies: - jest: "npm:^27.0.1" - jest-preset-stylelint: "npm:^7.0.0" - lodash: "npm:^4.17.21" string-similarity: "npm:^4.0.4" - stylelint: "npm:^16.0.0" peerDependencies: - stylelint: ^13.0.0 || ^14.0.0 || ^16.0.0 - languageName: unknown - linkType: soft + stylelint: ^15.0.0 || ^16.0.0 + checksum: 10c0/ed06484ec0484ad02878c8e1512b34926e87532db7287c315c015532f7cfd3d202df5aa2603a06bb1569dc0ac93cefa94bd952b75d71dc8035608578a3fa64d4 + languageName: node + linkType: hard -"stylelint@npm:^16.0.0, stylelint@npm:^16.4.0": - version: 16.5.0 - resolution: "stylelint@npm:16.5.0" +"stylelint@npm:^16.9.0": + version: 16.13.2 + resolution: "stylelint@npm:16.13.2" dependencies: - "@csstools/css-parser-algorithms": "npm:^2.6.1" - "@csstools/css-tokenizer": "npm:^2.2.4" - "@csstools/media-query-list-parser": "npm:^2.1.9" - "@csstools/selector-specificity": "npm:^3.0.3" - "@dual-bundle/import-meta-resolve": "npm:^4.0.0" + "@csstools/css-parser-algorithms": "npm:^3.0.4" + "@csstools/css-tokenizer": "npm:^3.0.3" + "@csstools/media-query-list-parser": "npm:^4.0.2" + "@csstools/selector-specificity": "npm:^5.0.0" + "@dual-bundle/import-meta-resolve": "npm:^4.1.0" balanced-match: "npm:^2.0.0" colord: "npm:^2.9.3" cosmiconfig: "npm:^9.0.0" - css-functions-list: "npm:^3.2.2" - css-tree: "npm:^2.3.1" - debug: "npm:^4.3.4" - fast-glob: "npm:^3.3.2" + css-functions-list: "npm:^3.2.3" + css-tree: "npm:^3.1.0" + debug: "npm:^4.3.7" + fast-glob: "npm:^3.3.3" fastest-levenshtein: "npm:^1.0.16" - file-entry-cache: "npm:^8.0.0" + file-entry-cache: "npm:^10.0.5" global-modules: "npm:^2.0.0" globby: "npm:^11.1.0" globjoin: "npm:^0.1.4" html-tags: "npm:^3.3.1" - ignore: "npm:^5.3.1" + ignore: "npm:^7.0.1" imurmurhash: "npm:^0.1.4" is-plain-object: "npm:^5.0.0" - known-css-properties: "npm:^0.30.0" + known-css-properties: "npm:^0.35.0" mathml-tag-names: "npm:^2.1.3" meow: "npm:^13.2.0" - micromatch: "npm:^4.0.5" + micromatch: "npm:^4.0.8" normalize-path: "npm:^3.0.0" - picocolors: "npm:^1.0.0" - postcss: "npm:^8.4.38" - postcss-resolve-nested-selector: "npm:^0.1.1" - postcss-safe-parser: "npm:^7.0.0" - postcss-selector-parser: "npm:^6.0.16" + picocolors: "npm:^1.1.1" + postcss: "npm:^8.4.49" + postcss-resolve-nested-selector: "npm:^0.1.6" + postcss-safe-parser: "npm:^7.0.1" + postcss-selector-parser: "npm:^7.0.0" postcss-value-parser: "npm:^4.2.0" resolve-from: "npm:^5.0.0" string-width: "npm:^4.2.3" - strip-ansi: "npm:^7.1.0" - supports-hyperlinks: "npm:^3.0.0" + supports-hyperlinks: "npm:^3.1.0" svg-tags: "npm:^1.0.0" - table: "npm:^6.8.2" + table: "npm:^6.9.0" write-file-atomic: "npm:^5.0.1" bin: stylelint: bin/stylelint.mjs - checksum: 10c0/9281693ff6c1918e07fdcf7a950531f79678a28261a0d5bd36ca2fcf524e53d7305158d20ba890f5dd01c0ff90c09a13453dce2fe6887f4c157d8c2c0acf3666 + checksum: 10c0/07d5f6f80a6671d0a02ef448977c45b2ba45060b2942a5619297694b6b653b931284a174b36154b03c23ae302abfdbbba0ca61f4142734e98e6703511f1f363b languageName: node linkType: hard @@ -35050,13 +34104,13 @@ __metadata: languageName: node linkType: hard -"supports-hyperlinks@npm:^3.0.0": - version: 3.0.0 - resolution: "supports-hyperlinks@npm:3.0.0" +"supports-hyperlinks@npm:^3.1.0": + version: 3.1.0 + resolution: "supports-hyperlinks@npm:3.1.0" dependencies: has-flag: "npm:^4.0.0" supports-color: "npm:^7.0.0" - checksum: 10c0/36aaa55e67645dded8e0f846fd81d7dd05ce82ea81e62347f58d86213577eb627b2b45298656ce7a70e7155e39f071d0d3f83be91e112aed801ebaa8db1ef1d0 + checksum: 10c0/78cc3e17eb27e6846fa355a8ebf343befe36272899cd409e45317a06c1997e95c23ff99d91080a517bd8c96508d4fa456e6ceb338c02ba5d7544277dbec0f10f languageName: node linkType: hard @@ -35116,13 +34170,6 @@ __metadata: languageName: unknown linkType: soft -"symbol-tree@npm:^3.2.4": - version: 3.2.4 - resolution: "symbol-tree@npm:3.2.4" - checksum: 10c0/dfbe201ae09ac6053d163578778c53aa860a784147ecf95705de0cd23f42c851e1be7889241495e95c37cabb058edb1052f141387bef68f705afc8f9dd358509 - languageName: node - linkType: hard - "synchronous-promise@npm:^2.0.15": version: 2.0.17 resolution: "synchronous-promise@npm:2.0.17" @@ -35206,16 +34253,16 @@ __metadata: languageName: node linkType: hard -"table@npm:^6.8.2": - version: 6.8.2 - resolution: "table@npm:6.8.2" +"table@npm:^6.9.0": + version: 6.9.0 + resolution: "table@npm:6.9.0" dependencies: ajv: "npm:^8.0.1" lodash.truncate: "npm:^4.4.2" slice-ansi: "npm:^4.0.0" string-width: "npm:^4.2.3" strip-ansi: "npm:^6.0.1" - checksum: 10c0/f8b348af38ee34e419d8ce7306ba00671ce6f20e861ccff22555f491ba264e8416086063ce278a8d81abfa8d23b736ec2cca7ac4029b5472f63daa4b4688b803 + checksum: 10c0/35646185712bb65985fbae5975dda46696325844b78735f95faefae83e86df0a265277819a3e67d189de6e858c509b54e66ca3958ffd51bde56ef1118d455bf4 languageName: node linkType: hard @@ -35486,16 +34533,6 @@ __metadata: languageName: node linkType: hard -"terminal-link@npm:^2.0.0": - version: 2.1.1 - resolution: "terminal-link@npm:2.1.1" - dependencies: - ansi-escapes: "npm:^4.2.1" - supports-hyperlinks: "npm:^2.0.0" - checksum: 10c0/947458a5cd5408d2ffcdb14aee50bec8fb5022ae683b896b2f08ed6db7b2e7d42780d5c8b51e930e9c322bd7c7a517f4fa7c76983d0873c83245885ac5ee13e3 - languageName: node - linkType: hard - "terser-webpack-plugin@npm:^5.3.10": version: 5.3.10 resolution: "terser-webpack-plugin@npm:5.3.10" @@ -35621,13 +34658,6 @@ __metadata: languageName: node linkType: hard -"throat@npm:^6.0.1": - version: 6.0.2 - resolution: "throat@npm:6.0.2" - checksum: 10c0/45caf1ce86a895f71fcb9bd3de67e1df6f73a519e780765dd0cf63ca8363de08ad207cfb714bc650ee9ddeef89971517b5f3a64087fcffce2bda034697af7c18 - languageName: node - linkType: hard - "through2-filter@npm:4.0.0": version: 4.0.0 resolution: "through2-filter@npm:4.0.0" @@ -35841,18 +34871,6 @@ __metadata: languageName: node linkType: hard -"tough-cookie@npm:^4.0.0": - version: 4.1.3 - resolution: "tough-cookie@npm:4.1.3" - dependencies: - psl: "npm:^1.1.33" - punycode: "npm:^2.1.1" - universalify: "npm:^0.2.0" - url-parse: "npm:^1.5.3" - checksum: 10c0/4fc0433a0cba370d57c4b240f30440c848906dee3180bb6e85033143c2726d322e7e4614abb51d42d111ebec119c4876ed8d7247d4113563033eebbc1739c831 - languageName: node - linkType: hard - "tr46@npm:^1.0.1": version: 1.0.1 resolution: "tr46@npm:1.0.1" @@ -35862,15 +34880,6 @@ __metadata: languageName: node linkType: hard -"tr46@npm:^2.1.0": - version: 2.1.0 - resolution: "tr46@npm:2.1.0" - dependencies: - punycode: "npm:^2.1.1" - checksum: 10c0/397f5c39d97c5fe29fa9bab73b03853be18ad2738b2c66ee5ce84ecb36b091bdaec493f9b3cee711d45f7678f342452600843264cc8242b591c8dc983146a6c4 - languageName: node - linkType: hard - "tr46@npm:^3.0.0": version: 3.0.0 resolution: "tr46@npm:3.0.0" @@ -36846,13 +35855,6 @@ __metadata: languageName: node linkType: hard -"universalify@npm:^0.2.0": - version: 0.2.0 - resolution: "universalify@npm:0.2.0" - checksum: 10c0/cedbe4d4ca3967edf24c0800cfc161c5a15e240dac28e3ce575c689abc11f2c81ccc6532c8752af3b40f9120fb5e454abecd359e164f4f6aa44c29cd37e194fe - languageName: node - linkType: hard - "universalify@npm:^2.0.0": version: 2.0.1 resolution: "universalify@npm:2.0.1" @@ -37114,16 +36116,6 @@ __metadata: languageName: node linkType: hard -"url-parse@npm:^1.5.3": - version: 1.5.10 - resolution: "url-parse@npm:1.5.10" - dependencies: - querystringify: "npm:^2.1.1" - requires-port: "npm:^1.0.0" - checksum: 10c0/bd5aa9389f896974beb851c112f63b466505a04b4807cea2e5a3b7092f6fbb75316f0491ea84e44f66fed55f1b440df5195d7e3a8203f64fcefa19d182f5be87 - languageName: node - linkType: hard - "urlpattern-polyfill@npm:10.0.0, urlpattern-polyfill@npm:^10.0.0": version: 10.0.0 resolution: "urlpattern-polyfill@npm:10.0.0" @@ -37281,17 +36273,6 @@ __metadata: languageName: node linkType: hard -"v8-to-istanbul@npm:^8.1.0": - version: 8.1.1 - resolution: "v8-to-istanbul@npm:8.1.1" - dependencies: - "@types/istanbul-lib-coverage": "npm:^2.0.1" - convert-source-map: "npm:^1.6.0" - source-map: "npm:^0.7.3" - checksum: 10c0/c3c99c4aa1ffffb098cc85c0c13c21871e6cbb9a83537d4e0650aa61589c347b2add787ceac68b8ea7fa1b7f446e9059d8e374cd7e7ab13b170a6caf8ad29c30 - languageName: node - linkType: hard - "v8-to-istanbul@npm:^9.0.1": version: 9.2.0 resolution: "v8-to-istanbul@npm:9.2.0" @@ -37500,24 +36481,6 @@ __metadata: languageName: node linkType: hard -"w3c-hr-time@npm:^1.0.2": - version: 1.0.2 - resolution: "w3c-hr-time@npm:1.0.2" - dependencies: - browser-process-hrtime: "npm:^1.0.0" - checksum: 10c0/7795b61fb51ce222414891eef8e6cb13240b62f64351b4474f99c84de2bc37d37dd0efa193f37391e9737097b881a111d1e003e3d7a9583693f8d5a858b02627 - languageName: node - linkType: hard - -"w3c-xmlserializer@npm:^2.0.0": - version: 2.0.0 - resolution: "w3c-xmlserializer@npm:2.0.0" - dependencies: - xml-name-validator: "npm:^3.0.0" - checksum: 10c0/92b8af34766f5bb8f37c505bc459ee1791b30af778d3a86551f7dd3b1716f79cb98c71d65d03f2bf6eba6b09861868eaf2be7e233b9202b26a9df7595f2bd290 - languageName: node - linkType: hard - "wait-port@npm:1.1.0": version: 1.1.0 resolution: "wait-port@npm:1.1.0" @@ -37538,7 +36501,7 @@ __metadata: languageName: node linkType: hard -"walker@npm:^1.0.7, walker@npm:^1.0.8": +"walker@npm:^1.0.8": version: 1.0.8 resolution: "walker@npm:1.0.8" dependencies: @@ -37618,20 +36581,6 @@ __metadata: languageName: node linkType: hard -"webidl-conversions@npm:^5.0.0": - version: 5.0.0 - resolution: "webidl-conversions@npm:5.0.0" - checksum: 10c0/bf31df332ed11e1114bfcae7712d9ab2c37e7faa60ba32d8fdbee785937c0b012eee235c19d2b5d84f5072db84a160e8d08dd382da7f850feec26a4f46add8ff - languageName: node - linkType: hard - -"webidl-conversions@npm:^6.1.0": - version: 6.1.0 - resolution: "webidl-conversions@npm:6.1.0" - checksum: 10c0/66ad3b9073cd1e0e173444d8c636673b016e25b5856694429072cc966229adb734a8d410188e031effadcfb837936d79bc9e87c48f4d5925a90d42dec97f6590 - languageName: node - linkType: hard - "webidl-conversions@npm:^7.0.0": version: 7.0.0 resolution: "webidl-conversions@npm:7.0.0" @@ -37845,15 +36794,6 @@ __metadata: languageName: node linkType: hard -"whatwg-encoding@npm:^1.0.5": - version: 1.0.5 - resolution: "whatwg-encoding@npm:1.0.5" - dependencies: - iconv-lite: "npm:0.4.24" - checksum: 10c0/79d9f276234fd06bb27de4c1f9137a0471bfa578efaec0474ab46b6d64bf30bb14492e6f88eff0e6794bdd6fa48b44f4d7a2e9c41424a837a63bba9626e35c62 - languageName: node - linkType: hard - "whatwg-encoding@npm:^2.0.0": version: 2.0.0 resolution: "whatwg-encoding@npm:2.0.0" @@ -37870,13 +36810,6 @@ __metadata: languageName: node linkType: hard -"whatwg-mimetype@npm:^2.3.0": - version: 2.3.0 - resolution: "whatwg-mimetype@npm:2.3.0" - checksum: 10c0/81c5eaf660b1d1c27575406bcfdf58557b599e302211e13e3c8209020bbac903e73c17f9990f887232b39ce570cc8638331b0c3ff0842ba224a5c2925e830b06 - languageName: node - linkType: hard - "whatwg-url@npm:^11.0.0": version: 11.0.0 resolution: "whatwg-url@npm:11.0.0" @@ -37908,17 +36841,6 @@ __metadata: languageName: node linkType: hard -"whatwg-url@npm:^8.0.0, whatwg-url@npm:^8.5.0": - version: 8.7.0 - resolution: "whatwg-url@npm:8.7.0" - dependencies: - lodash: "npm:^4.7.0" - tr46: "npm:^2.1.0" - webidl-conversions: "npm:^6.1.0" - checksum: 10c0/de0bc94387dba586b278e701cf5a1c1f5002725d22b8564dbca2cab1966ef24b839018e57ae2423fb514d8a2dd3aa3bf97323e2f89b55cd89e79141e432e9df1 - languageName: node - linkType: hard - "when-exit@npm:^2.1.1": version: 2.1.3 resolution: "when-exit@npm:2.1.3" @@ -38503,7 +37425,7 @@ __metadata: languageName: node linkType: hard -"ws@npm:^7.3.1, ws@npm:^7.4.2, ws@npm:^7.4.6": +"ws@npm:^7.3.1, ws@npm:^7.4.2": version: 7.5.9 resolution: "ws@npm:7.5.9" peerDependencies: @@ -38540,13 +37462,6 @@ __metadata: languageName: node linkType: hard -"xml-name-validator@npm:^3.0.0": - version: 3.0.0 - resolution: "xml-name-validator@npm:3.0.0" - checksum: 10c0/da310f6a7a52f8eb0fce3d04ffa1f97387ca68f47e8620ae3a259909c4e832f7003313b918e53840a6bf57fb38d5ae3c5f79f31f911b2818a7439f7898f8fbf1 - languageName: node - linkType: hard - "xml@npm:^1.0.1": version: 1.0.1 resolution: "xml@npm:1.0.1" @@ -38554,13 +37469,6 @@ __metadata: languageName: node linkType: hard -"xmlchars@npm:^2.2.0": - version: 2.2.0 - resolution: "xmlchars@npm:2.2.0" - checksum: 10c0/b64b535861a6f310c5d9bfa10834cf49127c71922c297da9d4d1b45eeaae40bf9b4363275876088fbe2667e5db028d2cd4f8ee72eed9bede840a67d57dab7593 - languageName: node - linkType: hard - "xss@npm:^1.0.14": version: 1.0.15 resolution: "xss@npm:1.0.15" @@ -38649,6 +37557,15 @@ __metadata: languageName: node linkType: hard +"yaml@npm:~2.6.1": + version: 2.6.1 + resolution: "yaml@npm:2.6.1" + bin: + yaml: bin.mjs + checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7 + languageName: node + linkType: hard + "yargs-parser@npm:21.1.1, yargs-parser@npm:^21.1.1": version: 21.1.1 resolution: "yargs-parser@npm:21.1.1"